Unlock the power of web development with our step-by-step guide on building a stunning portfolio website using HTML and CSS! 🚀 Join us on this hands-on journey as we demystify the coding process, This video helps you craft a professional portfolio. Whether you're a beginner or looking to enhance your web development skills, this tutorial is your gateway to creating a standout digital presence. Elevate your portfolio game and showcase your talents to the world! 💻✨
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/b186863b7d.js"
crossorigin="anonymous"></script>
<title>Portfolio Website</title>
</head>
<body>
<div class="main">
<nav>
<h2 class="logo">Port <span>folio</span></h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Contact</a></li>
</ul>
<a href="#" class="button">Subscribe</a>
</nav>
<div class="banner">
<h4>Hello, I'm</h4>
<h1>Manual Smith</h1>
<div class="newsletter">
<form >
<input type="email" name="email" id="email" placeholder="Enter Your Email">
<input type="submit" name="submit" value="Let's Start">
</form>
</div>
</div>
</div>
<hr class="rounded">
<section class="about">
<h2>About</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
</section>
<hr class="rounded">
<div class="service">
<div class="title">
<h2>Our Services</h2>
</div>
<div class="box">
<div class="card" style="width: 360px;">
<i class="fas fa-bars"></i>
<h5>Frontend Developer</h5>
<div class="paragraph">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
<p style="text-align: center; padding-top: 35px;">
<a class = "button" href="#">Read More</a></p>
</div>
</div>
<div class="card" >
<i class="fas fa-bars"></i>
<h5>Frontend Developer</h5>
<div class="paragraph">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
<p style="text-align: center; padding-top: 35px;">
<a class = "button" href="#">Read More</a></p>
</div>
</div>
<div class="card" >
<i class="fas fa-bars"></i>
<h5>Frontend Developer</h5>
<div class="paragraph">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book</p>
<p style="text-align: center; padding-top: 35px;">
<a class = "button" href="#">Read More</a></p>
</div>
</div>
</div>
</div>
<hr class="rounded">
<div class="contact">
<i class="fa-brands fa-whatsapp"></i>
<p>037-456 789</p>
</div>
<hr class="rounded">
<footer>
<br>
<p>Manual Smith</p>
<br>
<p>For More Tutorials please subscribe my channel</p>
<br>
<div class="social">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
<br>
<p class="footer-text">Copyright By Manual Smith</p>
</footer>
</body>
</html>
style.css
*{
padding: 0;
margin: 0;
font-family: 'Josefin Sans', sans-serif;
box-sizing: border-box;
}
body{
background-color: black;
}
.main{
height: 100vh;
width: 100%;
background-image: url(Image/Hero.png);
background-size: cover;
background-position: center;
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 45px;
padding-left: 8%;
padding-right: 8%;
}
.logo{
color: white;
font-size: 35px;
cursor: pointer;
letter-spacing: 1px;
}
span{
color: rgb(0,178,122);
}
nav ul li{
list-style-type: none;
display: inline-block;
padding: 10px 25px;
}
nav ul li a{
color: white;
text-decoration: none;
font-weight: bold;
text-transform: capitalize;
}
nav ul li a:hover{
color: rgb(0,178,122);
transition: 0.3s;
}
.button{
background-color: rgb(0,178,122);
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 10px 25px;
border-radius: 30px;
transition: transform 0.3s;
}
.button:hover{
transform: scale(1.2);
}
.banner{
position: absolute;
top: 50%;
left: 58%;
transform: translateY(-50%);
}
h1{
color: white;
margin: 20px 0px 20px;
font-size: 75px;
}
h4{
color: rgb(0,178,122);
font-size: 30px;
}
.newsletter form{
width: 300px;
max-width: 100%;
position: relative;
}
.newsletter form input:first-child{
display: inline-block;
width: 100%;
padding: 14px 130px 14px 15px;
border: 2px solid rgb(0,178,122);
outline: none;
border-radius: 30px;
}
.newsletter form input:last-child{
position: absolute;
display: inline-block;
outline: none;
border: none;
padding: 10px 30px;
border-radius: 30px;
background-color: rgb(0,178,122);
color: white;
box-shadow: 0px 0px 5px #000 , 0px 0px 15px #858585;
top: 6px;
right: 6px;
}
hr.rounded{
border-top: 8px solid #bbb;
border-radius: 5px;
}
.about{
background-color: #262525;
background-image: url(Image/About.jpg);
background-size: cover;
background-attachment: fixed;
height: 300px;
}
.about h2{
color: white;
font-size: 45px;
width: 1000px;
margin: 0px auto;
text-align: center;
}
.about p{
color: white;
font-size: 20px;
letter-spacing: 1px;
line-height: 30px;
right: 95px;
padding-top: 50px;
padding-left: 45px;
}
.service{
background: #101010;
width: 100%;
padding: 100px 0px;
}
.title h2{
color: white;
font-size: 45px;
width: 500px;
margin: 10px auto;
text-align: center;
}
.box{
display: flex;
justify-content: center;
align-items: center;
min-height: 450px;
}
.card{
height: 550px;
width: 350px;
padding: 20px 35px;
background-color: #858585;
border-radius: 20px;
margin: 15px;
position: relative;
overflow: hidden;
text-align: center;
}
.card i{
font-size: 50px;
display: block;
text-align: center;
margin: 25px 0px;
color: rgb(0,178,122);
}
h5{
color: white;
font-size: 30px;
margin-bottom: 15px;
}
.paragraph p{
color: white;
font-size: 18px;
line-height: 25px;
margin-bottom: 15px;
}
.card .button{
background-color: rgb(0,178,122);
color: white;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 10px 25px;
border-radius: 30px;
transition: transform 0.3s;
}
.card .button:hover{
background-color: transparent;
border: 2px solid yellow;
cursor: pointer;
background: black;
}
.contact{
width: 100%;
height: 200px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.contact i{
color: rgb(0,178,122);
font-size: 65px;
left: 50%;
}
.contact i:hover{
transform: scale(1.3);
transition: 0.3s;
}
.contact p{
color: white;
font-size: 45px;
margin-bottom: 25px;
left: 45%;
}
.social i{
color: rgb(0,178,122);
cursor: pointer;
text-align: center;
font-size: 25px;
}
footer{
position: relative;
width: 100%;
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
}
footer p:nth-child(1){
font-size: 30px;
margin-bottom: 15px;
font-weight: bold;
}
.social span{
color: rgb(0,178,122);
}
Comments
Post a Comment