Abeja realista en 3D

2,406 zegarkidawida

Abrir en el editor Publica tu código

Recomendado

6 May 2026

Gorilla Tag WebGL: Cargar y jugar en línea

25 August 2024

Sistema solar 3D CSS

2 February 2025

Un código de yefersonsotohenao

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