Card css

Html make card

box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0px, 0px, 50px rgba(0, 0, 0, 0.2)

Card css

body {
  background-image: url("../images/pattern-background-desktop.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-color: hsl(225, 100%, 94%);
}

main .card {
  width: 450px;
}

main .card .container {
  padding: 4.2rem;
}

main .card .description {
  margin-bottom: 2.5rem;
  line-height: 2.8rem;
}

main .card .plan {
  justify-content: space-around;
}

main .card .plan-info {
  margin-right: 80px;
}

main .card .change-plan:hover {
  cursor: pointer;
  text-decoration: none;
  color: #766cf1;
}

main .card .main-button {
  margin-bottom: 30px;
}

main .card .main-button:hover {
  cursor: pointer;
  background-color: #766cf1;
}

main .card .cancel {
  color: rgb(114, 114, 114);
  font-weight: 700;
}

main .card .cancel:hover {
  cursor: pointer;
  font-weight: 900;
  color: hsl(223, 47%, 23%);
}

Source: raw.githubusercontent.com

Similar codes

-1 vote163 views1 answer
Css selector list
CSS
0 vote138 views1 answer
Video camera icon font awesome
CSS
0 vote134 views1 answer
Css code for increasing size
CSS
0 vote139 views1 answer
Punderline none
CSS
6 votes133 views2 answers
You have a flexbox container with items set in a row. You want the items to be displayed in the opposite order in which they appear currently. Which code do you use?
CSS
12 votes150 views4 answers
Css hover but no click
CSS
39 votes158 views6 answers
Css first child
CSS
0 vote251 views1 answer
Css remove scrollbar from body
CSS
0 vote206 views1 answer
Bootstrap 5 carosul height set
CSS Bootstrap
36 votes158 views2 answers
First-child
CSS