Skip to content

Instantly share code, notes, and snippets.

@fightingtheboss

fightingtheboss/index.html

Last active August 29, 2015 14:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save fightingtheboss/89b7d2ba51cb39a3e315 to your computer and use it in GitHub Desktop.
Save fightingtheboss/89b7d2ba51cb39a3e315 to your computer and use it in GitHub Desktop.
Download ZIP
HTML Fundamentals, Part 2: Semantics In Detail
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Fundamentals</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="container">
<header>
<h1>HTML Fundamentals</h1>
</header>
<nav>
<ul class="list-unstyled list-inline">
<li><a href="#">Menu 001</a></li>
<li><a href="#">Menu 002</a></li>
<li><a href="#">Menu 003</a></li>
<li><a href="#">Menu 004</a></li>
<li><a href="#">Menu 005</a></li>
</ul>
</nav>
<main>
<header>
<h1>Main Section</h1>
<h2>Or where your main content lives</h2>
<h3>Bitmaker Labs</h3>
</header>
<section id="hero-unit">
<div class="hero">
Let"s learn about the purpose of different HTML elements through the markup of this page.
</div>
</section>
<section id="article-list">
<article class="post">
<h1>Post 001</h1>
<p>
Lorem ipsum dolor sit amet, <span class="inline-text">consectetur adipisicing elit</span>. Laudantium neque delectus <strong>commodi quisquam natus</strong>, veniam. Dolorem vel consectetur, et quas nihil inventore sed quia, sit quisquam quibusdam molestias corrupti ipsum.</p>
<h2>Subheader</h2>
<p>
Lorem ipsum dolor sit amet, <span class="inline-text">consectetur adipisicing elit</span>. Rem voluptatum perspiciatis velit similique, earum iste doloremque modi impedit animi repellat nobis molestiae, natus reiciendis eum harum! <em>Obcaecati</em>, minima consectetur quisquam?</p>
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure quidem et, culpa illo optio consequuntur assumenda cum dolorem sed. Aut vel perspiciatis debitis voluptate autem et, consectetur explicabo, illo adipisci.
</blockquote>
</article>
<article class="post">
<h1>Post 002</h1>
<p>
Lorem ipsum dolor sit amet, <span class="inline-text">consectetur adipisicing elit</span>. Laudantium neque delectus <strong>commodi quisquam natus</strong>, veniam. Dolorem vel consectetur, et quas nihil inventore sed quia, sit quisquam quibusdam molestias corrupti ipsum.</p>
<h2>Subheader</h2>
<p>
Lorem ipsum dolor sit amet, <span class="inline-text">consectetur adipisicing elit</span>. Rem voluptatum perspiciatis velit similique, earum iste doloremque modi impedit animi repellat nobis molestiae, natus reiciendis eum harum! <em>Obcaecati</em>, minima consectetur quisquam?</p>
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit alias blanditiis placeat hic doloremque beatae, aliquid mollitia accusamus maiores explicabo, natus numquam, error assumenda voluptatibus tenetur libero quae optio, repudiandae!
</blockquote>
</article>
<article class="post">
<h1>Post 003</h1>
<p>
Lorem ipsum dolor sit amet, <span class="inline-text">consectetur adipisicing elit</span>. Laudantium neque delectus <strong>commodi quisquam natus</strong>, veniam. Dolorem vel consectetur, et quas nihil inventore sed quia, sit quisquam quibusdam molestias corrupti ipsum.</p>
<h2>Subheader</h2>
<p>
Lorem ipsum dolor sit amet, <span class="inline-text">consectetur adipisicing elit</span>. Rem voluptatum perspiciatis velit similique, earum iste doloremque modi impedit animi repellat nobis molestiae, natus reiciendis eum harum! <em>Obcaecati</em>, minima consectetur quisquam?</p>
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat accusamus, deleniti vitae architecto voluptatum! Ullam non odio ipsa eum vel culpa voluptates laboriosam. Nam beatae rem neque, nemo eaque itaque!
</blockquote>
</article>
<article class="post">
<h1>Post 004</h1>
<p>
Lorem ipsum dolor sit amet, <span class="inline-text">consectetur adipisicing elit</span>. Laudantium neque delectus <strong>commodi quisquam natus</strong>, veniam. Dolorem vel consectetur, et quas nihil inventore sed quia, sit quisquam quibusdam molestias corrupti ipsum.</p>
<h2>Subheader</h2>
<p>
Lorem ipsum dolor sit amet, <span class="inline-text">consectetur adipisicing elit</span>. Rem voluptatum perspiciatis velit similique, earum iste doloremque modi impedit animi repellat nobis molestiae, natus reiciendis eum harum! <em>Obcaecati</em>, minima consectetur quisquam?</p>
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla eum culpa itaque, accusamus nesciunt iure, sunt nobis vero laboriosam quaerat officia cum voluptas commodi qui sit quidem recusandae ratione in!
</blockquote>
</article>
<article class="post">
<h1>Post 005</h1>
<p>
Lorem ipsum dolor sit amet, <span class="inline-text">consectetur adipisicing elit</span>. Laudantium neque delectus <strong>commodi quisquam natus</strong>, veniam. Dolorem vel consectetur, et quas nihil inventore sed quia, sit quisquam quibusdam molestias corrupti ipsum.</p>
<h2>Subheader</h2>
<p>
Lorem ipsum dolor sit amet, <span class="inline-text">consectetur adipisicing elit</span>. Rem voluptatum perspiciatis velit similique, earum iste doloremque modi impedit animi repellat nobis molestiae, natus reiciendis eum harum! <em>Obcaecati</em>, minima consectetur quisquam?</p>
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore dignissimos quibusdam vel natus repudiandae doloremque nemo impedit similique laudantium minus excepturi veniam dicta repellendus quis provident adipisci cumque, aut, enim!
</blockquote>
</article>
</section>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dt>Cascading StyleSheets</dt>
<dd>Separates styles from content on the web</dd>
</dl>
<form action="/styleguide">
<div class="field">
<label for="field-text">
Text
<input id="field-text" name="field-text" type="text">
</label>
</div>
<div class="field">
<label for="field-email">
Email
<input id="field-email" name="field-email" type="email">
</label>
</div>
<div class="field">
<label for="field-password">
Password
<input id="field-password" name="field-password" type="password">
</label>
</div>
<div class="field">
<label for="field-search">
Search
<input id="field-search" name="field-search" type="search">
</label>
</div>
<div class="field">
<label for="field-url">
URL
<input id="field-url" name="field-url" type="url">
</label>
</div>
<div class="field">
<label for="field-number">
Number
<input id="field-number" name="field-number" type="number">
</label>
</div>
<div class="field">
<label for="field-tel">
Telephone
<input id="field-tel" name="field-tel" type="tel">
</label>
</div>
<div class="field">
<label for="field-date">
Date
<input id="field-date" name="field-date" type="date">
</label>
</div>
<div class="field">
<label for="field-textarea">Textarea</label>
<textarea id="field-textarea" name="field-textarea"></textarea>
</div>
<div class="field">
<label for="field-select">Select</label>
<select id="field-select" name="field-select">
<option value="CA">Canada</option>
<option value="US">United States</option>
<option value="MX">Mexico</option>
<option value="GB">United Kingdom</option>
<option value="FR">France</option>
</select>
</div>
<div class="field">
<label class="input-file" for="field-file">
File
<input id="field-file" name="field-file" type="file">
</label>
</div>
<fieldset class="field">
<legend>Checkboxes</legend>
<label>
<input name="field-checkbox[]" type="checkbox">
Check 1
</label>
<label>
<input name="field-checkbox[]" type="checkbox">
Check 2
</label>
<label>
<input name="field-checkbox[]" type="checkbox">
Check 3
</label>
<label>
<input name="field-checkbox[]" type="checkbox">
Check 4
</label>
<label>
<input name="field-checkbox[]" type="checkbox">
Check 5
</label>
</fieldset>
<fieldset class="field">
<legend>Radio Buttons</legend>
<label>
<input name="field-radio" type="radio">
Radio 1
</label>
<label>
<input name="field-radio" type="radio">
Radio 2
</label>
<label>
<input name="field-radio" type="radio">
Radio 3
</label>
<label>
<input name="field-radio" type="radio">
Radio 4
</label>
<label>
<input name="field-radio" type="radio">
Radio 5
</label>
</fieldset>
<div class="field">
<button type="submit">
<h3>Button with HTML Markup!</h3>
</button>
</div>
<div class="field">
<input type="submit">
</div>
</form>
<footer>
This is the footer for the main section
</footer>
</main>
<aside>
Secondary content related to content around it, or used as a sidebar in a layout. We'll see how to actually get it to be a literal sidebar in the next section.
</aside>
<footer>
&copy; 2014 Bitmaker Labs
</footer>
</body>
</html>
Raw
styles.css
body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20px;
line-height: 1.5;
}
/*header {
background-color: hsl(0, 75%, 75%);
}
nav {
background-color: hsl(30, 75%, 75%);
}
main {
background-color: hsl(60, 75%, 75%);
}
main > header {
background-color: hsl(90, 75%, 75%);
}
#hero-unit {
background-color: hsl(120, 75%, 75%);
}
#article-list {
background-color: hsl(150, 75%, 75%);
}
article {
background-color: hsl(180, 75%, 75%);
}
blockquote {
background-color: hsl(210, 75%, 75%);
}
form {
background-color: hsl(240, 75%, 75%);
}
aside {
background-color: hsl(270, 75%, 75%);
}
footer {
background-color: hsl(300, 75%, 75%);
}
main > footer {
background-color: hsl(330, 75%, 75%);
}*/
dt {
font-weight: bold;
}
dd {
margin-bottom: 1em;
}
.container {
width: 80%;
max-width: 54em;
margin: 0 auto 1.5em;
}
.list-unstyled {
margin: 0;
padding: 0;
list-style-type: none;
}
.list-inline > li {
display: inline-block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment