Um código por cleancloud166

Abrir no Editor Publique Seu Código

Recomendado

26 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%;
}

Um código por cleancloud166

Recomendado

Um Código de Liamgilles76

Um código por securecode394

Um código por gherhz

HTML

CSS

JS

Recomendado

Um Código de Liamgilles76

Um código por securecode394

Um código por gherhz

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS