Product collection

In this example below you will see how to do a Product collection with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Product collection</title>
  <link href="https://fonts.googleapis.com/css?family=Grand+Hotel|Open+Sans:300,400,600" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

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

  
</head>

<body>

  
<!-- design inspiration from:-->
<!-- https://dribbble.com/shots/1573896-Warehouse/attachments/242116-->
<div class="seperator"></div>
<div class="container">
  <section class="collection collection--left collection__color--primary">
    <div class="collection__card">
      <div class="collection__card-image"><img class="collection__card-image-pic" src="http://bit.ly/2rYPwmV"/></div>
      <div class="collection__card-name">
        <h3 class="collection__card-name-title">seven pots</h3>
      </div>
      <div class="collection__card-collection">
        <h4 class="collection__card-collection-title">collection</h4>
      </div>
    </div>
    <div class="collection__product">
      <div class="collection__product-group collection__product-group--secondary">
        <div class="product__item-description">
          <h2 class="product__item-description-title">Kettle Thermo Pot</h2>
        </div>
        <div class="product__item-price">
          <h2 class="product__item-price-title">275.50 $</h2>
        </div><a class="product__item-favs" href="#">
          <h4 class="product__item-favs-title"> <img class="product__item-favs-icon" src="http://bit.ly/2rlcngo"/>add to favs</h4></a>
      </div>
      <div class="collection__product-group collection__product-group--image">
        <div class="product__item-image"><img class="product__item-image-pic" src="http://bit.ly/2qjxLOZ"/></div>
      </div>
      <div class="collection__product-group collection__product-group--primary">
        <div class="product__item-designer"><img class="product__item-designer-image" src="http://bit.ly/2qAz10Z"/>
          <h4 class="product__item-designer-title">by Norm Architects</h4>
        </div>
        <div class="product__item-name">
          <h1 class="product__item-name-title">Tea O'Clock</h1>
        </div>
      </div>
    </div>
  </section>
  <div class="seperator seperator--in-content"></div>
  <section class="collection collection--right collection__color--secondary">
    <div class="collection__card">
      <div class="collection__card-image"><img class="collection__card-image-pic" src="http://bit.ly/2qZYwce"/></div>
      <div class="collection__card-name">
        <h3 class="collection__card-name-title">9 & 3/4 cups</h3>
      </div>
      <div class="collection__card-collection">
        <h4 class="collection__card-collection-title">collection</h4>
      </div>
    </div>
    <div class="collection__product">
      <div class="collection__product-group collection__product-group--secondary">
        <div class="product__item-description">
          <h2 class="product__item-description-title">Kitty Potter</h2>
        </div>
        <div class="product__item-price">
          <h2 class="product__item-price-title">1,005.50 $</h2>
        </div><a class="product__item-favs product__item-favs--faved" href="#">
          <h4 class="product__item-favs-title"> <img class="product__item-favs-icon" src="http://bit.ly/2rlcngo"/>favd</h4></a>
      </div>
      <div class="collection__product-group collection__product-group--image">
        <div class="product__item-image"><img class="product__item-image-pic" src="http://bit.ly/2r0ilSH"/></div>
      </div>
      <div class="collection__product-group collection__product-group--primary">
        <div class="product__item-designer"><img class="product__item-designer-image" src="https://specials-images.forbesimg.com/imageserve/538428136/960x0.jpg?fit=scale"/>
          <h4 class="product__item-designer-title">by Hedwig Designs</h4>
        </div>
        <div class="product__item-name">
          <h1 class="product__item-name-title">Muggle mugs</h1>
        </div>
      </div>
    </div>
  </section>
</div>
<div class="seperator"></div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/jjbert18/product-collection-aWaLJN */
* {
  box-sizing: border-box;
}

body {
  background-color: #E9EAE2;
  color: #A1A1A1;
  font-family: 'Open Sans', sans-serif;
}

h1 {
  font-size: 3rem;
  font-weight: 100;
}

h2 {
  font-size: 1.5rem;
  font-weight: 300;
  margin: 0 0 .5rem;
}

h3 {
  font-family: 'Grand Hotel', cursive;
  font-size: 2rem;
  margin: 0;
  text-align: center;
}

h4 {
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .125em;
  text-transform: uppercase;
}

@media (min-width: 600px) and (max-width: 960px) {
  .container {
    display: flex;
    flex-wrap: wrap;
  }
}

.seperator {
  height: 3rem;
  width: 100%;
}

@media (min-width: 600px) and (max-width: 960px) {
  .seperator--in-content {
    display: none;
  }
}

.collection {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
@media (min-width: 600px) and (max-width: 960px) {
  .collection {
    flex-basis: 50%;
  }
}

@media (min-width: 960px) {
  .collection--left {
    flex-direction: row;
  }
}
.collection--left .collection__card:after {
  left: 100%;
}

@media (min-width: 960px) {
  .collection--right {
    flex-direction: row-reverse;
  }
}
.collection--right .collection__card:after {
  right: 100%;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.collection__color--primary {
  background-color: #7DD5C9;
}
.collection__color--primary .collection__card {
  background-color: #7DD5C9;
  color: #3ab2a2;
}
.collection__color--primary .collection__card:after {
  background-image: linear-gradient(135deg, #7DD5C9 1em, transparent 1em), linear-gradient(45deg, #7DD5C9 1em, transparent 1em), linear-gradient(135deg, rgba(161, 161, 161, 0.6) 0%, transparent 70%), linear-gradient(45deg, rgba(161, 161, 161, 0.7) 0%, transparent 70%);
  background-size: 2em 1.5em;
  background-repeat: repeat-y;
  font-size: 1rem;
  padding-bottom: 1em;
}
@media (max-width: 959px) {
  .collection__color--primary .collection__product:before, .collection__color--primary .collection__product:after {
    background-image: linear-gradient(-135deg, #7DD5C9 1em, transparent 1em), linear-gradient(135deg, #7DD5C9 1em, transparent 1em), linear-gradient(-135deg, rgba(161, 161, 161, 0.6) 0%, transparent 70%), linear-gradient(135deg, rgba(161, 161, 161, 0.7) 0%, transparent 70%);
    background-size: 1.5em 1.5em;
    background-repeat: repeat-x;
    font-size: 1rem;
    padding-right: 1em;
  }
}

.collection__color--secondary {
  background-color: #F8C255;
}
.collection__color--secondary .collection__card {
  background-color: #F8C255;
  color: #de9709;
}
.collection__color--secondary .collection__card:after {
  background-image: linear-gradient(135deg, #F8C255 1em, transparent 1em), linear-gradient(45deg, #F8C255 1em, transparent 1em), linear-gradient(135deg, rgba(161, 161, 161, 0.6) 0%, transparent 70%), linear-gradient(45deg, rgba(161, 161, 161, 0.7) 0%, transparent 70%);
  background-size: 2em 1.5em;
  background-repeat: repeat-y;
  font-size: 1rem;
  padding-bottom: 1em;
}
@media (max-width: 959px) {
  .collection__color--secondary .collection__product:before, .collection__color--secondary .collection__product:after {
    background-image: linear-gradient(-135deg, #F8C255 1em, transparent 1em), linear-gradient(135deg, #F8C255 1em, transparent 1em), linear-gradient(-135deg, rgba(161, 161, 161, 0.6) 0%, transparent 70%), linear-gradient(135deg, rgba(161, 161, 161, 0.7) 0%, transparent 70%);
    background-size: 1.5em 1.5em;
    background-repeat: repeat-x;
    font-size: 1rem;
    padding-right: 1em;
  }
}

.collection__card {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  position: relative;
  width: 100%;
  z-index: 10;
}
@media (min-width: 960px) {
  .collection__card {
    max-width: 23%;
  }
}
.collection__card:after {
  content: '';
  width: 2em;
  position: absolute;
  top: -100%;
  bottom: -100%;
}

.collection__product {
  align-items: center;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-around;
  margin: 0 1rem 1rem;
  padding: 0 5%;
  position: relative;
}
@media (min-width: 960px) {
  .collection__product {
    flex-direction: row;
    margin: 0;
  }
}
@media (max-width: 959px) {
  .collection__product:before, .collection__product:after {
    content: '';
    height: 2em;
    position: absolute;
    left: 0;
    right: 0;
  }
}
@media (max-width: 959px) {
  .collection__product:before {
    top: 0;
  }
}
@media (min-width: 960px) {
  .collection__product:before {
    background-color: #FFFFFF;
    content: '';
    position: absolute;
    top: -100%;
    bottom: -100%;
    left: 0;
    right: 0;
  }
}
@media (max-width: 959px) {
  .collection__product:after {
    bottom: 0;
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}

.collection__product-group {
  z-index: 10;
}

.collection__product-group--primary {
  padding: 3rem 0 1.5rem;
  text-align: center;
}

.collection__product-group--secondary {
  color: rgba(161, 161, 161, 0.75);
  padding: 4rem 0 2rem;
  text-align: center;
}
@media (min-width: 960px) {
  .collection__product-group--secondary {
    align-self: flex-start;
    padding: 4rem 0 0;
  }
}

@media (min-width: 960px) {
  .collection__product-group--image {
    align-self: flex-end;
    flex-basis: 35%;
    margin: 0 5% -5%;
  }
}

.product__item-image {
  margin: 0 auto;
  max-width: 75%;
}
@media (min-width: 960px) {
  .product__item-image {
    max-width: 100%;
  }
}

.product__item-image-pic {
  display: block;
  margin: 0 auto;
  max-height: 100%;
  max-width: 100%;
}

.collection__card-image {
  margin-bottom: 1rem;
}
@media (min-width: 960px) {
  .collection__card-image {
    margin-top: 3rem;
  }
}

.collection__card-image-pic {
  max-width: 100%;
  max-height: 100%;
  width: 7rem;
  height: auto;
}

.collection__card-collection-title {
  margin-bottom: 0;
}

.collection__card-collection-title,
.product__item-designer-title {
  font-weight: 700;
}

.product__item-designer {
  color: rgba(161, 161, 161, 0.75);
  margin-top: 1rem;
  text-align: center;
}
.product__item-designer:after {
  background-color: rgba(161, 161, 161, 0.75);
  content: '';
  display: block;
  height: 2px;
  left: 50%;
  position: relative;
  text-align: center;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 1rem;
}

.product__item-designer-image {
  border-radius: 100%;
  max-width: 50px;
  max-height: 50px;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}

.product__item-favs {
  color: rgba(161, 161, 161, 0.75);
  text-decoration: none;
}
.product__item-favs:hover {
  text-decoration: underline;
}
.product__item-favs:hover .product__item-favs-icon {
  -webkit-filter: initial;
          filter: initial;
  opacity: 1;
}

.product__item-favs--faved .product__item-favs-icon {
  -webkit-filter: initial;
          filter: initial;
  opacity: 1;
}

@media (min-width: 960px) {
  .product__item-name-title {
    padding: 0 5%;
  }
}

.product__item-favs-icon {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  margin: .5rem;
  opacity: .5;
  vertical-align: middle;
  width: 1rem;
}

Comments