3डी यथार्थवादी मधुमक्खी

अनुशंसित

23 May 2025

<header>
  <div class="content-fit">
    <div class="logo">DDX</div>
    <nav>
      <ul>
        <li>Contacts</li>
        <li>Category</li>
        <li>Login</li>
      </ul>
    </nav>
  </div>
</header>
<div class="section" id="banner">
  <div class="content-fit">
    <div class="title" data-before="3D ANIMATION">3D ANIMATION</div>
  </div>
  <img src="https://assets.codepen.io/453571/flower.png" class="decorate" alt="" style="width: 50vw; bottom: 0; right: 0;">
  <img src="https://assets.codepen.io/453571/leaf.png" class="decorate" alt="" style="width: 30vw; bottom: 0; left: 0;">
</div>
<div class="section" id="intro">
  <div class="content-fit">
    <div class="number">01</div>
    <div class="des">
      <div class="title">3d animation design for website</div>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus voluptas a porro libero
        recusandae quae, aut ratione, incidunt laborum, necessitatibus similique enim doloremque ex.
        Laudantium obcaecati aspernatur doloremque illo beatae, maxime hic itaque consequatur nisi
        accusantium veritatis, voluptatem ratione! Placeat numquam nisi reiciendis harum quibusdam tempore
        eaque deleniti accusantium, veniam quae eos sed, asperiores laborum corporis odit mollitia
        consequatur adipisci? Quibusdam quis eos debitis non esse blanditiis laudantium rerum odit tempora?
        Corrupti maiores velit consequuntur cupiditate reiciendis similique provident repudiandae.</p>
    </div>
  </div>
</div>
<div class="section" id="description">
  <div class="content-fit">
    <div class="number">02</div>
    <div class="des">
      <div class="title">DEN DX</div>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus voluptas a porro libero
        recusandae quae, aut ratione, incidunt laborum, necessitatibus similique enim doloremque ex.
        Laudantium obcaecati aspernatur doloremque illo beatae, maxime hic itaque consequatur nisi
        accusantium veritatis, voluptatem ratione! Placeat numquam nisi reiciendis harum quibusdam tempore
        eaque deleniti accusantium, veniam quae eos sed, asperiores laborum corporis odit mollitia
        consequatur adipisci? Quibusdam quis eos debitis non esse blanditiis laudantium rerum odit tempora?
        Corrupti maiores velit consequuntur cupiditate reiciendis similique provident repudiandae.</p>
    </div>
  </div>
  <img src="https://assets.codepen.io/453571/leaf1.png" class="decorate" alt="" style="width: 70vw; bottom: 0; right: 0;">
</div>
<div class="section" id="contact">
  <div class="content-fit">
    <div class="number">03</div>
    <div class="des">
      <div class="title">CONTACT</div>
      <table>
        <tr>
          <td>Email</td>
          <td>test@gmail.com</td>
        </tr>
        <tr>
          <td>Phone</td>
          <td>+123.123.123</td>
        </tr>
        <tr>
          <td>Website</td>
          <td>zegarkidawida.com</td>
        </tr>
        <tr>
          <td>Youtube</td>
          <td>@zegarkidawida</td>
        </tr>
      </table>
      <div class="sign">Den DX</div>
    </div>
  </div>
</div>
<div id="container3D"></div>

CSS

@import url("https://fonts.cdnfonts.com/css/devil-breeze");
@import url("https://fonts.cdnfonts.com/css/poppins");
@import url("https://fonts.cdnfonts.com/css/bimbo");

body {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  background-color: #1b1b1b;
  color: #eef8ce;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  background-image: url(https://assets.codepen.io/453571/bg.avif),
    repeating-linear-gradient(
      to right,
      transparent 0 500px,
      #73814b33 500px 501px
    );
  background-size: 100%;
}
*::-webkit-scrollbar {
  width: 0;
}

* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
.section {
  width: 100%;
  min-height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-fit {
  width: min(1200px, 90vw);
  margin: auto;
  min-height: 100vh;
  position: relative;
  padding-block: 10em;
}
header {
  padding-block: 1em;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10px;
  backdrop-filter: blur(20px);
  z-index: 100;
  background-color: #1b1b1b11;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0 500px,
    #eee1 500px 501px
  );
}
header .content-fit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: unset !important;
  padding-block: unset !important;
}
header .content-fit nav ul {
  display: flex;
  gap: 2em;
}

#banner .title {
  color: #d1ff48;
  font-size: 11em;
  font-family: "devil breeze";
  font-weight: bold;
  position: relative;
  overflow: visible;
  text-align: center;
}
#banner .title::before {
  content: attr(data-before);
  position: absolute;
  z-index: -1;
  color: oklch(0.78 0.17 80.01 / 0.19);
  mask: linear-gradient(
    to bottom,
    #000 -80%,
    oklch(0 0 0/0),
    #000,
    oklch(0 0 0/0) 200%
  );
  transform: scaleY(-1) translateY(-0.44lh);
}
.section .decorate {
  position: fixed;
  z-index: -100;
  pointer-events: none;
}
#intro .content-fit {
  display: flex;
  gap: 30%;
  justify-content: space-between;
  align-items: center;
}
.section .number {
  font-family: "devil breeze";
  font-size: 15em;
  font-weight: bold;
}
.section .content-fit .title {
  font-family: "devil breeze";
  font-size: 5em;
  font-weight: bold;
}
#description .content-fit {
  padding-right: 30%;
}
#description .number {
  font-size: 5em;
}
#description .title {
  font-size: 7em;
  font-weight: 500;
}
#contact .content-fit {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
#contact table {
  width: min(800px, 90vw);
  padding-top: 2em;
  font-size: 2em;
  margin: auto;
}
#contact table td {
  padding-block: 0.5em;
  border-bottom: 1px dashed #445022;
}
#contact table td:nth-child(1) {
  text-align: left;
  font-weight: 500;
}
#contact table td:nth-child(2) {
  text-align: right;
  font-weight: 200;
}
#contact .sign {
  font-size: 10em;
}
#container3D {
  position: fixed;
  inset: 0;
  /* background-color: red; */
  z-index: 100;
  pointer-events: none;
}
@media screen and (max-width: 1023px) {
  #banner .title {
    font-size: 5em;
  }
  #intro .content-fit {
    flex-direction: column;
  }
}
@media screen and (max-width: 767px) {
  #banner .title {
    font-size: 3em;
  }
  #intro .content-fit {
    flex-direction: column;
  }
  .section .number {
    font-size: 5em;
  }
  .section .content-fit .title {
    font-size: 2em;
  }
  #description .content-fit {
    padding-right: 0;
  }
  #contact table {
    font-size: 1em;
  }
  #contact .sign {
    font-size: 2em;
  }
  #container3D {
    position: sticky;
  }
}

3डी यथार्थवादी मधुमक्खी

अनुशंसित

3डी लॉगिन

3डी

3डी फ्लाई बॉक्स एनीमेशन

HTML

CSS

JS

अनुशंसित

3डी लॉगिन

3डी

3डी फ्लाई बॉक्स एनीमेशन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS