Abeja realista en 3D

2,166 zegarkidawida

Abrir en el editor Publica tu código

Recomendado

22 August 2025

Comentario de marcador de posición de código HTML

7 February 2026

Ejemplo de componente React Tailwind Hero

28 November 2024

Enlace animado al pasar el mouse

HTML

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