Um Código por alejandrokundrah

981 alejandrokundrah

Abrir no Editor Publique Seu Código

Recomendado

16 December 2024

Modelo de site de portfólio HTML CSS JavaScript

16 May 2025

Um código por DEME

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 por Meriem

Modelo de site de portfólio HTML CSS JavaScript

Um código por DEME

HTML

CSS

JS

Recomendado

Um Código por Meriem

Modelo de site de portfólio HTML CSS JavaScript

Um código por DEME

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS