How to create Portfolio Website Using HTML & CSS



In this tutorial, we'll be creating a Portfolio website using basic HTML & CSS,

A portfolio website is a digital space that showcases your best work. It can be used to share your work with potential collaborators, employers, or the press. Portfolio websites can also be used when applying for jobs or internships.

By the end of this tutorial, you'll learn how to create your own personal portfolio website.


Click the link to download the images :

https://drive.google.com/drive/folders/1zkBIhtweBhfLWhWqMyd9eSImSP4a8kVA?usp=drive_link


Source Code for the index.html file



Add the following Code inside your index.html file : 


             
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/svg+xml" href="porticon.png" />
    <title>Portfolio Website</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <nav>
        <a class="logo" href="#">
            <span>LO</span>GO
        </a>

        <ul class="navbar">
            <li><a   href="index.html">HOME</a></li>
            <li><a href="about.html">ABOUT</a></li>
            <li><a href="contact.html">CONTACT</a></li>
        </ul>
    </nav>

    <section class="hero">
        <div class="hero-desc">
                <span>MERN || STACK</span>
                <h2>Jay Sean</h2>
                <p>
                Hi! I'm a FullStack Developer with 5 years of experience.
                I'm passionate about building web applications that are both user-friendly and scalable.                
                </p>
                <div class="hero-btn">                
                <button class="btn">Hire Me</button>
                <button class="btn">My App</button>
                </div>
        </div>
        <div class="hero-img">
                <img src="alex.PNG" alt="my image">
        </div>

    </section>
    <footer>
        <p>Follow me on : </p>
        <div class="social">
            <a href="#"><i class="fa-brands fa-facebook fa-xl"></i></a>
            <a href="#"><i class="fa-brands fa-x-twitter fa-xl"></i></a>
            <a href="#"><i class="fa-brands fa-linkedin fa-xl"></i></a>
        </div>
    </footer>
</body>
</html>


Add the following code to your about.html file 

                 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/svg+xml" href="porticon.png" />
    <title>Portfolio Website</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <nav>
        <a class="logo" href="#">
            <span>LO</span>GO
        </a>

        <ul class="navbar">
            <li><a   href="index.html">HOME</a></li>
            <li><a href="about.html">ABOUT</a></li>
            <li><a href="contact.html">CONTACT</a></li>
        </ul>
    </nav>

    <section class="about-desc">
        <div class="card">
            <div class="card-img">
                <img src="card-img-1.png">
            </div>
            <div class="card-content">
                <h2>React JS</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est earum suscipit, voluptatum autem soluta repellendus
                        similique ducimus accusamus. Ad accusamus facilis autem minus deleniti architecto ex debitis quae saepe aut.</p>
                    <button class="btn"  href="#">Read More</button>   
            </div>
        </div>
        <div class="card">
            <div class="card-img">
                <img src="card-img-2.png">
            </div>
            <div class="card-content">
                <h2>Node JS</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est earum suscipit, voluptatum autem soluta repellendus
                        similique ducimus accusamus. Ad accusamus facilis autem minus deleniti architecto ex debitis quae saepe aut.</p>
                        <button class="btn"  href="#">Read More</button>   
            </div>
        </div>
        <div class="card">
            <div class="card-img">
                <img src="card-img-3.png">
            </div>
            <div class="card-content">
                <h2>Mongo DB</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Est earum suscipit, voluptatum autem soluta repellendus
                        similique ducimus accusamus. Ad accusamus facilis autem minus deleniti architecto ex debitis quae saepe aut.</p>
                        <button class="btn"  href="#">Read More</button>   
            </div>
        </div>
    </section>
    <footer>
        <p>Follow me on : </p>
        <div class="social">
            <a href="#"><i class="fa-brands fa-facebook fa-xl"></i></a>
            <a href="#"><i class="fa-brands fa-x-twitter fa-xl"></i></a>
            <a href="#"><i class="fa-brands fa-linkedin fa-xl"></i></a>
        </div>
    </footer>
    
</body>
</html>


Add the following code to your contact.html file 

                 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/svg+xml" href="porticon.png" />
    <title>Portfolio Website</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <nav>
        <a class="logo" href="#">
            <span>LO</span>GO
        </a>

        <ul class="navbar">
            <li><a   href="index.html">HOME</a></li>
            <li><a href="about.html">ABOUT</a></li>
            <li><a href="contact.html">CONTACT</a></li>
        </ul>
    </nav>

    <section class="contact">
        <div class="contact-img">
            <img src="contact-img.png" alt="">
        </div>
        <div class="contact-desc">
            <div>
            <h2>CONTACT US</h2>
        </div>
            <input type="text" name="name" placeholder="Name" >
            <input type="email" name="email" placeholder="Email">
            <input type="phone" name="phone" placeholder="Phone" >
            <textarea name="detail" placeholder="Message" ></textarea>
            <div>
            <button class="btn"  href="#">Submit</button>   
        </div>
        </div>

    </section>
    <footer>
        <p>Follow me on : </p>
        <div class="social">
            <a href="#"><i class="fa-brands fa-facebook fa-xl"></i></a>
            <a href="#"><i class="fa-brands fa-x-twitter fa-xl"></i></a>
            <a href="#"><i class="fa-brands fa-linkedin fa-xl"></i></a>
        </div>
    </footer>
</body>
</html>


Add the following code to your style.css file 

                 
@import url('https://fonts.googleapis.com/css2?family=Lora&family=Rubik:ital,wght@0,300;0,400;0,500;0,700;0,800;0,900;1,600&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
    list-style: none;
    text-decoration: none;
}

:root{
    --base-color:#F2FDFF;
    --text-color:hsl(225, 54%, 14%);

    --main-color:#9AD4D6;
    --high-color:#564787;
    --high2-color:#DBCBD8;

    --b-font:44px;
    --p-font:1.2rem;

}

body{
    background-color: #f0fdff;
}

nav{
    background-color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
}

.logo{
    color: var(--high-color);
    font-size: 38px;
    font-weight: 600;

}
.logo span{
    color: var(--base-color);
    transition: all 0.6s ease-in-out;

}
.logo span:hover{
    color: var(--text-color);
}

.navbar{
    display: flex;
    gap: 2rem;
}

.navbar a{
    font-size: var(--p-font);
    font-weight: 500;
    color: var(--text-color);
    padding: 5px;
    border-radius: 5px;
    position: relative;
}

.navbar a:hover,
.navbar a:focus{
    color: var(--base-color);
}

.navbar a::after{
    content: "";
    height: 3px;
    width: 90%;
    background: var(--high-color);
    position: absolute;
    left: 4px;
    bottom: -25px;
    opacity: 0;
    transition: all 0.6s ease-in-out;
}


.navbar a:hover::after{
    opacity: 1;
}

.hero{
    padding: 0 15%;
    display: flex;
    width: 100%;
    height: 70vh;
    align-items: center;
    justify-content: space-between;
    gap:100px;
    height: 77vh;
    width: 90%;
    padding: 10% 15%;
    background-color: var(--high2-color);
    border-radius: 20px;
    margin:20px auto;
}

.hero-img{
    
}

.hero-img img{
    border-radius: 50%;
    border: 4px solid var(--main-color);
    height: 400px;
    width: 400px;  
    transition: all 0.3s ease-in-out;
    object-fit: cover;

}
.hero-img img:hover{
    filter: drop-shadow(4px 4px 4px grey);
    transform:translateY(-3px);

}


.hero-desc span{
    padding: 12px 25px;
    background: linear-gradient(130deg, hsl(254, 31%, 40%) 0%,hsl(255, 2%, 54%) 100%);
    box-shadow: 0px 20px 40px;
    border: 1px solid;
    border-radius: 100px;
    color: var(--base-color);
    font-weight: 700;
    font-size: 15px;
}
.hero-desc h2{
    font-size: var(--b-font);
    margin: 23px 0px;
    color: var(--text-color);
}

.hero-desc p{
    font-size: var(--p-font);
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 30px;
    color: var(--text-color);
}

.btn{
    margin-top: 5px;
    display: inline-block;
    padding: 10px 34px;
    background-color: var(--high-color);
    color: var(--base-color);
    border: 2px solid var(--high-color);
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.btn:hover{
    transform:translateY(-3px);
    background-color: var(--base-color);
    color: var(--high-color);
}

footer{
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 1% 15%;
    display: flex;
    align-items: center;
    background-color: var(--main-color);
}

footer p{
    font-size: 18px;
    color: var(--text-color);
    margin-right: 25px;
}

footer i{
    margin-right: 10px;
    color: var(--high-color);
    transition: all 0.3s ease-in-out;
}
footer i:hover{
    transform:translateY(-5px);
}





.about-desc{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 100px 50px;
    padding: 100px 50px;
}

.card{
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    width: 350px;
    height: 300px;
    background-color: var(--high2-color);
    border-radius: 20px;
    transition: all 0.3s ease-in-out;
}
.card:hover{
    height: 410px;
}

.card-img{
    position: relative;  
    overflow: hidden; 
    width: 300px;
    height: 220px;
    background: transparent;
    top: 20px;
    border-radius: 12px;
    transition: all 0.4s ease-in-out;
}

.card:hover .card-img{
    top:-60px;
    scale: 0.75;
    box-shadow: 0 15px 45px rgba(0 0 0 0.2);
}

.card-img img{
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: fill;
}

.card-content{
    position: relative;
    width: 100%;
    padding: 3px 30px;
    height: 30px;
    overflow: hidden;
    text-align: center;
    transition: all 0.5s ease-in-out;
}



.card:hover .card-content{
    top: -40px;
    height: 220px;
}


.contact{
    position: relative;
    display: flex;
    gap: 100px;
    margin:20px auto;
    align-items: center;
    height: 77vh;
    width: 90%;
    padding: 10% 15%;
    background-color: var(--high2-color);
    border-radius: 20px;
}

.contact-img{
    transition: all 0.7s ease-in-out;
}

.contact-img:hover{
    scale: 1.1;
}

.contact-desc{
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    gap: 20px;
    margin-left: 100px;    
    text-align: center;
}

.contact-desc button{
    width: 50%;
}

.contact-desc input,textarea{
    padding: 10px 10px;
    border-radius: 10px  ;
    border: 3px solid var(--text-color);
    font-size: 20px;
}


Contact Us

REACH US

SERVICES

  • CODING
  • ON-LINE PREPARATION
  • JAVA & PYTHON

ADDRESS

B-54, Krishna Bhawan, Parag Narain Road, Near Butler Palace Colony Lucknow
Contact:+ 919839520987
Email:info@alexsir.com