प्रकृति शोकेस HTML: वीडियो, ओवरले, सोशल मेनू

अनुशंसित

6 November 2024

इंस्पायरएक्स: आधुनिक वेब थीम (टेलविंड, वीडियो, गैलरी)

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

प्रकृति शोकेस HTML: वीडियो, ओवरले, सोशल मेनू

अनुशंसित

सोशल नेटवर्क

सोशल मीडिया बटन हॉवरिंग

इंस्पायरएक्स: आधुनिक वेब थीम (टेलविंड, वीडियो, गैलरी)

HTML

CSS

JS

अनुशंसित

सोशल नेटवर्क

सोशल मीडिया बटन हॉवरिंग

इंस्पायरएक्स: आधुनिक वेब थीम (टेलविंड, वीडियो, गैलरी)

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS