Beautiful Portfolio design using HTML and CSS.
-:CODE:-
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, initial-scale=1.0">
<title>Portfolio - John Doe</title>
<!-- ------------------------------ CSS -------------------------------->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="container">
<nav>
<!-- <img src="/image/logo.png" class="logo" alt="LOGO"> -->
<h3><span>JOHN</span> DOE</h3>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">HIRE ME</a></li>
</ul>
</nav>
<div class="info">
<h1>I'm <span>John</span> Doe</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Enim, alias. <br>
Omnis, excepturi velit ipsa ratione voluptate.</p>
<a href="">Download CV</a>
</div>
<div class="img-box">
<img src="/image/pattern.png" class="back-img">
<img src="/image/boy.png" class="main-img">
</div>
<div class="social-links">
<a href=""><i class="fab fa-linkedin-in"></i></a>
<a href=""><i class="fab fa-behance"></i></a>
<a href=""><i class="fab fa-dribbble"></i></a>
</div>
</div>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
}
.container{
height: 100vh;
width: 100%;
background-color: #edf2fc;
font-family: sans-serif;
position: relative;
}
nav{
width: 84%;
margin: auto;
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
nav h3{
color: #212121;
cursor: pointer;
}
nav h3 span{
color: #ff4321;
}
nav ul li{
display: inline-block;
list-style: none;
margin: 10px 20px;
}
nav ul li a{
text-decoration: none;
color: #606163;
}
nav ul li a:hover{
color: #ff4321;
}
.info{
margin-left: 8%;
margin-top: 13%;
}
.info h1{
font-size: 70px;
color: #212121;
margin-bottom: 20px;
}
span{
color: #ff4321;
}
.info p{
color: #606163;
line-height: 22px;
}
.info a{
background-color: #212121;
padding: 10px 18px;
text-decoration: none;
color: #fff;
display: inline-block;
margin: 30px 0;
border-radius: 5px;
}
.img-box{
width: 45%;
height: 80%;
position: absolute;
bottom: 0;
right: 100px;
}
.img-box img{
height: 100%;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
transition: bottom 1s, left 1s;
}
.img-box:hover .back-img{
bottom: 40px;
}
.img-box:hover .main-img{
left: 54%;
}
.social-links{
margin-left: 8%;
margin-top: 30px;
}
.social-links a{
font-size: 30px;
color: #606163;
margin-right: 20px;
}
.social-links a:hover{
color: #ff4321;
}
0 Comments