Hi dear welcome to Ascode Blog . In this post we are going to learn how to make a mobile responsive portfolio website using html css and jequery. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the file with your browser.
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">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<title>Responsive Portfolio Website</title>
</head>
<body>
<div class="hero">
<header>
<div class="logo"><img src="logo.png" alt=""></div>
<div class="menu-toggle"><i class="fas fa-bars"></i></div>
<nav>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
</ul>
</nav>
</header>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.menu-toggle').click(function(){
$('nav').toggleClass('active')
})
})
</script>
<div class="container">
<div class="info">
<h1>I'm <span>Raima</span> Smith</h1>
<p>This is my official portfolio website. I'm a profesional<br> we developer and graphic designer.</p>
<a href="">Download CV</a> <a href="">Hire Me</a>
</div>
<div class="img-box">
<img src="bg.png" class="back-img">
<img src="raima.png" class="main-img">
</div>
<div class="socil-links">
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-facebook-square"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-twitter-square"></i></a>
</div>
</div>
<div class="footer">
Raima Alright Reseverd - 2021
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box
}
.hero {
background: #fff;
position: relative;
display: flex;
width: 100%;
height: 100vh;
}
header{
position: absolute;
top: 0;
left: 0;
padding: 10px 100px;
border-bottom: 4px solid #ff056d;
width: 100%;
z-index: 1000;
}
header .logo img{
width:156px ;
line-height: 50px;
float: left;
}
header nav {
float: right;
}
header nav ul {
margin: 0;
padding: 0;
display: flex;
}
header nav ul li {
list-style: none;
}
header nav ul li a{
text-transform: uppercase;
height: 50px;
line-height: 50px;
padding: 0 20px;
color: #000;
text-decoration: none;
display: block;
font-size: 20px;
font-weight: bold;
}
header nav ul li a:hover,
header nav ul li a.active {
color: #ff056d;
background: #fff;
}
.menu-toggle {
color: #000;
float: right;
line-height: 50px;
font-size: 24px;
cursor: pointer;
display: none;
}
/* body post */
.container {
position: relative;
display: flex;
width: 100%;
}
.info {
position: relative;
margin-left: 8%;
margin-top: 14%;
}
.info h1 {
font-size: 70px;
color: #212121;
margin-bottom: 20px;
}
span {
color: #ff056d;
}
.info p{
color: #606163;
line-height: 25px;
}
.info a{
background: #ff056d;
padding: 10px 18px;
text-decoration: none;
color: #fff;
display: inline-block;
margin:30px 5px;
border-radius: 5px;
}
.info a:hover{
color: #fff;
background: #000;
}
.img-box {
width: 45%;
height: 80%;
position: relative;
bottom: 0;
right: -10%;
top: 20%;
}
.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: 55%;
}
.socil-links{
position: absolute;
margin-left: 8%;
bottom: 100px;
}
.socil-links a{
background: #ff056d;
border-radius: 10px;
padding: 5px 8px;
font-size: 24px;
color: #fff;
margin-right: 20px;
justify-content: center;
align-items: center;
}
.socil-links a:hover{
color: #fff;
background: #000;
}
.footer{
position:fixed;
font-size: 15px;
bottom: 0;
padding: 5px 100px;
color:#fff ;
background: #ff056d;
width: 100%;
justify-content: center;
text-align: center;
}
@media (max-width: 800px){
header {
padding: 0 20px;
z-index: 100;
}
.menu-toggle {
display: block;
}
header nav {
/* display: none; */
position: absolute;
width: 100%;
height: calc(100vh-50px);
background:#fff ;
top: 50px;
left: -100%;
transition: 0.5s;
}
header nav.active{
left:0;
top: 60px;
}
header nav ul {
display: block;
text-align: center;
}
header nav ul li a {
border-bottom: 1px solid rgba(0,0,0,.2) ;
}
.container{
display: block;
}
.info {
top: 5%;
}
.info h1 {
font-size: 50px;
}
.img-box {
bottom: 0;
left: 25%;
top: 5%;
margin: 0 3px;
}
.socil-links {
bottom: 0;
}
.footer{
font-size: 10px;
}
}
0 Comments