Un codice di cloudcodes

1365 cloudcodes

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

29 January 2025

Un codice di sheeshokaokayokay

24 April 2025

Un codice di Metehan

14 September 2024

Animazione della linea del battito cardiaco

HTML

<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);
        }
    }
}

Consigliato

Un codice di sheeshokaokayokay

Un codice di Metehan

Animazione della linea del battito cardiaco

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS