Skip to content

Instantly share code, notes, and snippets.

@calendee

calendee/index.html

Created November 8, 2014 12:56
Show Gist options
  • Save calendee/7b2beb69a926118ff93c to your computer and use it in GitHub Desktop.
Save calendee/7b2beb69a926118ff93c to your computer and use it in GitHub Desktop.
Download ZIP
Girls Scouts Training
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Girl Scout Class</title>
<link rel="stylesheet" href="reset.css"/>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="wrapper">
<header>
<hgroup class="flex">
<img src="http://placehold.it/200x50&amp;text=Logo">
</hgroup>
<nav class="flex">
<ul>
<li><a class="button" href="">Link 1</a></li>
<li><a class="button" href="">Link 2</a></li>
<li><a class="button" href="">Link 3</a></li>
<li><a class="button" href="">Link 4</a></li>
</ul>
</nav>
</header>
<section class="hero">
<img src="http://placehold.it/1000x400&text=[%20img%201]" alt="hero placeholder image">
</section>
<hr/>
<section class="cols">
<article>
<img src="http://placehold.it/300x200&text=[img]" alt="hero placeholder image">
<hgroup>
<h2>This is a content section.</h2>
</hgroup>
<p>
Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo
</p>
</article>
<hr/>
<article>
<img src="http://placehold.it/300x200&text=[img]" alt="hero placeholder image">
<hgroup>
<h2>This is a content section.</h2>
</hgroup>
<p>
Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo
</p>
</article>
<hr/>
<article>
<img src="http://placehold.it/300x200&text=[img]" alt="hero placeholder image">
<hgroup>
<h2>This is a content section.</h2>
</hgroup>
<p>
Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo
</p>
</article>
</section>
<section class="cols well">
<div>
<hgroup>
<h2>Get in touch!</h2>
</hgroup>
<p>
We'd love to hear from you, you attractive person you.
</p>
</div>
<div class="well-button-container">
<a class="button" href="">Contact Us</a>
</div>
</section>
<footer>
<hgroup>
&copy; Copyright no one at all. Go to town.
</hgroup>
<nav>
<ul>
<li><a class="footer-links" href="">Link 1</a></li>
<li><a class="footer-links" href="">Link 2</a></li>
<li><a class="footer-links" href="">Link 3</a></li>
<li><a class="footer-links" href="">Link 4</a></li>
</ul>
</nav>
</footer>
</div><!--End Wrapper-->
</body>
</html>
Raw
style.css
html, body {
margin:0;
padding:0;
font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
}
#wrapper {
max-width: 1000px;
width: 90%;
margin: 10px auto;
}
/********* Generic Font & Spacing Info *********/
h1, h2, h3, h4, h5, h6 {
line-height: 1.4;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
color: #222222;
text-rendering: optimizeLegibility;
margin-top: 0.2rem;
margin-bottom: 0.5rem;
line-height: 1.4;
}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
margin: 0;
padding: 0;
}
header, hgroup, nav, section, article, aside, footer {
display: block;
margin-bottom: 20px;
}
/*******End Generic Font & Spacing Info ******/
a {
text-decoration:none;
color:#FFF;
}
a:hover {
text-decoration: underline;
}
.well {
border-style: solid;
border-width: 1px;
border-color: #d8d8d8;
margin-bottom: 20px; !important;
padding: 1.25rem;
background: #f2f2f2;
}
.well-button-container a {
float: right;
}
/******************************* HEADER *******************************/
header {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
}
header, hgroup, nav {
color: #C1C1C1;
margin-bottom: 0px;
}
header .flex {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
flex-direction: row;
/*align-items: flex-end;*/
}
nav li {
float: right;
border-right: 1px solid #FFF;
}
.button{
border-style: solid;
border-width: 0px;
cursor: pointer;
font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
font-weight: normal;
line-height: normal;
margin: 0 0 1.25rem;
position: relative;
text-decoration: none;
text-align: center;
-webkit-appearance: none;
-webkit-border-radius: 0;
display: inline-block;
padding-top: 1rem;
padding-right: 2rem;
padding-bottom: 1.0625rem;
padding-left: 2rem;
font-size: 1rem;
background-color: #008CBA;
border-color: #007295;
color: #FFFFFF;
transition: background-color 300ms ease-out;
}
/**************************** END HEADER *******************************/
/******************************* HERO IMG *******************************/
section .hero {
overflow : hidden;
}
section img {
position: relative;
max-width:100%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, 0);
overflow: hidden;
}
/*****************************END HERO IMG *******************************/
/************************** ARTICLES SECTION *****************************/
.cols {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
}
.cols article, div {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
flex-direction: row;
margin: 15px;
align-items: flex-end;
}
.cols article:first-child, div:first-child {
margin: 15px 15px 15px 0;
}
.cols article:last-child, div:last-child {
margin: 15px 0 15px 15px;
}
article img {
margin-bottom: 10px;
}
article hgroup h2 {
font-weight: bold;
}
/************************ END ARTICLES SECTION ***************************/
/**************************** Footer Area *******************************/
footer a {
color : #007295;
margin: 0 10px;
padding: 0;
}
/************************** End Footer Area *******************************/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment