Skip to content

Instantly share code, notes, and snippets.

@ProfAvery
Created February 21, 2019 00:57
Show Gist options
  • Save ProfAvery/c8c3f399e5dd5a0584a55f063bcd4f4e to your computer and use it in GitHub Desktop.
Save ProfAvery/c8c3f399e5dd5a0584a55f063bcd4f4e to your computer and use it in GitHub Desktop.
HTML for CSS Flexbox in-class exercise
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lorem ipsum dolor sit amet</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
</head>
<body>
<header>
<h1>Ut enim ad minim veniam</h1>
</header>
<footer>
<nav>
Lorem ipsum text courtesy of
<ul>
<li><a href="https://baconipsum.com/">Bacon Ipsum</a></li>
<li><a href="http://www.catipsum.com/">Cat Ipsum</a></li>
<li><a href="http://www.cupcakeipsum.com/">Cupcake Ipsum</a></li>
</ul>
</nav>
</footer>
<nav id="nav-articles" class="navigation">
Articles
<ol>
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
</ol>
</nav>
<main>
<article id="one">
<h2>Duis aute irure dolor in reprehenderit in voluptate</h2>
<nav id="nav-one" class="navigation">
<ul>
<li><a href="#one-beginning">beginning</a></li>
<li><a href="#one-middle">middle</a></li>
<li><a href="#one-end">end</a></li>
</ul>
</nav>
<section id="one-beginning" class="beginning">
<h3>consectetur adipiscing elit</h3>
<p>
Cat ipsum dolor sit amet, see owner, run in terror dismember a mouse and then regurgitate parts of it on the family room floor but stare at guinea pigs for purr like an angel. Claw your carpet in places everyone can see - why hide my amazing artistic clawing skills? good now the other hand, too find a way to fit in tiny box. Shove bum in owner's face like camera lens cat sit like bread so damn that dog toy mouse squeak roll over. Cat meoooow i iz master of hoomaan, not hoomaan master of i, oooh damn dat dog nap all day. Catch mouse and gave it as a present. Fish i must find my red catnip fishy fish flex claws on the human's belly and purr like a lawnmower prance along on top of the garden fence, annoy the neighbor's dog and make it bark lick the plastic bag and eat owner's food. Attack like a vicious monster scratch the furniture, so eat the fat cats food and mesmerizing birds.
</p>
</section>
<section id="one-middle" class="middle">
<h3>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</h3>
<p>
Unwrap toilet paper murr i hate humans they are so annoying. Pet me pet me pet me pet me, bite, scratch, why are you petting me stare at ceiling light. Love spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce and attack like a vicious monster or wake up human for food at 4am for has closed eyes but still sees you. Purr as loud as possible, be the most annoying cat that you can, and, knock everything off the table show belly, cat sit like bread or i just saw other cats inside the house and nobody ask me before using my litter box yet purr but rub face on everything. Purrrrrr.
</p>
<p>
Scratch destroy couch as revenge being gorgeous with belly side up mice toy mouse squeak roll over for when owners are asleep, cry for no apparent reason. Fight an alligator and win catty ipsum or mark territory meoooow. I’m so hungry i’m so hungry but ew not for that i just saw other cats inside the house and nobody ask me before using my litter box. Throw down all the stuff in the kitchen. Terrorize the hundred-and-twenty-pound rottweiler and steal his bed, not sorry. Jump around on couch, meow constantly until given food, put butt in owner's face for spill litter box, scratch at owner, destroy all furniture, especially couch but roll over and sun my belly for pelt around the house and up and down stairs chasing phantoms sleeps on my head. Cough see owner, run in terror jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water lick the curtain just to be annoying but refuse to leave cardboard box and i will ruin the couch with my claws for fall over dead (not really but gets sypathy). Then cats take over the world.
</p>
<p>
Munch, munch, chomp, chomp. I like fish if it smells like fish eat as much as you wish eat the fat cats food. This cat happen now, it was too purr-fect!!!. Please stop looking at your phone and pet me meow meow, i tell my human. Scratch leg; meow for can opener to feed me ears back wide eyed so it's 3am, time to create some chaos . Tuxedo cats always looking dapper pretend you want to go out but then don't touch my tail, i shred your hand purrrr decide to want nothing to do with my owner today. And sometimes switches in french and say "miaou" just because well why not hey! you there, with the hands.
</p>
</section>
<section id="one-end" class="end">
<h3>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</h3>
<p>
When in doubt, wash i shall purr myself to sleep, or licks paws. Sniff all the things stand in front of the computer screen, so and sometimes switches in french and say "miaou" just because well why not. Sweet beast licks paws lick the other cats for mice mew push your water glass on the floor, stand in front of the computer screen. Lick butt and make a weird face. Under the bed mice for freak human out make funny noise mow mow mow mow mow mow success now attack human but slap owner's face at 5am until human fills food dish mew but leave fur on owners clothes headbutt owner's knee.
</p>
</section>
</article>
<article id="two">
<h2>Bacon ipsum dolor amet pork chop bresaola alcatra</h2>
<nav id="nav-two" class="navigation">
<ul>
<li><a href="#two-beginning">beginning</a></li>
<li><a href="#two-middle">middle</a></li>
<li><a href="#two-end">end</a></li>
</ul>
</nav>
<section id="two-beginning" class="beginning">
<h3>Alcatra landjaeger short loin</h3>
<p>
Cupcake ipsum dolor sit amet. Sugar plum candy canes sugar plum. Biscuit liquorice caramels cake. Lollipop pudding apple pie chocolate cake. Icing topping jujubes soufflé pudding lemon drops cake cheesecake. Oat cake sweet roll oat cake chocolate bar marshmallow dessert. Lollipop lemon drops chocolate bar tootsie roll sugar plum chocolate cake. Liquorice jelly beans croissant donut pie sesame snaps chocolate bar macaroon biscuit. Lemon drops dragée marzipan gummies candy toffee biscuit jelly lollipop. Chocolate bar pie biscuit cake jelly candy canes. Croissant chupa chups bear claw. Sugar plum cookie cotton candy croissant gummi bears wafer.
</p>
</section>
<section id="two-middle" class="middle">
<h3>Chuck landjaeger flank filet mignon pig</h3>
<p>
Halvah bear claw cheesecake sesame snaps lollipop pastry marzipan. Biscuit pie sesame snaps chocolate cake chupa chups soufflé. Tart fruitcake jujubes. Jelly chocolate bar lollipop donut ice cream chupa chups lemon drops biscuit marzipan. Pudding candy sweet roll pastry candy. Gummies soufflé pastry lemon drops bonbon. Gingerbread chupa chups danish jelly beans jujubes gummies. Candy pie candy canes bear claw dessert. Brownie halvah donut caramels. Chupa chups brownie toffee toffee cotton candy sesame snaps soufflé brownie chocolate. Tart jelly oat cake cookie. Pie dessert sugar plum gummies ice cream. Donut jelly sugar plum chupa chups. Cheesecake marzipan jujubes oat cake dessert pastry croissant macaroon.
</p>
<p>
Chocolate soufflé fruitcake sweet roll topping. Tart oat cake candy canes lollipop pie jelly beans candy. Donut toffee pastry pudding ice cream cookie gummi bears muffin. Dessert cheesecake donut wafer croissant sugar plum caramels gingerbread dragée. Jelly beans jelly beans muffin pastry muffin chocolate cake macaroon chocolate chupa chups. Gummies chocolate donut dessert pastry chupa chups tiramisu. Pudding jelly lollipop candy wafer cake danish. Muffin icing pie cake candy canes bonbon wafer topping. Wafer bear claw macaroon dessert cotton candy caramels sweet roll donut powder. Soufflé sesame snaps jelly beans marzipan jelly beans candy canes. Tart jujubes jelly beans oat cake jelly liquorice. Carrot cake sugar plum tiramisu carrot cake pastry jujubes topping tiramisu.
</p>
<p>
Danish chupa chups pastry macaroon sesame snaps gingerbread danish. Cotton candy chupa chups powder croissant candy gingerbread marshmallow halvah macaroon. Caramels caramels sugar plum powder pudding gummies lemon drops muffin. Ice cream marzipan gingerbread jujubes jelly powder soufflé pudding lollipop. Croissant pudding cake carrot cake bonbon sesame snaps gummi bears muffin croissant. Sweet roll chocolate cake toffee tiramisu gummies. Dragée cheesecake chocolate sesame snaps gummies powder caramels cupcake. Cake jelly-o cake chocolate. Marzipan gingerbread candy chocolate cake soufflé donut sugar plum cotton candy. Bear claw jelly muffin croissant gummies wafer gummies jelly-o. Jelly-o marzipan cotton candy croissant candy halvah fruitcake pastry. Icing pastry cake jelly pie. Halvah oat cake topping croissant soufflé dessert ice cream donut. Ice cream chocolate apple pie macaroon gummies caramels tart bear claw ice cream.
</p>
</section>
<section id="two-end" class="end">
<h3>Meatball turducken chicken doner bacon ground round rump</h3>
<p>
Pastry pastry chocolate cake caramels lollipop jelly beans. Cake fruitcake dragée cake candy. Cake cheesecake halvah gummi bears sugar plum candy canes. Cookie halvah croissant. Chocolate fruitcake cheesecake powder biscuit apple pie cookie sugar plum. Jelly jelly-o candy apple pie. Lemon drops powder sesame snaps. Gummi bears cotton candy fruitcake jelly beans jelly wafer jelly beans. Muffin carrot cake powder croissant sugar plum danish macaroon croissant lollipop. Marzipan jujubes bonbon ice cream apple pie chupa chups. Jelly beans carrot cake tart danish. Chupa chups gingerbread donut liquorice pudding carrot cake cheesecake. Pie liquorice croissant soufflé candy sweet roll dessert cheesecake.
</p>
</section>
</article>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment