Présentation HTML de la nature : Vidéo, Superposition, Menu social

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

3 June 2025

Jeu de mémoire des nombres - Code JavaScript

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

Présentation HTML de la nature : Vidéo, Superposition, Menu social

Recommandé

Lecteur vidéo brutaliste

Un code par testingai

Jeu de mémoire des nombres - Code JavaScript

HTML

CSS

JS

Recommandé

Lecteur vidéo brutaliste

Un code par testingai

Jeu de mémoire des nombres - Code JavaScript

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS