Wireframe in quick Bootstrap for a client

In this example below you will see how to do a Wireframe in quick Bootstrap for a client with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by samuherek, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright samuherek ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Wireframe in quick Bootstrap for a client</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      


.navbar {
  margin-bottom: 0;
}
.navbar-brand img {
  margin-top: -10px;
  width: 30px;
  height: auto;
}
.brand-title {
  margin: 0;
  font-size: 1.05em;
}
.jumbotron {
  min-height: 40rem;
}
.jumbotron h2 {
  margin: 5rem auto;
  max-width: 60rem;
}

/* Entry */

.top-entry-head {
  width: 100%;
  height: 7rem;
}
.top-entry-head h3 {
  padding-left: 15px;
  text-transform: uppercase;
}
.top-entry .top-entry-head h3, .top-entry .top-entry-head a {
  color: #F1A455;
}
.most-entry .top-entry-head h3, .most-entry .top-entry-head a {
  color: #E0252D;
}
.recent-entry .top-entry-head h3, .recent-entry .top-entry-head a {
  color: #8EC44B;
}
.arrows-box {
  padding-right: 15px;
  margin-top: 20px;
}
.arrows-box a {
  margin-right: 15px;
}
.arrow {
  color: #CCCCCD;
  background: white;
  outline: none;
  border: 1px solid #CCCCCD;
}
.arrow:hover {
  color: #333333;
  border: 1px solid #333333;
}
.top-entry .top-entry-head .arrow {
  color: #EFA35C;
  border: 1px solid #EFA35C;
}
.top-entry .top-entry-head .arrow:hover {
  color: #fff;
  border: 1px solid #EFA35C;
  background: #EFA35C;
}
.most-entry .top-entry-head .arrow {
  color: #DE2834;
  border: 1px solid #DE2834;
}
.most-entry .top-entry-head .arrow:hover {
  color: #fff;
  border: 1px solid #DE2834;
  background: #DE2834;
}
.recent-entry .top-entry-head .arrow {
  color: #8FC253;
  border: 1px solid #8FC253;
}
.recent-entry .top-entry-head .arrow:hover {
  color: #fff;
  border: 1px solid #8FC253;
  background: #8FC253;
}
.entry {
  /*min-height: 350px;*/
  position: relative;
}
.star-box {
  position: absolute;
  z-index: 1;
  padding: 0.5rem 0 0 1rem;
  cursor: pointer;
}
.star {
  color: #fff;
  opacity: 0.5;
}
.star-full {
  color: #F3A54D;
  opacity: 1;
}
.entry-img {
  position: relative;
  width: 100%;
}
.entry-title{
  position: relative;
  bottom: 0;
}
.entry-title h3 {
  color: #282526;
}
.review-hover {
  display: none;
}

.entry:hover .review-hover {
  display: block;
  position: absolute;
  top: 4rem;
  padding: 2rem;
}
.top-entry .entry:hover .entry-img {
  opacity: 0.05;
  border: 1px solid black;
}
.review-name {
  font-weight: bold;
}
.most-entry h3, .recent-entry h3 {
  font-size: 1.3em;
}
footer {
  background: #333;
  height: 30rem;
}
footer p {
  color: #ccc;
  line-height: 5rem;
  padding-left: 15px;
}
footer h2 {
  color: #ccc;
  padding-left: 15px;
}
.row {
  margin-bottom: 30px;
}






/* Bootstrap Resets */
.btn-primary {
  background: #8cc641;
  border-color: #8cc641;
}
.btn-primary:hover {
  background: #88c23d;
  border-color: #88c23d;
}
.jumbotron {
  background: linear-gradient(to right, rgba(246,169,68,1) 0%, rgba(227,30,37,1) 100%);
}
a {
  color: #8EC44B;
}
a:hover {
  color: #62951f;
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <img src="http://i57.tinypic.com/qzkshu.jpg" alt=""/>
        <!-- <h1 class="brand-title">Logo</h1> -->
      </a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">About Us</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Recent Parts</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div>
</nav>

<div class="jumbotron">
  <div class="container text-center">
    <h2>Discuss Your Favorite Science Fiction 
 and Fantasy Short Stories Here</h2>
    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
  </div>
</div>


<div class="container-fluid">
  <div class="row top-entry">
    <div class="top-entry-head">
      <h3 class="pull-left">Top Rated Stories</h3>
      <div class="pull-right arrows-box">
        <a href="#">See all... </a>
        <button class="arrow"><i class="fa fa-arrow-left"></i></button>
        <button class="arrow"><i class="fa fa-arrow-right"></i></button>
      </div>
    </div>
    <div class="entry col-xs-6 col-sm-4 col-md-3">
      <div class="star-box">
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star"></i>
        <i class="fa fa-star star"></i>
      </div>
      <img src="http://placeimg.com/300/300/1" alt="" class="entry-img" />
      <div class="review-hover">
        <p class="entry-review">"The Story" is a false accusition of what the reader has read.”</p>
        <img src="" alt="" />
        <p class="review-name">Reviewer Name</p>
      </div>
      <a href="" class="entry-title"><h3>Adventures of a Little 
Robot</h3></a>
    </div>
    <div class="entry col-xs-6 col-sm-4 col-md-3">
      <div class="star-box">
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star"></i>
        <i class="fa fa-star star"></i>
      </div>
      <img src="http://placeimg.com/300/300/2" alt="" class="entry-img" />
      <div class="review-hover">
        <p class="entry-review">"The Story" is a false accusition of what the reader has read.”</p>
        <img src="" alt="" />
        <p class="review-name">Reviewer Name</p>
      </div>
      <a href="" class="entry-title"><h3>Adventures of a Little 
Robot</h3></a>
    </div>
    <div class="entry col-xs-6 col-sm-4 col-md-3 visible-md visible-sm visible-lg">
      <div class="star-box">
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star"></i>
        <i class="fa fa-star star"></i>
      </div>
      <img src="http://placeimg.com/300/300/3" alt="" class="entry-img" />
      <div class="review-hover">
        <p class="entry-review">"The Story" is a false accusition of what the reader has read.”</p>
        <img src="" alt="" />
        <p class="review-name">Reviewer Name</p>
      </div>
      <a href="" class="entry-title"><h3>Adventures of a Little 
Robot</h3></a>
    </div>
    <div class="entry col-xs-6 col-sm-4 col-md-3 visible-md visible-lg">
      <div class="star-box">
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star"></i>
        <i class="fa fa-star star"></i>
      </div>
      <img src="http://placeimg.com/300/300/4" alt="" class="entry-img" />
      <div class="review-hover">
        <p class="entry-review">"The Story" is a false accusition of what the reader has read.”</p>
        <img src="" alt="" />
        <p class="review-name">Reviewer Name</p>
      </div>
      <a href="" class="entry-title"><h3>Adventures of a Little 
Robot</h3></a>
    </div>
  </div>
  
  <div class="row most-entry">
    <div class="top-entry-head">
      <h3 class="pull-left">Most Reviewed</h3>
      <div class="pull-right arrows-box">
        <a href="#">See all... </a>
        <button class="arrow left-arrow"><i class="fa fa-arrow-left"></i></button>
        <button class="arrow"><i class="fa fa-arrow-right"></i></button>
      </div>
    </div>
    <div class="entry col-xs-4 col-sm-3 col-md-2">
      <div class="star-box">
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star"></i>
        <i class="fa fa-star star"></i>
      </div>
      <img src="http://placeimg.com/300/300/5" alt="" class="entry-img" />
      <a href="" class="entry-title"><h3>Adventures of a Little 
Robot</h3></a>
    </div>
    <div class="entry col-xs-4 col-sm-3 col-md-2">
      <div class="star-box">
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star"></i>
        <i class="fa fa-star star"></i>
      </div>
      <img src="http://placeimg.com/300/300/6" alt="" class="entry-img" />
      <a href="" class="entry-title"><h3>Adventures of a Little 
Robot</h3></a>
    </div>
    <div class="entry col-xs-4 col-sm-3 col-md-2">
      <div class="star-box">
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star"></i>
        <i class="fa fa-star star"></i>
      </div>
      <img src="http://placeimg.com/300/300/7" alt="" class="entry-img" />
      <a href="" class="entry-title"><h3>Adventures of a Little 
Robot</h3></a>
    </div>
    <div class="entry col-xs-4 col-sm-3 col-md-2 visible-md visible-sm visible-lg">
      <div class="star-box">
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star"></i>
        <i class="fa fa-star star"></i>
      </div>
      <img src="http://placeimg.com/300/300/8" alt="" class="entry-img" />
      <a href="" class="entry-title"><h3>Adventures of a Little 
Robot</h3></a>
    </div>
    <div class="entry col-xs-4 col-sm-3 col-md-2 visible-md visible-lg">
      <div class="star-box">
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star"></i>
        <i class="fa fa-star star"></i>
      </div>
      <img src="http://placeimg.com/300/300/9" alt="" class="entry-img" />
      <a href="" class="entry-title"><h3>Adventures of a Little 
Robot</h3></a>
    </div>
    <div class="entry col-xs-4 col-sm-3 col-md-2 visible-lg visible-md">
      <div class="star-box">
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star"></i>
        <i class="fa fa-star star"></i>
      </div>
      <img src="http://placeimg.com/300/300/16" alt="" class="entry-img" />
      <a href="" class="entry-title"><h3>Adventures of a Little 
Robot</h3></a>
    </div>
  </div>
  
  <div class="row recent-entry">
    <div class="top-entry-head">
      <h3 class="pull-left">Recent Activity</h3>
      <div class="pull-right arrows-box">
        <a href="#">See all... </a>
        <button class="arrow"><i class="fa fa-arrow-left"></i></button>
        <button class="arrow"><i class="fa fa-arrow-right"></i></button>
      </div>
    </div>
    <div class="entry col-xs-4 col-sm-3 col-md-2">
      <div class="star-box">
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star"></i>
        <i class="fa fa-star star"></i>
      </div>
      <img src="http://placeimg.com/300/300/10" alt="" class="entry-img" />
      <a href="" class="entry-title"><h3>Adventures of a Little 
Robot</h3></a>
    </div>
    <div class="entry col-xs-4 col-sm-3 col-md-2">
      <div class="star-box">
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star"></i>
        <i class="fa fa-star star"></i>
      </div>
      <img src="http://placeimg.com/300/300/11" alt="" class="entry-img" />
      <a href="" class="entry-title"><h3>Adventures of a Little 
Robot</h3></a>
    </div>
    <div class="entry col-xs-4 col-sm-3 col-md-2 visible-lg visible-md visible-sm">
      <div class="star-box">
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star"></i>
        <i class="fa fa-star star"></i>
      </div>
      <img src="http://placeimg.com/300/300/12" alt="" class="entry-img" />
      <a href="" class="entry-title"><h3>Adventures of a Little 
Robot</h3></a>
    </div>
    <div class="entry col-xs-4 col-sm-3 col-md-2">
      <div class="star-box">
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star"></i>
        <i class="fa fa-star star"></i>
      </div>
      <img src="http://placeimg.com/300/300/13" alt="" class="entry-img" />
      <a href="" class="entry-title"><h3>Adventures of a Little 
Robot</h3></a>
    </div>
    <div class="entry col-xs-4 col-sm-3 col-md-2 visible-lg visible-md">
      <div class="star-box">
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star"></i>
        <i class="fa fa-star star"></i>
      </div>
      <img src="http://placeimg.com/300/300/14" alt="" class="entry-img" />
      <a href="" class="entry-title"><h3>Adventures of a Little 
Robot</h3></a>
    </div>
    <div class="entry col-xs-4 col-sm-3 col-md-2 visible-md visible-lg">
      <div class="star-box">
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star star-full"></i>
        <i class="fa fa-star star"></i>
        <i class="fa fa-star star"></i>
      </div>
      <img src="http://placeimg.com/300/300/15" alt="" class="entry-img" />
      <a href="" class="entry-title"><h3>Adventures of a Little 
Robot</h3></a>
    </div>
  </div>
  
</div>

<footer>
  <p class="copyright">All rights reserved</p>
  <h2>Footer Stuff Goes here.....</h2>
</footer>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/samuherek/wireframe-in-quick-bootstrap-for-a-client-dYXoxR */



.navbar {
  margin-bottom: 0;
}
.navbar-brand img {
  margin-top: -10px;
  width: 30px;
  height: auto;
}
.brand-title {
  margin: 0;
  font-size: 1.05em;
}
.jumbotron {
  min-height: 40rem;
}
.jumbotron h2 {
  margin: 5rem auto;
  max-width: 60rem;
}

/* Entry */

.top-entry-head {
  width: 100%;
  height: 7rem;
}
.top-entry-head h3 {
  padding-left: 15px;
  text-transform: uppercase;
}
.top-entry .top-entry-head h3, .top-entry .top-entry-head a {
  color: #F1A455;
}
.most-entry .top-entry-head h3, .most-entry .top-entry-head a {
  color: #E0252D;
}
.recent-entry .top-entry-head h3, .recent-entry .top-entry-head a {
  color: #8EC44B;
}
.arrows-box {
  padding-right: 15px;
  margin-top: 20px;
}
.arrows-box a {
  margin-right: 15px;
}
.arrow {
  color: #CCCCCD;
  background: white;
  outline: none;
  border: 1px solid #CCCCCD;
}
.arrow:hover {
  color: #333333;
  border: 1px solid #333333;
}
.top-entry .top-entry-head .arrow {
  color: #EFA35C;
  border: 1px solid #EFA35C;
}
.top-entry .top-entry-head .arrow:hover {
  color: #fff;
  border: 1px solid #EFA35C;
  background: #EFA35C;
}
.most-entry .top-entry-head .arrow {
  color: #DE2834;
  border: 1px solid #DE2834;
}
.most-entry .top-entry-head .arrow:hover {
  color: #fff;
  border: 1px solid #DE2834;
  background: #DE2834;
}
.recent-entry .top-entry-head .arrow {
  color: #8FC253;
  border: 1px solid #8FC253;
}
.recent-entry .top-entry-head .arrow:hover {
  color: #fff;
  border: 1px solid #8FC253;
  background: #8FC253;
}
.entry {
  /*min-height: 350px;*/
  position: relative;
}
.star-box {
  position: absolute;
  z-index: 1;
  padding: 0.5rem 0 0 1rem;
  cursor: pointer;
}
.star {
  color: #fff;
  opacity: 0.5;
}
.star-full {
  color: #F3A54D;
  opacity: 1;
}
.entry-img {
  position: relative;
  width: 100%;
}
.entry-title{
  position: relative;
  bottom: 0;
}
.entry-title h3 {
  color: #282526;
}
.review-hover {
  display: none;
}

.entry:hover .review-hover {
  display: block;
  position: absolute;
  top: 4rem;
  padding: 2rem;
}
.top-entry .entry:hover .entry-img {
  opacity: 0.05;
  border: 1px solid black;
}
.review-name {
  font-weight: bold;
}
.most-entry h3, .recent-entry h3 {
  font-size: 1.3em;
}
footer {
  background: #333;
  height: 30rem;
}
footer p {
  color: #ccc;
  line-height: 5rem;
  padding-left: 15px;
}
footer h2 {
  color: #ccc;
  padding-left: 15px;
}
.row {
  margin-bottom: 30px;
}






/* Bootstrap Resets */
.btn-primary {
  background: #8cc641;
  border-color: #8cc641;
}
.btn-primary:hover {
  background: #88c23d;
  border-color: #88c23d;
}
.jumbotron {
  background: linear-gradient(to right, rgba(246,169,68,1) 0%, rgba(227,30,37,1) 100%);
}
a {
  color: #8EC44B;
}
a:hover {
  color: #62951f;
}

Comments