Personal Portfolio Website using HTML and CSS


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>

complete html notes pdf, complete html notes for beginners, geeks help html css projects,

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;
}


Post a Comment

2 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad

Ads Section