Un código de alejandrokundrah

Abrir en el editor Publica tu código

Recomendado

9 November 2024

Un código de efficientcloud646

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

Un código de alejandrokundrah

Recomendado

Barra de navegación

Un código de pan4o

Un código de efficientcloud646

HTML

CSS

JS

Recomendado

Barra de navegación

Un código de pan4o

Un código de efficientcloud646

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS