Location Card by admin

2 Add to Favorites

HTML Code
CSS Code

main {
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 16px;
  width: 360px;
  background: #ffffff;
  box-shadow: 0px 16px 32px rgba(17, 24, 39, 0.08);
  border-radius: 24px;
}
main header {
  display: flex;
}
main header span {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px;
  width: 32px;
  height: 32px;
  background: #eff1f6;
  border-radius: 999999px;
}
main section h1 {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
  color: #151619;
}
main section p {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #151619;
}
main footer {
  gap: 1rem;
  display: flex;
}

.btn {
  border: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 16px;
  gap: 4px;
  height: 40px;
  border-radius: 50px;
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  width: 100%;
}
.btn.neutral {
  color: #151619;
  background: #d6d8db;
}
.btn.primary {
  color: #ffffff;
  background: #2b67e9;
}

Uploaded 13th July 2024 Views 217 #card #location #services #neutral #blue

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

CSS Properties Used

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

display flex-direction padding gap width background box-shadow border-radius align-items height font-family font-style font-weight font-size line-height color border justify-content text-align

HTML Tags Used

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

html body main header span svg path section h1 p footer button