Personal Portfolio website using HTML and CSS
Hey, everyone in this video we will learn how you can use HTML and CSS to build a website design. In this video, we will design a Personal Portfolio website using HTML and CSS. So if you have learned HTML, and CSS and still don't know how to implement HTML CSS for website design then you must watch the full video and also access the HTML and CSS code given below.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio using HTML and CSS </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Navbar starts Here -->
<nav id="navBar">
<h2> Raju.</h2>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#projects">Projects</a></li>
</ul>
</nav>
<!-- Home Section -->
<section id="home">
<div id="homeLeft">
<h2> Hey, I'm Raju </h2>
<h3> Web Developer </h3>
<p class="para">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius obcaecati veritatis deserunt temporibus
neque! Praesentium consectetur explicabo corrupti nulla officiis deleniti nobis doloribus voluptatem ea
asperiores. Possimus provident consequuntur impedit soluta ipsum sit, unde quaerat nostrum quasi esse
inventore sed rem eum! Placeat numquam, adipisci officiis est dicta voluptatum neque!
</p>
</div>
<div id="homeRight">
<img src="user.jpg" alt="">
</div>
</section>
<!-- About Me -->
<section id="about">
<h1 id="aboutMe"> About Me </h1>
<div class="container">
<div id="aboutLeft">
<h2> Hey, I'm Raju </h2>
<h3> Web Developer </h3>
<p class="para">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius obcaecati veritatis deserunt
temporibus
neque! Praesentium consectetur explicabo corrupti nulla officiis deleniti nobis doloribus voluptatem
ea
asperiores. Possimus provident consequuntur impedit soluta ipsum sit, unde quaerat nostrum quasi
esse
inventore sed rem eum! Placeat numquam, adipisci officiis est dicta voluptatum neque!
</p>
<a href="" id="btn">Hire Me</a>
</div>
<div id="aboutRight">
<img src="user.jpg" alt="">
</div>
</div>
</section>
<!-- Services -->
<section id="services">
<h1 id="servicesHeading"> Services </h1>
<div class="container">
<div class="card">
<li>
<i class="fa-solid fa-globe"></i>
</li>
<h3> Web Development </h3>
<p class="cardPara"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio accusamus
officiis minima atque ullam, ipsum porro asperiores architecto autem delectus assumenda voluptas
earum alias obcaecati tempora animi! Reprehenderit, quo labore.</p>
</div>
<div class="card">
<li>
<i class="fa-solid fa-mobile-screen-button"></i>
</li>
<h3> App Development </h3>
<p class="cardPara"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio accusamus
officiis minima atque ullam, ipsum porro asperiores architecto autem delectus assumenda voluptas
earum alias obcaecati tempora animi! Reprehenderit, quo labore.</p>
</div>
<div class="card">
<li>
<i class="fa-solid fa-laptop"></i>
</li>
<h3> Software Development </h3>
<p class="cardPara"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio accusamus
officiis minima atque ullam, ipsum porro asperiores architecto autem delectus assumenda voluptas
earum alias obcaecati tempora animi! Reprehenderit, quo labore.</p>
</div>
<div class="card">
<li>
<i class="fa-solid fa-code"></i>
</li>
<h3> CMS Development </h3>
<p class="cardPara"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio accusamus
officiis minima atque ullam, ipsum porro asperiores architecto autem delectus assumenda voluptas
earum alias obcaecati tempora animi! Reprehenderit, quo labore.</p>
</div>
</div>
</section>
<!-- Projects -->
<section id="projects">
<h1 id="projectsHeading"> Projects </h1>
<div class="container">
<div class="projectsCard">
<img src="./projects.jpg" alt="">
<p class="cardPara"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio accusamus
officiis minima atque ullam, ipsum porro asperiores architecto autem delectus assumenda.</p>
</div>
<div class="projectsCard">
<img src="./projects.jpg" alt="">
<p class="cardPara"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio accusamus
officiis minima atque ullam, ipsum porro asperiores architecto autem delectus assumenda.</p>
</div>
<div class="projectsCard">
<img src="./projects.jpg" alt="">
<p class="cardPara"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio accusamus
officiis minima atque ullam, ipsum porro asperiores architecto autem delectus assumenda.</p>
</div>
<div class="projectsCard">
<img src="./projects.jpg" alt="">
<p class="cardPara"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio accusamus
officiis minima atque ullam, ipsum porro asperiores architecto autem delectus assumenda.</p>
</div>
</div>
</section>
</body>
</html>
CSS Code
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
scroll-behavior: smooth;
}
#navBar {
display: flex;
justify-content: space-around;
align-items: center;
padding: 10px 20px;
background-color: white;
position: sticky;
top: 0;
}
#navBar ul {
display: flex;
list-style: none;
}
#navBar ul li a {
text-decoration: none;
padding: 10px 20px;
color: #000;
}
#home {
padding: 10px 20px;
display: flex;
justify-content: space-between;
}
#homeLeft,
#homeRight,
#aboutLeft,
#aboutRight {
width: 50vw;
}
#homeLeft {
padding-left: 15rem;
}
#homeLeft h2 {
font-size: 2.5rem;
}
#homeLeft h3 {
font-size: 1.5rem;
}
.para {
margin-top: 1.5rem;
font-size: 1.1rem;
}
#homeRight img {
display: block;
margin: auto;
width: 25rem;
box-shadow: 3px 6px 10px #00000047;
border-radius: 50%;
}
#aboutMe,
#servicesHeading,
#projectsHeading {
font-size: 3rem;
text-align: center;
margin: 1.2rem 0;
}
.container {
display: flex;
justify-content: space-around;
flex-direction: row-reverse;
}
#aboutRight img {
display: block;
margin: auto;
width: 25rem;
border-radius: 10%;
box-shadow: 3px 6px 10px #00000047;
}
#aboutLeft {
padding-right: 10rem;
}
#aboutLeft h2 {
font-size: 2.5rem;
}
#aboutLeft h3 {
font-size: 1.5rem;
}
#servicesHeading {
text-align: center;
margin: 1.5rem 0;
}
#services .container {
justify-content: space-around;
}
.card {
padding: 15px;
cursor: pointer;
margin: 15px;
width: 20vw;
border-radius: 7%;
border: 1px solid rgb(121, 113, 113);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.card:hover {
box-shadow: 3px 6px 10px #00000047;
}
.card li {
list-style: none;
font-size: 3rem;
}
.cardPara {
text-align: center;
}
#btn {
text-decoration: none;
text-transform: uppercase;
margin-top: 5rem;
background: blue;
color: white;
padding: 10px 32px;
line-height: 5rem;
border-radius: 8px;
border: 1px solid blue;
}
#btn:hover {
color: blue;
border: 1px solid blue;
background: white;
}
.projectsCard {
padding: 15px;
cursor: pointer;
margin: 15px;
border-radius: 7%;
border: 1px solid rgb(121, 113, 113);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.projectsCard img {
width: 100%;
border-radius: 10%;
box-shadow: 1px 1px 10px #000000a3;
}
.projectsCard .cardPara {
margin-top: 35px;
}
.projectsCard:hover {
box-shadow: 3px 6px 10px #00000047;
}
Images are missing
ReplyDeleteyes, use your own images
Delete