Vetrina della natura HTML: Video, sovrapposizione, menu social

80 bilgiislem

Apri nell'Editor Pubblica il Tuo Codice

Vetrina della natura HTML: Video, sovrapposizione, menu social

Consigliato

23 August 2025

Esempio di animazione della griglia CSS

23 August 2025

Modello HTML CSS della pagina di accesso della SEAT Leon

12 August 2025

Animazione della barra di caricamento CSS

HTML

<section class="showcase">
  <header>
    <h2 class="logo">EcoJourney</h2>
    <div class="toggle"></div>
  </header>
  <video src="https://example.com/downloads/videos/nature.mp4" muted loop autoplay></video>
  <div class="overlay"></div>
  <div class="text">
    <h2>Reconnect With</h2> 
    <h3>Nature's Wonders</h3>
    <p>Step away from the hustle and into the heart of nature. Discover pristine forests, tranquil lakes, and breathtaking landscapes that remind us of the beauty in simplicity. Let's protect what we cherish.</p>
    <a href="#">Discover More</a>
  </div>
  <ul class="social">
    <li><a href="#"><img src="https://i.ibb.co/x7P24fL/facebook.png"></a></li>
    <li><a href="#"><img src="https://i.ibb.co/Wnxq2Nq/twitter.png"></a></li>
    <li><a href="#"><img src="https://i.ibb.co/ySwtH4B/instagram.png"></a></li>
  </ul>
</section>
<div class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Adventures</a></li>
    <li><a href="#">Sustainability</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
header
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 40px 100px;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
header .logo
{
  color: #eae0d5; /* Light beige */
  text-transform: uppercase;
  cursor: pointer;
}
.toggle
{
  position: relative;
  width: 60px;
  height: 60px;
  background: url(https://i.ibb.co/HrfVRcx/menu.png);
  background-repeat: no-repeat;
  background-size: 30px;
  background-position: center;
  cursor: pointer;
}
.toggle.active
{
  background: url(https://i.ibb.co/rt3HybH/close.png);
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: center;
  cursor: pointer;
}
.showcase
{
  position: absolute;
  right: 0;
  width: 100%;
  min-height: 100vh;
  padding: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #2f2f2f; /* Dark earthy gray */
  transition: 0.5s;
  z-index: 2;
}
.showcase.active
{
  right: 300px;
}

.showcase video
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}
.overlay
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #8abf80; /* Soft green overlay */
  mix-blend-mode: overlay;
}
.text
{
  position: relative;
  z-index: 10;
}

.text h2
{
  font-size: 5em;
  font-weight: 800;
  color: #eae0d5; /* Light beige */
  line-height: 1em;
  text-transform: uppercase;
}
.text h3
{
  font-size: 4em;
  font-weight: 700;
  color: #eae0d5; /* Light beige */
  line-height: 1em;
  text-transform: uppercase;
}
.text p
{
  font-size: 1.1em;
  color: #f5f5f5; /* Light, warm gray */
  margin: 20px 0;
  font-weight: 400;
  max-width: 700px;
}
.text a
{
  display: inline-block;
  font-size: 1em;
  background: #8abf80; /* Soft green */
  padding: 10px 30px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  margin-top: 10px;
  color: #2f2f2f; /* Dark earthy gray */
  letter-spacing: 2px;
  transition: 0.2s;
}
.text a:hover
{
  letter-spacing: 6px;
}
.social
{
  position: absolute;
  z-index: 10;
  bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.social li
{
  list-style: none;
}
.social li a
{
  display: inline-block;
  margin-right: 20px;
  filter: invert(0.8); /* Softened filter */
  transform: scale(0.5);
  transition: 0.5s;
}
.social li a:hover
{
  transform: scale(0.5) translateY(-15px);
}

@media (max-width: 991px)
{
  .showcase,
  .showcase header
  {
    padding: 40px;
  }
  .text h2
  {
    font-size: 3em;
  }
  .text h3
  {
    font-size: 2em;
  }
}

Consigliato

Esempio di animazione della griglia CSS

Modello HTML CSS della pagina di accesso della SEAT Leon

Animazione della barra di caricamento CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS