Plantilla HTML de portafolio personal

Abrir en el editor Video Publica tu código

Recomendado

17 November 2023

Reloj de cuenta regresiva de Halloween Monstruo

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

Plantilla HTML de portafolio personal

Recomendado

Inicio de Sesión

Ventilador de escritorio

Reloj de cuenta regresiva de Halloween Monstruo

HTML

CSS

JS

Recomendado

Inicio de Sesión

Ventilador de escritorio

Reloj de cuenta regresiva de Halloween Monstruo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS