Fluid layout practice

Developer
Emily K
Size
3,293 Kb
Views
20,230
  1. Fluid layout practice Previews
  2. Fluid layout practice HTML Codes
  3. Fluid layout practice CSS Codes

How do I make an fluid layout practice?

What is a fluid layout practice? How do you make a fluid layout practice? This script and codes were developed by Emily K on 09 September 2022, Friday.

Fluid layout practice Previews
IQ Test

Fluid layout practice - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fluid layout practice</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head><title> The Daily Kitteh</title></head>
<body>
<div id="container"> <h1>The Daily Kitteh</h1> <nav> <ul> <li><a href="#">Feral Adventures</a></li> <li><a href="#">Kibble Kibbetz</a></li> <li><a href="#">Tail Twitch Tales</a></li> <li><a href="#">Sunny Window Reviews</a></li> </ul> </nav>
<!--adding columns! missing from last time: 1) aside; 2) section--> <aside> <!--infobox--> <img src='http://placekitten.com/150/150' alt='Adorable kitten'> <h3>Kitty of the Week</h3> <ul> <li>Spot</li> <li>Canay</li> <li>Wow</li> <li>Morbo</li> </ul> </aside> <section> <!--article's column--> <h2>Busy Kittehs Very Busy</h2> <!-- Filler from fillerama--> <p>Yes. You gave me a dollar and some candy. I'll tell them you went down prying the wedding ring off his cold, dead finger. I love you, buddy! Goodbye, friends. I never thought I'd die like this. But I always really hoped.</p> <p>But I know you in the future. I cleaned your poop. I've been there. My folks were always on me to groom myself and wear underpants. What am I, the pope? Daddy Bender, we're hungry.</p> <ul> <li>Yes. You gave me a dollar and some candy.</li> <li>What are their names?</li> <li>Wow! A superpowers drug you can just rub onto your skin? You'd think it would be something you'd have to freebase.</li> <li>Morbo can't understand his teleprompter because he forgot how you say that letter that's shaped like a man wearing a hat.</li> <li>Say it in Russian!</li> </ul> <p>I wish! It's a nickel. Does anybody else feel jealous and aroused and worried? Dear God, they'll be killed on our doorstep! And there's no trash pickup until January 3rd. But, like most politicians, he promised more than he could deliver. She also liked to shut up! Throw her in the brig.</p> <p>And remember, don't do anything that affects anything, unless it turns out you were supposed to, in which case, for the love of God, don't not do it! For one beautiful night I knew what it was like to be a grandmother. Subjugated, yet honored. Now that the, uh, garbage ball is in space, Doctor, perhaps you can help me with my sexual inhibitions?</p> <ol> <li>Bender?! You stole the atom.</li> <li>For one beautiful night I knew what it was like to be a grandmother. Subjugated, yet honored.</li> </ol> <p>I'm sure those windmills will keep them cool. Tell her you just want to talk. It has nothing to do with mating. But I know you in the future. I cleaned your poop. We don't have a brig. Look, everyone wants to be like Germany, but do we really have the pure strength of 'will'? You can see how I lived before I met you.</p> </section> <footer> <ul>	<li><a href='#'>Subscribe</a></li>	<li><a href='#'>Pat the Editors</a></li>	<li><a href='#'>Send us Catnip</a></li>	</ul> </footer>
</div>
</body>
</body>
</html>

Fluid layout practice - Script Codes CSS Codes

/*Colors
body: forestgreen
headers: #556b2f (dark olive green)
nav: #808000
or
507642
#86942A
*/
body { background-color: #507642; font-family: Verdana;
}
#container{ width: 96%; margin: auto; background-color: #E1F1F2;
}
h1{ margin: 0; padding: 2.0833334%; color:#86942A; text-align: center; font-family:Georgia, Times, Serif; font-weight:normal; font-size: 3em;
}
h2 {	color:#86942A; padding:0;
}
h3 {	color:#86942A;	margin:0;
}
nav { height:3.1250001%; margin-bottom:2.0833334%; background-color:#86942A; text-align: center;
}
nav ul{ list-style: none; margin: 0; padding: .52083333333%;
}
nav li{ display: inline-block; margin-left: 1.0416667%; margin-right: 1.0416667%;
}
nav li a { color: white; text-decoration: none;
}
nav li a:hover { color: red;
}
aside { float: left; margin-left:2.0833334%;
/* width:200px;*/ width: 20.83%; /*200/960*/ border:1px solid #10889E; padding: 0.52083333333%; text-align: center;
}
section { float: right; margin-right: 4.1666668%;
/* width:650px;*/ width: 67.7%; padding-bottom: 0.10416666666%;
}
footer { height: 5.2083335%; background-color:lightgrey; clear: both; text-align: center;
}
footer ul{ list-style: none; padding: .52083333333%;
}
footer li{ display: inline; margin-left: 1.0416667%; margin-right: 1.0416667%;
}
footer li a { color: black; text-decoration: none;
}
footer li a:hover { color: red;
}
Fluid layout practice - Script Codes
Fluid layout practice - Script Codes
Home Page Home
Developer Emily K
Username Emnk
Uploaded September 09, 2022
Rating 3
Size 3,293 Kb
Views 20,230
Do you need developer help for Fluid layout practice?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Emily K (Emnk) Script Codes
Name
Pick a texture
BOMP Test
Bonus Features
Boston Middle Passage Profile Gallery Beta
Done - Monster Mash
A taste of jQuery UI with dragging
Fluid layout practice v3 with map
A Pen by Emily K
PHPiggy Bank
Map for event - simple
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!