Un código de cloudcodes

1,963 cloudcodes

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

30 March 2025

Efecto de texto desordenado

30 November 2024

Menú de navegación de Coreboot

28 November 2024

Página de destino: piratería

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