Un código de cleancloud166

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

21 July 2025

Entrada de carga de archivos con icono SVG

19 May 2025

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>furniture</title>
    <link rel="stylesheet" href="./mest.css" />
  </head>
  <body>
    <header class="center">
      <a href="#" class="btn"></a>
    </header>
    <nav class="fixed-navbar">
      <button class="button">
        <a href="#home" style="color: #fff">Che cos'è</a>
      </button>
      <button class="button button2">
        <a href="#cause" style="color: #fff"> Cause</a>
      </button>
      <button class="button button3">
        <a href="#fasi" style="color: #fff"> fasi</a>
      </button>
      <button class="button button4">
        <a href="#sintomi" style="color: #fff">Sintomi</a>
      </button>
      <button class="button button5">
        <a href="#trattamento" style="color: #fff">Trattamento</a>
      </button>
    </nav>
    <div class="background-image">
      <h1 class="beka">jfgk</h1>
    </div>

<div class="progress-bar"></div>
    <section>
      <h3>text
      </h3>
      <div class="card-container">
        <div class="card">
          <h2>Valley</h2>
          <img src="./a4609d604f639766c178c7d27920be5d.jpg" alt="" />
          <p>
            Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum
            at erat cursus quis; scelerisque feugiat.
          </p>
        </div>
        <div class="card">
          <h2>Island</h2>
          <img
            src="https://images.unsplash.com/photo-1543348750-466b55f32f16?q=80&w=3474&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="img"
          />
          <p>
            Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum
            at erat cursus quis; scelerisque feugiat.
          </p>
        </div>
        <div class="card">
          <h2>Nature</h2>
          <img
            src="https://images.unsplash.com/photo-1448518340475-e3c680e9b4be?q=80&w=3200&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="img"
          />
          <p>
            Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum
            at erat cursus quis; scelerisque feugiat.
          </p>
        </div>
        <div class="card">
          <h2>Fuji</h2>
          <img
            src="https://images.unsplash.com/photo-1490806843957-31f4c9a91c65?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="img"
          />
          <p>
            Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum
            at erat cursus quis; scelerisque feugiat.
          </p>
        </div>

<div class="card">
          <h2>Sunrise</h2>
          <img
            src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?q=80&w=3506&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="img"
          />
          <p>
            Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum
            at erat cursus quis; scelerisque feugiat.
          </p>
        </div>
        <div class="card">
          <h2>Lake</h2>
          <img
            src="https://plus.unsplash.com/premium_photo-1673697239981-389164b7b87f?q=80&w=3488&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="img"
          />
          <p>
            Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum
            at erat cursus quis; scelerisque feugiat.
          </p>
        </div>
        <div class="card">
          <h2>Flowers</h2>
          <img
            src="https://images.unsplash.com/photo-1490750967868-88aa4486c946?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="img"
          />
          <p>
            Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum
            at erat cursus quis; scelerisque feugiat.
          </p>
        </div>
        <div class="card">
          <h2>Snow</h2>
          <img
            src="https://images.unsplash.com/photo-1518873890627-d4b177c06e51?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="img"
          />
          <p>
            Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum
            at erat cursus quis; scelerisque feugiat.
          </p>
        </div>
        <div class="card">
          <h2>Sunset</h2>
          <img
            src="https://images.unsplash.com/photo-1559666126-84f389727b9a?q=80&w=3554&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="img"
          />
          <p>
            Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum
            at erat cursus quis; scelerisque feugiat.
          </p>
        </div>
        <div class="card">
          <h2>Autumn</h2>
          <img
            src="https://images.unsplash.com/photo-1507100403890-47482dcd79e0?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="img"
          />
          <p>
            Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum
            at erat cursus quis; scelerisque feugiat.
          </p>
        </div>
        <div class="card">
          <h2>Stars</h2>
          <img
            src="https://plus.unsplash.com/premium_photo-1672070779458-cb842bdadca7?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8ODV8fHN0YXJyeSUyMG5pZ2h0fGVufDB8MHwwfHx8MA%3D%3D"
            alt="img"
          />
          <p>
            Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum
            at erat cursus quis; scelerisque feugiat.
          </p>
        </div>
        <div class="card">
          <h2>Van</h2>
          <img
            src="https://images.unsplash.com/photo-1521499420147-36d5bfc2781f?q=80&w=1510&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="img"
          />
          <p>
            Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum
            at erat cursus quis; scelerisque feugiat.
          </p>
        </div>
        <div class="card">
          <h2>Cat</h2>
          <img
            src="https://images.unsplash.com/photo-1573182023541-128787b11ba5?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDB8fGNhdCUyMG5hdHVyZXxlbnwwfDB8MHx8fDA%3D"
            alt="img"
          />
          <p>
            Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum
            at erat cursus quis; scelerisque feugiat.
          </p>
        </div>
        <div class="card">
          <h2>Lavender</h2>
          <img
            src="https://images.unsplash.com/photo-1515612402715-96a358304c50?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzR8fGxhdmVuZGVyfGVufDB8MHwwfHx8MA%3D%3D"
            alt="img"
          />
          <p>
            Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum
            at erat cursus quis; scelerisque feugiat.
          </p>
        </div>
        <div class="progress-bar"></div>
        <div class="card">
          <h2>Valley</h2>
          <img
            src="https://images.unsplash.com/photo-1479030160180-b1860951d696?q=80&w=3072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="img"
          />
          <p>
            Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum
            at erat cursus quis; scelerisque feugiat.
          </p>
        </div>
        <div class="card">
          <h2>Valley</h2>
          <img
            src="https://images.unsplash.com/photo-1479030160180-b1860951d696?q=80&w=3072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="img"
          />
          <p>
            Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum
            at erat cursus quis; scelerisque feugiat.
          </p>
        </div>
        <div class="card">
          <h2>Valley</h2>
          <img
            src="https://images.unsplash.com/photo-1479030160180-b1860951d696?q=80&w=3072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="img"
          />
          <p>
            Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum
            at erat cursus quis; scelerisque feugiat.
          </p>
        </div>
        <div class="card">
          <h2>Valley</h2>
          <img
            src="https://images.unsplash.com/photo-1479030160180-b1860951d696?q=80&w=3072&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="img"
          />
          <p>
            Lorem ipsum odor amet, consectetuer adipiscing elit. Augue interdum
            at erat cursus quis; scelerisque feugiat.
          </p>
        </div>
      </div>
    </section>
  </body>
</html>

CSS

/* @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"); */
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: #f5f5f5;
  color: #4e4e4e;
  font: 18px/27px "Arial", sans-serif;
  text-align: center;
}

.beka {
  font-size: 50px;
  background-color: #4bc0c8;
}
h6 {
  color: #1e1e1e;
}

/*header+nav*/

header {
  background-color: #383232;
  color: #fff;
  padding: 15px;
  text-align: left;
  position: sticky;
  height: auto;
}

nav {
  background-color: #404040;
  color: #fff;
}
/* 
  nav ul {
    list-style-type: none;
    margin: 0%;
    padding: 0;
  }
  
  nav li a {
    text-decoration: none;
    color: #fff;
  }
  
  nav li:hover {
    background-color: transparent;
  } */

/* nav li {
    display: inline-block;
    padding: 15px;
  } */

nav#slide-menu {
  position: fixed;
  top: 0;
  left: -100px;
  bottom: 0;
  display: block;
  float: left;
  width: 100%;
  max-width: 284px;
  height: 100%;
  transition: all 300ms;
}

nav#slide-menu > ul {
  display: block;
  margin: 40px;
  padding: 0;
  list-style: none;
  opacity: 0.5;
  transition: all 300ms;
}

nav#slide-menu > ul li {
  color: #dfe5eb;
  padding: 6px 0;
  cursor: pointer;
}

nav#slide-menu > ul li:hover {
  color: #59e9df;
}

nav#slide-menu > ul li:before {
  font-family: "ico";
  font-style: normal;
  font-weight: normal;
  speak-as: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  color: #59e9df;
  margin-right: 12px;
  text-align: center;
  font-variant: normal;
  font-size: 0.75em;
  text-transform: none;
  line-height: 1em;
}

nav#slide-menu > ul li.sep {
  margin-top: 7px;
  padding-top: 14px;
  border-top: 1px solid #6b7b8d;
}

body.menu-active nav#slide-menu {
  left: 0px;
}

body.menu-active nav#slide-menu ul {
  left: 0px;
  opacity: 1;
}

/*button*/

button {
  background-color: transparent;
  border: 3px ridge #149cea;
  border-radius: 0.3em;
  color: #fff;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  outline: none;
  width: 10em;
  position: relative;
  height: 3.5em;
  transition: 1s;
  font-size: 16px;
  font-weight: bold;
}

/* .button2 {
    background-color: transparent;
  }
  
  .button3 {
    background-color: transparent;
  }
  
  .button4 {
    background-color: transparent;
  }
  
  .button5 {
    background-color: transparent;
  } */

/* button::after {
    content: "";
    position: absolute;
    top: -8.5px;
    left: 3%;
    width: 95%;
    height: 40%;
    background-color: #404040;
    transition: 0.5s;
    transform-origin: center;
  }
  
  button::before {
    content: "";
    transform-origin: center;
    position: absolute;
    top: 70.9%;
    left: 3%;
    width: 95%;
    height: 40%;
    background-color: #404040;
    transition: 0.5s;
  }
  
  button:hover::before,
  button:hover::after {
    transform: scale(0);
  } */

/* button:hover {
    box-shadow: inset 0px 0px 25px #1479ea;
  } */

/*immagine*/

.background-image {
  position: relative;
  height: 600px; /* Altezza desiderata del contenitore */
  text-align: center;
  color: white; /* Colore del testo */
  /* background-image: url(./valensiya-800x800.jpg); */
  background-image: url(./a4609d604f639766c178c7d27920be5d.jpg);
}

.background-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(./a4609d604f639766c178c7d27920be5d.jpg);
  background-size: cover;
  background-position: center;
  filter: brightness(50%); /* Imposta la luminosità dell'immagine al 50% */
}

body {
  width: 100%;
  margin: 0;
}

body {
  color: #001c35;
  background-color: #e3eafc;
  font-family: "Poppins", sans-serif;
}

h1 {
  font-size: 50px;
  font-style: italic;
  margin-bottom: 3rem;
}

h2 {
  font-size: 20px;
  margin: 0;
}

p {
  font-size: 14px;
  margin: 0.5rem 0;
}

section {
  width: 100%;
  max-width: 800px;
  padding: 4rem 1rem;
  margin: 0 auto;
}

section img {
  width: 100%;
  max-width: 520px;
  height: 100%;
  max-height: 200px;
  object-fit: cover;
  margin: 1rem 0;
  display: block;
  border-radius: 8px;
  transform-origin: center;
}

.card-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media screen and (max-width: 580px) {
  .card-container {
    grid-template-columns: 1fr;
  }
}

@keyframes scaleProgress {
  from {
    transform: scalex(0);
  }
  to {
    transform: scalex(100%);
  }
}
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.5rem;
  width: 100%;
  height: 1rem;
  z-index: 1;
  /* background: #feac5e; */
  /* background: -webkit-linear-gradient(to right, #4bc0c8, #c779d0, #feac5e);
    background: linear-gradient(to right, #4bc0c8, #c779d0, #feac5e); */
  transform-origin: 0 50%;
  /* scroll animation*/
  animation: scaleProgress auto linear;
  animation-timeline: scroll(root);
}

/* @keyframes fade-in {
    from {
      opacity: 0.3;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  } */
.card {
  width: 100%;
  max-width: 520px;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  animation: fade-in linear both;
  /* view function */
  animation-timeline: view();
  animation-range: entry 10% entry 80%;
}

Un código de cleancloud166

Recomendado

Entrada de carga de archivos con icono SVG

SITIO WEB DE APPLE

Botón de borrar animado

HTML

CSS

JS

Recomendado

Entrada de carga de archivos con icono SVG

SITIO WEB DE APPLE

Botón de borrar animado

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS