क्लाउडकोड्स द्वारा एक कोड

अनुशंसित

7 December 2024

Mironovbogdan341 द्वारा एक कोड

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

क्लाउडकोड्स द्वारा एक कोड

अनुशंसित

क्रिएटिवबग722 द्वारा एक कोड

Mironovbogdan341 द्वारा एक कोड

कोडेक्स द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

क्रिएटिवबग722 द्वारा एक कोड

Mironovbogdan341 द्वारा एक कोड

कोडेक्स द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS