Un code par cloudcodes

Ouvrir dans l'éditeur Publiez votre code

Recommandé

24 February 2025

Bouton poussoir d'accueil CodePen

13 June 2025

<header>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Chi Siamo</a></li>
        <li><a href="#">Servizi</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contatti</a></li>
        <li><a href="#">Blog</a></li>
    </ul>
</header>

<section class="hero">
    <h1>Benvenuti sul nostro sito web</h1>
    <p>Scopri le nostre soluzioni innovative per il tuo business</p>
    <button>Scopri di più</button>
</section>

<section class="content">
    <h1>Il nostro impegno per l'eccellenza</h1>
    <p><strong>Offriamo soluzioni personalizzate</strong> per soddisfare le esigenze specifiche di ogni cliente. La nostra esperienza e professionalità ci permettono di fornire risultati di alta qualità. <em>Siamo costantemente aggiornati sulle ultime tecnologie</em> per offrire sempre il meglio. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Contattaci per una consulenza</a> gratuita. Ut felis.</p>

<h2>I nostri servizi principali</h2>
    <p>Sviluppo web, web design, e-commerce, marketing digitale, SEO, social media marketing. Offriamo un servizio completo per la tua presenza online.</p>

<h2>La nostra storia</h2>
    <p>Nati nel 2010 con la passione per l'innovazione e la tecnologia, abbiamo aiutato numerose aziende a crescere e raggiungere i loro obiettivi. La soddisfazione dei nostri clienti è la nostra priorità.</p>

<h2>I nostri valori</h2>
    <p>Professionalità, affidabilità, innovazione, orientamento al cliente. Crediamo in un approccio collaborativo e trasparente per costruire relazioni durature con i nostri clienti.</p>
</section>

<footer>
    Copyright © 2025 Il Mio Sito Web
</footer>

CSS

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

:root {
    --header-bg: #28a745; /* A shade of green */
    --header-bg-sticky: rgba(40, 167, 69, 0.95); /* Slightly transparent green */
    --header-text: #ffffff; /* White text */
    --header-height: 48px;
    --header-width-sticky: min(600px, 100%);
    --nav-gap: 1px;
    --nav-item-space: 8px;
    --content-space: 64px 32px;
    --btn-space: 16px 32px;
    --btn-radius: 99em;
    --hero-gap: 16px;
    --footer-bg: #343a40; /* Dark gray */
    --footer-text: #ffffff; /* White text */
    --footer-height: 48px;
    --hero-bg: #f8f9fa; /* Very light gray for hero background */
    --hero-text-color: #343a40; /* Dark gray for hero text */
    --btn-border-color: #ffffff; /* White border for button */
}

html {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
}

header {
    background-color: var(--header-bg);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    overflow: visible;
    margin: 0 auto;
    height: var(--header-height);
}

header ul {
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
    height: 100%;
    list-style: none;
    grid-auto-flow: column;
    gap: var(--nav-gap);
    margin: 0 auto;
    padding: 0;
    width: min(900px, 100%);
}

header li {
    margin: 0;
    padding: var(--nav-item-space);
}

header a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: var(--header-text);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
}

.hero {
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
    align-content: center;
    justify-content: center;
    place-content: center;
    gap: var(--hero-gap);
    aspect-ratio: 16 / 9;
    background-color: var(--hero-bg); /* Changed hero background */
    color: var(--hero-text-color); /* Changed hero text color */
}

.hero h1 {
    font-size: 64px;
    font-weight: 100;
    line-height: 1;
    margin: 0;
}

.hero p {
    font-size: 32px;
    font-weight: 200;
    line-height: 2;
    margin: 0;
}

.hero button {
    background: transparent;
    color: var(--hero-text-color); /* Match hero text color */
    appearance: none;
    border: 1px solid var(--btn-border-color); /* Changed border color */
    border-radius: var(--btn-radius);
    padding: var(--btn-space);
    text-transform: uppercase;
}

.content {
    width: min(1000px, 100%);
    padding: var(--content-space);
    margin: auto;
}

.content h1 {
    font-weight: 200;
}

.content h2 {
    font-weight: 300;
}

.content p {
    font-size: 18px;
    line-height: 1.618;
}

footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    height: var(--footer-height);
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;
}

@supports (animation-timeline: scroll()) {
    header {
        animation: header ease-in-out both;
        animation-timeline: scroll();
        animation-range: 0 90vh;
    }

@keyframes header {
        0% {
            width: 100%;
        }
        70% {
            width: 100%;
            border-radius: 0;
            translate: 0 -100%;
            background-color: var(--header-bg);
        }
        90% {
            top: 0;
            width: var(--header-width-sticky);
            translate: 0 -100%;
            box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        }
        100% {
            width: var(--header-width-sticky);
            background-color: var(--header-bg-sticky);
            top: 12px;
            height: 48px;
            border-radius: 99em;
            translate: 0 0;
            box-shadow: inset 0 1px 1px white, 0 0 1px rgba(0, 0, 0, 0.9), 0 8px 14px rgba(0, 0, 0, 0.3);
        }
    }
}

Un code par cloudcodes

Recommandé

Bouton poussoir d'accueil CodePen

Un code de Metehan

Un code par staticclass394

HTML

CSS

JS

Recommandé

Bouton poussoir d'accueil CodePen

Un code de Metehan

Un code par staticclass394

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS