HTML

<html>
<head>
<title>Aitch Etesami</title>
<link rel=“stylesheet” href=“style.css”>
<link rel=“stylesheet” href=“https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<body>
<div class=“hero”>
<nav>
<img src=“images/logo.png” alt=“Logo” class=“logo”>
<ul>
<li><a href=“”>HOME</a></li>
<li><a href=“”>ABOUT</a></li>
<li><a href=“”>PORTFOLIO</a></li>
<li><a href=“”>SERVICES</a></li>
<li><a href=“”>HIRE ME</a></li>
</ul>
</nav>
<div class=“info”>
<h1>I’m <span>Aitch</span> Etesami</h1>
<p >This is my official portfolio website to <br class=“mobile-break”>showcase
my all works related to <br class=“d-md-none”>web development and UI design.</p>
<a href=“”>Download CV</a>
</div>
<div class=“img-box”>
<img src=“images/pattern.png” alt=“pattern” class=“back-img”>
<img src=“images/aitch.png” alt=“Aitch” class=“main-img”>
</div>
<div class=“social-link”>
<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>
</head>
</html>

CSS

* {
margin: 0;
padding: 0;
}
.hero {
height: 100vh;
width: 100%;
background: #edf2fc;
font-family: sans-serif;
position: relative;
}
nav {
width: 84%;
margin: auto;
display: flex;
align-items: center;
padding: 20px 0;
justify-content: space-between;
}
.logo {
width: 250px;
cursor: pointer;
margin-left: 5px;
}
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: tomato;
}
.info {
margin-top: 8%;;
margin-left: 12%;;
}
.info h1 {
font-size: 70px;
margin-bottom: 20px;
color: #212121;
}
.info h1 span {
color: tomato;
}
.info p {
color: #606163;
line-height: 22px;
}
.info a {
text-decoration: none;
display: inline-block;
margin: 30px 0;
padding: 10px 18px;
background: #212121;
color: #fff;
border-radius: 5px;
}
.info a:hover {
background: tomato;
}
.img-box {
width: 45%;
height: 80%;
position: absolute;
bottom: 0;
right: 100px;
}
.img-box img {
height: 100%;
position: absolute;
bottom: 0;
left: 60%;
transform: translateX(-50%);
transition: bottom 1s, left 1s;
}
.img-box:hover .back-img {
bottom: 40px;
}
.img-box:hover .main-img {
left: 62%;
}
.social-link {
margin-left: 8%;
margin-top: 100px;
padding-left: 60px;
}
.social-link a {
font-size: 30px;
color: #606163;
margin-right: 20px;
}
.social-link a:hover {
color: tomato;
}
/* Mobile size */
@media screen and (min-width: 600px) {
.mobile-break { display: none; }
}
@media screen and (max-width: 600px) {
.img-box img {
left: 40%;
transform: translateX(-30%);
}

nav ul li {
display: inline-block;
margin: 10px 10px;
}
.logo {
margin-left: -50px;
}
.social-link {
margin-top: 0;
}
.social-link a {
display: flex;
margin-left: -80px;
margin-bottom: 20px;
text-decoration: none;
}
}

HTML

CSS

Welcome to Teacher Etesami