Complete Responsive Personal Portfolio Website Using HTML & CSS

Published by codingmaster on

Hello Friends, today in this blog you’ll learn how to make Complete Responsive Personal Portfolio Website Using only HTML & CSS.

Using only HTML & CSS you can create a responsive portfolio website…for responsive we use Media Queries. This is best practice to create responsive websites to improve your HTML & CSS skills.

Video Tutorial of How To Make Complete Responsive Personal Portfolio Website Using Only HTML & CSS

In the video you’ve seen that we create a responsive portfolio website using only HTML & CSS. we’ve add 5 sections on the website..Home Section, About Section, Education Section, Portfolio Section & Contact Section…Using simple HTML & CSS we can easily create this type of amazing portfolio websites.

So, enjoy the tutorial & learn something new today 🙂

Complete Personal Portfolio Responsive Website [ SOURCE CODE ]

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive personal portfolio website design tutorial</title>

    <!-- font awesome cdn link  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

    <!-- custom css file link  -->
    <link rel="stylesheet" href="style.css">

</head>
<body>
    
 <!-- Header Section Starts -->

 <header>
 <div class="user">
     <img src="images/profile.jpg" alt="">
     <h3 class="name">Tarun Kaushik</h3>
     <p class="post">Front End Developer</p>
 </div>

 <nav class="navbar">
     <ul>
         <li><a href="#home">Home</a></li>
         <li><a href="#about">About</a></li>
         <li><a href="#education">Education</a></li>
         <li><a href="#portfolio">Portfolio</a></li>
         <li><a href="#contact">Contact</a></li>
     </ul>
 </nav>
</header>

<!-- Header Section Ends -->

<div id="menu" class="fa fa-bars"></div>

<!-- Home Section Starts -->

<section class="home" id="home">

    <h3>HI THERE !</h3>
    <h1>I'M <span>Tarun Kaushik</span></h1>
    <p>Founder & CEO of Coding Master. I'm B.Sc(C.S) Final Year Student, a Frontend Web Developer & providing quality content on web development.</p>
    <a href="#about"><button class="btn">About Me <i class="fas fa-user"></i></button></a>
</section>

<!-- Home Section Ends -->

<!-- About Section Starts -->

<section class="about" id="about">

    <h1 class="heading"><span>About</span> Me</h1>

    <div class="row">
        <div class="info">
            <h3><span>Name: </span>Tarun Kaushik</h3>
            <h3><span>Age: </span>20</h3>
            <h3><span>Post: </span>Front End Developer</h3>
            <h3><span>Language: </span>Hindi</h3>
            <a href="#">
                <button class="btn">Download CV <i class="fas fa-download"></i></button>
            </a>
        </div>

        <div class="counter">
            <div class="box">
                <span>2+</span>
                <h3>Years of Experience</h3>
            </div>
            <div class="box">
                <span>100+</span>
                <h3>Projects Completed</h3>
            </div>
            <div class="box">
                <span>210+</span>
                <h3>Happy Clients</h3>
            </div>
            <div class="box">
                <span>10+</span>
                <h3>Awards Won</h3>
            </div>

        </div>
    </div>
</section>

<!-- About Section Ends -->

<!-- Education Section Starts -->

<section class="education" id="education">
    <h1 class="heading">My <span>Education</span></h1>
    <div class="box-container">

    <div class="box">
        <i class="fas fa-graduation-cap"></i>
        <span>2017</span>
        <h3>Intermediate Passout</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati quos alias praesentium. Id autem provident laborum quae, distinctio eaque temporibus!</p>
    </div>
   
    <div class="box">
        <i class="fas fa-graduation-cap"></i>
        <span>2018</span>
        <h3>College Student</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati quos alias praesentium. Id autem provident laborum quae, distinctio eaque temporibus!</p>
    </div>

    <div class="box">
        <i class="fas fa-graduation-cap"></i>
        <span>2021</span>
        <h3>Founder & CEO of Coding Master</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati quos alias praesentium. Id autem provident laborum quae, distinctio eaque temporibus!</p>
    </div>

    <div class="box">
        <i class="fas fa-graduation-cap"></i>
        <span>2021</span>
        <h3>Founder & CEO of Coding Master</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati quos alias praesentium. Id autem provident laborum quae, distinctio eaque temporibus!</p>
    </div>

    <div class="box">
        <i class="fas fa-graduation-cap"></i>
        <span>2021</span>
        <h3>Founder & CEO of Coding Master</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati quos alias praesentium. Id autem provident laborum quae, distinctio eaque temporibus!</p>
    </div>

    <div class="box">
        <i class="fas fa-graduation-cap"></i>
        <span>2021</span>
        <h3>Founder & CEO of Coding Master</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati quos alias praesentium. Id autem provident laborum quae, distinctio eaque temporibus!</p>
    </div>

</div>
</section>

<!-- Education Section Ends -->

<!-- Portfolio Section Starts -->

<section class="portfolio" id="portfolio">
    <h1 class="heading">My <span>Portfolio</span></h1>

    <div class="box-container">
       
        <div class="box">
            <img src="images/1.jpg" alt="">
        </div>

        <div class="box">
            <img src="images/2.jpg" alt="">
        </div>

        <div class="box">
            <img src="images/3.jpg" alt="">
        </div>

        <div class="box">
            <img src="images/4.jpg" alt="">
        </div>

        <div class="box">
            <img src="images/5.jpg" alt="">
        </div>

        <div class="box">
            <img src="images/6.jpg" alt="">
        </div>
    </div>
</section>

<!-- Portfolio Section Ends -->

<!-- Contact Section Starts -->

<section class="contact" id="contact">

    <h1 class="heading"> <span>contact</span> me </h1>
    
    <div class="row">
    
        <div class="content">
    
            <h3 class="title">contact info</h3>
    
            <div class="info">
                <h3> <i class="fas fa-envelope"></i> cm@gmail.com </h3>
                <h3> <i class="fas fa-phone"></i> +123-456-7890 </h3>
                <h3> <i class="fas fa-map-marker-alt"></i> U.P, india - 281502. </h3>
            </div>
    
        </div>
    
        <form action="">
    
            <input type="text" placeholder="name" class="box">
            <input type="email" placeholder="email" class="box">
            <input type="text" placeholder="project" class="box">
            <textarea name="" id="" cols="30" rows="10" class="box message" placeholder="message"></textarea>
            <button type="submit" class="btn"> send <i class="fas fa-paper-plane"></i> </button>
    
        </form>
        
    </div>
    </section>
    
    <!-- Contact Section Ends -->


<!-- jquery cdn link  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- custom js file link  -->
<script src="script.js"></script>

</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

<!-- wp:code -->
<pre class="wp-block-code"><code class="">@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600&amp;display=swap');

:root {
    --color: crimson;
}
* {
    font-family: 'Nunito', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    outline: none;
    border: none;
    text-transform: capitalize;
    transition: all .2s linear;
}
*::selection {
    background: var(--color);
    color: #333;
}
html {
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
html::-webkit-scrollbar {
    width: 1.4rem;
}
html::-webkit-scrollbar-track {
    background: #222;
}
html::-webkit-scrollbar-thumb {
    background: var(--color);
}
body {
    background: #fff;
    overflow-x: hidden;
    padding-left: 35rem;
}
section {
    min-height: 100vh;
    padding: 1rem;
}
.btn {
    padding: .7rem 3rem;
    background: #333;
    color: #fff;
    cursor: pointer;
    margin-top: 1rem;
    font-size: 2rem;
    border-radius: 5rem;
}
.btn i {
    padding: 0 .5rem;
    font-size: 1.8rem;
}
.btn:hover {
    background: var(--color);
}
.heading {
    text-align: center;
    margin: 0 6rem;
    text-transform: uppercase;
    font-size: 4rem;
    padding: 1rem;
    border-bottom: .1rem solid #fff4;
    color: #222;
    font-weight: 600;
}
.heading span {
    color: var(--color);
    text-transform: uppercase;
    font-weight: 600;
}
/* Header Section */

header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    height: 100%;
    width: 35rem;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    text-align: center;
}
header .user img {
    height: 17rem;
    width: 17rem;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
    border: .7rem solid var(--color);
}
header .user .name {
    font-size: 3.5rem;
    color: #222;
}
header .user .post {
    font-size: 2rem;
    color: #222;
}
header .navbar {
    width: 100%;
}
header .navbar ul {
    list-style: none;
    padding: 1rem 3rem;
}
header .navbar ul li a {
    display: block;
    padding: 1rem;
    margin: 1.5rem 0;
    background: #333;
    color: #fff;
    font-size: 2rem;
    border-radius: 5rem;
}
header .navbar ul li a:hover {
    background: var(--color);
}
#menu {
    position: fixed;
    top: 2rem;
    right: 2rem;
    background: #333;
    color: #fff;
    cursor: pointer;
    font-size: 2.5rem;
    padding: 1rem 1.5rem;
    z-index: 1000;
    display: none;
}

/* Home Section Starts */

.home {
    display: flex;
    justify-content: center;
    flex-flow: column;
    padding: 0 15rem;
}
.home h3 {
    font-size: 2.5rem;
    color: #222;
}
.home h1 {
    font-size: 5rem;
    color: #222;
}
.home h1 span {
    color: var(--color);
}
.home p {
    font-size: 2rem;
    color: #222;
    padding: 1rem 0;
}

/* Home Section Ends */

/* About Section Starts */

.about .row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1rem 0;
}
.about .row .info {
    flex: 1 1 48rem;
    padding: 2rem 1rem;
    padding-left: 6rem;
}
.about .row .info h3 {
    font-size: 2rem;
    color: var(--color);
    font-weight: bold;
    padding: 1rem 0;
}
.about .row .info h3 span {
    color: #222;
    padding: 0 .5rem;
}
.about .row .counter {
    flex: 1 1 48rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.about .row .counter .box {
    width: 20rem;
    background: #222;
    text-align: center;
    padding: 2rem;
    margin: 2rem;
}
.about .row .counter .box span {
    font-size: 4rem;
    color: var(--color);
}
.about .row .counter .box h3 {
    font-size: 2rem;
    color: #fff;
}

/* About Section Starts */

/* Education Section Starts */

.education .box-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1rem 0;
    padding-left: 3rem;
}
.education .box-container .box {
    width: 27rem;
    margin: 4rem 1rem;
    padding-left: 4rem;
    border-left: .2rem solid #222;
    position: relative;
}
.education .box-container .box span {
    font-size: 1.3rem;
    background: #222;
    color: #fff;
    border-radius: 5rem;
    padding: .5rem 2.5rem;
}
.education .box-container .box h3 {
    font-size: 2rem;
    color: #222;
    padding-top: 1.5rem;
}
.education .box-container .box p {
    font-size: 1.4rem;
    color: #222;
    padding: 1rem 0;
}
.education .box-container .box i {
    position: absolute;
    top: -1.5rem;
    left: -2.5rem;
    height: 5rem;
    width: 5rem;
    border-radius: 50%;
    line-height: 5rem;
    color: #fff;
    text-align: center;
    font-size: 2rem;
    background: var(--color);
}

/* Education Section Ends */

/* Portfolio Section Starts */

.portfolio .box-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 2rem 0;
}
.portfolio .box-container .box {
    height: 20rem;
    width: 26rem;
    border-radius: 1rem;
    margin: 2rem;
    overflow: hidden;
    cursor: pointer;
}
.portfolio .box-container .box img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.portfolio .box-container .box:hover img {
    transform: scale(1.2);
}

/* Portfolio Section Ends */

/* Contact Section Starts */

.contact .row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.contact .row .content {
    flex: 1 1 30rem;
    padding: 4rem;
    padding-bottom: 0;
}
.contact .row form {
    flex: 1 1 45rem;
    padding: 2rem;
    margin: 2rem;
    margin-bottom: 4rem;
}
.contact .row form .box {
    padding: 1.5rem;
    margin: 1rem 0;
    background: #3333;
    color: #222;
    text-transform: none;
    font-size: 1.7rem;
    width: 100%;
}
.contact .row form .box::placeholder {
    text-transform: capitalize;
}
.contact .row form .message {
    height: 15rem;
    resize: none;
}
.contact .row .content .title {
    text-transform: uppercase;
    color: #222;
    font-size: 3rem;
    padding-bottom: 2rem;
}
.contact .row .content .info h3 {
    display: flex;
    align-items: center;
    font-size: 2rem;
    text-transform: none;
    color: #222;
    padding: 1rem 0;
    font-weight: normal;
}
.contact .row .content .info h3 i {
    padding-right: 1rem;
    color: var(--color);
}

/* Contact Section Ends */

/* Media Queries */

 @media (max-width:1200px) {
     html {
         font-size: 55%;
     }
     .home {
         padding: 1rem 4rem;
     }
 }
 @media (max-width:991px) {
     header {
         left: -120%;
     }
     #menu {
         display: block;
     }
     header.toggle {
         left: 0%;
     }
     body {
         padding: 0;
     }
 }
 @media (max-width:768px) {
     html {
         font-size: 50%;
     }
 }
@media (max-width:400px) {
    header {
        width: 100vw;
    }
    .heading {
        margin: 0 3rem;
    }
    .about .row .counter .box {
        width: 100%;
    }
    .education .box-container .box {
        width: 100%;
    }
    .portfolio .box-container .box {
        width: 100%;
    }
    .contact .row form {
        margin: 3rem 0;
    }
}</code></pre>
<!-- /wp:code -->

Third, create a JavaScript file with the name of script.js and paste the given codes in your Javascript file. you’ve to create a file with .js extension.

$(document).ready(function(){

  $('#menu').click(function(){
    $(this).toggleClass('fa-times');
    $('header').toggleClass('toggle');
  })
 })
DOWNLOAD SOURCE CODE FILES
codingmaster
Latest posts by codingmaster (see all)
Categories: HTML & CSS Projects
Tags:

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

Related Posts

Neumorphic Card using Bootstrap 5
CSS Cards HTML & CSS Projects

Neumorphic Post Card using Bootstrap 5

Neumorphism is the recent design trend, which uses cool shadow techniques to create a beautiful, subtle, and smooth design. Today, in this post we’ll create a beautiful Responsive Neumorphic Post Card using Bootstrap 5. You Read more…

Best CSS Courses on Youtube
HTML & CSS Projects Tips & Tricks

Best CSS Courses on YouTube for Beginners!

CSS is an essential part of Web Development. If you are aiming to become a Front-end developer having a core understanding of CSS is a must! CSS can be easy and difficult at the same Read more…

Calculator using HTML, CSS & JavaScript
HTML & CSS Projects Tips & Tricks

Simple Calculator Using HTML, CSS & JavaScript

Today, in this post we’ll learn how to create a simple yet beautiful calculator using our plain old HTML, CSS & JavaScript. If you are just beginning your journey in Web Development, especially in JavaScript, Read more…