Styleguide Test - Cards

In this example below you will see how to do a Styleguide Test - Cards with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Styleguide Test - Cards</title>
  <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='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Montserrat:400,700'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

   
<div class="container">
  <h5 class="section-header">Active Cards</h5>
    <p>No one <strong>rejects, dislikes, or avoids pleasure</strong> itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. </p>
  <label for="visuals"><i class="pe-7s-edit"></i>2 days ago</label>
  <div class="card active">
    <div class="card-hero">
      <div class="card-hero-info">
        <h6 class="card-hero-subtitle">David H. started this decision</h6>
        <a class="favorite"><i class="favorite fa fa-star  fa-2x"></i></a>
      </div>
    </div><!-- /.card-hero -->
    <div class="card-body">
      <header>
        <a class="action-sheet-icon" href="">
        <i class="fa fa-ellipsis-v fa-2x"></i>
        </a>
        <h3 class="title">Satuday Brunch</h3>      <div class="choices">
          <i class="fa fa-th-large fa-2x"></i>25 choices available
        </div>      
      </header>   
      <main>
        8 others participating this decision
        <ul class="group-widget">
          <li>
            <img src="http://placehold.it/22x22&text=>" alt="" class="avatar" />
            John C.
          </li>
          <li>
            <img src="http://placehold.it/22x22&text=>" alt="" class="avatar" />
            Lin L.
          </li>
          <li>
            <img src="http://placehold.it/22x22&text=>" alt="" class="avatar" />
            Susuan G.
          </li>
          <li>
            <img src="http://placehold.it/22x22&text=>" alt="" class="avatar" />
            Rohan. S
          </li>
          <li>
            <i class="fa fa-plus-circle fa-2x"></i>
            +4 Others
          </li>
        </ul>
      </main>
      
      <a href="" class="cta cta-go"><i class="fa fa-check-square-o fa-2x"></i>Vote Now</a>
    </div><!-- /.card-body -->
  </div><!-- /.card.active-->
</div><!-- /.container -->

<div class="container">
  <h5 class="section-header">Archived Cards</h5>
    <p>No one <strong>rejects, dislikes, or avoids pleasure</strong> itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. </p>
  <label>Archived on April, 12th 2016</label>
  <div class="card archived">
    <div class="card-hero">
      <div class="card-hero-info">
        <h6 class="card-hero-subtitle">Rachel L. started this decision</h6>
        <a class="favorite"><i class="favorite fa fa-star  fa-2x"></i></a>
      </div>
    </div><!-- /.card-hero -->
    <div class="card-body">
      <header>
        <a class="action-sheet-icon" href="">
        <i class="fa fa-ellipsis-v fa-2x"></i>
        </a>
        <h3 class="title">Saturday Hiking Routes</h3>      <div class="choices">
          <i class="fa fa-th-large fa-2x"></i>7 choices were available in this decision
        </div>      
      </header>   
      <main>
        8 people participated in this decision
      </main>
      
      <a href="" class="cta cta-go"><i class="fa fa-pie-chart fa-2x"></i>View Decision Breakdown</a>
    </div><!-- /.card-body -->
  </div><!-- /.card.archived-->
  
</div><!-- /.container -->

<div class="container">
  <h5 class="section-header">Created Cards</h5>
    <p>No one <strong>rejects, dislikes, or avoids pleasure</strong> itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. </p>
  <label>Created on May, 1st 2016</label>
  <div class="card created">
    <div class="card-body">
      <header>
        <a class="action-sheet-icon" href="">
        <i class="fa fa-ellipsis-v fa-2x"></i>
        </a>
        <h3 class="title">Saturday Hiking Routes</h3>      <div class="choices">
          <i class="fa fa-th-large fa-2x"></i>16 choices were available in this decision
        </div>      
      </header>   
      <main>
        <ul class="choice-card-list">
          <li>
            <img src="https://s-media-cache-ak0.pinimg.com/736x/e7/f2/98/e7f298f2db462652fd8b9a1ee888458a.jpg" alt="" />
            <span class="mini-card-title">Title 1<span>
          </li>
          <li>
            <img src="https://d39fx46bzv2q62.cloudfront.net/wp-content/uploads/2014/11/g9.jpg" alt="" />
            <span class="mini-card-title">Title 1<span>
          </li>
          <li>
            <img src="https://m1.behance.net/rendition/modules/141048491/disp/b8c8a47a1b5e7856968872c40d60ec7e.jpg" alt="" />
            <span class="mini-card-title">Title 1<span>
          </li>
          <li>
            <img src="http://www.fubiz.net/wp-content/uploads/2014/11/Lotta-Nieminen_Google_07-640x553.jpg" alt="" />
            <span class="mini-card-title">Title 1<span>
          </li>
          <li class="view-all">
            <i class="fa fa-th fa-2x"></i>
            <span class="mini-card-title">View All<span>
          </li>
        </ul>
      </main>
      
      <a href="" class="cta cta-go"><i class="fa fa-hourglass-start fa-2x"></i>Start a New Decision</a>
    </div><!-- /.card-body -->
  </div><!-- /.card.archived-->
  
</div><!-- /.container -->
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/amody/styleguide-test-cards-KzLozV */
:before, :after {
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: #34D293;
  color: #fff;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

.container {
  position: relative;
  display: block;
  width: 500px;
  padding: 30px 25px;
}

h3 {
  padding-left: 25px;
  margin-bottom: 0;
}

h5 {
  font-size: 17px;
}

h6 {
  font-size: 16px;
}

label, .card-hero-subtitle, .card-options-subtitle {
  font-size: 12px;
  display: inline-block;
  max-width: 100%;
  margin-bottom: 10px;
  font-weight: 700;
  letter-spacing: .5px;
}

p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  margin-bottom: 20px;
}

strong {
  font-weight: 700;
  letter-spacing: .25px;
}

.pre-title {
  font-weight: 400;
  color: rgba(60, 78, 90, 0.5);
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
}

.section-header {
  font-weight: 400;
  margin-bottom: 10px;
  clear: both;
  float: none;
}
.section-header:before, .section-header :after {
  content: " ";
  display: table;
}

.title {
  color: #3c4e5a;
  font-weight: 400;
  font-size: 25px;
}

.card {
  color: #28333b;
  width: 100%;
  min-width: 300px;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);
}
.card .card-hero {
  height: 225px;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}
.card .card-hero:hover .card-hero-info {
  opacity: 1;
  transition: opacity, .3s;
}
.card .card-hero-info {
  display: block;
  opacity: 1;
  transition: opacity, .3s;
  height: 35px;
  position: absolute;
  top: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  font-size: 12px;
}
.card .card-hero-info .card-hero-subtitle {
  position: absolute;
  margin-bottom: 0;
  color: #fff;
  bottom: 10px;
  left: 15px;
}
.card .card-hero-info .favorite {
  display: block;
  color: #fff;
  position: absolute;
  margin-bottom: 0;
  color: #fff;
  right: 3px;
  bottom: 1px;
  width: 25px;
  height: 25px;
}
.card .card-hero-info .favorite i {
  font-size: 20px;
}
.card .card-body {
  position: relative;
  padding: 15px 20px 20px 20px;
}
.card .action-sheet-icon {
  position: absolute;
  width: 35px;
  height: 35px;
  top: 17px;
  right: 5px;
  color: rgba(0, 0, 0, 0.3);
  font-size: 10px;
  transition: color, .3s;
  text-align: center;
}
.card .action-sheet-icon:hover {
  color: #16563C;
  transition: color, .3s;
}
.card h3 {
  padding-left: 0;
}
.card .choices {
  height: 20px;
  color: #bfbfbf;
  line-height: 20px;
  font-size: 12px;
  letter-spacing: .5px;
}
.card .choices i {
  font-size: 15px;
  margin-right: 5px;
}
.card .cta {
  display: block;
  background: rgba(0, 0, 0, 0.1);
  padding: 20px 15px;
  text-align: center;
  color: #fff;
  text-decoration: none !important;
  font-weight: 700;
  letter-spacing: .75px;
  text-transform: uppercase;
  font-size: 10px;
  position: relative;
  transition: color, .3s;
}
.card .cta:hover {
  background: #28333b;
  transition: color, .3s;
}
.card .cta i {
  font-size: 12px;
  margin-right: 5px;
}
.card main {
  margin: 10px 0 20px 0;
}
.card ul.group-widget {
  list-style: none;
  padding: 0;
  margin: 0;
}
.card ul.group-widget li {
  display: inline-block;
  padding: 20px 15px 10px 0;
  font-size: 12px;
  font-weight: 400;
}
.card ul.group-widget li img, .card ul.group-widget li i {
  display: block;
  border-radius: 25px;
  margin: 0 auto 10px auto;
  text-align: center;
  font-size: 25px;
  color: grey;
}

.card.active .card-hero {
  background-image: url(https://d13yacurqjgara.cloudfront.net/users/2758/screenshots/1081469/gmail_mountain_day.jpg);
}

.card.archived .card-hero {
  background-image: url(http://www.fubiz.net/wp-content/uploads/2014/11/Lotta-Nieminen_Google_07-640x553.jpg);
}

.card.created ul.choice-card-list {
  margin: 0;
  padding: 0;
  display: block;
  height: 125px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 15px 0 15px 10px;
}
.card.created ul.choice-card-list li {
  display: inline-block;
  margin: 0 20px 0 0;
  height: 125px;
  width: 100px;
  overflow: hidden;
  box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.2);
}
.card.created ul.choice-card-list li img {
  display: block;
  width: 100%;
  height: auto;
}
.card.created ul.choice-card-list li .mini-card-title {
  font-size: 12px;
  padding: 5px;
  display: block;
}
.card.created ul.choice-card-list li.view-all i {
  font-size: 20px;
  text-align: center;
  width: 100%;
  height: auto;
  line-height: 85px;
  color: grey;
}
.card.created ul.choice-card-list li.view-all .mini-card-title {
  text-align: center;
  color: grey;
}

Comments