blocks

5 block page that's responsive with different color overlays on each block

by Ian Arsenault

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="wrapper">
  <div class="row header">
    <div class="col-sm-12 headFont jumboHero text-center">Monsieur Bigglesworth</div>
  </div>

  <div class="row" id="rows">
    <a href="#" id="rowLink">
      <div class="col-sm-6 col-md-6 col-lg-12 text-center portfolio">
        <div id="portfolio-overlay" class="title">Portfolio</div>
      </div>
    </a>
    <div class="col-sm-6 col-md-6 col-lg-4 text-center tools">
      <div id="tools-overlay" class="title">Tools</div>
    </div>
    <div class="col-sm-6 col-md-6 col-lg-4 text-center about">
      <div id="about-overlay" class="title">About</div>
    </div>
    <div class="col-sm-6 col-md-6 col-lg-4 text-center contact">
      <div id="contact-overlay" class="title">Contact</div>
    </div>
  </div>
</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Poiret+One);
body {
  font-family: 'Poiret One', cursive;
}

html,
body,
.wrapper {
  height: 100%;
}

/* Header/Jumbotron Section */

.header {
  height: 40%;
  background-color: red;
}


/* Jumbotron Font Styling & Size */

.headFont {
  font-size: 10vh;
  color: white;
  text-decoration: underline;
  text-align: center;
  top: 15%;
}


/* Sets hyperlink color */

#rowLink {
  color: white;
}
/* Pushes box titles down */
.title {
  padding-top: 40px;
}

/*****************************************
            Content Blocks 
******************************************/


/* Rows-content Homepage */

#rows {
  height: 30%;
  font-family: 'Poiret One', cursive;
  /*font-size: 2.3vh;*/
  font-size: 24px;
  color: white;
}

.portfolio {
  height: 100%;
  /*background: red; /* For browsers that do not support gradients
    background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
    background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
    background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
  background: url("https://www.topdraw.com/assets/uploads/2015/07/HiRes2.jpg");
  -webkit-background-size: ;
  background-size: cover;
  background-position: center;
}


/* Hover effects for portfolio block */

.portfolio:hover {
  text-decoration: underline;
}


/* Portfolio Overlay Block */

#portfolio-overlay {
  background: rgb(0, 0, 0);
  /* fallback color*/
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  max-width: 100%;
}

/* Tools Block */

.tools {
  background-color: green;
  height: 100%;
}


/* Hover effects for tools block */

.tools:hover {
  text-decoration: underline;
}


/* Tools Overlay */

#tools-overlay {
  background: rgb(0, 0, 0);
  /* fallback color*/
  background: rgba(0, 0, 0, 0.4);
  height: 100%;
  max-width: 100%;
}


/* About Me Block */

.about {
 ...