22+ CSS Card Examples

This post contains a total of 22+ Hand-Picked CSS Card Examples with Source Code. All these Cards are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Card Examples

1. Pure CSS Card UI

Made by Adam Kuhn. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Raleway+Dots" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
<style>
@charset "UTF-8";
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: "Raleway Dots";
  background: radial-gradient(ellipse at bottom left, #FE8D58, #FE8D58 20%, transparent 20%), linear-gradient(to bottom, #B9ACCA, #fff);
}
body input[type=radio] {
  position: absolute;
  z-index: 999;
  left: 0;
  bottom: 0;
  width: 33.33%;
  opacity: 0;
  overflow: hidden;
  height: 30px;
}
body input[type=radio]:hover + div .btn {
  background: #B9ACCA;
}
body input[type=radio]:hover + div .btn:after {
  color: #fff;
}
body input[type=radio]:nth-of-type(2) {
  left: 33.33%;
}
body input[type=radio]:nth-of-type(2) + div .btn {
  left: 33.33%;
}
body input[type=radio]:nth-of-type(2) + div .btn:after {
  content: "2";
}
body input[type=radio]:nth-of-type(3) {
  left: 66.66%;
}
body input[type=radio]:nth-of-type(3) + div .btn {
  left: 66.66%;
}
body input[type=radio]:nth-of-type(3) + div .btn:after {
  content: "3";
}
body input[type=radio]:checked + div .btn {
  box-shadow: 0 0 0 2px #6D44B5;
  z-index: 10;
  padding: 5px 0;
}
body input[type=radio]:checked + div .btn:before {
  left: -25%;
}
body input[type=radio]:checked + div .btn:after {
  color: #fff;
}
body input[type=radio] + div .btn {
  position: absolute;
  width: 33%;
  bottom: 0;
  left: 0;
  height: 25px;
  box-shadow: 0 0 0 2px #B9ACCA;
  overflow: hidden;
  z-index: 9;
  cursor: pointer;
}
body input[type=radio] + div .btn:after {
  content: "1";
  position: absolute;
  color: #FE8D58;
  font-weight: 900;
  font-size: 22px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(calc(-50% - 2.5px));
  line-height: 0;
  color: #B9ACCA;
}
body input[type=radio] + div .btn:before {
  content: "";
  position: absolute;
  width: 150%;
  height: 100%;
  left: 0;
  top: 0;
  background: #6D44B5;
  left: -150%;
  transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body svg {
  position: absolute;
  width: 0;
  height: 0;
}
body .card {
  width: 500px;
  min-width: 500px;
  height: 350px;
  position: relative;
  max-width: 100%;
  background: #fff;
}
body .card * {
  transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body .card h1, body .card a {
  position: absolute;
  right: 30px;
  z-index: 9;
  color: #fff;
  font-size: 200px;
  font-weight: 100;
  margin: 0;
  top: 0;
  line-height: 0.75;
  transform: scale(0) rotateX(180deg);
  opacity: 0;
}
body .card p {
  position: absolute;
  z-index: 999;
  width: 75%;
  font-size: 18px;
  font-weight: 100;
  font-family: "Raleway";
  line-height: 26px;
  left: 12.5%;
  color: #fff;
  display: inline-block;
  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transition: none;
}
body .card a {
  color: #6D44B5;
  font-size: 15px;
  bottom: 50px;
  top: auto;
  width: 50%;
  display: block;
  text-align: center;
  letter-spacing: 5px;
  text-transform: uppercase;
  font-weight: 900;
  padding: 15px 5px;
  border: 2px solid;
  cursor: pointer;
  left: -50px;
  opacity: 1;
  transform: none;
  height: 12.5px;
  font-family: "Raleway";
}
body .card a:before {
  content: "BACK";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(0);
  font-size: 15px;
  opacity: 0;
}
body .card input[type=checkbox] {
  z-index: 999;
  position: absolute;
  bottom: 50px;
  width: 50%;
  left: -50px;
  height: 50px;
  opacity: 0;
}
body .card input[type=checkbox]:hover ~ a {
  background: #fba0cc;
  color: #fff;
  border-color: #fba0cc;
}
body .card input[type=checkbox]:checked ~ p {
  transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.175);
  transition-delay: 0.2s;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
body .card input[type=checkbox]:checked ~ a {
  z-index: 100;
  color: #fff;
  font-size: 0;
}
body .card input[type=checkbox]:checked ~ a:before {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%) scale(1);
}
body .card input[type=checkbox]:checked ~ .blob {
  z-index: 99;
  transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body .card input[type=checkbox]:checked ~ .blob:before, body .card input[type=checkbox]:checked ~ .blob:after {
  transform: scale(0);
}
body .card input[type=checkbox]:checked ~ .blob .glob {
  transition: all 400ms cubic-bezier(0.175, 0.885, 0.32, 1);
  min-width: 110%;
  min-height: 110%;
  border-radius: 0px;
  top: -5%;
  right: -5%;
}
body .card input[type=radio] + div {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
body .card input[type=radio]:checked + div h1 {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}
body .card input[type=radio]:nth-of-type(2):checked + div ~ .blob .glob {
  width: 70%;
  height: 75%;
  background: #FE8D58;
}
body .card input[type=radio]:nth-of-type(2):checked + div ~ .blob:before {
  top: 40%;
  background: #FE8D58;
}
body .card input[type=radio]:nth-of-type(2):checked + div ~ .blob:after {
  background: #FE8D58;
}
body .card input[type=radio]:nth-of-type(3):checked + div ~ .blob .glob {
  width: 70%;
  height: 55%;
  background: #F45746;
}
body .card input[type=radio]:nth-of-type(3):checked + div ~ .blob:before {
  top: 20%;
  background: #F45746;
  left: 40%;
}
body .card input[type=radio]:nth-of-type(3):checked + div ~ .blob:after {
  background: #F45746;
  left: 70%;
}
body .card input[type=radio]:nth-of-type(1):checked + div ~ .photo div:nth-of-type(1) {
  transform: rotateX(0deg);
}
body .card input[type=radio]:nth-of-type(2):checked + div ~ .photo div:nth-of-type(2) {
  transform: rotateX(0deg);
}
body .card input[type=radio]:nth-of-type(3):checked + div ~ .photo div:nth-of-type(3) {
  transform: rotateX(0deg);
}
body .card input[type=radio]:nth-of-type(2):checked + div ~ .shapes {
  top: 35%;
  left: 65%;
  width: 90px;
}
body .card input[type=radio]:nth-of-type(2):checked + div ~ .shapes:before {
  left: 120px;
  top: 170px;
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
body .card input[type=radio]:nth-of-type(3):checked + div ~ .shapes {
  top: 55%;
  left: 55%;
  width: 140px;
}
body .card input[type=radio]:nth-of-type(3):checked + div ~ .shapes:before {
  left: 140px;
  top: -40px;
  -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
body .card:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  z-index: 200;
}
body .card .photo {
  position: absolute;
  width: 50%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  perspective: 300px;
}
body .card .photo div {
  position: absolute;
  width: 75%;
  height: 50%;
  transform: rotateX(-180deg);
  top: -12.5%;
  margin-left: -12.5%;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 100%;
  box-shadow: inset 0 0 0 5px #fff, 0 0 0 5px #fba0cc, 0 0 0 10px #fff;
}
body .card .photo div:before {
  content: "πŸ’―";
  font-size: 75px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 20px 0 0 5px;
  transform: translateX(-50%) translateY(-50%);
  filter: saturate(0) brightness(20);
  opacity: 0.25;
}
body .card .photo div:first-of-type {
  background: #fba0cc;
}
body .card .photo div:nth-of-type(2) {
  background: #F45746;
  box-shadow: inset 0 0 0 5px #fff, 0 0 0 5px #F45746, 0 0 0 10px #fff;
}
body .card .photo div:nth-of-type(2):before {
  content: "πŸ‘―";
}
body .card .photo div:nth-of-type(3) {
  background: #B9ACCA;
  box-shadow: inset 0 0 0 5px #fff, 0 0 0 5px #B9ACCA, 0 0 0 10px #fff;
}
body .card .photo div:nth-of-type(3):before {
  content: "πŸ’‹";
}
body .card .shapes {
  position: absolute;
  left: 45%;
  top: 20%;
  background: #FE8D58;
  width: 60px;
  height: 4px;
  z-index: 2;
  box-shadow: 0 8px 0 0 #FE8D58, 0 16px 0 0 #FE8D58, 0 24px 0 0 #FE8D58, 0 32px 0 0 #FE8D58;
  mix-blend-mode: screen;
}
body .card .shapes:before {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  background: linear-gradient(to bottom, #FE8D58, #F45746);
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  left: 175px;
  top: 160px;
  transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body .card .blob {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  filter: url(#goo);
}
body .card .blob .glob {
  position: absolute;
  width: 60%;
  height: 75%;
  background: #6D44B5;
  border-radius: 100%;
  top: -25%;
  right: -25%;
}
body .card .blob:before, body .card .blob:after {
  content: "";
  position: absolute;
  width: 50%;
  height: 60%;
  background: #6D44B5;
  border-radius: 100%;
  right: 0;
  top: 20px;
  transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
body .card .blob:after {
  right: -15%;
  top: 20%;
  width: 40%;
  height: 60%;
}
</style>
</head>
<body>
  <div class='card'>
  <input checked='checked' id='rad1' name='rad' type='radio'>
  <div for='rad1'>
    <h1>1</h1>
    <div class='btn'></div>
  </div>
  <input id='rad2' name='rad' type='radio'>
  <div for='rad2'>
    <h1>2</h1>
    <div class='btn'></div>
  </div>
  <input id='rad3' name='rad' type='radio'>
  <div for='rad3'>
    <h1>3</h1>
    <div class='btn'></div>
  </div>
  <input type='checkbox'>
  <a>Read More</a>
  <p>Lorem ipsum</p>
  <div class='shapes'></div>
  <div class='photo'>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class='blob'>
    <div class='glob'></div>
  </div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>
<svg class="svg" viewBox="0 0 400 400">
<defs>
<filter id="duotone-filter-post-one">
<feColorMatrix type="matrix" values="0.14453125 0 0 0 0.33203125 0.71875 0 0 0 0.27734375 -0.34765625 0 0 0 0.73046875 0 0 0 1 0"></feColorMatrix>
</filter>
</defs>
</svg>
</body>
</html>

2. Card UI CSS

Made by Damien Flandrin. A simple card with hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Playfair+Display");
@import url("https://fonts.googleapis.com/css?family=Playfair+Display|Source+Sans+Pro");
body {
  background: #eee;
  padding: 40px 0px;
}

.card {
  width: 400px;
  margin: 0px auto;
  background-color: white;
  box-shadow: 0px 5px 20px #555;
}
.card a {
  color: #333;
  text-decoration: none;
}
.card:hover .card-image img {
  width: 110%;
  filter: grayscale(0);
}

.card-image {
  height: 250px;
  position: relative;
  overflow: hidden;
}
.card-image img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: grayscale(1);
  transition-property: filter width;
  transition-duration: 0.3s;
}

.card-body {
  text-align: center;
  padding: 15px 20px;
  box-sizing: border-box;
}

.card-date {
  font-family: "Source Sans Pro", sans-serif;
}

.card-title, .card-exceprt {
  font-family: "Playfair Display", serif;
}

.card-date, .card-title {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
}

.card-date, .card-excerpt {
  color: #777;
}
</style>
</head>
<body>
  <div class="card">
  <a href="https://www.gekkode.com/developpement/realiser-une-carte-en-css-card-ui-css/">
  <div class="card-image">
    <img src="https://www.gekkode.com/wp-content/uploads/2021/08/orange.jpeg" alt="Orange" />
  </div>
  
  <div class="card-body">
    
    <div class="card-date">
      <time>20 Novembre 1992</time>
    </div>
  
    <div class="card-title">
      <h3>Lorem Ipsum</h3>
    </div>
    
    <div class="card-excerpt">
      <p> Lorem ipsum</p>
    </div>
    
  </div>
  </a>
</div>
</body>
</html>

3. Codepen Card

Made by Jove Angelevski. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
  
<style>
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background: #353535;
  font-family: "Source Sans Pro", sans-serif;
  overflow: hidden;
}

.card-container {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  max-width: 500px;
  height: 500px;
}
.card-container .card {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  height: 200px;
  padding: 20px;
  overflow: hidden;
  background: #252525;
  border-radius: 10px;
  box-shadow: -2px 2px 0px 0px #202020, -10px 10px 40px 0px rgba(0, 0, 0, 0.3);
  transform: translate(0px, 0px) rotateX(30deg) rotateZ(-20deg);
  z-index: 2;
  transition: all 1s;
}
.card-container .card:hover {
  transform: translate(0px, -20px) rotateX(10deg) rotateZ(-20deg);
  box-shadow: -2px 1px 0px 0px #202020, -40px 40px 40px 0 rgba(0, 0, 0, 0.2);
  cursor: pointer;
}
.card-container .card h1 {
  color: crimson;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}
.card-container .card h1:nth-of-type(2) {
  font-size: 16px;
  font-weight: 400;
  text-align: center;
}
.card-container .card h3 {
  color: crimson;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.card-container .card h3:nth-of-type(2) {
  font-size: 14px;
  font-weight: 400;
}
.card-container .card i {
  margin-right: 5px;
  color: crimson;
}
.card-container .card .circle {
  position: absolute;
  margin: auto;
  top: 10%;
  bottom: 0;
  right: -50%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: #202020;
  z-index: -2;
}
.card-container .card .circle:nth-of-type(2) {
  width: 100px;
  height: 100px;
  top: 90%;
  right: -20%;
  z-index: -1;
  background: crimson;
}

@media only screen and (max-width: 780px) {
  .card-container .card {
    width: 250px;
    height: 150px;
    animation: hvr 5s infinite ease-in-out;
    transition: none;
  }
  .card-container .card h1 {
    font-size: 18px;
  }
  .card-container .card h1:nth-of-type(2) {
    font-size: 14px;
  }
  .card-container .card h3 {
    font-size: 12px;
  }
  .card-container .card h3:nth-of-type(2) {
    font-size: 10px;
  }
  .card-container .card .circle {
    right: -70%;
  }

  @keyframes hvr {
    0% {
      box-shadow: -2px 2px 0px 0px #202020, -10px 10px 40px 0px rgba(0, 0, 0, 0.3);
      transform: translate(0px, 0px) rotateX(30deg) rotateZ(-20deg);
    }
    50% {
      transform: translate(0px, -20px) rotateX(30deg) rotateZ(-20deg);
      box-shadow: -2px 1px 0px 0px #202020, -40px 40px 40px 0 rgba(0, 0, 0, 0.2);
    }
    100% {
      box-shadow: -2px 2px 0px 0px #202020, -10px 10px 40px 0px rgba(0, 0, 0, 0.3);
      transform: translate(0px, 0px) rotateX(30deg) rotateZ(-20deg);
    }
  }
}
</style>
</head>
<body>
  <div class="card-container">
  <div class="card">
    <h1><i class="fa fa-codepen" aria-hidden="true"></i>Codepen</h1>
    <h1>2334 5467 8756 0932 1284</h1>
    <h3>Card holder</h3>
    <h3>Albert Feynman</h3>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
</div>
</body>
</html>

4. Pure CSS Card w/ Social Icons

Made by markelrayes. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body
{
  background-color:#f2f2f2;
  font-family: 'RobotoDraft', 'Roboto', sans-serif;
  -webkit-font-smoothing: antialiased;
}

*
{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

h5
{
  margin:0px;
  font-size:1.4em;
  font-weight:700;
}

p
{
  font-size:12px;
}

.center
{
  height:100vh;
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* End Non-Essential  */

.property-card
{
  height:18em;
  width:14em;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  position:relative;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  border-radius:16px;
  overflow:hidden;
  -webkit-box-shadow:  15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
  box-shadow:  15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
}
/* ^-- The margin bottom is necessary for the drop shadow otherwise it gets clipped in certain cases. */

/* Top Half of card, image. */

.property-image
{
  height:6em;
  width:14em;
  padding:1em 2em;
  position:Absolute;
  top:0px;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  background-image:url('https://cdn.photographylife.com/wp-content/uploads/2017/01/What-is-landscape-photography.jpg');
  background-size:cover;
  background-repeat:no-repeat;
}

/* Bottom Card Section */

.property-description
{
  background-color: #FAFAFC;
  height:12em;
  width:14em;
  position:absolute;
  bottom:0em;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  padding: 0.5em 1em;
  text-align:center;
}

/* Social Icons */

.property-social-icons
{
  width:1em;
  height:1em;
  background-color:black;
  position:absolute;
  bottom:1em;
  left:1em;
  -webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  -o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* Property Cards Hover States */

.property-card:hover .property-description
{
  height:0em;
  padding:0px 1em;
}
.property-card:hover .property-image
{
  height:18em;
}

.property-card:hover .property-social-icons
{
  background-color:white;
}

.property-card:hover .property-social-icons:hover
{
  background-color:blue;
  cursor:pointer;
}


/* Optional

.property-image-title
{
text-align:center;
position:Relative;
top:30%;
opacity:0;
transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
color:black;
font-size:1.2em;
}

.property-card:hover .property-image-title
{
opacity:1;
}

*/
</style>
</head>
<body>
  <div class="center">
  <div class="property-card">
    <a href="#">
      <div class="property-image">
        <div class="property-image-title">
          <!-- Optional <h5>Card Title</h5> If you want it, turn on the CSS also. -->
        </div>
      </div></a>
    <div class="property-description">
      <h5> Card Title </h5>
      <p>Lorem Ipsum Dipsum hortata. Mixcall Horcho. Mixwell Chingo. More Bingo. Lorem Ipum doth be hard.</p>
    </div>
    <a href="#">
      <div class="property-social-icons">
        <!-- I would usually put multipe divs inside here set to flex. Some people might use Ul li. Multiple Solutions -->
      </div>
    </a>
  </div>
</div>
</body>
</html>

5. Css Card 2

Made by mohammed Alomari. A very basic css card. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Saira+Semi+Condensed');
body{padding: 0; margin: 0; background: #eee; background-image: url('http://1.bp.blogspot.com/-WGhBed80BjU/VDVj-KB8_aI/AAAAAAAAGjc/sMAZ1wdCvDk/s1600/dark-textile-background.jpg')}
html{height: 100%; position: relative;}
*{padding: 0; margin: 0; list-style-type: none; font-family: 'Saira Semi Condensed', sans-serif;}
#clear{clear: both;}

.card{
  width: 450px;
  height: 260px;
  position: relative;
  overflow: hidden;
  background: #FFF;
  margin: 20px auto 0 auto;
  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.4)
}

.card:before{
  content: "";
  width: 100%;
  height: 200%;
  background-color: #272731;
  position: absolute;
  transform: rotate(30deg);
  left: -180px;
  top: -200px;
}

#name{
  position: absolute;
  width: 210px;
  height: 45px;
  background-color: #FFBB46;
  right: 0;
  top: 20%;
  font-size: 1.8em;
  text-align: center;
  line-height: 1.4;
  font-weight: bold;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.4);
  z-index: 5
}

#name:before{
  content: "";
  width: 0;
  border-style: solid;
  border-width: 20px 12px 0px 31px;
  border-color: #EB9F2F transparent transparent transparent;
  position: absolute;
  top: 45px;
  left: 0px;
}

#avatar{
  width: 120px;
  height: 120px;
  background: #fff;
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.5);
  margin: 10px;
  overflow: hidden;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%)
}

#avatar img{
  width: 100%;
}

#check{
  position: absolute;
  width: 20px;
  height: 20px;
  text-align: center;
  border: solid;
  border-radius: 50%;
  background-color: #FFBB46;
  top: 33%;
  left: 42%;
  transform: translate(-43%, -33%);
  padding: 2px;
}

#job{
  position: absolute;
  right: 8%;
  top: 97px;
  letter-spacing: 2px
}

#pl-logo{
  position: relative;
  width: 120px;
  margin: 3px 0 0 10px
  
}

