Un code par shasshan7236

Ouvrir dans l'éditeur Publiez votre code

Recommandé

10 June 2025

Code graphique interactif SVG Dragon

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>
<header class="header">
<a href="#home" class="logo">Mikey
    <span>kun</span>
    <i class='bx bx-menu' id="menu-icon"></i>
</a>

</div>

<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, It's <span>MIKEY</span></h1>
        <h3 class="text-animation">I'm a <span></span></h3>
<div class="social-icons">
    <a href="https://wa.me/+221761602964" <i class='bx bxl-whatsapp'></i></a>
    <a href="" <i class='bx bxl-github'></i></a>
    <a href="https://www.instagram.com/swordmikeykun?igsh=ZDJncHZwcWQ2eWpk&utm_source=qr" <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>
    <script src="script.js"></script>
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    outline: none;
    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) ;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 5;
    margin-left: 110px;
    text-decoration: none;

}
.logo{
    font-size: 6rem;
    color: white;
    font-weight: 800;
    cursor: pointer;
    transition: 0.3s ease;
    margin-left: -240px
}

.logo:hover{
    transform: scale(1.1);
}
.logo span{
    text-shadow:  0 0 25px red;}

.profile{
    display: flex;
    height: 300px;
    width: 300px;
   margin-left:-380px ;
    margin-bottom:-500px ;
}

.profile img{
    width: 400px;
    height: 500px;
    display: flex;
    border-radius: 1550px
}
.navbar a{
font-size: 2.8rem;
color: white;
margin-left: 4rem;
font-weight:500;
transition: 0.3s ease;
border-bottom: 3px  solid transparent;
text-decoration: none;

}
.navbar  a:hover,
.navbar a.active{
    color: red;
    border-bottom: 3px red;
}
#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;
    margin: 15rem;
   
}
.home-content{
display: flex;
flex-direction: column;
align-items: baseline;
text-align: left;
justify-content: center;
margin-top: 3rem;
margin-left:700px;
margin-top:-120px;
}
span{
    color: red;
}
.logo span{
    color: red;
}
.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 gray;
    font-size: 2.5rem;
    border-radius: 50%;
    color: red;
    margin:1.2rem;
    transition: 0.3s  ease-in-out;
    text-decoration: none;
    margin-top: 50px;
}
.social-icons a:hover{
    color: brown;
    transform: scale(1.3) translateY(-5px) ;
    box-shadow: 0 0 25px red;
    background-color:red;

}
.btn{
    display: inline-block;
    padding: 1rem 2.8rem;
    background: red;
     box-shadow: 0 0 25px red;
     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;
     text-decoration: none;
     margin: .2rem;

}

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

}

.btn-group a:nth-of-type(2):hover{
    box-shadow: 0 0 25px red;
    background-color: red;
    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: red;
    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 red;
    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 code par shasshan7236

Recommandé

Un code par alejandrokundrah

Un code de Mete

Code graphique interactif SVG Dragon

HTML

CSS

JS

Recommandé

Un code par alejandrokundrah

Un code de Mete

Code graphique interactif SVG Dragon

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS