How to create a "card" with CSS

Learn How to create a colorful horizontal card with CSS similar to Google Tips page.

DEMO

Source code:

<!- abonzertv.blogspot.com, unexpectedweb.blogspot.com -->

<style>
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.column {
  float: left;
  width: 100%;
  display: block;
  margin-bottom: 16px;
  padding: 0 8px;
}


.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 5px 16px;
}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

.title {
  color: #424242;
}


.hovdiv.green:hover {
  background-color: #4caf50;
  color:#fdfdfd !important;
}

.hovdiv.red:hover {
  background-color: #f44336;
  color:#fdfdfd !important;
}

.hovdiv.pink:hover {
  background-color: #e91e63;
  color:#fdfdfd !important;
}

.hovdiv.cyen:hover {
  background-color: #009688;
  color:#fdfdfd !important;
}

.hovdiv:hover .title{
   color:#fdfdfd !important;
  }

.description{
color:#757575;
}

.hovdiv:hover .description{
   color:#fdfdfd !important;
}

</style>





<h2>WebTools</h2>
<p>Many Useful web tools developed in JavaScript and other pages.</p>
<br>

  <a href="http://unexpectedweb.blogspot.in/p/home.html">
  <div class="column">
    <div class="card">
      
      <div class="container hovdiv green">
        <h5 class="codetype">PAGE</h5>
        <h3 class="title" style="color:#1b5e20;">About</h3>
        <p class="description"> Blog where you'll find some interesting things around the web, that you never knew existed.</p>
                
      </div>
    </div>
  </div>
  </a>


  <a href="http://unexpectedweb.blogspot.in/p/gmail-tracking-url.html">
  <div class="column">
    <div class="card">
      
      <div class="container hovdiv red">
        <h5 class="codetype">JS, GMAIL, Google Analytics</h5>
        <h3 class="title" style="color:#b71c1c;">Gmail Tracking URL</h3>
        <p class="description">Track your outgoing Gmail messages have been read or not.</p>
                
      </div>
    </div>
  </div>
  </a>


  <a href="http://unexpectedweb.blogspot.in/p/epoch.html">
  <div class="column">
    <div class="card">
      
      <div class="container hovdiv cyen">
        <h5 class="codetype">JAVASCRIPT, </h5>
        <h3 class="title" style="color:#1c67b7;">Epoch Converter</h3>
        <p class="description">Convert normal Date and Time into epoch time, also known as Unix time </p>
                
      </div>
    </div>
  </div>
  </a>


  <a href="http://unexpectedweb.blogspot.in/p/youtube-download-link-extractor.html">
  <div class="column">
    <div class="card">
      
      <div class="container hovdiv pink">
        <h5 class="codetype">JAVASCRIPT, YOUTUBE, HACK</h5>
        <h3 class="title" style="color:#b71caa;">YouTube Download link Extractor</h3>
        <p class="description">Find the direct download link of YouTube video from the source-code of page.</p>
                
      </div>
    </div>
  </div>
  </a>

  <a href="http://unexpectedweb.blogspot.in/p/url-decoder.html">
  <div class="column">
    <div class="card">
      
      <div class="container hovdiv cyen">
        <h5 class="codetype">JAVASCRIPT</h5>
        <h3 class="title" style="color:#1c67b7;">URL Decoder</h3>
        <p class="description">Decode and Encode URI Component, Simplify the complex link. </p>
                
      </div>
    </div>
  </div>
  </a>
  
  

You Can add more color for Cards Just Add Following code before </style>.

.hovdiv.cyen:hover {
  background-color: #009688;
  color:#fdfdfd !important;
}

Select Color from below table.

Add New Card:

<a href="http://yourlink.com">
  <div class="column">
    <div class="card">
      // select color of Div, add previous in style. here cyen is the class name

      <div class="container hovdiv cyen"> 
        <h5 class="codetype">PAGE</h5>
        <h3 class="title" style="color:#1b5e20;">About</h3> // Select Dark Color in same range
        <p class="description"> Blog where you'll find some interesting things around the web, that you never knew existed.</p>
                
      </div>
    </div>
  </div>
  </a>