Liste des cartes d'entreprise avec image de marque et marketing

Ouvrir dans l'éditeur Publiez votre code

Recommandé

4 June 2025

CSS

@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap");

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #fff;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

section {
  padding-block: min(20vh, 2rem);
  width: calc(min(76.5rem, 90%));
  margin-inline: auto;
  color: #111;

h2 {
    text-transform: capitalize;
    letter-spacing: 0.025em;
    font-size: clamp(2rem, 1.8125rem + 0.75vw, 2.6rem);
  }

a {
    display: inline-block;
    text-decoration: none;
  }

.container {
    margin-top: 5em;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 2rem;

.card {
      &:nth-child(1) .box .icon .iconBox {
        background: #d3b19a;
      }
      &:nth-child(2) .box .icon .iconBox {
        background: #70b3b1;
      }
      &:nth-child(3) .box .icon .iconBox {
        background: #d05fa2;
      }

ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.625rem;

li {
          text-transform: uppercase;
          background: var(--clr-tag);
          color: #282828;
          font-weight: 700;
          font-size: 0.8rem;
          padding: 0.375rem 0.625rem;
          border-radius: 0.188rem;
        }

.branding {
          color: darken(#d3b19a, 40%);
        }

.packaging {
          color: darken(#70b3b1, 40%);
        }

.marketing {
          color: darken(#d05fa2, 40%);
        }
      }

.content {
        padding: 0.938rem 0.625rem;

h3 {
          text-transform: capitalize;
          font-size: clamp(1.5rem, 1.3909rem + 0.4364vw, 1.8rem);
        }

p {
          margin: 0.625rem 0 1.25rem;
          color: #565656;
        }
      }
    }

.card-inner {
      position: relative;
      width: inherit;
      height: 18.75rem;
      background: var(--clr);
      border-radius: 1.25rem;
      border-bottom-right-radius: 0;
      overflow: hidden;

.box {
        width: 100%;
        height: 100%;
        background: #fff;
        border-radius: 1.25rem;
        overflow: hidden;

.imgBox {
          position: absolute;
          inset: 0;

img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

.icon {
          position: absolute;
          bottom: -0.375rem;
          right: -0.375rem;
          width: 6rem;
          height: 6rem;
          background: var(--clr);
          border-top-left-radius: 50%;

&:hover .iconBox {
            transform: scale(1.1);
          }

&::before {
            position: absolute;
            content: "";
            bottom: 0.375rem;
            left: -1.25rem;
            background: transparent;
            width: 1.25rem;
            height: 1.25rem;
            border-bottom-right-radius: 1.25rem;
            box-shadow: 0.313rem 0.313rem 0 0.313rem #fff;
          }

&::after {
            position: absolute;
            content: "";
            top: -1.25rem;
            right: 0.375rem;
            background: transparent;
            width: 1.25rem;
            height: 1.25rem;
            border-bottom-right-radius: 1.25rem;
            box-shadow: 0.313rem 0.313rem 0 0.313rem var(--clr);
          }

.iconBox {
            position: absolute;
            inset: 0.625rem;
            background: #282828;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: 0.3s;

span {
              color: #fff;
              font-size: 1.5rem;
            }
          }
        }
      }
    }
  }
}

Liste des cartes d'entreprise avec image de marque et marketing

Recommandé

Jeu de Toast Catcher

Carte membres de l'équipe CSS

annuaires de voitures

HTML

CSS

JS

Recommandé

Jeu de Toast Catcher

Carte membres de l'équipe CSS

annuaires de voitures

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS