Um código por cleancloud166

Abrir no Editor Publique Seu Código

Recomendado

18 December 2024

Um Código por alejandrokundrah

HTML

<!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 por slowcode552

Um código de Mete

Um Código por alejandrokundrah

HTML

CSS

JS

Recomendado

Um código por slowcode552

Um código de Mete

Um Código por alejandrokundrah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS