Skip to content

Instantly share code, notes, and snippets.

@wildcard

wildcard/example-html-wireframe.markdown

Created January 16, 2019 16:58
Show Gist options
  • Save wildcard/84531a4571baf54c4383cc29ba3c5c21 to your computer and use it in GitHub Desktop.
Save wildcard/84531a4571baf54c4383cc29ba3c5c21 to your computer and use it in GitHub Desktop.
Download ZIP
Example HTML Wireframe
Raw
index.html
<!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>
Raw
style.css
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