Skip to content

Instantly share code, notes, and snippets.

@tfirdaus

tfirdaus/index.html Secret

Created October 11, 2014 06:58
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tfirdaus/ef16cf9e0da17c9fcf6b to your computer and use it in GitHub Desktop.
Save tfirdaus/ef16cf9e0da17c9fcf6b to your computer and use it in GitHub Desktop.
Download ZIP
(Chapter 7) / Responsive Web Design by Examples, 2nd Edition
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="assets/img/apple-icon.png">
<link rel="shortcut icon" href="assets/img/favicon.png" type="image/png">
<title>Startup</title>
<meta name="description" content="A startup company website built using Foundation">
</head>
<body>
<!-- -->
<header class="startup-header">
<div class="contain-to-grid startup-top-bar">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name startup-name">
<h1><a href="#">Startup</a></h1>
</li>
<li class="toggle-topbar menu-icon">
<a href="#">
<span>Menu</span>
</a>
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li><a href="#">Features</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Blog</a></li>
<li class="has-form log-in"><a href="" class="button secondary round">Log In</a></li>
<li class="has-form sign-up"><a href="#" class="button round">Sign Up</a></li>
</ul>
</section>
</nav>
</div>
<div class="panel startup-hero">
<div class="row">
<h2 class="hero-title">Stay Cool and be Awesome</h2>
<p class="hero-lead">The most awesome web application in the galaxy.</p>
</div>
<div class="row">
<a href="#" class="button success round">Signup</a>
</div>
</div>
</header>
<div class="startup-body">
<div class="startup-features">
<div class="row">
<div class="medium-6 columns">
<div class="row">
<div class="small-3 medium-4 columns">
<figure>
<img src="assets/img/analytics.png" height="128" width="128" alt="">
</figure>
</div>
<div class="small-9 medium-8 columns">
<h4>Easy</h4>
<p>This web application is super easy to use. No complicated setup. It just works out of the box.</p>
</div>
</div>
</div>
<div class="medium-6 columns">
<div class="row">
<div class="small-3 medium-4 columns">
<figure>
<img src="assets/img/clock.png" height="128" width="128" alt="">
</figure>
</div>
<div class="small-9 medium-8 columns">
<h4>Fast</h4>
<p>This web application runs in a blink of eye. There is no other application that is on par with our application in term of speed.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="medium-6 columns">
<div class="row">
<div class="small-3 medium-4 columns">
<figure>
<img src="assets/img/target.png" height="128" width="128" alt="">
</figure>
</div>
<div class="small-9 medium-8 columns">
<h4>Secure</h4>
<p>Your data is encyrpted with the latest Kryptonian technology. It will never be shared to anyone. Rest assured, your data is totally safe.</p>
</div>
</div>
</div>
<div class="medium-6 columns">
<div class="row">
<div class="small-3 medium-4 columns">
<figure>
<img src="assets/img/bubbles.png" height="128" width="128" alt="">
</figure>
</div>
<div class="small-9 medium-8 columns">
<h4>Awesome</h4>
<p>It's simply the most awesome web application and make you the coolest person in the galaxy. Enough said.</p>
</div>
</div>
</div>
</div>
</div>
<div class="startup-testimonial">
<div class="row">
<ul class="testimonial-list" data-orbit>
<li data-orbit-slide="testimonial-1">
<div>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor numquam quaerat doloremque in quis dolore enim modi cumque eligendi eius.</blockquote>
<figure>
<img class="avatar" src="assets/img/mystery.png" height="128" width="128" alt="">
<figcaption>John Doe</figcaption>
</figure>
</div>
</li>
<li data-orbit-slide="testimonial-2">
<div>
<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</blockquote>
<figure>
<img class="avatar" src="assets/img/mystery.png" height="128" width="128" alt="">
<figcaption>Jane Doe</figcaption>
</figure>
</div>
</li>
</ul>
</div>
</div>
<div class="startup-pricing">
<div class="row">
<div class="medium-4 columns">
<ul class="pricing-table pricing-basic">
<li class="title">Basic</li>
<li class="price">$10<small>/month</small></li>
<li class="description">Perfect for personal use.</li>
<li class="bullet-item">1GB Storage</li>
<li class="bullet-item">1 User</li>
<li class="bullet-item">24/7 Support</li>
<li class="cta-button"><a class="button success round" href="#">Sign Up</a></li>
</ul>
</div>
<div class="medium-4 columns">
<ul class="pricing-table pricing-team">
<li class="title">Team</li>
<li class="price">$50<small>/month</small></li>
<li class="description">For a small team.</li>
<li class="bullet-item">50GB Storage</li>
<li class="bullet-item">Up to 10 Users</li>
<li class="bullet-item">24/7 Support</li>
<li class="cta-button"><a class="button success round" href="#">Sign Up</a></li>
</ul>
</div>
<div class="medium-4 columns">
<ul class="pricing-table pricing-enterprise">
<li class="title">Enterprise</li>
<li class="price">$300<small>/month</small></li>
<li class="description">For large corporation</li>
<li class="bullet-item">Unlimited Storage</li>
<li class="bullet-item">Unlimited Users</li>
<li class="bullet-item">24/7 Priority Support</li>
<li class="cta-button"><a class="button success round" href="#">Sign Up</a></li>
</ul>
</div>
</div>
</div>
</div>
<footer class="startup-footer">
<div class="row footer-nav">
<ul class="secondary-nav">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Privacy</a></li>
</ul>
<ul class="social-nav">
<li><a class="foundicon-facebook" href="#">Facebook</a></li>
<li><a class="foundicon-twitter" href="#">Twitter</a></li>
</ul>
</div>
<div class="row footer-copyright">
<p>Copyright 2014 Super Awesome App. All rights reserved.</p>
</div>
</footer>
<script src="assets/js/foundation.min.js"></script>
<script>
$(document).foundation({
orbit: {
timer_speed: 3000,
pause_on_hover: true,
resume_on_mouseout: true,
slide_number: false
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment