WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Elenco schede aziendali: esempio HTML e CSS
860
aghamoradi
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
8 December 2025
Metehan
18 December 2025
Caricatore HTML del gioco Boom Slingers ReBoom
25 November 2025
Codice sorgente HTML5 del gioco Stick Merge
HTML
Copy
leading companies
have trusted us
arrow_outward
trust & co.
Fill out the form and the algorithm will offer the right team of experts
branding
packaging
arrow_outward
tonic
Fill out the form and the algorithm will offer the right team of experts
branding
marketing
arrow_outward
shower gel
Fill out the form and the algorithm will offer the right team of experts
branding
packaging
marketing
CSS
Copy
@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; } } } } } } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */