Utwórz projekt ↗
HTML / CSS · KOD NA LICENCJI MIT

Układy kart: karta projektu

Karta projektu. Edytuj treść i wygląd, a potem skopiuj kod.

Edytuj HTML, CSS i JS ↗ Otwórz konfigurator ↗

Gdzie wykorzystać ten przykład?

Listy usług, ofert i projektów. Wariant „Układy kart: karta projektu” możesz dopasować do kolorów i treści swojej strony.

Jak działa ten efekt?

HTML opisuje zawartość pojedynczej karty, a CSS ustala proporcje, odstępy i wyróżniki. Kartę możesz powielić w siatce własnej strony.

Jak dodać go na stronę?

  1. Otwórz przykład w edytorze i podmień tekst oraz kolory.
  2. HTML wstaw w miejscu, w którym ma pojawić się element.
  3. CSS przenieś do arkusza stylów swojej strony. Reguły body z podglądu dopasuj do własnego układu.
  4. Sprawdź działanie na telefonie, klawiaturą i z własną treścią.

Na co zwrócić uwagę?

Podmień przykładowe dane oraz odnośniki. Sprawdź kartę z długim tytułem i większą liczbą wierszy opisu.

Co możesz zmienić w konfiguratorze?

Tekst przykładu, Kolor akcentu. W edytorze kodu możesz dodatkowo zmienić całą strukturę i zachowanie przykładu.

Gotowy kod: Układy kart: karta projektu

HTML

<div class="effect"><article class="layout"><span class="layout-symbol" aria-hidden="true">↗</span><div class="layout-content"><small>PROJEKT / 2026</small><h2>Układy kart</h2><p>Miejsce na opis projektu i jego najważniejsze cechy.</p><a href="#layout-details">Zobacz szczegóły ↗</a></div></article><p id="layout-details">Tutaj umieść szczegółową treść.</p></div>

CSS

*{box-sizing:border-box}body{margin:0;padding:35px 24px;background:#f4f5ef;color:#293322;font:15px/1.7 Arial,sans-serif;min-height:100vh;display:grid;place-items:center}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #738858;outline-offset:4px}h2,h3,p{margin-top:0}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.effect{width:100%;max-width:650px;color:#e95b30;text-align:center}.effect *{box-sizing:border-box}.effect button,.effect a{font:inherit}.effect button{cursor:pointer}.effect h2{font-size:clamp(25px,5vw,42px);line-height:1.2;margin:0 0 14px}.effect p{font-size:13px;color:#7c8c6d;margin:10px 0}.effect button:focus-visible,.effect a:focus-visible,.effect input:focus-visible{outline:3px solid #e95b30;outline-offset:5px}.layout{width:min(540px,100%);margin:auto;background:#fff;border:1px solid #dce4d2;border-radius:10px;padding:26px;text-align:left;display:grid;grid-template-columns:110px 1fr}.layout-symbol{display:grid;place-items:center;min-width:55px;min-height:65px;font:bold 44px monospace;color:#e95b30;margin-bottom:15px}.layout-content{min-width:0}.layout small{font:9px monospace;letter-spacing:1.4px;color:#8a977b}.layout h2{font-size:25px;margin:15px 0}.layout a{font-size:11px;color:#e95b30;text-decoration:none}.layout p{font-size:12px}#layout-details{opacity:0}#layout-details:target{opacity:1}@media(max-width:450px){.layout{grid-template-columns:1fr;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.effect *,.effect *:before,.effect *:after{animation:none!important;transition:none!important}}

Podobne przykłady

Układy kart: karta usługi ↗Układy kart: profil osoby ↗Układy kart: opinia klienta ↗Układy kart: karta statystyki ↗Układy kart: zaproszenie na wydarzenie ↗Układy kart: karta artykułu ↗