Sorry, I dont have a link to the page. It is not live yet. Here is the index.html file…
<!doctype html>
Custom Moulding | Trims
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="navbar-header">
<a class="navbar-brand" href="#"><h1>Custom Moulding</h1> <span class="subhead">Architectual Shapes & Coatings</span></a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div class="col-md-6">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="textures.html">Textures</a></li>
<li><a href="application.html">Application</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div> <!-- row -->
</div> <!-- container -->
</nav>
<section class="container" id="trims-page">
<h2>Trims</h2>
<h4 class="text-center">Click on profile to view image in 3D</h4>
<div class="row">
<div class="col-md-2">
<a data-toggle="modal" href="#myModal"><img src="img/trims/tr112.png" alt="Picture of Trim"></a>
</div>
</div> <!-- row -->
</section> <!-- products page -->
<footer class="container">
<div class="row">
<div class="col-md-12 text-center">
<p>Copyright © 2015 CUSTOM MOULDING INC, All Rights Reserved</p>
<a href=""><img src="img/facebook-icon.png" alt="Link to Facebook" width="50px" height="50px"></a>
<a href=""><img src="img/twitter.jpe" alt="Link to Twitter" width="50px" height="50px"></a>
<a href=""><img src="img/GooglePlusLogo.png" width="50px" height="50px" alt="Link to Google"></a>
</div>
</div> <!-- row -->
<div class="modal fade modal-lg center-block" id="myModal">
<div class="modal-content">
<div class="modal-body">
<img src="img/trims/tr112-lg.png" alt="Picture of Trim" class="center-block img-responsive">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</footer> <!-- container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
here is the products.html file…
<!doctype html>
Custom Moulding | Products
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="navbar-header">
<a class="navbar-brand" href="#"><h1>Custom Moulding</h1> <span class="subhead">Architectual Shapes & Coatings</span></a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div class="col-md-6">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</a></li>
<li id="active"><a href="products.html">Products</a></li>
<li><a href="textures.html">Textures</a></li>
<li><a href="application.html">Application</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div> <!-- row -->
</div> <!-- container -->
</nav>
<section class="container" id="products-page">
<h2>Products</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat ante sit amet pellentesque facilisis. Integer blandit facilisis nisi, at cursus libero varius eget. Etiam sodales arcu ex, in rutrum nisi varius eu. Maecenas a bibendum risus. Pellentesque at luctus ante. Sed eleifend urna sit amet leo ultricies convallis. Sed eu accumsan massa, nec mattis turpis. Cras id blandit nisi. Cras porttitor, ligula id feugiat tincidunt, tortor nisi pharetra ligula, luctus aliquam ante massa viverra nisi. Suspendisse potenti. Praesent feugiat, mauris eu accumsan gravida, dolor velit efficitur magna, vel maximus libero sem eu leo. Vivamus porta viverra blandit. Fusce sodales, augue quis ornare scelerisque, ante tellus mollis massa, vitae ullamcorper nunc dui et justo. Integer imperdiet, arcu quis malesuada tincidunt, nulla urna gravida risus, non hendrerit tortor libero in sapien. Nulla tincidunt commodo risus. Ut ac ante vitae sem fermentum hendrerit.
</p>
<div class="row" id="products-grid">
<div class="col-md-3 picture-spacing">
<a href="#"><img src="img/window-trims.jpe" alt="Picture of Window Trims"></a>
<h3>Window Trims</h3>
<a class="btn btn-default btn-primary" href="trims.html" role="button" id="trims-btn">Enter</a>
</div>
<div class="col-md-3 picture-spacing">
<a href="#"><img src="img/columns.jpe" alt="Picture of Columns"></a>
<h3>Columns</h3>
<a class="btn btn-default btn-primary" href="#" role="button" id="columns-btn">Enter</a>
</div>
<div class="col-md-3 picture-spacing">
<a href="#"><img src="img/balusters.jpe" alt="Picture of Balusters"></a>
<h3>Balusters</h3>
<a class="btn btn-default btn-primary" href="#" role="button" id="columns-btn">Enter</a>
</div>
<div class="col-md-3 picture-spacing">
<a href="#"><img src="img/brackets.jpe" alt="Picture of Brackets"></a>
<h3>Brackets</h3>
<a class="btn btn-default btn-primary" href="#" role="button" id="columns-btn">Enter</a>
</div>
</div> <!-- row -->
</section> <!-- products page -->
<footer class="container">
<div class="row">
<div class="col-md-12 text-center">
<p>Copyright © 2015 CUSTOM MOULDING INC, All Rights Reserved</p>
<a href=""><img src="img/facebook-icon.png" alt="Link to Facebook" width="50px" height="50px"></a>
<a href=""><img src="img/twitter.jpe" alt="Link to Twitter" width="50px" height="50px"></a>
<a href=""><img src="img/GooglePlusLogo.png" width="50px" height="50px" alt="Link to Google"></a>
</div>
</div> <!-- row -->
</footer> <!-- container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
and here is the css file…
/* ==========================================================================
Author's custom styles
========================================================================== */
@import url(https://fonts.googleapis.com/css?family=Ubuntu|Roboto+Slab:400,700);
body {
font-family: "Roboto Slab", serif;
line-height: 200%;
}
nav .navbar {
background: rgb(234, 234, 234);
margin-bottom: 50px;
}
.navbar {
min-height: 100px;
margin-bottom: 0;
}
nav {
height: auto;
min-height: 100px;
}
.navbar .navbar-brand {
color: #fff;
height: auto;
}
.navbar-fixed-top {
position: static;
}
.navbar .navbar-brand .subhead {
font-family: "Ubuntu", sans-serif;
}
.navbar .navbar-brand:hover {
color: #9d9d9d;
}
.navbar .navbar-nav li a {
color: #fff;
}
.navbar .navbar-nav li a:hover {
color: #9d9d9d;
}
.navbar-inverse .navbar-nav #active a {
color: #9d9d9d;
}
ul.nav.navbar-nav.navbar-right {
margin-top: 20px;
font-family: "Times New Roman", sans-serif;
font-size: 18px;
}
@media only screen and (max-width: 760px){
.navbar-brand {
padding: 15px 0 0;
}
}
#featured {
margin-top: 0;
}
h1 {
margin-top: 0;
margin-bottom:0;
font-size: 1.8em;
font-family: "Times New Roman", sans-serif;
}
h2 {
font-family: "Times New Roman", sans-serif;
margin-bottom: 20px;
}
#about-page {
margin-top: 30px;
}
footer {
margin-top: 30px;
margin-bottom: 20px;
}
#products-page {
margin-top: 30px;
}
#products-grid {
margin-top: 20px;
}
.picture-spacing {
margin-bottom: 30px;
}