A Code by alejandrokundrah

Open In Editor Publish Your Code

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

A Code by alejandrokundrah

Recommended

CSS Fragment Animation Example

NETFLIX LOADING PAGE

Pet carousel with floating effect

HTML

CSS

JS

Recommended

CSS Fragment Animation Example

NETFLIX LOADING PAGE

Pet carousel with floating effect

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS