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

Sekcje otwierające: okrągły akcent

Okrągły akcent. Edytuj treść i wygląd, a potem skopiuj kod.

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

Gdzie wykorzystać ten przykład?

Pierwszy ekran oferty, portfolio i prezentacji. Wariant „Sekcje otwierające: okrągły akcent” możesz dopasować do kolorów i treści swojej strony.

Jak działa ten efekt?

Układ łączy nagłówek, opis i przycisk. CSS wyznacza proporcje oraz zachowanie bloków na różnych szerokościach ekranu.

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ę?

Wstaw własny nagłówek i właściwy cel przycisku. Nie ustawiaj wysokości, która ucina treść na niskim ekranie.

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: Sekcje otwierające: okrągły akcent

HTML

<div class="effect"><section class="hero-pack"><span class="hero-number" aria-hidden="true">01</span><div class="hero-main"><small>MAŁY POMYSŁ. DUŻA RÓŻNICA.</small><h2>Sekcje otwierające</h2><p>Przedstaw swój projekt, usługę lub produkt. Pokaż, co warto poznać bliżej.</p><a href="#hero-more">Poznaj szczegóły ↗</a></div><div class="hero-art" aria-hidden="true"><span>✳</span></div></section><p id="hero-more">Tutaj zaczyna się dalsza 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}.hero-pack{position:relative;padding:35px;border-radius:12px;background:#e9efdf;overflow:hidden;background:radial-gradient(circle at 90% 10%,#e95b3033 0 80px,transparent 81px);text-align:left}.hero-pack small{display:inline-block;font:9px monospace;letter-spacing:1.5px;margin-bottom:22px;color:#7f916c}.hero-pack h2{font-size:clamp(28px,5vw,46px);line-height:1.08;margin-bottom:20px;letter-spacing:-1.5px;color:inherit}.hero-pack p{font-size:12px;line-height:1.8;color:#7f916c}.hero-pack a{display:inline-block;color:white;background:#e95b30;padding:11px 17px;text-decoration:none;font-size:11px;border-radius:5px;margin-top:15px}.hero-art{display:none;place-items:center;background:#e95b3022;border-radius:40px 8px;font-size:90px;color:#e95b30;min-height:170px}.hero-number{display:none;font:45px monospace;color:#e95b30}#hero-more{opacity:0}#hero-more:target{opacity:1}@media(max-width:480px){.hero-pack{grid-template-columns:1fr}.hero-art{min-height:100px;font-size:65px}.hero-number{font-size:25px}}
@media(prefers-reduced-motion:reduce){.effect *,.effect *:before,.effect *:after{animation:none!important;transition:none!important}}

Podobne przykłady

Sekcje otwierające: typografia centralna ↗Sekcje otwierające: układ dzielony ↗Sekcje otwierające: numer redakcyjny ↗Sekcje otwierające: duże hasło ↗Sekcje otwierające: hasło z etykietą ↗Sekcje otwierające: ciemne otwarcie ↗