1 / 14

He began by casting the “#container” Charm:

On a somewhat dreary day in October, Professor Dumbledore assigned young Harry Potter a new project. “Harry, I need you to create the perfect Goblet of Liquid Layout. I seem to have misplaced mine, and I have some errands to run this afternoon which prevent me from concocting it myself.”.

edena
Download Presentation

He began by casting the “#container” Charm:

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. On a somewhat dreary day in October, Professor Dumbledore assigned young Harry Potter a new project.

  2. “Harry, I need you to create the perfect Goblet of Liquid Layout. I seem to have misplaced mine, and I have some errands to run this afternoon which prevent me from concocting it myself.” “You can count on me, Professor! After all, I am pretty much the greatest wizard ever – I’m sure I can figure it out!”

  3. He began by casting the “#container” Charm: #container { width: 90%; margin: 10px auto; background-color: #fff; color: #333; border: 1px solid grey; line-height: 130%; } But the Goblet did not appear.

  4. He asked his friend Ron for help. “Why don’t you try the “#top” and “#top h1” charms?” #top { padding: .5em; background-color: #ddd; border-bottom: 1px solid gray; } #top h1 { padding: 0; margin: 0; } Nothing happened.

  5. Just then, Ron’s sister Ginny walked by. “I hear you need the “#leftnav” spell for the others to work correctly,” she said. #leftnav { float: left; width: 300px; margin: 0; padding: 1em; } Harry began to get frustrated. “We’ll never figure this out in time!”

  6. “My father tried to conjure the Goblet of Liquid Layouts once,” said Luna, passing by on her way to the Potions Dungeon. “I think he mentioned something about the “#rightnav” spell…maybe it will help!” #rightnav { float: right; width: 160px; margin: 0; padding: 1em; } Unfortunately, it didn’t.

  7. As Harry and his friends continued to ponder, Hermione hurried down the corridor towards them. “Excellent!” Harry cried. “Hermione will know what to do!” With barely a backwards glance, Hermione cast the “#content” charm over her shoulder as she ran by. #content { margin-left: 200px; border-left: 1px solid gray; margin-right: 200px; border-right: 1px solid gray; padding: 1em; max-width: 36em; }

  8. “I know we’re close, guys. We can do it! What’s the last piece?”

  9. “I REMEMBER!” Neville exclaimed loudly as he pulled out his wand. “ ‘#footer’ ”! #footer { clear: both; margin: 0; padding: .5em; color: #333; background-color: #ddd; border-top: 1px solid gray; } All six young wizards waited with bated breath…

  10. The ghostly image of a Goblet appeared…

  11. At that moment, Dumbledore entered the Great Hall, a wide smile spread across his face. “Excellent! You did it Harry! Only one step remains: the ‘HTML’ Charm!” </html> <body> <div id="container"> <div id="top"> <h1>This is the Header</h1> </div> <div id="leftnav"> <p>This is left column text!</p> </div> <div id="rightnav"> <p>This is right column text!</p> </div><div id="content"> <h2>This is a Subheading!</h2> <p>This is where your content goes! <p>This is a new paragraph of content! <p>Another new paragraph! <p>LAST PARAGRAPH. </div> <div id="footer"> This is the Footer </div> </div> </body> </html>

  12. TA DA

  13. And so, Harry Potter and his friends completed Dumbledore’s random task, proving once more that Harry’s friends do more than half the work but he gets all the credit.

More Related