How To Make Responsive Portfolio Website Just Using HTML And CSS
Basic HTML Code
<!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 Website</title>
<link rel="stylesheet" href="styles.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<body>
<div class="hero">
<nav>
<img src="logo.png" class="logo">
<ul>
<li> <a href="">HOME</a></li>
<li> <a href="">PORTFOLIO</a></li>
<li> <a href="">SERVICES</a></li>
<li> <a href="">CONTACT US</a></li>
<li> <a href="">ABOUT US</a></li>
</ul>
</nav>
<div class="info">
<h1>I'm <span>Matt</span> Sabia</h1>
<p>Welcome to my officail Portfolio Website Where I put all my work<br>related to my designs and many more.</p>
<a href="">Download CV</a>
</div>
<div class="img-box">
<img src="back.png" class="back-img">
<img src="man.png" class="man-img">
</div>
<div class="social">
<a href=""><i class="fab fa-facebook-square"></i></a>
<a href=""><i class="fab fa-dribbble"></i></a>
<a href=""><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</body>
</html>
CSS Code
*{
margin: 0;
padding: 0;
}
.hero{
height: 100vh;
width: 100%;
background: #edf2fc;
font-family: sans-serif;
position: relative;
}
nav{
width: 84%;
margin: auto;
padding: 20px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo{
width: 60px;
cursor: pointer;
}
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: 15%;
}
.info h1{
font-size: 70px;
color: #212121;
margin-bottom: 20px;
}
span{
color: #ff4321;
}
.info p{
color: #606163;
line-height: 22px;
}
.info a{
background: #212121;
padding: 10px 18px;
text-decoration: none;
color: #fff;
display: inline-block;
margin: 30px 0;
border 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 .man-img{
left: 54%;
}
.social{
margin-left: 8%;
margin-top: 100px;
}
.social a{
font-size: 30px;
color: #606163;
margin-right: 20px;
}
.social a:hover{
color: #ff4321;
}
thanks bro
ReplyDelete