Create A Portfolio Website Only Using HTML And CSS

Create A Portfolio Website Only Using HTML And CSS

Learn how to create a Personal Portfolio Website using HTML and CSS. I will teach about how to create a personal website using HTML CSS. This Portfolio website is fully Responsive and has all browser compatibility.

I used only HTML and CSS to create the website. If you follow this tutorial step by step, you will be able to make this beautiful Personal Portfolio website using HTML and CSS.

Learn How To Create A Portfolio Website Only Using HTML And CSS

HTML Code


  <!--DOCTYPE html-->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--==title============================-->
    <title>Portfolio Website HTML</title>
    <!--==CSS==============================-->
    <link rel="stylesheet" href="css/style.css">
    <!--==fav-icon=========================-->
    <link rel="shortcut icon" href="images/fav-icon.png">
    <!--==poppins==========================-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="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"
        rel="stylesheet">
    <!--==font-Awesome=====================-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

</head>

<body>

    <!--==main===========================-->
    <section id="main">

        <!--==Navigation==========================-->
        <header id="header">
        <nav class="navigation">
            <!--**menu-btn*******-->
            <input type="checkbox" class="menu-btn" id="menu-btn">
            <label for="menu-btn" class="menu-icon">
                <span class="nav-icon"></span>
            </label>
            <!--**logo***********-->
            <a href="#" class="logo">
                A
            </a>
            <!--**menu***********-->
            <ul class="menu">
                <li><a href="#main">Home</a></li>
                <li><a href="#about-me">About Me</a></li>
                <li><a href="#our-services">Our Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
            <!--**contact-btn****-->
            <div class="nav-social">
                <a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
                <a href="#"><i class="fa-brands fa-instagram"></i></a>
                <a href="#"><i class="fa-brands fa-twitter"></i></a>
                <a href="#"><i class="fa-brands fa-youtube"></i></a>
            </div>
        </nav><!--end-nav-->
        </header>

        <!--==main-content=========================-->
        <div class="main-content">
            <img alt="Alex" class="main-img" src="images/main.avif">
            <strong>Hi, I'm Alex</strong>
            <span>I'm A Front-End Developer</span>
            <h1>Passionate to create a amazing websites.</h1>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nobis repellendus, asperiores, non nostrum
                facilis aperiam velit adipisci distinctio aliquam esse ratione.</p>
        </div>

    </section>


    <!--==About-Me===============================-->
    <section id="about-me">
        <strong>About Me</strong>
        <h2>Hello, I'm A FrontEnd Developer.</h2>
        <div class="about-text">
            <h3>Passionate to create a amazing websites.</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi iste eos explicabo obcaecati ipsum
                vero consectetur velit magnam aperiam nulla, assumenda, praesentium ipsa quod expedita fugit in
                asperiores vitae veritatis?</p>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum fugiat cumque perferendis enim. <b>4 Years
                    Experice</b> odio Delectus ad est facilis eius. Voluptates expedita atque cupiditate fugit est ea.
                Quis!</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint ratione veniam minima explicabo id nostrum
                incidunt voluptas ipsum omnis veritatis rem obcaecati in, vero iusto at nulla Veritatis!</p>
            <a href="cv/cv.docx" download="cv">Download My CV <i class="fa-solid fa-download"></i></a>
        </div>
    </section><!--about-end-->


    <!--==Our-Services======================-->
    <section id="our-services">

        <!--**heading********************-->
        <div class="services-heading">
            <!--text-->
            <div class="services-heading-text">
                <strong>Our Services</strong>
                <h2>High Quality Services For You</h2>
            </div>
        </div>

        <!--**container*******************-->
        <div class="services-box-container">

            <!--**box1**-->
            <div class="service-box s-box1">
                <!--icon-->
                <i class="fa-solid fa-desktop"></i>
                <!--title-->
                <strong>Web Designing</strong>
                <!--details-->
                <p>We create visually stunning and intuitive websites that leave a lasting impression. Contact us now.
                </p>
                <!--read more-->
                <a href="#contact">Contact Us</a>
            </div><!--box-end-->

            <!--**box2**-->
            <div class="service-box s-box1">
                <!--icon-->
                <i class="fa-solid fa-code"></i>
                <!--title-->
                <strong>Font-End Developing</strong>
                <!--details-->
                <p>Our frontend development team uses the latest technologies to create fast and responsive websites.
                </p>
                <!--read more-->
                <a href="#contact">Contact Us</a>
            </div><!--box-end-->

            <!--**box3**-->
            <div class="service-box s-box1">
                <!--icon-->
                <i class="fa-solid fa-ranking-star"></i>
                <!--title-->
                <strong>SEO Ranking</strong>
                <!--details-->
                <p>Our SEO experts use proven strategies to improve your website's search engine rankings and
                    visibility.</p>
                <!--read more-->
                <a href="#contact">Contact Us</a>
            </div><!--box-end-->

        </div>

        <!--btn-->
        <span class="service-btn">Contact Us For Need Any Help And Services <a href="#contact">Let's get
                Started</a></span>

    </section>


    <!--==contact============================================-->
    <section id="contact" class="contact">
        <strong>WHATS NEXT</strong>
        <h3>Lets work together!</h3>
        <p>f you'd like to talk about a project you want help with or need an advice about product design, just drop me
            a message at <b>example@gmail.com</b> I will contact you soon.</p>
        <a href="mailto:example@gmail.com" class="contact-btn">Write Me An Email <i class="far fa-envelope"></i></a>
    </section>



    <!--==footer=============================================-->
    <footer>
        <span>Copyright 2023 - Alex Portfolio</span>

        <a href="index.html" class="footer-logo">Alex Portfolio</a>
    </footer>

</body>

</html>

CSS Code

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: poppins;
    scroll-behavior: smooth;
}
a{
    text-decoration: none;
}
ul{
    list-style: none;
}
/*==main================================*/
#main{
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 400px;
    background-color: #131313;
}
/*==nav-bar=============================*/
.navigation{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    width: 90%;
    margin: 0px auto;
    padding: 30px 0px;
}
.logo{
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #1a1a1a;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
}

.menu{
    display: flex;
    align-items: center;
}
.menu li a{
    margin: 0px 30px;
    color: #c9c9c9;
    letter-spacing: 0.5px;
    font-weight: 400;
    transition: all ease 0.3s;
}
.nav-social{
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-social a{
    color: #c9c9c9;
    margin-left: 20px;
    transition: all ease 0.3s;
}
.nav-social a:first-child{
    margin-left: 0px;
} 
.menu li a:hover,
.nav-social a:hover{
    color: #ffffff;
}


/*==main-content=========================*/
.main-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 50px auto;
    max-width: 500px;
    text-align: center;
}
.main-img{
    width: 100px;
    height: 100px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    margin-bottom: 10px;
}
.main-content strong{
    color: #fefefe;
    font-size: 1.6rem;
    font-weight: 700;
}
.main-content span{
    color: #8d94b4;
    font-weight: 400;
    font-size: 0.9rem;
}
.main-content h1{
    font-size: 3rem;
    color: #ffffff;
    line-height: 3.4rem;
    margin-top: 20px;
}
.main-content p{
    color: #5e5e5e;
    margin-top: 20px;
    letter-spacing: 0.3px;
}
/*==about-me================================*/
#about-me{
    max-width: 800px;
    width: 90%;
    margin: 50px auto;
}
#about-me strong{
    text-transform: uppercase;
    letter-spacing: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    color: #8d94b4;
}
#about-me h2{
    font-size: 4rem;
    line-height: 4.4rem;
    color: #272727;
    font-weight: 800;
    margin-top: 10px;
}
.about-text h3{
    font-size: 3rem;
    line-height: 3.4rem;
    color: #272727;
    font-weight: 300;
    margin-bottom: 20px;
}
.about-text{
    margin-top: 30px;
    max-width: 85%;
    margin-left: auto;
}
.about-text p{
    color: #1a1a1a;
    margin-bottom: 20px;
    line-height: 1.4rem;
    letter-spacing: 0.3px;
}
.about-text a{
    width: 180px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    background-color: #8d94b43b;
    color: #1a1a1a;
    font-size: 0.9rem;
    font-weight: 500;
}
.about-text a i{
    margin-left: 10px;
}

/*==our-services=====================*/
#our-services{
    width: 100%;
    margin: 50px auto 0px auto;
    background-color:#161616;
    padding: 50px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #eeeeee;
}
.services-heading{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    width: 90%;
    margin: auto;
}
.services-heading-text strong{
    color: #8d94b4;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
}
.services-heading-text h2{
    font-size: 2.2rem;
    color:#ffffff;
    font-weight: 700;
    max-width: 600px;
}
.services-box-container,
.team-box-container{
    max-width: 1200px;
    width: 90%;
    margin: 40px auto;
    overflow: hidden;
    display: grid;
    grid-gap: 30px;
    grid-template-columns: 1fr 1fr 1fr;
}
.service-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    max-width: 100%;
    border: 1px solid #242424;
    padding: 30px;
    background-color:#1a1a1a;
}
.service-box:hover{
    border: 1px solid #8d94b4;
}
.service-box i{
    font-size: 2rem;
    color: #ffffff;
    width: 60px;
    height: 60px;
    border-radius:5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #8d94b43b;
}
.service-box strong{
    color:#ffffff;
    font-size: 1.4rem;
    margin-top: 20px;
    font-weight: 600;
}
.service-box p{
    font-size: 0.9rem;
    line-height: 1.4rem;
    color:#e7e7e7;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;  
}
.service-box a{
    height: 45px;
    background-color:#8d94b43b;
    color: #ffffff;
    padding: 0px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 5px;
    margin-top: 30px;
}

.service-btn{
    color: #ffffff;
    font-size: 0.9rem;
    margin-top: 10px;
    text-align: center;
    padding: 0px 10px;
}
.service-btn a{
    color: #8d94b4;
    text-decoration: underline;
    font-weight: 600;
}


/*==contact=============================*/
#contact{
    width: 90%;
    max-width: 950px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 80px auto;
    text-align: center;
}
.contact strong{
    color:#8d94b4;
    font-size: 0.87rem;
    letter-spacing: 1px;
    font-weight: 600;
}
.contact h3{
    color: #1d1d1d;
    font-size: 2.37rem;
    letter-spacing: 1px;
}
.contact p{
    color: #202020;
    max-width: 640px;
    margin: 15px 0px;
    letter-spacing: 1px;
}
.contact p b{
    color: #252525;
    font-weight: 500;
}
.contact a{
    width: 200px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #8d94b43b;
    color: #1a1a1a;
    font-weight: 600;
}
.contact a i{
    margin-left: 10px;
}
/*==footer========================*/
footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 950px;
    width: 100%;
    margin: 70px auto 0px auto;
    padding: 20px;
    text-align: center;
    border-top: 1px solid #d8d8d8;
}
footer span{
    color: #313131;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
}
footer .footer-logo{
    color: #1f1f1f;
    font-weight: 500;
    letter-spacing: 3px;
    font-size: 1.3rem;
}
/*==making-responsive============*/
.menu-icon,
.menu-btn{
    display: none;
}
@media(max-width:1000px){
    .navigation{
        justify-content: space-between;
        padding: 20px;
        position: relative;
        width: 100%;
        z-index: 103;
    }
    .logo{
        margin-right: auto;
        margin-left: 20px;}

    .navigation .menu{
        display: none;
        position: absolute;
        left: 0px;
        top:100%;
        background-color: #131313;
        width: 100%;
        padding: 0px;
        margin: 0px;
        box-shadow: 2px 30px 30px rgba(0,0,0,0.05);
    }
    .navigation .menu li{
        width:100%;
        margin: 0px;
        padding: 0px;
    }
    .navigation .menu li a{
        width: 100%;
        display: flex;
        align-items: center;
        margin: 0px;
        padding: 20px;
        border-bottom: 1px solid #161616;
    }
    .menu-icon{
        display: block;
    }
    .navigation .menu-icon{
        cursor: pointer;
        float: right;
        padding: 10px 0px;
        position: relative;
        user-select: none;
        z-index: 106;
    }
    .navigation .menu-icon .nav-icon{
        background-color: #ffffff;
        display: block;
        position: relative;
        height: 2px;
        transition: background 0.2s ease-out;
        width: 25px;
    }
    .navigation .menu-icon .nav-icon::before,
    .navigation .menu-icon .nav-icon::after{
        background-color: #ffffff;
        content: '';
        position: absolute;
        height: 100%;
        transition: all ease-out 0.2s;
        width: 100%;
    }

    .navigation .menu-icon .nav-icon::before{
        top: 9px;
    }
    .navigation .menu-icon .nav-icon::after{
        top: -9px;
    }
    .navigation .menu-icon:checked ~ .menu-icon .nav-icon,
    .navigation .menu-btn:checked ~ .menu-icon .nav-icon{
        background-color: transparent;
    }
    .navigation .menu-btn:checked ~ .menu-icon .nav-icon::before{
        transform: rotate(-45deg);
        top: 0px;
    }
    .navigation .menu-btn:checked ~ .menu-icon .nav-icon::after{
        transform: rotate(45deg);
        top: 0px;
    }
 
    .navigation .menu-btn:checked ~ .menu{
        display: block;
    }   
}
@media(max-width:850px){
    .services-box-container{
        grid-template-columns: 1fr;
    }
}
@media(max-width:724px){
    .main-content h1{
        font-size: 1.8rem;
        line-height: 2.2rem;
        max-width: 80%;
        letter-spacing: 0.3px;
    }
}
@media(max-width:724px){
    #about-me h2{
        font-size: 1.8rem;
        line-height: 2.2rem;
    }
    .about-text h3{
        font-size: 2rem;
        line-height: 2.4rem;
    }
}
@media(max-width:724px){
    .services-heading h2{
        font-size: 1.8rem;
        line-height: 2.2rem;
    }
}
@media(max-width:724px){
    .contact h3{
        font-size: 2rem;
        line-height: 2.5rem;
    }
}

Download Images Download Source Code

Create A Portfolio Website Only Using HTML And CSS

Learn How To Create A Portfolio Website Only Using HTML And CSS

Comments

Followers

Search This Blog

Labels

Popular Posts

Archive

Labels

Contact Form