Un codice di meriem

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

18 July 2025

Illusione di scorrimento infinito

10 February 2025

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

Un codice di meriem

Consigliato

Illusione di scorrimento infinito

Modulo di accesso CSS

lun

HTML

CSS

JS

Consigliato

Illusione di scorrimento infinito

Modulo di accesso CSS

lun

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS