HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name = "viewport" content="width-device-width, intial-scale-1.0">
<title>
Portfolio
</title>
<link rel="stylesheet" href="stylesheet.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>
</head>
<body>
<header class="header">
<a href="#" class="logo"> Portfolio</a>
<nav class="navbar">
<a href="#" style="--i:1" class="active">Home</a>
<a href="#"style="--i:2">About</a>
<a href="#"style="--i:3">Skill</a>
<a href="#"style="--i:4">Portfolio</a>
<a href="#"style="--i:5">Contact</a>
</nav>
</header>
<section class="home">
<div class="home-content">
<h3>Hello, It's Me</h3>
<h1>Tharunkumar</h1>
<h3>And I'm a<span class="text"></span></h3>
<p>I'm a web Designer with extensive exprerience for 2 years</p>
<br>expertise is to create and Website design,Frontend design and UI & UX<div>
<div class="home-sci">
<a href="#"style="--i:7"><i class='bx bxl-facebook'></i></a>
<a href="#"style="--i:8"><i class='bx bxl-instagram'></i></a>
<a href="#"style="--i:9"><i class='bx bxl-whatsapp'></i></a>
</div>
<a href="#" class="btn-box"> More About Me</a>
</div>
</div>
<span class="home-imgHover"> </span>
</section>
<section class="about" id="about">
<div class="about-img">
<img src="C:\Users\HP\Downloads\resources\resources\Futuristic Neon Blue And Pink Light Instagram Profile Picture.png">
</div>
</section>
<script src="main.js"></script>
</body>
</html>
CSS
#
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins' , sans-serif;
}
body
{
color: #ededed;
}
.header
{
position: fixed;
top: 0;
left: 0;
width: 100;
padding: 20px 10%;
background: transparent;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.logo {
position: relative;
font-size: 25px;
color: #fff;
text-decoration: none;
font-weight: 600;
cursor: default;
opacity: 0;
animation: slideRight 1s ease forwards;
}
.navbar a {
display: inline-block;
font-size: 25px;
color: #fff;
text-decoration: none;
font-weight: 500;
margin-left: 35px;
transition: .3s;
opacity: 0;
animation: slideTop .5s ease forwards;
animation-delay: calc(.2s * var(--i));
}
.navbar a:hover{
color: #0ef;
}
.home {
position: relative;
width: 100%;
justify-content: space-between;
height: 100vh;
background: url(https://wallpapers.com/images/hd/high-resolution-blue-background-1920-x-1080-manuazdf0v23me5t.jpg) no-repeat;
background-size: cover;
background-position: center;
padding: 70px 10%;
}
.home-content {
max-width: 600px;
}
.home-content h3{
font-size: 32px;
font-weight: 700;
opacity: 0;
animation: slideBottom 1s ease forwards;
animation-delay: .7s;
}
.home-content h3:nth-of-type(2){
margin-bottom: 30px;
animation: slideTop 1s ease forwards;
animation: .7s;
}
.home-content h3 span {
color: #0ef;
}
.home-content h1{
font-size: 56px;
font-weight: 700;
margin: -3px 0;
opacity: 0;
animation: slideRight 1s ease forwards;
animation-delay: .1s;
}
.home-content p{
font-size: 20px;
opacity: 0;
animation: slideLeft 1s ease forwards;
animation-delay: .1s;
}
.home-sci a{
display: inline-flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background: transparent;
border: 2px solid #0ef;
border-radius: 50%;
font-size: 20px;
color: #0ef;
text-decoration: none;
opacity: 0;
transition: .5s ease;
animation: slideLeft 1s ease forwards;
animation-delay: calc(.2s * var(--i));
margin: 30px 15px 30px 0;
}
.home-sci a:hover {
background: #0ef;
color: #081b29;
box-shadow: 0 0 20px #0ef;
}
.btn-box {
display: inline-block;
padding: 12px 28px;
background: #0ef;
border-radius: 40px;
font-size: 16px;
color: #081b29;
letter-spacing: 1px;
text-decoration: none;
font-weight: 600;
opacity: 0;
animation: slideTop 1s ease forwards;
animation-delay: .2s;
box-shadow: 0 0 5px #0ef,
0 0 25px #0ef
}
.btn-box:hover {
box-shadow: 0 0 5px cyan,
0 0 25px cyan , 0 0 50px cyan,
0 0 100px cyan, 0 0 200px cyan
}
@keyframes slideRight {
0%{
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
@keyframes slideLeft {
0%{
transform: translateX(100px);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
@keyframes slideTop {
0%{
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
@keyframes slideBottom {
0%{
transform: translateY(-100px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
Top comments (0)