Fluid layout practice
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 - 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](http://shots.codepen.io/Emnk/pen/spCgF-512.jpg)
Developer | Emily K |
Username | Emnk |
Uploaded | September 09, 2022 |
Rating | 3 |
Size | 3,293 Kb |
Views | 20,240 |
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!
Name | Size |
PHPiggy Bank | 1,693 Kb |
BOMP Test for WCC feedback | 166,822 Kb |
Bonus Features | 5,994 Kb |
Boston Middle Passage Profile Gallery Beta | 3,388 Kb |
Map for event - simple | 5,111 Kb |
Practice using Wixel | 3,057 Kb |
Done - Monster Mash | 1,953 Kb |
Flagg CSS Practice | 2,597 Kb |
Fluid layout practice v3 with map | 8,749 Kb |
Pick a texture | 2,284 Kb |
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!
Name | Username | Size |
A Pen by Mike Otis | Mikeotis | 3,185 Kb |
NT Tribute | Skybutterfly | 2,850 Kb |
Video Player Custom Controls | EleftheriaBatsou | 3,665 Kb |
CSS Chat Bubbles | Boylett | 2,094 Kb |
Drag in vanilla js using dotval math instead of translate | Paulq | 2,662 Kb |
A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
Electric worm | Jeffibacache | 2,377 Kb |
Wrap_Test | Mscfourn | 7,503 Kb |
SVG Text Masking | JMChristensen | 2,141 Kb |
Dice | Fraina | 5,026 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!