Skip to content

Instantly share code, notes, and snippets.

@christiannaths

christiannaths/rewalk-checkpoint-4.css

Last active August 29, 2015 14:16
Show Gist options
  • Save christiannaths/a6f0cf41144697319fd3 to your computer and use it in GitHub Desktop.
Save christiannaths/a6f0cf41144697319fd3 to your computer and use it in GitHub Desktop.
Download ZIP
rewalk-checkpoint-4
Raw
rewalk-checkpoint-4.css
/* ------------------------------------------- helpers */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: rgba(0,0,0,0.1);
border: 1px solid rgba(0,0,0,0.1);
min-height: 3em;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* ------------------------------------------- base */
nav ul {
list-style: none;
}
a {
text-decoration: none;
}
/* ------------------------------------------- frame */
.container {
width: 70em;
margin: 10px auto;
padding: 10px;
}
header, section, footer {
margin: 10px;
}
.feature,
.statistic,
.client,
footer .contact-nav,
footer .primary-nav,
footer .social-nav,
footer .newsletter-subscribe {
float: left;
}
.client,
footer .primary-nav,
footer .social-nav {
width: 16.6666667%;
}
.feature,
.statistic,
footer .contact-nav {
width: 25%;
}
footer .newsletter-subscribe {
width: 41.6666667%;
}
Raw
rewalk-checkpoint-4.html
<!DOCTYPE html>
<html>
<head>
<title>ReWalk</title>
<link rel="stylesheet" href="assets/stylesheets/style.css" />
</head>
<body>
<header>
<div class="container">
<nav class="primary-nav clearfix">
<ul>
<li><a href="#">
<h1 class="brand">ReWalk</h1>
</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
</ul>
<ul>
<li><a href="#">P: (800) 997-9714</a></li>
<li><a href="#" class="call-to-action">Start a Project</a></li>
</ul>
</nav>
<h2>A marketing and brand creation agency</h2>
<p>We don't just make logos, we make design &amp; content choices that disrupt the market from the inside out.</p>
<a class="primary-call-to-action" href="">Get Started</a>
<a class="secondary-call-to-action" href="">Learn More</a>
</div> <!-- /.container -->
</header>
<section class="features">
<div class="container clearfix">
<h2>Our Expertise</h2>
<p>We create amazing digital experience and help our customers reach their goals 3x faster than our competitors.</p>
<div class="feature">
<span class="icon"></span>
<h3>Websites</h3>
<p>We create websites for humans and humans create websites for us. </p>
<a class="call-to-action">Examples</a>
</div>
<div class="feature">
<span class="icon"></span>
<h3>Mobile</h3>
<p>Enjoy a new mobile experience with resposnive support.</p>
<a class="call-to-action">Examples</a>
</div>
<div class="feature">
<span class="icon"></span>
<h3>eCommerce</h3>
<p>Amazing eCommerce websites that simply sell and bring revenue.</p>
<a class="call-to-action">Examples</a>
</div>
<div class="feature">
<span class="icon"></span>
<h3>Design & User Experience</h3>
<p>We adjust each detail, so it fits your expectations.</p>
<a class="call-to-action">Examples</a>
</div>
</div> <!-- /.container -->
</section>
<section class="statistics">
<div class="container clearfix">
<h2>Numbers</h2>
<p>Some amazing things about us you should know.</p>
<div class="statistic">
<h3>
<em>12k</em>
Projects Completed
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="statistic">
<h3>
<em>463</em>
Satisfied Clients
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="statistic">
<h3>
<em>1000</em>
Newsletter Subscribers
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="statistic">
<h3>
<em>600</em>
Positive Referrals
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div> <!-- /.container -->
</section>
<section class="clients">
<div class="container clearfix">
<h2>Our Clients</h2>
<p>We love our clients and we are proud of them. They are now a part of our family.</p>
<div class="client"></div>
<div class="client"></div>
<div class="client"></div>
<div class="client"></div>
<div class="client"></div>
<div class="client"></div>
</div> <!-- /.container -->
</section>
<footer>
<div class="container">
<div class="clearfix">
<nav class="contact-nav">
<ul>
<li><a href="#">
<h1>ReWalk</h1>
</a></li>
<li><a href="#">P: (800) 997-9714</a></li>
<li><a href="#">info@rewalk.com</a></li>
</ul>
<form>
<select>
<option>English</option>
<option>French</option>
</select>
</form>
</nav>
<nav class="primary-nav">
<h2>Explore</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Start a Project</a></li>
</ul>
</nav>
<nav class="social-nav">
<h2>Connect</h2>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Google+</a></li>
<li><a href="#">LinkedIn</a></li>
</ul>
</nav>
<form class="newsletter-subscribe">
<h2>Newsletter Subscribe</h2>
<input type="email" />
<input type="submit" value="Subscribe" />
</form>
</div> <!-- /.clearfix -->
<p>
&copy; 2014 Rewalk, Inc.
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
</p>
</div> <!-- /.container -->
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment