Login Card by admin

0 Add to Favorites

HTML Code
CSS Code

.all {
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.all .container {
  background-color: azure;
  width: 20%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  padding: 20px;
}
.container p {
  padding: 20px 0;
}
.container .media {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
.media button {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  border-radius: 10px;
}
.one {
  background-color: black;
}
.two {
  background-color: rgb(58, 88, 255);
}
.theree {
  background-color: rgb(0, 182, 152);
}
button .icon {
  font-size: 25px;
  color: azure;
}
button .email,
.facebook,
.twitter {
  color: azure;
  padding: 15px;
}
@media only screen and (max-width: 1480px) {
  .all .container {
    width: 30%;
  }
}
@media only screen and (max-width: 1000px) {
  .all .container {
    width: 40%;
  }
}
@media only screen and (max-width: 739px) {
  .all .container {
    width: 60%;
  }
}
@media only screen and (max-width: 588px) {
  .all .container {
    width: 60%;
  }
}
@media only screen and (max-width: 490px) {
  .all .container {
    width: 70%;
  }
}

Uploaded: 13th July 2024

Tags: #email, #facebook, #twitter, #login, #card

CSSPortal

( admin )

We share content found online. We don't claim credit of anything posted here. If you see your work, let us know and we can move it to your account.

•Member since: 25th June 2024

•Website•X (Twitter)

CSS Properties Used

There are 14 CSS properties used in the above example. Click to view and learn about each property.

width display align-items justify-content background-color flex-direction border-radius overflow text-align padding row-gap border font-size color

HTML Tags Used

There are 9 HTML Tags used in the above example. Click to view and learn about each tag.

html head link body div h1 p button i