Un código de meriem

2,266 meriem

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

22 January 2026

Código fuente HTML5 del juego Room Clicker

17 March 2026

Código HTML, CSS y JavaScript para clonar YouTube

2 November 2025

Plantilla web para portafolio: Diseño moderno

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="style.css">
    
     <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <title>Portfolio</title>
</head>
<body>

<a href="#home" class="logo">Saad
    <span>Qasim</span>
    <i class='bx bx-menu' id="menu-icon"></i>
</a>
<nav class="navbar">
    <a href="#home" class="active">Home</a>
    <a href="#education">Education</a>
    <a href="#services">Services</a>
    <a href="#testimonials">Testimonials</a>
    <a href="#contact">Contact</a>
</nav>

</header>

<section class="home" id="home">
    <div class="home-content">
        <h1>Hi , its <span>Saad</span></h1>
        <h3 class="text-animation">I'm a <span></span></h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati iste optio dicta, tempore corporis, placeat quis reprehenderit alias nam magni pariatur dolorem recusandae maiores sapiente eos perferendis. Repellat, suscipit dolore!</p>

<div class="social-icons">
    <a href="#" <i class='bx bxl-linkedin'></i></a>
    <a href="#" <i class='bx bxl-github'></i></a>
    <a href="#" <i class='bx bxl-instagram-alt'></i></a>
    <a href="#" <i class='bx bxl-twitter'></i></a>
    
</div>
<div class="btn-group">
    <a href="#" class="btn" >Hire me</a>
    <a href="#contact" class="btn">Contact</a>
    <a href="#"></a>
</div>
</div>

</section>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    font-family: 'Poppins' , sans-serif;
}

:root {
    --bg-color:#080808;
    --second-bg-color:#131313;
    --text-color:white;
    --main-color:#00ffee;
}
html{
    font-size: 60%;
    overflow-x: hidden;
}
body{
    background-color: var(--bg-color);
    color: var(--text-color);
}
.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 4rem 12% 4rem;
    background: rgba(0, 0, 0, 0.3) ;
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
}
.logo{
    font-size: 3rem;
    color: var(--text-color);
    font-weight: 800;
    cursor: pointer;
    transition: 0.3s ease;

}

.logo:hover{
    transform: scale(1.1);
}
.logo span{
    text-shadow:  0 0 25px var(--main-color);
}
.navbar a{
font-size: 1.8rem;
color: var(--text-color);
margin-left: 4rem;
font-weight:500;
transition: 0.3s ease;
border-bottom: 3px  solid transparent;
}
.navbar  a:hover,
.navbar a.active{
    color: var(--main-color);
    border-bottom: 3px solid var(--main-color);
}
#menu-icon{
    font-size: 3.6rem;
    color: var(--main-color);
    display: none;
}

section{
    min-height: 100vh;
    padding: 10rem 12% 10rem;
}
.home{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15rem;
}
.home-content{
display: flex;
flex-direction: column;
align-items: baseline;
text-align: left;
justify-content: center;
margin-top: 3rem;
}
span{
    color: var(--main-color);
}
.logo span{
    color: var(--main-color);
}
.home-content h3{
        margin-bottom: 2rem;
        margin-top: 1rem;
    font-size: 3.5rem;
}
.home-content h1{
    font-size: 7rem;
    font-weight: 700;
    margin-top: 1.5rem;
    line-height: 1;
}
.home-img{
    border-radius: 50%;
}
.home-img img{
    position: relative;
    top: 3rem;
    width: 32vw;
    border-radius: 50%;
    box-shadow:  0  0 25px var(--main-color);
    cursor: pointer;
    transition: 0.4s ease-in-out;

}
.home-img img:hover{
    box-shadow: 0 0 25px var(--main-color),
     0 0 50px var(--main-color),
     0 0 100px var(--main-color);
}
.home-content p{
    font-size:1.5rem ;
    font-weight: 500;
    line-height: 1.8;
    max-width: 1000px;

}
.social-icons a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 4.5rem;
    height: 4.5rem;
    background: transparent;
    border: 2px solid var(--main-color);
    font-size: 2.5rem;
    border-radius: 50%;
    color: var(--main-color);
    margin: 3rem 1.5rem 3rem;
    transition: 0.3s  ease-in-out;
}
.social-icons a:hover{
    color: var(--text-color);
    transform: scale(1.3) translateY(-5px) ;
    box-shadow: 0 0 25px var(--main-color);
    background-color: var(--main-color);

}
.btn{
    display: inline-block;
    padding: 1rem 2.8rem;
    background: var(--main-color);
     box-shadow: 0 0 25px var(--main-color);
     border-radius: 4rem;
     font-size: 1.6rem;
     color: black;
     border: 2px solid transparent;
     letter-spacing: 0.1rem;
     font-weight: 600;
     transition: 0.3s  ease-in-out;
     cursor: pointer;

}

.btn:hover{
    transform: scale(1.05);
    box-shadow: 0 0 50px var(--main-color);
}
.btn-group{
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.btn-group a:nth-of-type(2){
    background-color: black;
    color: var(--main-color);
    border: 2px solid var(--main-color);
    box-shadow: 0 0 25px var(--main-color);

}

.btn-group a:nth-of-type(2):hover{
    box-shadow: 0 0 25px var(--main-color);
    background-color: var(--main-color);
    color: black;
}

.text-animation{
    font-size: 34px ;
    font-weight: 600;
    min-width: 280px;
}

.text-animation span{
    position: relative;
}
.text-animation span::before{
    content: 'Web Developer';
    color: var(--main-color);
    animation: words 20s infinite;
}
.text-animation span::after{
    content: "";
    background-color: var(--bg-color);
    position: absolute;
    width: calc(100% + 80px);
    height: 100%;
    border-left: 3px solid var(--bg-color);
    right: -8px;
    animation: cursor 0.6s infinite, typing 20s steps(14) infinite;
}

@keyframes cursor{
    to{
        border-left: 2px solid var(--main-color);
    }
}
@keyframes words{
    0%,
    20%{
        content: 'Frontend Web Developer';
    }
    21%,
    40%{
        content: 'App Developer';
    }
    41%,
    60%{
        content: 'UI / Ux Designer';
    }
    61%,
    80%{
        content: 'Flutter Developer';
    }
    81%,
    100%{
        content: '';
    }
}
@keyframes typing{
    10%,
    15%,
    30%,
    35%,
    50%,
    55%,
    70%,
    75%,
    90%,
    95%{
        width: 0;
    }
    5%,
    20%,
    25%,
    40%,
    45%,
    60%,
    65%,
    80%,
    85%{
        width: calc(100% + 8px);
    }
}