LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

#f42e78

#c17afc

#f42e78

#c17afc

#6681ea

#7e43aa

#efbad3

#a254f2

#f3dcfb

#679fe4

#d0ffae

#34ebe9

#ff839d

#f50b9a

#6acbe0

#6859ea

CSS
/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Estrutura*/
body {
  background: faf9f2;
}

/* grid */
.grid {
  display: block;
  width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 105px;
  margin-bottom: 105px;
}

/* card */
.card {
  display: inline-block;
  background-color: #fff;
  width: 120px;
  height: 160px;
  margin-left: 35px;
  margin-bottom: 70px;
  box-shadow: 0px 1px 2px rgba(0,0,0, 0.2);
}

/* Selecionando o primeiro card a cada 4 cards */
.card:nth-child(4n + 1) {
  margin-left: 0;
}

/* card_gradient */
.card__gradiente {
  display: block;
  width: 120px; /* 100% */
  height: 100px;
  background-color: #000;
}

.card__descricao {
  display: block;
  padding-left: 10px;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  font-family: "Inconsolata";
  font-size: 14px;
}

.card__text {
  display: block;
  color: #807e94;
  margin-bottom: 8px;
}

.card__text i {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #000;
  border-radius: 50%;
  margin-right: 5px;
}


/* card--gradiente-1 */
.card--gradiente-1 .card__gradiente { background-image: linear-gradient(to top right, #c17afc, #f42e78);}
.card--gradiente-1 .card__cor-final { background-color: #f42e78;}
.card--gradiente-1 .card__cor-inicial { background-color: #c17afc;}

/* card--gradiente-2 */
.card--gradiente-2 .card__gradiente { background-image: linear-gradient(to top right, #fec180, #f42e78);}
.card--gradiente-2 .card__cor-final { background-color: #f42e78;}
.card--gradiente-2 .card__cor-inicial { background-color: #fec180;}

/* card--gradiente-3 */
.card--gradiente-3 .card__gradiente { background-image: linear-gradient(to top right, #7e43aa, #6681ea);}
.card--gradiente-3 .card__cor-final { background-color: #6681ea;}
.card--gradiente-3 .card__cor-inicial { background-color: #7e43aa;}

/* card--gradiente-4 */
.card--gradiente-4 .card__gradiente { background-image: linear-gradient(to top right, #a254f2, #efbad3);}
.card--gradiente-4 .card__cor-final { background-color: #efbad3;}
.card--gradiente-4 .card__cor-inicial { background-color: #a254f2;}

/* card--gradiente-5 */
.card--gradiente-5 .card__gradiente { background-image: linear-gradient(to top right, #679fe4, #f3dcfb);}
.card--gradiente-5 .card__cor-final { background-color: #f3dcfb;}
.card--gradiente-5 .card__cor-inicial { background-color: #679fe4;}

/* card--gradiente-6 */
.card--gradiente-6 .card__gradiente { background-image: linear-gradient(to top right, #34ebe9, #d0ffae);}
.card--gradiente-6 .card__cor-final { background-color: #d0ffae;}
.card--gradiente-6 .card__cor-inicial { background-color: #34ebe9;}

/* card--gradiente-7 */
.card--gradiente-7 .card__gradiente { background-image: linear-gradient(to top right, #f50b9a, #ff839d);}
.card--gradiente-7 .card__cor-final { background-color: #ff839d;}
.card--gradiente-7 .card__cor-inicial { background-color: #f50b9a;}

/* card--gradiente-8 */
.card--gradiente-8 .card__gradiente { background-image: linear-gradient(to top right, #6859ea, #6acbe0);}
.card--gradiente-8 .card__cor-final { background-color: #6acbe0;}
.card--gradiente-8 .card__cor-inicial { background-color: #6859ea;}

Description

https://youtu.be/VA-cqWECfHU
Term
Thu, 02/22/2018 - 23:51

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv