Abeja realista en 3D

2,297 zegarkidawida

Abrir en el editor Publica tu código

Recomendado

23 August 2025

Plantilla de sitio web de portafolio de diseñador web

9 January 2026

Geometry Dash Lite - Juega gratis en línea

19 January 2026

Código HTML para insertar en el juego Parking Fury

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