Um código por cleancloud166

687 cleancloud166

Abrir no Editor Publique Seu Código

Recomendado

19 October 2024

Site de Portfólio de Desenvolvedor HTML

16 November 2024

Como criar uma barra lateral de grade em CSS

16 September 2024

Construindo um horizonte

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

Recomendado

Site de Portfólio de Desenvolvedor HTML

Como criar uma barra lateral de grade em CSS

Construindo um horizonte

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS