Website Preview:
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>AJ Blogs</title>
<link rel='stylesheet' href="style.css">
</head>
<body>
<div class="header">
<nav>
<img src="images/AJ_Blogs-removebg-preview.png" 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>
</ul>
<img src="images/menu.png" class="menu-icon">
</nav>
<div class="text-box">
<h1>I'm <span class="auto-input"></span></h1>
<p>You can Reach out me if you need any help in making a website.</p>
<a href="">Contact Me</a>
<a href="" class="btn">Download CV</a>
</div>
<img src="images/user1.png" class="user-img">
</div>
<!-- JavaScript Code-->
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
var typed =new Typed(".auto-input",{
strings:["AJ Blogs","Web Developer","UI Designer"],
typeSpeed: 100,
backSpeed: 100,
loop: true
})
</script>
</body>
</html>
CSS Code:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins',sans-serif;
}
.header{
width: 100%;
height: 100vh;
background: #020412;
color: #fff;
padding: 0 8.5%;
position: relative;
}
nav{
display: flex;
width: 100%;
align-items: center;
flex-wrap: wrap;
padding: 30px 0 10px;
}
.logo{
width: 240px;
cursor: pointer;
}
.menu-icon{
width: 35px;
cursor: pointer;
}
nav ul{
flex: 1;
text-align: right;
padding-right: 40px;
}
nav ul li{
display: inline-block;
list-style: none;
margin: 10px 30px;
}
nav ul li a{
color: #fff;
text-decoration: none;
letter-spacing: none;
font-size: 17px;
}
nav ul li a:hover{
color: #fff724;
}
.text-box{
margin-top: 15%;
font-size: 17px;
letter-spacing: 1px;
line-height: 26px;
}
.text-box h1{
font-size: 75px;
line-height: 160px;
}
.text-box a{
margin-top: 30px;
display: inline-block;
border-radius: 6px;
border: 2px solid #fff724;
color: #fff724;
padding: 10px 30px;
text-decoration: none;
}
.text-box .btn{
background: #fff724;
color: #000;
margin-left: 30px;
font-weight: 600;
}
.user-img{
width: 550px;
position: absolute;
right: 5%;
bottom: 0;
}
Tags:
Web Development
