Un código de alejandrokundrah

1,748 alejandrokundrah

Abrir en el editor Publica tu código

Recomendado

26 March 2026

Cargador de juego 3D Unity Brawl HTML

30 April 2026

Edición ShadowSurf Plunker

25 August 2024

Animación del formulario de inicio de sesión/registro

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Our Services</title>

<link href="https://cdn.jsdelivr.net/npm/remixicon/fonts/remixicon.css" rel="stylesheet">

<link rel="stylesheet" href="style.css">

</head>
<body>

<section class="services-section">
    <div class="circle circle-1">
      <div class="service-text">
        <h2>Our Services</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad facilis rem quas porro iusto.</p>
      </div>
    </div>

<div class="circle circle-2">
      <div class="service-card">
        <span class="icon"><i class="ri-sparkling-2-line"></i></span>
        <h3>Branding<br>Identity</h3>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto commodi explicabo.</p>
        <a href="#" class="btn">READ MORE <i class="ri-arrow-right-line"></i></a>
      </div>
    </div>

<div class="circle circle-3">
      <div class="service-card">
        <span class="icon"><i class="ri-global-line"></i></span>
        <h3>Branding<br>Consult</h3>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto commodi explicabo.</p>
        <a href="#" class="btn">READ MORE <i class="ri-arrow-right-line"></i></a>
      </div>
    </div>

<div class="circle circle-4">
      <div class="service-card">
        <span class="icon"><i class="ri-image-line"></i></span>
        <h3>Web Development</h3>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto commodi explicabo.</p>
        <a href="#" class="btn">READ MORE <i class="ri-arrow-right-line"></i></a>
      </div>
    </div>

<div class="circle circle-5">
      <div class="service-card">
        <span class="icon"><i class="ri-line-chart-line"></i></span>
        <h3>Market Analysis</h3>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto commodi explicabo.</p>
        <a href="#" class="btn">READ MORE <i class="ri-arrow-right-line"></i></a>
      </div>
    </div>
  </section>

</body>
</html>

CSS

/* Root Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background-color: #000;
  color: white;
  overflow-x: hidden;
}

.Services-section{
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    padding: 40px;
}

.circle{
    width: 810px;
    height: 810px;
    border-radius: 50%;
    position: absolute;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
    animation: slideIn 1s ease-out forwards;
    opacity: 0;
}

.circle-1{
    background-color: #70012b;
    left: -400px;
    animation-delay: 0s;
}

.circle-2{
    background-color: #5d0124;
    left: -150px;
    z-index: -1;
    animation-delay: 0.1s;
}

.circle-3{
    background-color: #4b011d;
    left: 100px;
    z-index: -2;
    animation-delay: 0.2s;
}

.circle-4{
    background-color: #380116;
    left: 350px;
    z-index: -3;
    animation-delay: 0.3s;
}

.circle-5{
    background-color: #25000e;
    left: 600px;
    z-index: -4;
    animation-delay: 0.4s;
}

@keyframes slideIn {
    0%{
        transform: translateX(-800px);
        opacity: 0;
    }

100%{
        transform: translateX(0);
        opacity: 1;
    }
}

.service-text,
.service-card{
    position: absolute;
    width: 30%;
    max-width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    animation: slideIn 1s ease-out forwards;
    opacity: 0;
}

.service-text{
    animation-delay: 0.1s;
}

.service-card .circle-2{
    animation-delay: 0.2s;
}

.service-card .circle-3{
    animation-delay: 0.3s;
}

.service-card .circle-4{
    animation-delay: 0.4s;
}

.service-card .circle-5{
    animation-delay: 0.5s;
}

.service-text{
    height: 50%;
    right: 50px; 
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.service-text h2{
    font-size: 3rem;
}

.service-text p{
    font-size: 1rem;
}

.service-card{
    right: 20px;
    bottom: 250px;
    text-align: center;
    padding: 1.5rem;
}

.service-card h3{
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.service-card p{
    font-size: 0.95rem;
    line-height: 1.4;
}

.service-card .icon{
    font-size: 2rem;
    margin-bottom: 10px;
    display: block;
}

.btn{
    margin-top: 15px;
    display: inline-block;
    padding: 8px 16px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    border: 1px solid #fff;
    text-decoration: none;
    border-radius: 20px;
    font-size: 0.85rem;
}