#pl-logo img{
  width: 100%;
}


#info{
  float: right;
  margin: 140px 0 0 0;
  font-size: 0.94em;
}

#info li{
  height: 30px;
  margin: 4px auto;
  width: 180px;
}
</style>
</head>
<body>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="card">
    <div id="avatar">
        <img src="http://www.kentonthatcher.com/wp-content/uploads/2012/02/Jose-Mourinho1.jpg" />
    </div>
    <div id="check"><i class="fa fa-check"></i></div>
    <div id="name">JosΓ© Mourinho</div>
    <div id="job">Manager</div>
    <div id="info">
        <ul>
            <li>Nationality: <span>Portuguese</span></li>
            <li>Age: <span>54</span></li>
            <li>Club: <span>Manchester United</span></li>
        </ul>
    </div>
    <div id="pl-logo">
        <img src="https://cdn.pulselive.com/test/client/pl/test/i/elements/premier-league-logo-header-full.png" />
    </div>
</div>
</body>
</html>

6. Responsive Css Card

Made by Samir Munjewar. Responsive Cards with simple button hover effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
 body{
     font-family: 'Roboto', sans-serif;
}
 h1{
     text-align: center;
     color: #4181ee;
}
 .wrapper{
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
}
 .card{
    max-width: 300px;
     min-height: 250px;
     background: #02b875;
     padding: 30px;
      border-radius: 3px;
     box-sizing: border-box;
     color: #FFF;
     margin:20px;
      box-shadow: rgb(50 50 93 / 25%) 0px 30px 60px -12px, rgb(0 0 0 / 30%) 0px 18px 36px -18px;
}
 .card:nth-child(2){
    background: #4181ee;
}
 .card:last-child{
    background: #673ab7;
}
 .card-title{
     margin-top: 0;
     font-size: 16px;
     font-weight: 600;
     letter-spacing: 1.2px;
}
 .card-content{
     font-size: 14px;
     letter-spacing: 0.5px;
     line-height: 1.5;
}
 .card-btn{
     all: unset;
     display: block;
     margin-left: auto;
     border: 2px solid #FFF;
     padding: 10px 15px;
     border-radius: 25px;
     font-size: 10px;
     font-weight: 600;
     transition: all 0.5s;
     cursor: pointer;
     letter-spacing: 1.2px;
}
 .card-btn:hover{
    color:#02b875;
    background: #FFF;
}
 .card:nth-child(2) .card-btn:hover{
    color:#4181ee;
    background: #FFF;
}
 .card:last-child .card-btn:hover{
    color:#673ab7;
     background: #FFF;
}
</style>
</head>
<body>
  <h1>Responsive Card</h1>
<div class="wrapper">
<div class="card">
	<h3 class="card-title">CARD TITLE</h3>
		<p class="card-content">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
		<button class="card-btn">READ MORE</button>
	</div>
	<div class="card">
		<h3 class="card-title">CARD TITLE</h3>
		<p class="card-content">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
		<button class="card-btn">READ MORE</button>
	</div>
	<div class="card">
		<h3 class="card-title">CARD TITLE</h3>
		<p class="card-content">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
		<button class="card-btn">READ MORE</button>
	</div>
</div>
</body>
</html>

7. Effect cards hover HTML + CSS

Made by MetaCop. These CSS Cards displays an simple animation on hovering the mouse over the cards, also when you hover the mouse a ‘Read More’ button appears. ( Source )

<!-- create by metacop -->
<!DOCTYPE html>
<html>
	<head>
		<title>Effect cards hover HTML + CSS n4</title>
	</head>
	<body>
		<div class="container">
      <div class="__item">
        <h1>01</h1>
        <h4>Service One</h4>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste voluptas
          ipsam ea assumenda.
        </p>
        <a href=#>Read More</a>
      </div>
      <div class="__item">
        <h1>02</h1>
        <h4>Service two</h4>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste voluptas
          ipsam ea assumenda.
        </p>
        <a href=#>Read More</a>
      </div>
      <div class="__item">
        <h1>03</h1>
        <h4>Service Three</h4>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste voluptas
          ipsam ea assumenda.
        </p>
        <a href=#>Read More</a>
      </div>
      <div class="__item">
        <h1>04</h1>
        <h4>Service Four</h4>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste voluptas
          ipsam ea assumenda.
        </p>
        <a href=#>Read More</a></div>
      </div>
    </div>
	</body>
</html>


-------CSS-------


 @import url("https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600;700;800;900&display=swap");
      * {
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
      }

      body {
        width: 100%;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #060c21;
      }

      .container {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-evenly;
        flex-wrap: wrap;
      }

      .__item {
        width: 220px;
        padding: 5.8em 0.9em 2.1em 0.9em;
        position: relative;
        background-color: #060c21;
        margin: 1em;
        /* border: 1px solid #000; */
      }


      .__item::after
      {
          content:'';
          position: absolute;
          top:0;
          left: 0;
          width: 50%;
          height: 100%;
          background-color: #fff;
          opacity: .05;
          
      }
      .__item::before {
        content: "";
        position: absolute;
        background-color: #fff;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        z-index: -1;
        transform: skew(2deg, 2deg);
        
      }

      .__item:nth-child(1)::before
      {
        background-image: linear-gradient(315deg, #ff0057, #e64a19);
      }
      .__item:nth-child(2)::before
      {
        background-image: linear-gradient(315deg, #f45057, #00ff);
      }
      .__item:nth-child(3)::before
      {
        background-image: linear-gradient(315deg, #89ff00, #00bcd4);
      }
      .__item:nth-child(4)::before
      {
        background-image: linear-gradient(315deg, #ff0505, #ffc107);
      }

      
      .__item h1 {
        font-size: 7em;
        position: absolute;
        transform: translateX(45%);
        right: 75px;
        top: 12%;
        color: #fff;
        margin: 0;
        padding: 0;
        opacity: 0.05;
        transition: top 0.4s linear;
      }

      .__item:hover h1 {
        top: -17px;
      }

      .__item h4 {
        color: #fff;
        margin: 0;
        font-size: 18px;
        padding: 0;
        font-weight: 500;
        margin-bottom: 0.5em;
        position: relative;
        z-index: 1;
      }

      .__item p {
        color: #fff;
        font-size: 14px;
        margin: 0 0 1.5em 0;
        position: relative;
        z-index: 1;
      }

      .__item a {
        background-color: transparent;
        position: relative;
        z-index: 1;
        display: block;
        text-decoration: none;
        border: 2px solid #fff;
        padding: 0.5em 1em;
        width: max-content;
        color: #fff;
        transform: translateY(-90%);
        opacity: 0;
        transition: transform .3s linear, opacity .3s linear;
          visibility: hidden;
      }

      .__item:hover a
      {
        visibility: visible;
        transform: translateY(0%);
        opacity: 1;
      }

      .__item a:hover
      {
          background-color: #fff;
          color:#000;
          transition: .3s linear;
      }

8. Effect cards hover HTML + CSS Number 2

Another css cards by MetaCop. The cards have a very smooth color fill animation when you hover your mouse. ( Source )

<!DOCTYPE html>
<!-- create by metacop -->
<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>
		 <div class="container">
      <div class="container__item">
        <h4>01</h4>
        <h4>Service Name</h4>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae
          ipsa eligendi voluptas.
        </p>
        <button>Read More</button>
      </div>
      <div class="container__item">
        <h4>02</h4>
        <h4>Service Name</h4>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae
          ipsa eligendi voluptas.
        </p>
        <button>Read More</button>
      </div>
      <div class="container__item">
        <h4>03</h4>
        <h4>Service Name</h4>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae
          ipsa eligendi voluptas.
        </p>
        <button>Read More</button>
      </div>
    </div>
	</body>
</html>



--------CSS--------


* {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
  }

  body {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .container {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-evenly;
    flex-wrap: wrap;
  }

  .container .container__item {
    margin: 1em;
    width: 260px;
    padding: 1.8em;
    box-shadow: 0 5px 9px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
  }

  .container__item h4 {
    margin: 0em 0 0.5em 0;
    text-align: center;
    position: relative;
  }
  .container__item h4:nth-child(2) {
    transition: color 0.3s linear;
  }
  .container__item h4:nth-child(1) {
    font-size: 30px;
    font-weight: 900;
    color: #fff;
    width: max-content;
    margin: 0 auto 0.3em auto;
    padding: 0.5em;
    border-radius: 50%;
    transition: box-shadow 0.5s linear;
  }
  .container__item:nth-child(1) h4:nth-child(1) {
    background-color: #ff226d;
    box-shadow: 0 0 0 0px #ff226d;
  }

  .container__item:nth-child(1):hover h4:nth-child(1) {
    box-shadow: 0 0 0 400px #ff226d;
  }

  .container__item:nth-child(2) h4:nth-child(1) {
    background-color: #4cd137;
    box-shadow: 0 0 0 0px #4cd137;
  }

  .container__item:nth-child(2):hover h4:nth-child(1) {
    box-shadow: 0 0 0 400px #4cd137;
  }

  .container__item:nth-child(3) h4:nth-child(1) {
    background-color: #00a8ff;
    box-shadow: 0 0 0 0px #00a8ff;
  }
  .container__item:nth-child(3):hover h4:nth-child(1) {
    box-shadow: 0 0 0 400px #00a8ff;
  }

  .container__item:hover h4:nth-child(2),
  .container__item:hover p {
    color: #fff;
  }

  .container__item p {
    text-align: center;
    line-height: 1.4em;
    font-size: 14px;
    position: relative;
    transition: color 0.3s linear;
  }
  .container__item button {
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    padding: 0.5em 0.8em 0.5em 0.8em;
    font-weight: bold;
    border: none;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.2);
    position: relative;
    border-radius: 3px;
  }

  .container__item::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    z-index: 1;
  }

9. Radio Buttons As Cards

Made by Mitali. Simple Pricing Cards with minimalistic effects. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title> Radio Buttons As Cards</title>
        <!--Google Font -->
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Poppins:[email protected];600&display=swap" rel="stylesheet">
    </head>
    <body>
        <div class="container">
            <div class="card">
                <input type="radio" name="pricing" id="card1">
                <label for="card1">
                    <h5>BASIC</h5>
                    <h2>
                        <span>$</span>
                            15
                        <span>/month</span>
                        </h2>
                </label>
            </div>
            <div class="card">
                <input type="radio" name="pricing" id="card2" checked>
                <label for="card2">
                    <h5>STANDARD</h5>
                    <h2>
                        <span>$</span>
                            35
                        <span>/month</span>
                        </h2>
                </label>
            </div>
            <div class="card">
                <input type="radio" name="pricing" id="card3">
                <label for="card3">
                    <h5>PREMIUM</h5>
                    <h2>
                        <span>$</span>
                            80
                        <span>/month</span>
                        </h2>
                </label>
            </div>
            <a href="https://youtu.be/0betZJXAOrM" target="_blank"> My Youtube Channel</a>
        </div>
    </body>
</html>


-------CSS-------


*,
*:before,
*:after{
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Poppins',sans-serif;
    -webkit-tap-highlight-color: transparent;
}
body{
    background-color: #F5F7FF;
    color: #2C2C51;
    height: 100vh;
    width: 100vw;
}
.container{
    width: 200px;
    position: absolute;
    -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}
.card{
    height: 150px;
    width: 200px;
    position: relative;
    margin: 25px 0;
}
input[type="radio"]{
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    background-color: white;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    position: absolute;
    -webkit-box-shadow: 7px 7px 15px rgba(2, 28, 53, 0.08);
            box-shadow: 7px 7px 15px rgba(2, 28, 53, 0.08);
    outline: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
input[type="radio"]:before{
    content: "";
    position: absolute;
    height: 22px;
    width: 22px;
    background-color: #F9FAFD;
    border: 1px solid #E2E6F3;
    border-radius: 50%;
    top: 35px;
    right: 20px;
}
input[type="radio"]:after{
    content: "";
    position: absolute;
    height: 13px;
    width: 13px;
    background-color: transparent;
    border-radius: 50%;
    top: 39.5px;
    right: 24.5px;
}
label{
    position: absolute;
    margin: 20px;
    cursor: pointer;
}
h5{
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.5px;
    margin: 15px 0 20px 0;
}
h2{
    font-size: 28px;
}
span{
    font-weight: 400;
    font-size: 15px;
    color: #7B7B93;
}
input[type="radio"]:hover{
    -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);
}
input[type="radio"]:checked{
    border: 3px solid #478BFB;
     -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
            transform: scale(1.05);
}
input[type="radio"]:checked:after{
    background-color: #478BFB;
}
a{
    position: relative;
    background-color: #2C2C51;
    display: block;
    width: 300px;
    margin:50px 0 0 -50px;
    color: #F5F7FF;
    padding: 10px 0;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    font-size: 18px;
}

10. Beautiful Our Team Cards

Another cards by Mitali. Beautiful Our Team Profile Cards with buttery smooth effects. ( Source )

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Our Team Section</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
    />
  </head>
  <body>
   <section>
      <div class="row">
        <h1>Our Team</h1>
      </div>

      <div class="row">
        <!-- Column 1 -->
        <div class="column">
          <div class="card">
            <div class="img-container">
              <img
                src="https://dl.dropbox.com/s/4xuvxeyhtwpkktf/profile-img-1.png?raw=1"
              />
            </div>
            <h3>Luna Turner</h3>
            <p>Founder</p>
            <div class="icons">
              <a href="#">
                <i class="fab fa-twitter"></i>
              </a>
              <a href="#">
                <i class="fab fa-linkedin"></i>
              </a>
              <a href="#">
                <i class="fab fa-github"></i>
              </a>
              <a href="#">
                <i class="fas fa-envelope"></i>
              </a>
            </div>
          </div>
        </div>
        <!-- Column 2 -->
        <div class="column">
          <div class="card">
            <div class="img-container">
              <img
                src="https://dl.dropbox.com/s/z3plx86q7ubvh6x/profile-img-2.png?raw=1"
              />
            </div>
            <h3>Bryant Hall</h3>
            <p>DEVELOPER</p>
            <div class="icons">
              <a href="#">
                <i class="fab fa-twitter"></i>
              </a>
              <a href="#">
                <i class="fab fa-linkedin"></i>
              </a>
              <a href="#">
                <i class="fab fa-github"></i>
              </a>
              <a href="#">
                <i class="fas fa-envelope"></i>
              </a>
            </div>
          </div>
        </div>
        <!-- Column 3 -->
        <div class="column">
          <div class="card">
            <div class="img-container">
              <img
                src="https://dl.dropbox.com/s/nx4nmhaeo75xjxb/profile-img-3.png?raw=1"
              />
            </div>
            <h3>Hope Watkins</h3>
            <p>Designer</p>
            <div class="icons">
              <a href="#">
                <i class="fab fa-twitter"></i>
              </a>
              <a href="#">
                <i class="fab fa-linkedin"></i>
              </a>
              <a href="#">
                <i class="fab fa-github"></i>
              </a>
              <a href="#">
                <i class="fas fa-envelope"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <a href="https://youtu.be/H_64n7gY3h0" target="_blank" id="yt-link"
      >My Youtube Channel</a
    >
  </body>
</html>


------CSS------


   * {
        padding: 0;
        margin: 0;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        -webkit-tap-highlight-color: transparent ;
        font-family: "Poppins", sans-serif;
      }
      body {
        background-color: #f5f5f5;
      }
      section {
        width: 100%;
      }
      .row {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        padding: 2em 1em;
        text-align: center;
      }
      .column {
        width: 100%;
        padding: 0.5em 0;
      }
      h1 {
        width: 100%;
        text-align: center;
        font-size: 3.5em;
        color: #1f003b;
      }
      .card {
        background-color: #ffffff;
        padding: 3.5em 1em;
        border-radius: 0.6em;
        -webkit-box-shadow: 0 0 2.2em rgba(25, 0, 58, 0.15);
                box-shadow: 0 0 2.2em rgba(25, 0, 58, 0.15);
        color: #1f003b;
        -webkit-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
        cursor: pointer;
      }
      .card .img-container {
        width: 8em;
        height: 8em;
        background-color: #a993ff;
        padding: 0.5em;
        border-radius: 50%;
        margin: 0 auto 2em auto;
        -webkit-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
      }
      .card img {
        width: 100%;
        border-radius: 50%;
      }
      .card h3 {
        font-weight: 500;
      }
      .card p {
        letter-spacing: 2px;
        text-transform: uppercase;
        font-weight: 300;
        margin: 0.5em 0 2em 0;
      }
      .icons {
        width: 50%;
        min-width: 180px;
        margin: auto;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
      }
      .card a {
        text-decoration: none;
        color: inherit;
        font-size: 1.4em;
      }
      .card:hover {
        background: -webkit-gradient(linear, left top, left bottom, from(#6045ea), to(#8567f7));
        background: -o-linear-gradient(#6045ea, #8567f7);
        background: linear-gradient(#6045ea, #8567f7);
        color: #ffffff;
      }
      .card:hover .img-container {
        background-color: rgba(255, 255, 255, 0.3);
        -webkit-transform: scale(1.1);
            -ms-transform: scale(1.1);
                transform: scale(1.1);
      }
      a#yt-link {
        background-color: #8567f7;
        display: block;
        width: 95%;
        font-size: 1.2em;
        position: relative;
        margin: 0 auto 2em auto;
        padding: 1em 0;
        text-align: center;
        color: #ffffff;
        text-decoration: none;
        border-radius: 0.3em;
        max-width: 25em;
      }
      @media screen and (min-width: 768px) {
        section {
          padding: 1em 7em;
        }
      }
      @media screen and (min-width: 992px) {
        section {
          padding: 1em;
        }
        .card {
          padding: 5em 1em;
        }
        .column {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 33.33%;
                  flex: 0 0 33.33%;
          max-width: 33.33%;
          padding: 0 1em;
        }
      }

11. Pizza Card UI

Made by Aakaanksha. A simple css recipe card with minimalistic design, it contains the recipe img at left side and its info at right. ( Source )

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pizza Card</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:[email protected];400&family=Odibee+Sans&display=swap" rel="stylesheet"> 
</head>

<body>

    <a href="https://www.sololearn.com/Profile/12942084/?ref=app" class="main-div">
        <div class="left"></div>

        <div class="middle">
            <p class="pizza">
                Vegetarian Pizza
            </p>
            <p class="text">
                Yummy veggie pizza with tasty tomato, cheese, crisp papers, fresh arugula and original italian olives.
            </p>
            <div class="info">
                <p>πŸ•900 KCAL</p>
                <P>⏱️30 MIN</P>
                <P>🌟4.9/5</P>
            </div>
            
        </div>
        <div class="right">&#8377; 299 /-</div>
    </a>
    

</body>

</html>


-------CSS-------


*{
    margin:0;
    padding:0
}
body{
    font-family:Montserrat,sans-serif;
    background-color:#4169e1
}
.main-div{
    text-decoration:none;
    color:#000;
    height:270px;
    width:550px;
    background-color:#fff;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    -webkit-box-shadow:0 2px 8px rgba(0,0,0,.3);
    box-shadow:0 2px 8px rgba(0,0,0,.3)
}
.left{
    width:45%;
    background-image:url(https://img.buzzfeed.com/thumbnailer-prod-us-east-1/video-api/assets/216054.jpg);
    background-size:cover
}
.middle{
    width:47%;
    padding:0 1rem;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-pack:space-evenly;
    -ms-flex-pack:space-evenly;
    justify-content:space-evenly;
    font-size:14px
}
.middle .pizza{
    font-size:30px;
    font-family:'Odibee Sans',cursive;
    text-align:center
}
.middle .info{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:space-evenly;
    -ms-flex-pack:space-evenly;
    justify-content:space-evenly;
    font-family:'Odibee Sans',cursive;
    font-size:18px
}
.right{
    width:8%;
    background-color:#fa4627;
    font-family:'Odibee Sans',cursive;
    color:#fff;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-writing-mode:vertical-lr;
    -ms-writing-mode:tb-lr;
    writing-mode:vertical-lr;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    font-size:24px
}

12. Superhero Cards

Made by Khagesh Bansal. Superhero cards with hover effects, hover your mouse to see the info of a superhero. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
    <div class="card">
        <div class="content">
            <h2>Wonder Women</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
            <a href="#">Read More</a>
        </div>
        <img src="https://r7.hiclipart.com/path/383/670/566/diana-prince-batman-aquaman-dc-comics-wonder-woman-efb94fb866a089d8dab19a2cee794834.png">
   </div>

    <div class="card" id="batman">
        <div class="content">
            <h2>Batman</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
            <a href="#">Read More</a>
        </div>
        <img src="https://r7.hiclipart.com/path/495/402/379/batman-superman-dc-rebirth-batsuit-costume-nightwing-6aac1e09732f6210d7ef63098b66d9c5.png">
   </div>

    <div class="card" id="batman">
        <div class="content">
            <h2>joker</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
            <a href="#">Read More</a>
        </div>
        <img src="https://r7.hiclipart.com/path/13/348/904/heath-ledger-joker-batman-the-dark-knight-actor-batman-joker-png-5d0406874f193f1125518d420a2a37df.png">
   </div>       
    </body>
    <style>

    </style>
</html>


-------CSS--------

  *{
    padding:0;
    margin:0;
    box-sizing:border-box;
    text-decoration:none;
}
body {
  /*  display:flex;
    justify-content:center ;
    align-items:center
    flex-wrap:wrap;
   width:100vw;*/
}

.card{
    width:250px;
    height:250px;
    margin:150px auto;
    background: linear-gradient(135deg,#d41e31,#491f8f);
    border-radius:10px;
    position:relative;
    transition: .5s;
    }
    
img{
    position:absolute ;
    bottom:0px;
    right:2%;
    height:330px;
    transition: .5s;}
    
.content{display:none;};
/*
img{
    position:absolute ;
    bottom:0;
    height:300px;
    right:0;
}
*/
.content{
    width:250px;
    height:400px;
}
.content h2{
    color:white;
    text-transform:uppercase;
    padding:20px;
   /* margin:auto;*/
    font-size:2em;
}

.content p{
   width:160px;
   padding:25px;
   padding-top:0px;
   color:white;
}

.content a{
margin:15px;
padding:10px;
border:none;
outline:none;
background:blue;
color:white;
border-radius:10px;
cursor:pointer ;
margin-left:10px;
transition:.2s;
    }


    .card:hover {
    width:250px;
    height:420px;
    background: linear-gradient(135deg,#d41e31,#491f8f);
    linear-gradient:;
    border-radius:10px;
    position:relative;}
    
.card:hover img{
    position:absolute ;
    bottom:0px;
    height:410px;
    right:-35%;
}

.card:hover .content{display:block;};

.content a:hover;{
padding:10px;
border:blue;
outline:none;
background:transparent ;
color:blue;
border-radius:10px;
cursor:pointer ;
margin-left:10px;
    }

#batman{
    card{
    width:250px;
    height:250px;
    margin:150px auto;
    background: linear-gradient(135deg,black,brown);
    border-radius:10px;
    position:relative;
    transition: .5s;
    }
}

13. No Media Queries Responsive Cards

Made by Mitali. Responsive CSS Cards without using media queries. ( Source )

<!DOCTYPE html>
<html lang="en">
<head>
   <title> No Media Queries Responsive Cards</title>
</head>
<body>
<div class="wrapper">
<div class="cards">
    <div class="card card1">
      <div class="container">
         <img src="https://dl.dropbox.com/s/lowot7egp69ckuh/las_vegas.jpg?raw=1" alt="city">
      </div>
       <div class="details">
          <h3>Las Vegas</h3>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius labore quisquamadipisicing elit. Eius labore quisquam illum natus minima placeat sapiente. illum natus minima placeat sapiente.</p>
       </div>
   </div>
   <div class="card card2">
      <div class="container">
         <img src="https://dl.dropbox.com/s/e6n37px205k4w0m/newyork.jpg?raw=1" alt="city">
      </div>
      <div class="details">
         <h3>New York</h3>
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius labore quisquamadipisicing elit. Eius labore quisquam illum natus minima placeat sapiente. illum natus minima placeat sapiente.</p>
      </div>
  </div>
  <div class="card card3">
   <div class="container">
      <img src="https://dl.dropbox.com/s/w9384ags6rawth0/singapore.jpg?raw=1" alt="city">
   </div>
   <div class="details">
      <h3>Singapore</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius labore quisquamadipisicing elit. Eius labore quisquam illum natus minima placeat sapiente. illum natus minima placeat sapiente.</p>
   </div>
</div>
</div>
<a href="https://youtu.be/2wL6J7oJbpc" target="_blank">My Youtube Channel</a>
</div>
</body>
</html>


-------CSS-------


 *{
     padding: 0;
     margin: 0;
     -webkit-box-sizing: border-box;
             box-sizing: border-box;
  }
  body{
     font-family: 'Poppins',sans-serif;
     background-color: #151320;
     height: 100vh;
     display: -ms-grid;
     display: grid;
     place-items: center center;
  }
  .wrapper{
     display: -ms-grid;
     display: grid;
     place-items: center center;
  }
   .cards{
     display: -ms-grid;
     display: grid;
     padding: 20px;
     grid-template-columns: repeat(auto-fit,minmax(300px,1fr)) ;
     grid-gap: 40px;
   }
   .card{
     background-color: #1C1B29;
     border-radius: 20px;
     -webkit-box-shadow: 0 0 30px rgba(0,0,0,0.18);
             box-shadow: 0 0 30px rgba(0,0,0,0.18);
   }
   .container{
      position: relative;
      -webkit-clip-path: polygon( 0 0, 100% 0, 100% 85%, 0 100%);
              clip-path: polygon( 0 0, 100% 0, 100% 85%, 0 100%);
   }
   img{
     width: 100%;
     display: block;
     border-radius: 20px 20px 0 0;
   }
  .container:after{
     content: "";
     height: 100%;
     width: 100%;
     top: 0;
     left: 0;
     border-radius: 20px 20px 0 0;
     position: absolute;
     opacity: 0.7;
  }
  .card1>.container:after{
     background-image:-o-linear-gradient(315deg,#0100EC,#fb36f4);
     background-image:linear-gradient(135deg,#0100EC,#fb36f4)
  }
  .card2>.container:after{
     background-image:-o-linear-gradient(315deg,#2bdce3,#42ffdb);
     background-image:linear-gradient(135deg,#2bdce3,#42ffdb);
  }
  .card3>.container:after{
     background-image:-o-linear-gradient(315deg,#ffab1d,#f8501c);
     background-image:linear-gradient(135deg,#ffab1d,#f8501c);
  }
 
   .details{
        padding: 20px 10px;
    }
 .details>h3{
    color: #ffffff;
    font-weight: 600;
    font-size: 18px;
    margin: 10px 0 15px 0 ;
 }
 .details>p{
    color: #b0b0b0;
    font-size: 15px;
    line-height: 30px;
    font-weight: 400;
 }
 a{
    width: 320px;
    background-color: orange;
    color: white;
    display:block;
    text-align: center;
    padding: 10px 0;
    font-size: 20px;
    text-decoration: none;
    font-weight: 500;
    border-radius: 8px;
    margin: 15px 0 40px 0;
}

14. Product Cards UI

Made by Terrence Lee. CSS Product Cards with slide up animation. ( Source )

<!--Created By Terrance-->
<!DOCTYPE html>
<html>
    <head>
        <link href="https://fonts.googleapis.com/css2?family=Poppins:[email protected];200&family=Roboto:[email protected]&display=swap" rel="stylesheet">
        <title>Product Cards || UI</title>
    </head>
    <body>
        <div class="container">
            <div class="card">
                <div class="box">
                    <div class="content">
                        <h2>01</h2>
                        <h3>Card One</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        <a href="#">Read More</a>
                    </div>
                </div>
            </div>
             <div class="card">
                <div class="box">
                    <div class="content">
                        <h2>02</h2>
                        <h3>Card Two</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        <a href="#">Read More</a>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="box">
                    <div class="content">
                        <h2>03</h2>
                        <h3>Card Three</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        <a href="#">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>


-------CSS-------


/* Created By Terrance */
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #ebf5fc;
    font-family: 'Poppins', sans-serif;
}

.container
{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    flex-wrap: wrap;
    padding: 40px 0;
}

.container .card
{
      position: relative;
      width: 320px;
      height: 440px;
      box-shadow: inset 5px 5px 5px rgba(0,0,0,0.05),
                  inset -5px -5px 5px rgba(255,255,255,0.5),
                  5px 5px 5px rgba(0,0,0,0.05),
                  -5px -5px 5px rgba(255,255,255,0.5);
      border-radius: 15px;
      margin: 30px;
}

.container .card .box
{
       position: absolute;
       left: 20px;
       right: 20px;
       top: 20px;
       bottom: 20px;
       background: #ebf5fc;
       box-shadow: 0 10px 20px rgba(0,0,0,0.1);
       border-radius: 15px;
       display: flex;
       justify-content: center;
       align-items: center;
       transition: 0.5s;
}

.container .card:hover .box
{
    transform: translateY(-50px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.container .card .box .content
{
    padding: 20px;
    text-align: center;
}

.container .card .box .content h2
{
    position: absolute;
    top: -10px;
    right: 30px;
    font-size: 8em;
    color: rgba(0,0,0,0.02);
    transition: 0.5s;
    pointer-events: none;
}

.container .card:hover .box .content h2 
{
    color: rgba(0,0,0,0.05);
}

.container .card:hover .box .content h3
{
    font-size: 1.8em;
    color: #777;
    z-index: 1;
    transition: 0.5s;
}

.container .card:hover .box .content p
{
    font-size: 1em;
    font-weight: 300;
    color: #777;
    z-index: 1;
    transition: 0.5s;
}

.container .card .box .content a
{
    position: relative;
    display: inline-block;
    padding: 8px 20px;
    background: #03a9f4;
    margin-top: 15px;
    border-radius: 20px;
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    box shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.container .card:hover .box .content a
{
    background: #ff568f;
}

15. Coding fundamentals Cards

Made by Álvaro García Rodríguez. Coding fundamentals Cards with amazing Effects. ( Source )

<!DOCTYPE html>
<html>
<head>

	<link rel="stylesheet" href="CSS/t1complex.css">
	<title>Coding Fundamentals Cards</title>

    </head><meta charset="utf-8">
    <body>
      <div class="container">
	      <div class="card">
		      <div class="face face1">
		      	<div class="content">
		      	
		      		<h3>Design</h3>
		      	</div>
		      </div>
		      <div class="face face2">
		      	<div class="content">
		      	   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		      		tempor incididunt ut labore et dolore magna aliqua.</p>
		      		<a href="#">Read More</a>
		      	</div>
		      </div>
		 </div>
		 <div class="card">
		      <div class="face face1">
		      	<div class="content">
		      	
		      		<h3>Code</h3>
		      	</div>
		      </div>
		      <div class="face face2">
		      	<div class="content">
		      	   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		      		tempor incididunt ut labore et dolore magna aliqua.</p>
		      		<a href="#">Read More</a>
		      	</div>
		      </div>
		 </div>
		 <div class="card">
		      <div class="face face1">
		      	<div class="content">
		      		<h3>Get fun</h3>
		      	</div>
		      </div>
		      <div class="face face2">
		      	<div class="content">
		      	   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		      		tempor incididunt ut labore et dolore magna aliqua.</p>
		      		<a href="#">Read more</a>
		      	</div>
		      </div>
		 </div>
	</div>

   </body>
</html>


---------CSS-----------


body
{
	margin: 0; 
    padding: 0;
    min-height: 100vh;
	background: #333;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: consolas;
	}

	h3{
		position: relative;
		bottom: -5px;
		font-size: 70px;
		text-decoration:underline;
	}

	img{
		position: relative;
		bottom: -4px;

	}

.container
{
	width: 1000px;
	position: relative;
	display: flex;
	justify-content: space-between;
}	

.container .card
{

position: relative;
}

.container .card .face
{
	width: 300px; 
	height: 200px;
	transition: 0.5s;
}

.container .card .face.face1
{
	position: relative;
	background: #333;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	transform: translateY(100px);
}
.container .card:hover .face.face1
{
	background:#C51654 ;/*#C51654*/
transform: translateY(0);
}
.container .card .face.face1 .content
{
opacity: 0.2;
transition: 0.5s;
}
.container .card:hover .face.face1 .content
{
opacity: 1;
}
.container .card .face.face1 .content img
{
	max-width: 150px;
	max-height: 150px;
}
.container .card: .face.face1 .content h3
{
margin: 10px 0 0;
padding: 0;
color: #fff;
text-align: center;
font-size: 1.5em;

}

.container .card .face.face2
{
	position: relative;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	box-sizing: border-box;
	box-shadow: 0 20px 50px rgba(0,0,0,0.8);
	transform: translateY(-100px);
}
.container .card:hover .face.face2
{
transform: translateY(0);
}

.container .card .face.face2 .content p
{
	margin: 0;
	padding: 0;
}

.container .card .face.face2 .content a
{
margin: 15px 0 0;
display: inline-block;
text-decoration: none; 
font-weight: 900;
color: #333;
padding: 5px;
border: 1px solid #333;
}

.container .card .face.face2 .content a:hover
{
	background: #333;
	color: #fff;
}

16. Star Wars Cards

Made by Arun Jamson. Star Wars CSS cards with Hover & Neon effects. ( Source )

<html lang="en">
<head>
   
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Card UI Design With Hover Effects  CSS3 Cards</title>
    
    <link rel="stylesheet" type="text/css" href="styles/main.css">
    
</head>

<body>
   
   <div class="box">
      
       <div class="imgBx">
           <img src="https://samuel-garcia.site/img/the-force.png" alt="STAR-WARS-THE-FORCE">
       </div>
       <div class="content">
           <h2>STAR WARS<br><span>the force awakens</span></h2>
       </div>
       
   </div>
   
   
   <div class="box">
      
       <div class="imgBx">
           <img src="https://samuel-garcia.site/img/last-jedi.png" alt="Last-Jedi">
       </div>
       <div class="content">
           <h2>STAR WARS<br><span>the last jedi</span></h2>
       </div>
       
   </div>
   
   
   <div class="box">
      
       <div class="imgBx">  
           <img src="https://samuel-garcia.site/img/the-rise.png" alt="STAR-WARS-The-Skywalker">
       </div>
       <div class="content">
           <h2>STAR WARS<br><span>rise of skywalker</span></h2>
       </div>
       
   </div>
    
</body>
</html>


------CSS-------


@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Audiowide', cursive;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    min-height: 100vh;
    background: #060c21;
}

.box {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px;
    background: #060c21; /* Change */
    transition: .5s;
    
}

.box:hover {
    height: 400px;
}

.box .imgBx {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.box .imgBx img {
    max-width: 100%;
    opacity: .3;
    transition: .5s; 
}

.box:hover .imgBx img {
    opacity: 1;  
}

.box:before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: #fff;
    z-index: -1;

}

.box:after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: #fff;
    z-index: -2;
    filter: blur(40px);

}

.box:before,
.box:after   {  
    background: linear-gradient(235deg, #2196f3, #010615, #F00000);
}

.box:nth-child(2):before,
.box:nth-child(2):after   { /* not supported 😣 */
    background: linear-gradient(235deg, #2196f3, #010615, #F00000);
}

.box:nth-child(3):before,
.box:nth-child(3):after   { /* not supported 😣 */
    background: linear-gradient(235deg, #772aff, #010615, #2196f3);
}

.box .content {
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 90px;
    background: rgba(0,0,0,.04);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 0.5s;
}

.box:hover .content {
    opacity: 1;
}

.box .content h2 {
    font-size: 20px;
    color: #fff;
    font-weight: 500; /* just one style 😐 */
    line-height: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.box .content h2 span {
    font-size: 14px;
    color: #fff;
    font-weight: 200; /* just one style 😐 */
    
    letter-spacing: 2px;
}

17. Nice Cards

Made by Nife Feranmi. ( Source )

<!DOCTYPE html>
<html>
<head>
    <title>website</title>
    <link rel="stylesheet" type="text/css" href="css">
          <link href="https://fonts.googleapis.com/css?family=Handlee" rel="stylesheet">
          <meta name="viewport" 
content="width=device-width, height=device-height, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="youtube.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    
    <div class="container">
        <div class="card">
            <div>
                <h2>NIFFY</h2>
                <p>hey there do you like this design if so plss give me an upvote and follow me</p>
                <a href="#">contact me</a>
            </div>
        </div>
        <div class="card">
            <div>
                <h2>niffyjay1</h2>
                <p>hey there do you like this design if so plss give me an upvote</p>
                <a href="#">contact me</a>
            </div>
        </div>
        <div class="card">
            <div>
                <h2>niffyjay1</h2>
                <p>hey there do you like this design if so plss contact me soonest under this link i would be sure to reply you soonest</p>
                <a href="#">contact me</a>
            </div>
        </div>
    </div>
</body>
</html>


------CSS-------


body{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    min-width:150vh;
    background-color:skyblue;
    font-family:sans serif;
    font-family:handlee,cursive;
}
div.container{
    display:flex;
    align-items:center;
    justify-content:space-between;
}
div.card{
    position:relative;
    width:150px;
    height:200px;
    padding:40px;
    box-shadow:0 10px 30px rgba(0,0,0,0.2);
    overflow:hidden;
    background-color:white;
    justify-content:space-between;
}
div.card:before{
    content:'';
    position:absolute;
    left:0;
    bottom:calc(-100% + 4px);
    width:100%;
    height:100%;
    background:#000;
    z-index:1;
    transition:0.4s ease-in-out;
}
div.card:hover:before{
    bottom: 0;
}
div.card:nth-child(1):before{
    background:purple;
}
div.card:nth-child(2):before{
    background:brown;
}
div.card:nth-child(3):before{
    background:pink;
}
div{
    position:relative;
    z-index:2;
}
h2{
    margin-bottom:10px;
    font-size:30px;
    transition:0.5s;
    color:#777;
}
p{
    font-size:18px;
    transition:0.5s;
    color:black;
}
a{
    padding:5px;
    border:2px solid black;
    text-decoration:none;
    font-size:20px;
    color:black;
    transition:0.5s;
    background:#fff;
}
a:hover{
    color:blue;
    background:white;
}

18. Cards on flexbox

Made by Артём. Basic CSS Cards made using flexbox, uses no effects. ( Source )

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div class="container">
            <div class="cards">
                <div class="card">
                    <div class="card__image">
                    </div>
                    <div class="card__info">
                        <div class="block">
                            <span class="category">ΠšΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΡ</span>
                            <span class="name-project">НазваниС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°</span>
                        </div>
                        <div class="year">2019</div>
                    </div>
                </div>
                
                
                <div class="card">
                    <div id="img" class="card__image">
                    </div>
                    <div class="card__info">
                        <div class="block">
                            <span class="category">Landing Page</span>
                            <span class="name-project">Project 1</span>
                        </div>
                        <div class="year">2019</div>
                    </div>
                </div>
                
                
                <div class="card">
                    <div class="card__image">
                    </div>
                    <div class="card__info">
                        <div class="block">
                            <span class="category">Card</span>
                            <span class="name-project">ΠšΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ Π½Π° Flex</span>
                        </div>
                        <div class="year">2019</div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>


--------CSS--------


body {
    margin: 0;
    padding: 0;
    font-family: Arial;
}

.container {
    width: 95%;
    height: auto;
    margin: 0 auto;
   /* border: 2px solid lightblue;*/
}

.cards {
    display: flex;
    flex-wrap: wrap;
}

.card {
    width: 250px;
    height: 300px;
   /* border: 1px solid #000;*/
    margin: 50px 25px 50px 0;
    border-radius:10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.card__image {
    width: 100%;
    height: 250px;
    background-color: #717072;
    border-radius: 10px 10px 0 0;
}

.card__info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 10px;
}

.block {
    /*НСт стилСй*/
}

.category {
    font-size: 12px;
    display: block;
   
}

.name-project {
    font-size: 16px;
    font-weight: 800;
}

#img {
    background: url("https://novator.io/wp-content/uploads/2018/09/landing-page_mesa_de_trabajo_1_0.png");
    background-size: 100% 100%;
}

@media screen and (max-width: 600px) {
    .card {
        margin: 0 auto;
        margin-bottom: 50px;
    }
}

19. Beautiful Info Cards UI with CSS

Made by CodingHindi. Info Cards UI with cool animation. ( Source )

<!-- Created by Codinghindi.in  -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beautiful Info Cards UI with CSS</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="copyright">

  <a href="https://www.youtube.com/channel/UC5bkSPKJNRroCEQ7UEeFP3g?sub_confomation=1" target="_blank">Subscribe Now!</a>
</div>
    <div class="container">
        <div class="card">
            <h2>North</h2>
            <svg class="arrow-right" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
            <p>a Calm trip</p>
            <div class="pic"></div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="socials">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chrome"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle><line x1="21.17" y1="8" x2="12" y2="8"></line><line x1="3.95" y1="6.06" x2="8.54" y2="14"></line><line x1="10.88" y1="21.94" x2="15.46" y2="14"></line></svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-facebook"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>


            </div>
            <button></button>
        </div>
        <div class="card card2">
            <h2>South</h2>
            <svg class="arrow-right" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
            <p>a Romantic trip</p>
            <div class="pic"></div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="socials">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chrome"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"></circle><line x1="21.17" y1="8" x2="12" y2="8"></line><line x1="3.95" y1="6.06" x2="8.54" y2="14"></line><line x1="10.88" y1="21.94" x2="15.46" y2="14"></line></svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-facebook"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-instagram"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>


            </div>
            <button></button>
        </div>
    </div>

</body>

</html>


------CSS------

@import url("https://fonts.googleapis.com/css2?family=Fredoka:[email protected]&family=Montserrat:[email protected]&family=Open+Sans&family=Poppins:[email protected]&family=Quicksand:[email protected]&family=Roboto:[email protected]&display=swap");
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #e6e5e1;
    width: 100vw;
    height: 100vh;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

svg {
    opacity: 1;
    font-size: 12px;
    will-change: transform;
    transform: scale(0.1);
    transition: all 0.2s ease;
    color: #000;
}

.card2 svg {
    color: #fff;
}

svg h2 {
    pointer-events: none;
}

.container .card {
    position: relative;
    width: 500px;
    height: 200px;
    background: #fff;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 5px;
}

.container .card:before {
    content: "";
    z-index: 99;
    position: absolute;
    top: -10px;
    left: 32px;
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    background-color: #e6e5e1;
}

.container .card:after {
    content: "";
    z-index: 99;
    position: absolute;
    bottom: -10px;
    left: 32px;
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    background-color: #e6e5e1;
}

.container .card ul {
    z-index: 99;
    position: absolute;
    list-style: none;
    top: 39px;
    top: 5px;
}

.container .card ul li {
    width: 2px;
    height: 2px;
    border-radius: 2px;
    background-color: #e6e5e1;
    margin: 6px 38px;
}

.container .card h2 {
    position: absolute;
    bottom: 0;
    right: 130px;
    font-size: 70px;
    font-family: sans-serif;
    font-weight: 700;
    z-index: 99;
    color: #fff;
}

.container .card .arrow-right {
    position: absolute;
    z-index: 100;
    right: 75px;
    bottom: 25px;
    font-size: 40px;
    cursor: pointer;
}

.container .card p {
    position: absolute;
    top: 20px;
    right: 70px;
    color: #333;
    opacity: 0.3;
    font-size: 12px;
    letter-spacing: 1px;
    writing-mode: vertical-lr;
    transition: all .2s ease;
}

.container .card .pic {
    z-index: 100;
    background-image: url("https://blogger.googleusercontent.com/img/a/AVvXsEgq_UDfJGKaE_HuGmYol4EpC3ET1J-NYAqqeI50hZtSpVsHdYIKpij2ho81EdZM2EUF1iPtgm1Uq6CpiCTd1pRlPG_2V2ltXOLJ5pZOtv5ge2fTnwlvxSsuYnTyPVRzBY4t0FkVSLms6Wx8qFvNZ5QIlt_m6g49A9RANqQRaOqNqZ-Oypc47peRCCHa=s1920");
    width: 400px;
    height: 200px;
    background-size: 100% 110%;
    filter: grayscale(100%);
}

.container .card2 .pic {
    background-image: url("https://blogger.googleusercontent.com/img/a/AVvXsEhJyZ-m6eSSOUyrniC7vTW2CtPqK5QjasXTRE5ThJe-UcziGA9abTcEOG3CaFuSiEL33yolV5yjve_9mgxxCh-k7-PQXVOgPMEjlp8vWf7IZGupQPgIorDNrcBdu8aJX17JrxkKhSdoGgpXTbFP8DUpE6srHDVE_JmRE3VvO91qF8-QA5MT3--52Jm9=s1920");
}

.container .card .socials {
    position: absolute;
    left: 60px;
    top: 0;
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    align-items: center;
    width: 180px;
    height: 64px;
    border-radius: 80px;
}

.container .card:hover svg {
    opacity: 1;
    transform: scale(0.6);
    -webkit-transform: scale(0.6);
}

.container .card button {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 30px;
    height: 30px;
    background-color: #da4d1d;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    outline: none;
    transition: all .3s ease;
    mix-blend-mode: hard-light;
}

.container .card button {
    font-size: 3rem;
}

.container:hover {
    overflow: hidden;
    border-radius: 10px;
}

.container .card:hover button {
    transform: scale(16.5);
}

.container .card:hover p {
    color: #fff;
    z-index: 999;
}

.container .card:hover .pic {
    filter: grayscale(0);
}

.container .card .socials svg:nth-of-type(1) {
    transition-delay: 0.4s;
}

.container .card .socials svg:nth-of-type(2) {
    transition-delay: 0.3s;
}

.container .card .socials svg:nth-of-type(3) {
    transition-delay: 0.2s;
}

.container .card .socials svg:nth-of-type(4) {
    transition-delay: 0.1s;
}

.container .card2 button {
    background-color: #2b26c3;
}

.copyright {
  background-color: red;
  padding: 10px;
  text-align: center;
  font-family: "Poppins";
  cursor: pointer;
}

.copyright a {
  text-decoration: none;
  color: #fff;
  font-size: 25px;
  cursor: pointer;
}

20. Shopping cards

Made by Okere Samuel. CSS Shopping Cards with simple hover effect. ( Source )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>cards display</title>
</head>
<body>
    <div class="ShapeCover">
    <div class="square"></div>
    <div class="circle"></div>
    <div class="squareTwo"></div>
     </div>
    <section class="general_box">
        <div class="boxOne">
            <div class="watchImg">
                <img src="data:image/jpeg;base64,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" alt="a wrist watch">
            </div>
            <div class="greenDot"></div>
          <h2>GARNIER</h2>
          <p>Garnier pure active micellar cleansing water. 125ml</p>
          
          <h3 class="watchPrice">$60</h3>
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gold" class="bi bi-star-fill" viewBox="0 0 16 16">
                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gold" class="bi bi-star-fill" viewBox="0 0 16 16">
                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gold" class="bi bi-star-fill" viewBox="0 0 16 16">
                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#c2bebe" class="bi bi-star-fill" viewBox="0 0 16 16">
                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#c2bebe" class="bi bi-star-fill" viewBox="0 0 16 16">
                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#c2bebe" class="bi bi-star-fill" viewBox="0 0 16 16">
                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
              </svg>
          </div> 
        <div class=add_to_cartOne>
            <p>ADD TO CART</p>
         </div>
        </div>

        <div class="boxTwo">
            <div class="shoeImg">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRo4hU-DYkZrsz6DUi48Tu7ttGEjYBt9Z_0Xg&usqp=CAU" alt="a wrist watch">
            </div>
            <div class="redDot"></div>
          <h2>GARNIER</h2>
          <p>Garnier pure active micellar cleansing water. 125ml</p>
          
          <h3 class="shoePrice">$60</h3>
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gold" class="bi bi-star-fill" viewBox="0 0 16 16">
                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gold" class="bi bi-star-fill" viewBox="0 0 16 16">
                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gold" class="bi bi-star-fill" viewBox="0 0 16 16">
                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#c2bebe" class="bi bi-star-fill" viewBox="0 0 16 16">
                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#c2bebe" class="bi bi-star-fill" viewBox="0 0 16 16">
                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#c2bebe" class="bi bi-star-fill" viewBox="0 0 16 16">
                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
              </svg>
          </div>
        
          <div class="add_to_cartTwo">
            <p>ADD TO CART</p>
         </div>
        </div>
   
        <div class="boxThree">
            <div class="shirtImg">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQe_90wY306507bf-wDAJEARFT3VvQ-9Xymeg&usqp=CAU" alt="a wrist watch">
            </div>
            <div class="orangeDot"></div>
          <h2>GARNIER</h2>
          <p>Garnier pure active micellar cleansing water. 125ml</p>
          
          <h3 class="shirtPrice">$60</h3>
          <div>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gold" class="bi bi-star-fill" viewBox="0 0 16 16">
                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gold" class="bi bi-star-fill" viewBox="0 0 16 16">
                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="gold" class="bi bi-star-fill" viewBox="0 0 16 16">
                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#c2bebe" class="bi bi-star-fill" viewBox="0 0 16 16">
                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#c2bebe" class="bi bi-star-fill" viewBox="0 0 16 16">
                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
              </svg>
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#c2bebe" class="bi bi-star-fill" viewBox="0 0 16 16">
                <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
              </svg>
          </div>
        
          <div class="add_to_cartThree">
            <p>ADD TO CART</p>
         </div>
        </div>
    </section>
    <div class="bottomShapes">
        <div class="circleBottom"></div>
        <div class="TriangleBottom"></div>
    </div>
     <script src="./js.js"></script>  
</body>
</html>


-------CSS-------


@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:[email protected]&family=Roboto:[email protected]&display=swap");
body {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  background-color: whitesmoke;
  text-align: center;
  font-family: "Roboto", sans-serif;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
/* only one section  */
p {
  max-width: 80%;
  margin: auto;
  letter-spacing: 1px;
  line-height: 20px;
}
section {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  flex-direction: row;
  position: relative;
  top: 50px;
  bottom: 50px;
  padding-bottom: 30px;
}
.add_to_cartThree,
.add_to_cartTwo,
.add_to_cartOne {
  text-align: center;
  color: white;
  padding: 30px;
  margin-top: 24px;
}

.boxOne,
.boxTwo,
.boxThree {
  background-color: #ffffff;
}
.shoeImg,
.watchImg,
.shirtImg {
  text-align: center;
}
.shoePrice {
  color: #ff0000;
}
.shirtPrice {
  color: #ffa600;
}
.watchPrice {
  color: #07af6cdd;
}
.greenDot {
  width: 6px;
  height: 6px;
  border-radius: 55%;
  background-color: #07af6cdd;
  position: relative;
  bottom: 46px;
}
.redDot {
  width: 6px;
  height: 6px;
  border-radius: 55%;
  background-color: #ff0000;
  position: relative;
  bottom: 46px;
}
.orangeDot {
  width: 6px;
  height: 6px;
  border-radius: 55%;
  background-color: #ffa500;
  position: relative;
  bottom: 46px;
}
.boxOne,
.boxTwo,
.boxThree {
  border-radius: 3px;
  padding: 12px 25px 1px 30px;
  box-shadow: 1px 9px 23px -6px #8080807c;
  cursor: pointer;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
}
.boxOne {
  background-image: linear-gradient(to bottom, #ffffff 85%, #07af6cdd 20%);
  flex-basis: 300px;
  margin: 10px;
}
.boxTwo {
  background-image: linear-gradient(to bottom, #ffffff 85%, #ff0000 20%);
  flex-basis: 300px;
  margin: 10px;
}
.boxThree {
  background-image: linear-gradient(to bottom, #ffffff 85%, #ffa600 20%);
  margin: 10px;
  flex-basis: 300px;
  align-self: flex-start;
}
.boxOne:hover {
  transform: scale(1.01);
}
.boxTwo:hover {
  transform: scale(1.01);
}
.boxThree:hover {
  transform: scale(1.01);
}
@media (max-width: 1147px) and (min-width: 777px) {
  .boxThree {
    position: relative;
    left: -190px;
  }
}

@media (min-width: 751px) {
    .boxThree {
      position: relative;
      left: -190px;
    }
  }

  
@media (min-width: 1126px){
    .boxThree {
      position: relative;
      left: 0px;
    }
  }

/* shapes */
.square {
  background-color: #ffffff;
  border: 3px solid orangered;
  width: 10px;
  height: 10px;
  position: relative;
  top: 40px;
  transform: rotateZ(45deg);
}
/* top */
.ShapeCover {    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
.circle {
  background-color: #ffffff;
  width: 10px;
  height: 10px;
  border: 3px solid orange;
  border-radius: 10px;
  position: relative;
  top: 40px;
}
.squareTwo {
  background-color: #ffffff;
  border: 3px solid orangered;
  width: 10px;
  height: 10px;
  position: relative;
  top: 40px;
  right: 40px;
  transform: rotateZ(45deg);
}
/* bottom shapes */
.bottomShapes{
    display:flex;
    justify-content:space-between;
}

.circleBottom {
    background-color: #ffffff;
    width: 10px;
    height: 10px;
    border: 3px solid #07af6cdd;
    border-radius: 10px;
    position: relative;
    top: 30px;
    left: 90px;
  }
  .TriangleBottom{
    background-color: #ffffff;
    width: 23px;
    height: 19px;
    border:3px solid #ffa500;
    transform: rotateZ(45deg);
    position:absolute;
    bottom: -27px;
    right:30px;
}
img {
  transform: scale(1);
}

21. CSS flipping cards

Made by coding-space. Simple CSS Cards with flipping animation. ( Source )

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
	</head>
	<body>
		<div id="wrapper">
            <div class="container">
                <div class="action">
                    <div class="front">
                        <img src="https://images.unsplash.com/photo-1618641986557-1ecd230959aa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cHJvZmlsZXxlbnwwfDF8MHx8&auto=format&fit=crop&w=600&q=60" alt="">
                    </div>
                    <div class="back">
                        John
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="action">
                    <div class="front">
                        <img src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cHJvZmlsZXxlbnwwfDF8MHx8&auto=format&fit=crop&w=600&q=60" alt="">
                    </div>
                    <div class="back">
                        Billy
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="action">
                    <div class="front">
                        <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cHJvZmlsZXxlbnwwfDF8MHx8&auto=format&fit=crop&w=600&q=60" alt="">
                    </div>
                    <div class="back">
                        Dilly
                    </div>
                </div>
            </div>
        </div>
        <div class="youtube">My YouTube channel: <a href="https://www.youtube.com/channel/UCv_YAMSgjPFBAlyrqQ1OhpQ?sub_confirmation=1" target="_black">click</a></div>
	</body>
</html>


-----CSS------


body {
    background-color: #333;
}
.front img {
    width: 200px;
    height: 250px;
}
#wrapper {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin: 20% auto;
}
.container {
    perspective: 1000;
}
.container:hover .action {
    transform: rotateY(180deg);
}
.container, .front, .back {
    width: 200px;
    height: 250px;
    text-align: center;
}
.action {
    transition: 0.7s;
    transform-style: preserve-3d;
}
.front, .back {
    backface-visibility: hidden;
    position: absolute;
}
.front {
    z-index: 2;
    background: lightblue;
}
.back {
    transform: rotateY(180deg);
    background: lightskyblue;
    width: 200px;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*YouTUbe styles*/
.youtube {
    text-align:center;
    color:white;   
}
.youtube a {
    color:#999;
}

22. Modern Card Design

Made by Robin Glory. A Simple Card with Hover effect.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  
  <title>Frontend Mentor | Stats preview card component</title>

  <link rel="stylesheet" href="css.css">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected];700&display=swap" rel="stylesheet">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap" rel="stylesheet">
</head>
<body id="body">
  <div class="container">
    <div id="card" class="row">
      <div id="texting" class="col-md-6 col-sm-12">
        <h3>
          Get <span style="color: hsl(277, 64%, 61%) ">insights</span>  that help your business grow.
        </h3>
        <p>
          Discover the benefits of data analytics and make better decisions regarding revenue, customer 
          experience, and overall efficiency.
        </p>
        <br>
        <div class="row">
          <div class="col-md-4 col-xs-12 sub-title">
            <h5>10K+</h5>
            <p>COMPANIES</p>
          </div>
          <div class="col-md-4 col-xs-12 sub-title">
            <h5>314</h5>
            <p>TEMPLATES</p>
          </div>
          <div class="col-md-4 col-xs-12 sub-title">
            <h5>12M+</h5>
            <p>QUERIES</p>
          </div>
        </div>
      </div>
      <div class="col-lg-6 col-sm-12 note">
        <img src="https://i.postimg.cc/63rRW3fk/image-header-desktop.jpg" alt="photohere">
      </div>
    </div>
  </div>

  <div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Robin Glory</a>.
  </div>
</body>
</html>


------CSS------


#body{
   margin: 0;
   background-color:  hsl(233, 47%, 7%);
   font-family: 'Inter', sans-serif;
   font-family: 'Lexend Deca', sans-serif;
   font-size: 15px;
}
#card {
   background-color: hsl(244, 38%, 16%);
   color: white;
   position:relative;
   width: 70%;
   height: 60%;
   padding: 10px;
   margin:15%;
   border: 2px red;
   text-align: left;
   overflow: hidden;

}
#card:hover {
   box-shadow: 0 8px 16px 0 hsl(277, 64%, 61%);
 }
#texting{
   display: relative;
   width: 50%;
   height: 100%;
   padding: 16px 15px;
   text-align: left;
   border: none;

}
img {
   position: relative;
   width: 100%;
   height: 100%;
   color:hsl(228, 45%, 44%);
   padding: 5px;
   margin: auto;
   filter: hue-rotate(50deg);
}

p{
   color: hsla(0, 0%, 100%, 0.6);
}
.sub-title{
   padding-left: 5px;
   margin: 0;
   text-align: center;
}
@media screen and (max-width: 1024px) {  
   #texting{
      width: 100%;
      text-align: center;
   }
   .note{
      padding-bottom: 10px;
   }
   }

.attribution { font-size: 11px; text-align: center; color: white; }
.attribution a { color: white; }

23. 3D Rotation Cards

Made by siri Chandana. 3D CSS Cards with flip effect. ( Source )

<section id="price">
       <div class="wrapper pricing">
         <h2>3D ROTATION CARDS</h2>
         <h2>Explore our boxes</h2>
  <div class="cols">
			<div class="col" ontouchstart="this.classList.toggle('hover');">
				<div class="container">
					<div class="front" style="background-image: url(https://images.unsplash.com/photo-1444731961956-751ed90465a5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3739c8c6b6b6a66ac6869d4568769ad2&auto=format&fit=crop&w=334&q=80)">
						<div class="inner">
							<p>veg boxes</p>
              <span>choose your box</span>
						</div>
					</div>
					<div class="back">
						<div class="inner">
						  <p>A Box full of the organic  veggies that you love.</p>
              <span> Starts from 100/-</span>
						</div>
					</div>
				</div>
			</div>
			<div class="col" ontouchstart="this.classList.toggle('hover');">
				<div class="container">
					<div class="front" style="background-image: url(https://images.unsplash.com/photo-1449831438585-6f419654d73e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6c15e364face49633aa437ebb7bb886c&auto=format&fit=crop&w=750&q=80/)">
						<div class="inner">
							<p>Fruit box</p>
              <span>Choose your box</span>
						</div>
					</div>
					<div class="back">
						<div class="inner">
							<p>A Box full of the organic fruits that you love.</p>
               <span>Starts from 150/-</span>
						</div>
					</div>
				</div>
			</div>
<div class="col" ontouchstart="this.classList.toggle('hover');">
				<div class="container price">
					<div class="front" style="background-image: url(https://images.unsplash.com/photo-1509594430428-2f93bbc9fef6?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f4eed309658c0ac5ef950a29788b129f&auto=format&fit=crop&w=620&q=80)">
						<div class="inner">
							<p>Dairy products</p>
              <span>Choose your box</span>
						</div>
					</div>
					<div class="back">
						<div class="inner">
							<p>A Box full of Milk,Butter,Bread that you love.</p>
               <span>Starts from 200/-</span>
						</div>
					</div>
				</div>
			</div>
         </div>


--------CSS---------


body{
    width:100%;
    height:100%;
    margin:0 auto;
}
.pricing{
  width:100%;
  height:auto;
  padding-top:70px;
}

h2{
  font-size: 2rem;
  font-weight: normal;
  color: #444;
  text-align: center;
  margin: 2rem 0;
 background: linear-gradient(#ff00cc,#333399);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}



.cols{
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.col{
  width: calc(25% - 2rem);
  margin: 1rem;
  cursor: pointer;
}

.container{
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
	-webkit-perspective: 1000px;
	        perspective: 1000px;
  
}

.front,
.back{
  background-size: cover;
	background-position: center;
	-webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	-o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	text-align: center;
	min-height: 280px;
	height: auto;
	border-radius: 10px;
	color: #fff;
	font-size: 1.5rem;
}

.back{
  background: white;
  background: -webkit-linear-gradient(45deg, #f56217  0%,#ffc371 100%);
  background: -o-linear-gradient(45deg, #f56217   0%,#ffc371 100%);
  background: linear-gradient(45deg,  #f56217 0%,#ffc371 100%);
}

.front:after{
	position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    opacity: .6;
    background-color: #000;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-radius: 10px;
}
.container:hover .front,
.container:hover .back{
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.back{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.inner{
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
            transform: translateY(-50%) translateZ(60px) scale(0.94);
    top: 50%;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 2rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
            perspective: inherit;
    z-index: 2;
}

.container .back{
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.container .front{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.container:hover .back{
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.container:hover .front{
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.front .inner p{
  font-size: 1.5rem;
  margin-bottom: 2rem;
  position: relative;
}

.front .inner p:after{
  content: '';
  width: 4rem;
  height: 2px;
  position: absolute;
  background: #C6D4DF;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -.75rem;
}

.front .inner span{
  color: rgba(255,255,255,0.7);
  font-family: 'Montserrat';
  font-weight: 300;
}

@media screen and (max-width: 64rem){
  .col{
    width: calc(33.333333% - 2rem);
  }
}

@media screen and (max-width: 48rem){
  .col{
    width: calc(50% - 2rem);
  }
}

@media screen and (max-width: 32rem){
  .col{
    width: 100%;
    margin: 0 0 2rem 0;
  }
}