TWO COLUMN LAYOUTS

See below for codes and live previews. You can also right click and view page source for the code on the live previews.

Donut

Created: 01.16.23

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sweet donut</title>
<style type='text/css'>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans&family=Gochi+Hand&display=swap');
body {
	background: #EAD9DE;
}
body, div, a {
	font-size: 10px ;
	font-spacing: -1px;
	font-family: 'DM Sans', sans-serif;
	color: #574C38;
	line-height: 13px;
	text-align: left;
	
}
b {
	color: #F6C4A3;
	font: 12px ;
	font-family: 'DM Sans', sans-serif;
	
}

body {
    overflow-x:hidden;
    height:100%; 
}

u {
	color: #DE7394;
	font: 12px;
	background: #FFD7A6;
	font-family: 'DM Sans', sans-serif;
	font-weight: bold;
	text-decoration: none;
}

i {
	color: #D1A5B4;
	font: 13px;
	letter-spacing: 2px;
	font-family: 'DM Sans', sans-serif;
	font-weight: bold;
	text-decoration: dashed;
}

h1 {
	color: #F5DEB5;
	padding: -1px;
	border-left: 20px #EA98B0 dashed;
	font: 22px;
	font-family: 'Gochi Hand', cursive;
	font-weight: bold;
	letter-spacing: 5px;
	text-transform: uppercase;
}
h2 {
	color: #FF8EAF;
	font: 11px;
	font-family: 'Gochi Hand', cursive;
	background: #FCEFD9;
	text-align: center;
	margin-bottom: 4px;
	margin-top: 2px;
	letter-spacing: 1px;
}
a:link, a:visited, a:active {
	color: #FF98B7;
	font-size: 11px;
	font-family: 'DM Sans', sans-serif;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
}

a.nav, a.nav:visited, a.nav:active {
	color: #C63973;
	font-family: 'DM Sans', sans-serif;
	font-weight: bold;
	font-size: 15pt;
	padding-bottom: 1pt;
	letter-spacing: 5px;
}
a.nav:hover {
	color: #FFA9A9;
	font-weight: normal;
	 background: #FEF5EA;
	 width:100%;
}
#navbg {
	text-align: center;
	background: #FFD5D5;
	border-left: 2px #EA98B0 dashed;
	width: 122px; 
	padding-bottom: 1pt;
	padding-top: 10pt;
	width: 180px;

}

.wrapper{
   width: 58%;
   margin: 0 auto;
   background: #E7EEEE;
}

.wrapmiddle{
   float: left;
   margin-top: -10 auto;
   width: 100%;
   background-color: #F3E7E9;
}
.middle{
   margin-right:183px;
   margin-left:183px;
    background: #FEF5EA;
   
}
.left{
   float: left;
   width: 180px;
   margin-left: -100%;

}
.right{
   float: left;
   width: 180px;
   height: 100%;
   margin-left: -180px;

}

</style>
</head>
<body>
<div class="wrapper">

<h1> donuts! </h1>
		
			this layout uses <a href="https://fonts.google.com/">google fonts</a>. feel free to remove/change it if you wish. remove the @import code at the top to do it. feel free to change/edit anything. you dont have to keep the credit but I appreciate it if you do! if you don't like it at the bottom of the page, feel free to move it to any other page. <P>
	
			✚ <a href="">links look like this</a> ✚ <b> bold text looks like this</b> ✚ <i>italics look like this </i> ✚ <u>underline looks like this</u> ✚ 
	   
	    <P>
			
			A doughnut or donut (/ˈdoʊnət/) is a type of food made from leavened fried dough. It is popular in many countries and is prepared in various forms as a sweet snack that can be homemade or purchased in bakeries, supermarkets, food stalls, and franchised specialty vendors. Doughnut is the traditional spelling, while donut is the simplified version; the terms are used interchangeably.
		<P>
			Doughnuts are usually deep fried from a flour dough, but other types of batters can also be used. Various toppings and flavorings are used for different types, such as sugar, chocolate or maple glazing. Doughnuts may also include water, leavening, eggs, milk, sugar, oil, shortening, and natural or artificial flavors.
		<p>		
			The two most common types are the ring doughnut and the filled doughnut, which is injected with fruit preserves (the jelly doughnut), cream, custard, or other sweet fillings. Small pieces of dough are sometimes cooked as doughnut holes. Once fried, doughnuts may be glazed with a sugar icing, spread with icing or chocolate, or topped with powdered sugar, cinnamon, sprinkles or fruit. Other shapes include balls, flattened spheres, twists, and other forms. Doughnut varieties are also divided into cake (including the old-fashioned) and yeast-risen doughnuts. Doughnuts are often accompanied by coffee or milk. They are sold at doughnut shops, convenience stores, petrol/gas stations, cafes or fast food restaurants.

<h1> donut history! </h1>
			The cookbook Küchenmeisterei (Mastery of the Kitchen), published in Nuremberg in 1485, offers a recipe for "Gefüllte Krapfen", sugar free, stuffed, fried dough cakes.
		<p>
			Dutch settlers brought olykoek ("oil(y) cake") to New York (or New Amsterdam) in the early 18th century. These doughnuts closely resembled later ones but did not yet have their current ring shape.
		<p>
			A recipe for fried dough "nuts" was published, in 1750 England, under the title "How to make Hertfordshire Cakes, Nuts and Pincushions”, in The Country Housewife’s Family Companion by William Ellis.
		<p>
			A recipe labelled "dow nuts", again from Hertfordshire, was found in a book of recipes and domestic tips written around 1800, by the wife of Baron Thomas Dimsdale, the recipe being given to the dowager Baroness by an acquaintance who transcribed for her the cooking instructions for a "dow nut".
		<p>
			The first cookbook using the near conventional "dough nuts" spelling was possibly the 1803 edition of "The Frugal Housewife: Or, Complete Woman Cook", which included dough nuts in an appendix of American recipes.[10]
		<p>
			One of the earliest mentions of "dough-nut" was in Washington Irving's 1809 book A History of New York, from the Beginning of the World to the End of the Dutch Dynasty:
		<p>
			Sometimes the table was graced with immense apple-pies, or saucers full of preserved peaches and pears; but it was always sure to boast of an enormous dish of balls of sweetened dough, fried in hog’s fat, and called dough-nuts, or oly koeks: a delicious kind of cake, at present scarce known in this city, excepting in genuine Dutch families.
		<p>
			The name oly koeks was almost certainly related to the oliekoek: a Dutch delicacy of "sweetened cake fried in fat."

</div>
    </div>
    <div class="left">
	<h2>links! </h2>
		<div id="navbg">
            <a href="/" class="nav">home</a><p>
			<a href="/" class="nav">link</a><p>
			<a href="/" class="nav">link</a><p>
			<a href="/" class="nav">link</a><p>
			<a href="/" class="nav">link</a><p>
			<a href="/" class="nav">link</a><p>
			<a href="/" class="nav">link</a>
	</div>
            <center> <img src="https://pomelo.lol/premades/img/layout%20images/donut.gif"> 
		<br>
			<h2> text </h2>
			text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
			</center>
    </div> 
    <div class="right">
		
	<h2>cool sites! </h2>
		<a href="https://pomelo.neocities.org/" target="_blank"><img src="https://pomelo.neocities.org/pix/pom.gif"></a><a href="https://pomelo.neocities.org/" target="_blank"><img src="https://pomelo.neocities.org/pix/pom.gif"></a><a href="https://pomelo.neocities.org/" target="_blank"><img src="https://pomelo.neocities.org/pix/pom.gif"></a><a href="https://pomelo.neocities.org/" target="_blank"><img src="https://pomelo.neocities.org/pix/pom.gif"></a>
	
	<P>

<h2> guestbook! </h2>
		<iframe src="https://www3.cbox.ws/box/?boxid=3524913&boxtag=yIiI8R" width="100%" height="250" allowtransparency="yes" allow="autoplay" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe>	
		
		<h2> text </h2>
		<center>
		text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
		</center>
		<BR>
		
		<P> <b> <center>CSS by Pompom </b> </center>    
	</div> 
   
    </div>
</div>
</body>
</html>

Changelog:

TWO COLUMN LAYOUTS

Donut