Um Código por alejandrokundrah

Abrir no Editor Publique Seu Código

Recomendado

20 May 2025

Site de portfólio HTML com menu lateral

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

Um Código por alejandrokundrah

Recomendado

Um Código de Skyrreum

Um Código de Skyrreum

Site de portfólio HTML com menu lateral

HTML

CSS

JS

Recomendado

Um Código de Skyrreum

Um Código de Skyrreum

Site de portfólio HTML com menu lateral

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS