Skip to content

Instantly share code, notes, and snippets.

@wordyallen

wordyallen/soln1.html

Last active May 2, 2016 20:02
Show Gist options
  • Save wordyallen/d97cccd820c4315be6181062a25ec343 to your computer and use it in GitHub Desktop.
Save wordyallen/d97cccd820c4315be6181062a25ec343 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
soln1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<title>Pencil and Co</title>
</head>
<body>
<nav class="navbar bg-faded">
<img src="img/Pencil_Logo.svg" height='100px' alt="" />
<ul class="nav navbar-nav pull-xs-right m-t-2 m-x-3">
<li class="nav-item">
<a class="nav-link lead" href="#">Events</a>
</li>
<li class="nav-item lead">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item lead">
<a class="nav-link" href="#">Vendors</a>
</li>
</ul>
</nav>
<div class="jumbotron " style="background-image: url(img/web_img_1_HERO.jpg); background-position: center; background-size: 100%;">
<h1 class="display-1 text-xs-center m-y-3" style='color:white'>Welcome</h1>
</div>
<div class="container p-t-2">
<div class="row" id="content">
<div class="col-sm-6">
<div class="col-sm-6">
<h3 class="m-b-2 text-muted">Product 1</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<button type="button" class="btn btn-warning">Warning</button>
</div>
<div class="col-sm-6 m-t-3">
<img class='img-fluid m-b-1' src="img/web_img_2.jpg" alt="pencils" />
</div>
</div>
<div class="col-sm-6">
<div class="col-sm-6">
<h3 class="m-b-2 text-muted">Product 2</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<button type="button" class="btn btn-info">More info</button>
</div>
<div class="col-sm-6 m-t-3">
<img class='img-fluid m-b-1' src="img/web_img_3.jpg" alt="pencils" />
</div>
</div>
</div>
<div class="row m-y" id="content">
<div class="col-sm-6">
<div class="col-sm-6">
<h3 class="m--3 text-muted">Product 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<button type="button" class="btn btn-success">Success</button>
</div>
<div class="col-sm-6 m-t-3">
<img class='img-fluid m-b-1' src="img/web_img_2.jpg" alt="pencils" />
</div>
</div>
<div class="col-sm-6">
<div class="col-sm-6">
<h3 class="m-b-2 text-muted">Product 4</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<button type="button" class="btn btn-danger">Danger</button>
</div>
<div class="col-sm-6 m-t-3">
<img class='img-fluid m-b-1' src="img/web_img_3.jpg" alt="pencils" />
</div>
</div>
</div>
</div>
<footer class="bg-faded ">
<img class="m-y-2 m-x-2"src="img/Social_Media_Icons-01.svg" width='50px' alt="" />
<img class="m-y-2 m-x-2"src="img/Social_Media_Icons-02.svg" width='50px' alt="" />
<img class="m-y-2 m-x-2"src="img/Social_Media_Icons-03.svg" width='50px' alt="" />
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment