Skip to content

Instantly share code, notes, and snippets.

@tfirdaus

tfirdaus/index.html Secret

Created October 12, 2014 08:24
Show Gist options
  • Save tfirdaus/e7327bd25c39e4d2720a to your computer and use it in GitHub Desktop.
Save tfirdaus/e7327bd25c39e4d2720a to your computer and use it in GitHub Desktop.
Download ZIP
(Chapter 5) / 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.0">
<link rel="apple-touch-icon" href="assets/img/apple-icon.png">
<link rel="shortcut icon" href="assets/img/favicon.png?v=2" type="image/png">
<title>Portfolio</title>
<meta name="description" content="A simple portoflio website built using Bootstrap">
<meta name="author" content="Thoriq Firdaus">
</head>
<body>
<nav id="menu" class="navmenu navmenu-inverse navmenu-fixed-left offcanvas portfolio-menu" role="navigation">
<ul class="nav navmenu-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Speaking</a></li>
<li><a href="#">Writing</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<div class="navbar navbar-default navbar-portfolio portfolio-topbar" style="">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target="#menu" data-canvas="body">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<main class="portfolio-main" id="content" role="main">
<section class="jumbotron portfolio-about" id="about">
<h1 class="portfolio-name">Yoga Perdana</h1>
<p class="lead">Illustrator &amp; Logo designer. I work using digital tools, specially vector.</p>
</section>
<section class="portfolio-display" id="portfolio">
<div class="container">
<h2>Portfolio</h2>
<div class="row">
<div class="col-md-3 col-sm-6 portfolio-item">
<figure class="portfolio-image">
<img class="img-responsive" src="assets/img/6layers.jpg" height="300" width="400" alt="">
<figcaption class="portfolio-caption">6 Layers</figcaption>
</figure>
</div>
<div class="col-md-3 col-sm-6 portfolio-item">
<figure class="portfolio-image">
<img class="img-responsive" src="assets/img/blur.jpg" height="300" width="400" alt="">
<figcaption class="portfolio-caption">Blur</figcaption>
</figure>
</div>
<div class="col-md-3 col-sm-6 portfolio-item">
<figure class="portfolio-image">
<img class="img-responsive" src="assets/img/brain.jpg" height="300" width="400" alt="">
<figcaption class="portfolio-caption">Brain</figcaption>
</figure>
</div>
<div class="col-md-3 col-sm-6 portfolio-item">
<figure class="portfolio-image">
<img class="img-responsive" src="assets/img/color.jpg" height="300" width="400" alt="">
<figcaption class="portfolio-caption">Color</figcaption>
</figure>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 portfolio-item">
<figure class="portfolio-image">
<img class="img-responsive" src="assets/img/compass.jpg" height="300" width="400" alt="">
<figcaption class="portfolio-caption">Compass</figcaption>
</figure>
</div>
<div class="col-md-3 col-sm-6 portfolio-item">
<figure class="portfolio-image">
<img class="img-responsive" src="assets/img/contour.jpg" height="300" width="400" alt="">
<figcaption class="portfolio-caption">Contour</figcaption>
</figure>
</div>
<div class="col-md-3 col-sm-6 portfolio-item">
<figure class="portfolio-image">
<img class="img-responsive" src="assets/img/flame.jpg" height="300" width="400" alt="">
<figcaption class="portfolio-caption">Flame</figcaption>
</figure>
</div>
<div class="col-md-3 col-sm-6 portfolio-item">
<figure class="portfolio-image">
<img class="img-responsive" src="assets/img/hotcold.jpg" height="300" width="400" alt="">
<figcaption class="portfolio-caption">Hot Cold</figcaption>
</figure>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 portfolio-item">
<figure class="portfolio-image">
<img class="img-responsive" src="assets/img/infinity.jpg" height="300" width="400" alt="">
<figcaption class="portfolio-caption">Infinity</figcaption>
</figure>
</div>
<div class="col-md-3 col-sm-6 portfolio-item">
<figure class="portfolio-image">
<img class="img-responsive" src="assets/img/lifeguard.jpg" height="300" width="400" alt="">
<figcaption class="portfolio-caption">Life Guard</figcaption>
</figure>
</div>
<div class="col-md-3 col-sm-6 portfolio-item">
<figure class="portfolio-image">
<img class="img-responsive" src="assets/img/meteor.jpg" height="300" width="400" alt="">
<figcaption class="portfolio-caption">Meteor</figcaption>
</figure>
</div>
<div class="col-md-3 col-sm-6 portfolio-item">
<figure class="portfolio-image">
<img class="img-responsive" src="assets/img/thewave.jpg" height="300" width="400" alt="">
<figcaption class="portfolio-caption">The Wave</figcaption>
</figure>
</div>
</div>
</div>
</section>
<!-- /.container -->
<div class="portfolio-contact" id="contact">
<div class="container">
<h2>Get in Touch</h2>
<form id="contact" method="post" class="form" role="form">
<div class="form-group">
<input type="text" class="form-control input-lg" id="input-name" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control input-lg" id="input-email" placeholder="Email">
</div>
<div class="form-group">
<textarea class="form-control" rows="10"></textarea>
</div>
<button type="submit" class="btn btn-lg btn-primary">Submit</button>
</form>
</div>
</div>
</main>
<footer class="portfolio-footer" id="footer">
<div class="container">
<div class="social" id="social">
<ul>
<li class="twitter"><a class="icon ion-social-twitter" href="#">Twitter</a></li>
<li class="dribbble"><a class="icon ion-social-dribbble-outline" href="#">Dribbble</a></li>
</ul>
</div>
<div class="copyright">Yoga Perdana &copy; 2014</div>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment