A Pen by Kobi Kadosh on CodePen.
Created
January 16, 2019 16:58
-
-
Save wildcard/84531a4571baf54c4383cc29ba3c5c21 to your computer and use it in GitHub Desktop.
Example HTML Wireframe
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Responsive Web Design Class</title> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Responsive Web Design</h1> | |
| <nav role="navigation"> | |
| <ul class="group"> | |
| <li><a href="class.html">Class</a></li> | |
| <li><a href="#">Workshop</a></li> | |
| <li><a href="#">Blog</a></li> | |
| <li><a href="#">About</a></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <main> | |
| <p class="tagline"><strong>Responsive Web Design</strong> Classes from Coastal Carolina University</p> | |
| <section class="introduction"> | |
| <p>Responsive web design isn't just a technical solution for web design - it's an entire process that brings multiple disciplines together to form one product that works across multiple devices. The responsive design process includes user experience, | |
| content strategy, information architecture, visual design, HTML/CSS/JavaScript development, usability testing and technical testing.</p> | |
| <p>In the University's <a href="#">Responsive Web Design Course</a> and <a href="#">Responsive Web Design Workshop</a>, students will learn first-hand the process of creating responsive websites from a mobile-first and content-first perspective.</p> | |
| <a href="#">Learn More About Responsive Web Design at CCU</a> | |
| </section> | |
| </main> | |
| <aside> | |
| <h3>Latest Blog Posts</h3> | |
| <div class="blog-post"> | |
| <div class="blog-post-date"> | |
| July 12 | |
| </div> | |
| <div class="blog-post-title"> | |
| <h4>New CCU Website Launched</h4> | |
| </div> | |
| <div class="blog-post-summary"> | |
| <p>We've launched a new class website, which will house the syllabus, class projects and more.</p> | |
| </div> | |
| </div> | |
| <a href="#" class="button">View All Posts</a> | |
| </aside> | |
| <footer> | |
| <div class="footer-contact-information"> | |
| <p><a href="#">College of Art</a></p> | |
| <p><a href="#">Coastal Art Dept</a></p> | |
| <a class="footer-instructor" href="#">Instructor: Tracy Floyd</a> | |
| <div class="footer-supplemental"> | |
| <a href="#">Follow @CCU on Twitter</a> | |
| <a href="#">View this Site on GitHub</a> | |
| </div> | |
| </div> | |
| <div class="footer-logo"> | |
| <p>Logo Goes Here</p> | |
| </div> | |
| </footer> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{max-width:1000px;padding:1em;font-family:Helvetica,Arial,sans-serif;}div,section,main,aside,header,footer{border:1px solid lightgray;padding:.5em;margin-bottom:1em;} | |
| 0 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment