Personal Portfolio – Company Portfolio – Project Portfolio Website Design by HTML – CSS – JavaScript

How to create responsive Personal Portfolio – Company Portfolio – Project Portfolio Website Design by HTML – CSS – JavaScript ***100% Free Source Code Download

► The main feature of this website is: ►
Custom animated cursor with hover effects using vanilla JavaScript
Fully Responsive vertical sidebar header / Navbar with toggle menu bar effect.
Fully Responsive home section using flex-box.
Fully Responsive about section using flex-box.
Fully Responsive services section using flex-box.
Fully Responsive experience vertical timeline section using flex-box.
Fully Responsive portfolio image gallery with hover effects section using flex-box.
Fully Responsive contact section using flex-box
.

Personal Portfolio – Company Portfolio – Project Portfolio Website Design by HTML – CSS – JavaScript

========================== SOURCE CODES ===========================

DOWNLOAD THE SOURCE CODE FROM GOOGLE DRIVE ( INCLUDES IMAGES ):

Thanks for watching!
<<<============== Make sure to Like + Subscribe For More! ==========>>>

►►𝐃𝐨𝐧’𝐭 𝐅𝐨𝐫𝐠𝐞𝐭 𝐓𝐨 𝐒𝐮𝐛𝐬𝐜𝐫𝐢𝐛𝐞 ►►

https://www.youtube.com/channel/UC9HlQRmKgG3jeVD_fBxj1Pw/video

***====>>>> 100% Free Source Code Download Guaranteed. Stay With Free Website Code
All kinds of free website codes are available here. Anyone can download Source Code free of cost.
Thank You,
Free Website Code
Visit: https://freewebsitecode.com/

*** You can use this as a Personal Portfolio Website Design
== You can use this as an Online Project Website Design
*** You can use this as a Project Portfolio Website Design
== You can use this as a Company Portfolio Website Design
*** You can use this as a Web Design Project Website Design
== You can use this as a Source Code Website Design
*** You can use this as a Business Portfolio Website Design
== You can use this as an HTML CSS JavaScript Website Design
*** You can use this as a Single Page Website Design

======================================================

How to make a website using HTML CSS and JavaScript
Complete website in HTML CSS and JavaScript with source code.

❤ ❤ ❤ Create a complete responsive Food – Restaurant – Pizza Shop – Fast Food website design template using HTML CSS and JavaScript from scratch ❤ ❤ ❤

*** Multi-page Grocery Store – eCommerce – Vegetable – Food – Online Business Website Design HTML-CSS-SASS-JavaScript -100% Free Download
https://www.youtube.com/watch?v=dLFLY8vhb68

*** Create A Responsive Halloween E-Commerce Website Design Using HTML – CSS – JavaScript | 100% Free Download
https://www.youtube.com/watch?v=frz85Y8H4UE&t=2s

*** Complete Responsive Food / Restaurant Website Design Using HTML / CSS / JAVASCRIPT – 100% Free Download
https://www.youtube.com/watch?v=m9vfjSwb4zc

*** Create A Responsive Car Selling Website Design Using HTML – CSS – JavaScript | 100% Free Download
https://www.youtube.com/watch?v=FQ0osQ1ZVRc

*** Create A Responsive Grocery Store Website Design Using HTML – CSS – JavaScript-100% Free Download
https://www.youtube.com/watch?v=IfYDbvR2GcU

*** Create A Responsive Online Book Store Website Design Using HTML – CSS – JavaScript | 100% Free Download
https://www.youtube.com/watch?v=xCYBKSOn2HM

*** E-Commerce Fashion / Cloth Store Website Design Using HTML – SASS – JavaScript 100% Free Download
https://www.youtube.com/watch?v=aDnL51Ambgw

*** Animated Glassmorphism Styled / Glass Effect Website Design Using HTML – CSS – JavaScript-100% Free Download
https://www.youtube.com/watch?v=840c9kfZvaQ&t=9s

*** Complete Responsive IT Company / Business Website Design Tutorial HTML – CSS – JAVASCRIPT -100% Free Download
https://www.youtube.com/watch?v=dYXqHMJcNiY&t=3s

*** Hospital – Medical – Clinic – Diagnostic Center Website Design Using HTML – CSS – JavaScript -Free Download
https://www.youtube.com/watch?v=LjgTq6_VF4g&t=2s

*** Coffee Shop – Tea Stall – Fast Food Website Design Using HTML- CSS -JavaScript- 100% Free Download
https://www.youtube.com/watch?v=tiTTyrSvaS0

*** Personal Portfolio / Blog Website Design Project Using HTML – CSS – JavaScript -100% Free Download
https://www.youtube.com/watch?v=BDGW4HxGACA

*** Full Website Design Project Using HTML – CSS – JAVASCRIPT – Multi-Color Website-100% Free Download
https://www.youtube.com/watch?v=iv3bK-jm9DA

=================== Follow me ====================
https://facebook.com/freewebsitecode/

*** Make sure to Like + Subscribe For More! ***

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio Website</title>
    <!-- font awesome cdn link  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="icon" type="image/png" href="assets/images/favicon1.png" sizes="16x16">
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/owl.carousel.css">
    <link rel="stylesheet" href="assets/css/owl.theme.green.css">

</head>

<body>
    <!-- Header -->
    <header>
        <div class="container">
            <nav class="nav d-flex" id="home">
                <div class="logo">
                    <a href="#">
                        <img src="assets/images/main-logo.png" alt="logo" class="logo-main">
                        <img src="assets/images/main-logo.png" alt="logo" class="logo-dark">

                    </a>
                </div>
                <!-- toggle icon -->
                <a href="javascript:void(0)" class="burger">
                    <span class="one"></span>
                    <span class="two"></span>
                    <span class="three"></span>
                    <span class="four"></span>

                    <div class="close-icon">
                        <svg width="30" height="29" viewBox="0 0 30 29" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M17.4492 14.4202L29.5992 2.67518C29.8723 2.36697 30.015 1.97052 29.9988 1.56504C29.9826 1.15956 29.8087 0.774925 29.5118 0.487995C29.215 0.201065 28.8171 0.0329733 28.3977 0.0173115C27.9782 0.00164963 27.5681 0.139571 27.2492 0.403514L15.0992 12.1485L2.94924 0.387402C2.6304 0.12346 2.22028 -0.0144603 1.80082 0.00120154C1.38136 0.0168634 0.983459 0.184954 0.686635 0.471884C0.389811 0.758814 0.215923 1.14345 0.199721 1.54893C0.183519 1.95441 0.326196 2.35086 0.59924 2.65907L12.7492 14.4202L0.582573 26.1652C0.408104 26.3096 0.266403 26.4873 0.166364 26.6872C0.0663255 26.8871 0.0101078 27.1048 0.00124197 27.3267C-0.00762386 27.5486 0.0310527 27.7698 0.114844 27.9766C0.198635 28.1833 0.325732 28.3711 0.488156 28.5281C0.650581 28.6851 0.844826 28.808 1.0587 28.889C1.27258 28.97 1.50146 29.0074 1.731 28.9988C1.96053 28.9902 2.18575 28.9359 2.39252 28.8392C2.5993 28.7425 2.78316 28.6055 2.93257 28.4368L15.0992 16.6918L27.2492 28.4368C27.5681 28.7008 27.9782 28.8387 28.3977 28.823C28.8171 28.8074 29.215 28.6393 29.5118 28.3524C29.8087 28.0654 29.9826 27.6808 29.9988 27.2753C30.015 26.8698 29.8723 26.4734 29.5992 26.1652L17.4492 14.4202Z" />
                        </svg>

                    </div>
                </a>
                <div class="navigation-bar">
                    <ul id="nav">
                        <li class="active"><a href="#home">home</a></li>
                        <li><a href="#about">about</a></li>
                        <li><a href="#services">services</a></li>
                        <li><a href="#portfolio">Portfolio</a></li>
                        <li><a href="#contact">contact</a></li>
                        <li class="darkmode-btn d-desktop">
                            <a href="javascript:void(0)">
                                <img src="assets/images/brightness.svg" alt="brightness" class="bright">
                                <img src="assets/images/moon.svg" alt="moon" class="dark"> </a>
                        </li>
                    </ul>
                </div>
                <div class="darkmode-btn d-mobile"><a href="javascript:void(0)">
                        <img src="assets/images/brightness.svg" alt="brightness" class="bright">
                        <img src="assets/images/moon.svg" alt="moon" class="dark"> </a></div>
            </nav>
        </div>
    </header>
    <main>
        <!-- Hero section -->
        <section class="hero-section" id="home">
            <div class="container">
                <div class="hero-inner d-flex">
                    <div class="col-left">
                        <span class="sub-heading">Hello i am
                        </span>
                        <h1 class="heading">
                            <span3>Free</span3>
                            <span2>Website</span2>
                            <span>Code</span>
                        </h1>
                        <h4 class="heading2">Get 100% Free Source Code
                        </h4>
                        <p class="paragraph">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam sunt deleniti repudiandae, molestias minus tempora numquam hic at ullam itaque voluptas mollitia dolorem recusandae ut.  </p>
                        <div class="btn-blk">
                            <a href="#contact" class="btn btn-blue">Let’s Talk</a>
                            <a href="#portfolio" class="btn btn-black">View projects</a>
                        </div>
                        <div class="social2">

                            <a href="https://facebook.com/freewebsitecode/" class="footer-social"> <i class="fab fa-facebook-f"></i></a>
                            <a href="https://freewebsitecode.com/"> <i class="fab fa-twitter"></i></a>
                            <a href="https://freewebsitecode.com/"> <i class="fab fa-instagram"></i></a>
                            <a href="https://freewebsitecode.com/"> <i class="fab fa-linkedin"></i></a>
                            <a href="https://freewebsitecode.com/"> <i class="fab fa-pinterest"></i></a>
                            <a href="https://www.youtube.com/channel/UC9HlQRmKgG3jeVD_fBxj1Pw/videos"> <i class="fab fa-youtube"></i></a>
                            
                        </div>
                    </div>
                    <div class="col-right">
                        <img class="image-main" src="assets/images/home-img.png" alt="user image">
                        <img class="image-darkmode" src="assets/images/home-img.png" alt="user image">
                    </div>
                </div>
            </div>
        </section>

        <!-- features -->
        <section class="features">
            <div class="container">
                <div class="features-inner d-grid">
                    <div class="feature-item d-flex">
                        <div class="icon d-flex color1">
                            <img src="assets/images/experience.svg" alt="experience">
                        </div>
                        <div>
                            <h3>2+</h3>
                            <p>Experience</p>
                        </div>
                    </div>
                    <div class="feature-item d-flex">
                        <div class="icon d-flex color2">
                            <img src="assets/images/happy-clients.svg" alt="happy clients ">
                        </div>
                        <div>
                            <h3>23</h3>
                            <p>happy clients</p>
                        </div>
                    </div>
                    <div class="feature-item d-flex">
                        <div class="icon d-flex color3">
                            <img src="assets/images/projects-completed.svg" alt="happy clients ">
                        </div>
                        <div>
                            <h3>80+</h3>
                            <p>Projects completed</p>
                        </div>
                    </div>
                    <div class="feature-item d-flex">
                        <div class="icon d-flex  color4">
                            <img src="assets/images/awards-won.svg" alt="awards ">
                        </div>
                        <div>
                            <h3>02+</h3>
                            <p>Awards won</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- About -->
        <section class="about ptb-100" id="about">
            <div class="container">
                <div class="about-inner d-flex">
                    <div class="about-col-left">
                        <img src="assets/images/about-img_3.jpg" alt="about">
                    </div>
                    <div class="about-col-right">
                        <h2 class="about-heading">About me</h2>
                        <h3 class="about2">Hello, My Name Free Website Code
                            Get 100% Free Source Code </h3>
                        <p class="about3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam sunt deleniti repudiandae, molestias minus tempora numquam hic at ullam itaque voluptas mollitia dolorem recusandae ut. Voluptate temporibus soluta expedita animi voluptates neque necessitatibus impedit ducimus qui dolores molestias accusamus ad aut natus suscipit, odit libero recusandae consectetur laborum placeat at </p>
                        <div class="about-btn-blk">
                            <a href="#" class="btn btn-blue about-btn">Download CV</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Experience -->
        <section class="experience ptb-100">
            <div class="container">
                <h2>Experienced in </h2>
                <div class="experience-inner d-grid">
                    <!-- item -->
                    <div class="progressbar-item">
                        <div class="progressbar-content d-flex">
                            <h3>Figma</h3>
                            <h4>95%</h4>
                        </div>
                        <div class="progessbar-bg">
                            <div class="progressbar-size" style="width:95%">

                            </div>
                        </div>
                    </div>
                    <!-- item -->
                    <div class="progressbar-item">
                        <div class="progressbar-content d-flex">
                            <h3>Adobe xd</h3>
                            <h4>85%</h4>
                        </div>
                        <div class="progessbar-bg">
                            <div class="progressbar-size" style="width:85%">

                            </div>
                        </div>
                    </div>
                    <!-- item -->
                    <div class="progressbar-item">
                        <div class="progressbar-content d-flex">
                            <h3>Photoshop</h3>
                            <h4>90%</h4>
                        </div>
                        <div class="progessbar-bg">
                            <div class="progressbar-size" style="width:90%">

                            </div>
                        </div>
                    </div>
                    <!-- item -->
                    <div class="progressbar-item">
                        <div class="progressbar-content d-flex">
                            <h3>illustrator</h3>
                            <h4>80%</h4>
                        </div>
                        <div class="progessbar-bg">
                            <div class="progressbar-size" style="width:80%">

                            </div>
                        </div>
                    </div>
                    <!-- item -->
                    <div class="progressbar-item">
                        <div class="progressbar-content d-flex">
                            <h3>Html</h3>
                            <h4>96%</h4>
                        </div>
                        <div class="progessbar-bg">
                            <div class="progressbar-size" style="width:96%">

                            </div>
                        </div>
                    </div>
                    <!-- item -->
                    <div class="progressbar-item">
                        <div class="progressbar-content d-flex">
                            <h3>Css</h3>
                            <h4>96%</h4>
                        </div>
                        <div class="progessbar-bg">
                            <div class="progressbar-size" style="width:96%">

                            </div>
                        </div>
                    </div>
                    <!-- item -->
                    <div class="progressbar-item">
                        <div class="progressbar-content d-flex">
                            <h3>Javascript</h3>
                            <h4>75%</h4>
                        </div>
                        <div class="progessbar-bg">
                            <div class="progressbar-size" style="width:75%">

                            </div>
                        </div>
                    </div>
                    <!-- item -->
                    <div class="progressbar-item">
                        <div class="progressbar-content d-flex">
                            <h3>React Js</h3>
                            <h4>70%</h4>
                        </div>
                        <div class="progessbar-bg">
                            <div class="progressbar-size" style="width:70%">

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

        <!-- Services -->
        <section class="services ptb-100" id="services">
            <div class="container">
                <h2>What i offer</h2>
                <div class="services-inner d-grid">
                    <!-- item -->
                    <div class="services-block">
                        <div class="service-icon color1 d-flex">
                            <img src="assets/images/services/ui-design.svg" alt="ui design">
                        </div>
                        <h3>UI/UX design</h3>
                        <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem
                            Ipsum
                            passages, and more recently with desktop publishing software like Aldus PageMaker
                            including
                            versions of Lorem Ipsum.</p>
                    </div>
                    <!-- item -->
                    <div class="services-block">
                        <div class="service-icon color2 d-flex">
                            <img src="assets/images/services/web-dev.svg" alt="web dev">
                        </div>
                        <h3>Web development</h3>
                        <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem
                            Ipsum
                            passages, and more recently with desktop publishing software like Aldus PageMaker
                            including
                            versions of Lorem Ipsum.</p>
                    </div>
                    <!-- item -->
                    <div class="services-block">
                        <div class="service-icon color3 d-flex">
                            <img src="assets/images/services/illustration.svg" alt="illustration">
                        </div>
                        <h3>illustration</h3>
                        <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem
                            Ipsum
                            passages, and more recently with desktop publishing software like Aldus PageMaker
                            including
                            versions of Lorem Ipsum.</p>
                    </div>
                    <!-- item -->
                    <div class="services-block">
                        <div class="service-icon color4 d-flex">
                            <img src="assets/images/services/seo.svg" alt="SEO ">
                        </div>
                        <h3>SEO </h3>
                        <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem
                            Ipsum
                            passages, and more recently with desktop publishing software like Aldus PageMaker
                            including
                            versions of Lorem Ipsum.</p>
                    </div>
                    <!-- item -->
                    <div class="services-block">
                        <div class="service-icon color5 d-flex">
                            <img src="assets/images/services/content-writing.svg" alt="Content writing ">
                        </div>
                        <h3>Content writing </h3>
                        <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem
                            Ipsum
                            passages, and more recently with desktop publishing software like Aldus PageMaker
                            including
                            versions of Lorem Ipsum.</p>
                    </div>
                    <!-- item -->
                    <div class="services-block">
                        <div class="service-icon color6 d-flex">
                            <img src="assets/images/services/youtube.svg" alt="youtube ">
                        </div>
                        <h3>Youtube marketing </h3>
                        <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem
                            Ipsum
                            passages, and more recently with desktop publishing software like Aldus PageMaker
                            including
                            versions of Lorem Ipsum.</p>
                    </div>
                </div>
            </div>
        </section>
        <!-- CTA -->
        <section class="cta">
            <div class="container">
                <div class="cta-inner d-flex">
                    <div class="cta-content">
                        <h3>Have a project in mind?</h3>
                        <p>Get FREE estimate! is a long established fact that a reader will be distracted </p>
                    </div>
                    <a href="#contact" class="btn btn-default ">Contact now</a>
                </div>
            </div>
        </section>
        <!-- projects -->
        <section class="projects ptb-100" id="portfolio">
            <div class="container">
                <h2>Recent Projects</h2>
                <div class="projects-inner d-grid">
                    <!-- item -->
                    <div class="project-item">
                        <div class="project-image">
                            <img src="assets/images/projects/1.jpg" alt="project image">
                        </div>
                        <div class="project-content">
                            <h3>Landing page</h3>
                            <div class="project-view d-flex">
                                <span>UI Design</span>
                                <a href="javascript:void(0)" class="btn-view">View </a>
                            </div>
                        </div>
                    </div>
                    <!-- item -->
                    <div class="project-item">
                        <div class="project-image">
                            <img src="assets/images/projects/2.jpg" alt="project image">
                        </div>
                        <div class="project-content">
                            <h3>Web development</h3>
                            <div class="project-view d-flex">
                                <span>Front-end developemnt</span>
                                <a href="javascript:void(0)" class="btn-view">View </a>
                            </div>
                        </div>
                    </div>
                    <!-- item -->
                    <div class="project-item">
                        <div class="project-image">
                            <img src="assets/images/projects/3.jpg" alt="project image">
                        </div>
                        <div class="project-content">
                            <h3>Logo design</h3>
                            <div class="project-view d-flex">
                                <span>Graphic Design</span>
                                <a href="javascript:void(0)" class="btn-view">View </a>
                            </div>
                        </div>
                    </div>
                    <!-- item -->
                    <div class="project-item">
                        <div class="project-image">
                            <img src="assets/images/projects/4.jpg" alt="project image">
                        </div>
                        <div class="project-content">
                            <h3>Application design</h3>
                            <div class="project-view d-flex">
                                <span>UI/ux Design</span>
                                <a href="javascript:void(0)" class="btn-view">View </a>
                            </div>
                        </div>
                    </div>
                    <!-- item -->
                    <div class="project-item">
                        <div class="project-image">
                            <img src="assets/images/projects/5.jpg" alt="project image">
                        </div>
                        <div class="project-content">
                            <h3>Youtube marketing</h3>
                            <div class="project-view d-flex">
                                <span>Digital Marketing</span>
                                <a href="javascript:void(0)" class="btn-view">View </a>
                            </div>
                        </div>
                    </div>
                    <!-- item -->
                    <div class="project-item">
                        <div class="project-image">
                            <img src="assets/images/projects/6.jpg" alt="project image">
                        </div>
                        <div class="project-content">
                            <h3>Webflow</h3>
                            <div class="project-view d-flex">
                                <span>Webflow developement</span>
                                <a href="javascript:void(0)" class="btn-view">View </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="view-more-block">
                    <a href="#" class="btn btn-outline">View more</a>
                </div>
            </div>
        </section>
        <!-- Testmonial -->
        <section class="testmonial">
            <div class="container">
                <div class="testmonial-inner">
                    <h2>Happy Clients </h2>
                    <div class="testmonial-slider owl-carousel owl-theme">
                        <!-- item -->
                        <div class="testmonial-item">
                            <h3>Ui design project</h3>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                Ipsum is
                                simply
                                dummy text of the printing and typesetting industry. simply dummy text of the
                                printing
                                and
                                typesetting industry. </p>
                            <div class="client-data d-flex">
                                <img src="assets/images/client-1.png" alt="client thumb">
                                <h4>Bob Frapples
                                    <br> <span>CEO Finance</span>
                                </h4>

                            </div>
                        </div>
                        <!-- item -->
                        <div class="testmonial-item">
                            <h3>Expert front-end developer</h3>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                Ipsum is
                                simply
                                dummy text of the printing and typesetting industry. simply dummy text of the
                                printing
                                and
                                typesetting industry. </p>
                            <div class="client-data d-flex">
                                <img src="assets/images/client-2.png" alt="client thumb">
                                <h4>Brock Lee
                                    <br> <span>Finace expert</span>
                                </h4>

                            </div>
                        </div>
                        <!-- item -->
                        <div class="testmonial-item">
                            <h3>Ui design project</h3>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                Ipsum is
                                simply
                                dummy text of the printing and typesetting industry. simply dummy text of the
                                printing
                                and
                                typesetting industry. </p>
                            <div class="client-data d-flex">
                                <img src="assets/images/client-1.png" alt="client thumb">
                                <h4>Bob Frapples
                                    <br> <span>CEO Finance</span>
                                </h4>

                            </div>
                        </div>
                        <div class="testmonial-item">
                            <h3>Expert front-end developer</h3>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                Ipsum is
                                simply
                                dummy text of the printing and typesetting industry. simply dummy text of the
                                printing
                                and
                                typesetting industry. </p>
                            <div class="client-data d-flex">
                                <img src="assets/images/client-2.png" alt="client thumb">
                                <h4>Brock Lee
                                    <br> <span>Finace expert</span>
                                </h4>

                            </div>
                        </div>
                        <!-- item -->
                        <div class="testmonial-item">
                            <h3>Ui design project</h3>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                Ipsum is
                                simply
                                dummy text of the printing and typesetting industry. simply dummy text of the
                                printing
                                and
                                typesetting industry. </p>
                            <div class="client-data d-flex">
                                <img src="assets/images/client-1.png" alt="client thumb">
                                <h4>Bob Frapples
                                    <br> <span>CEO Finance</span>
                                </h4>

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

                </div>
            </div>
        </section>
        <!-- Contact Me -->
        <section class="contact ptb-100" id="contact">
            <div class="container">
                <h2>Contact me</h2>
                <form id="basic-form" action="" method="post">
                    <div class="contact-inner d-flex">
                        <div class="input-block form-item">
                            <label for="">First name</label>
                            <input type="text" name="first name" required>
                        </div>
                        <div class="input-block form-item">
                            <label for="">last name</label>
                            <input type="text" name="last name" required>
                        </div>
                        <div class="input-block form-item">
                            <label for="">Email</label>
                            <input type="email" name="email" required>
                        </div>
                        <div class="input-block form-item">
                            <label for="">phone</label>
                            <input type="text" name="phone" required>
                        </div>

                        <div class="textarea form-item">
                            <label for="">Your message</label>
                            <textarea name="" id="" required></textarea>
                        </div>
                        <div class="submit-btn form-item">
                            <button type="submit" value="submit" class="btn btn-blue"> Send message</button>

                        </div>
                </form>
            </div>
        </section>
        </div>
    </main>
    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-inner">
                <a href="#" class="footer-logo"><img src="assets/images/main-logo.png" alt="Footer logo"></a>
                <div class="footer-nav">
                    <ul>
                        <li class="f-navlinks"><a href="#">Home</a></li>
                        <li class="f-navlinks"><a href="#">About</a></li>
                        <li class="f-navlinks"><a href="#">Services</a></li>
                        <li class="f-navlinks"><a href="#">Portfolio</a></li>
                        <li class="f-navlinks"><a href="#">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-bottom d-flex">
                    <p class="copyright">Free Website Code © Copyright 2021. All Right Reserved.</p>
                    <div class="footer-social2">

                        <a href="https://facebook.com/freewebsitecode/" class="footer-social"> <i class="fab fa-facebook-f"></i></a>
                        <a href="https://freewebsitecode.com/"> <i class="fab fa-twitter"></i></a>
                        <a href="https://freewebsitecode.com/"> <i class="fab fa-instagram"></i></a>
                        <a href="https://freewebsitecode.com/"> <i class="fab fa-linkedin"></i></a>
                        <a href="https://freewebsitecode.com/"> <i class="fab fa-pinterest"></i></a>
                        <a href="https://www.youtube.com/channel/UC9HlQRmKgG3jeVD_fBxj1Pw/videos"> <i class="fab fa-youtube"></i></a>

                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- Project view modal -->
    <div class="modal-container">
        <div class="modal">
            <div class="modal-image">
                <img src="assets/images/projects/1.jpg" alt="image">
            </div>
            <div class="modal-content">

                <h3>Create a landing page & convert to HTML</h3>
                <p class="requirments">Client’s requriements were to create a design for mobile applicaton after the
                    approval of design convert design to responsive HTML</p>

                <ul>
                    <li><span>Skills:-</span> HTML, CSS, BOOTSTRAP 4, JAVASCRIPT, FIGMA, PHOTOSHOP</li>
                    <li><span>Project duration:-</span>15 days</li>
                    <li><span>Project url:-</span> <a
                            href="https://bit.ly/3pOoHmP">Youtube Channel Project Link</a>
                    </li>
                </ul>

                <div class="close-btn">
                    <a href="javascript:void(0)" class="btn btn-blue close-modal">Close Modal</a>
                </div>
            </div>
        </div>
    </div>
    <!-- Scroll up -->
    <a href="javascript:void(0)" class="scrollup">
        <img src="assets/images/uparrow.svg" alt="arrow up">
    </a>
</body>
<script src="assets/js/jquery.min.js"></script>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="https://cdn.jsdelivr.net/gh/cferdinandi/gumshoe/dist/gumshoe.polyfills.min.js"></script>
<script src="assets/js/owl.carousel.js"></script>
<script src="assets/js/validate.js"></script>
<script src="assets/js/main.js"></script>
<script>
    $(document).ready(function () {
        $("#basic-form").validate();
    });
</script>

</html>

All Links in Below:




Join Our Freewebsitecode Facebook Group to get an instant update for projects, templates, design resources, and solutions.

Join Our YouTube Channel & Subscribe with Bell Icon for New Video:

Join Our Official Facebook Page For the Latest updates All Code Projects are Free:

Visit our service page to get premium services.

Free Website Code – HTML CSS, PHP, JavaScript Programming Projects For Free

Follow Us

Thank You,

Stay with FreeWebsiteCode.com

Share the post if necessary.

*** Make sure to Like + Subscribe For More! ***

Follow Us

https://facebook.com/freewebsitecode/

►►𝐃𝐨𝐧’𝐭 𝐅𝐨𝐫𝐠𝐞𝐭 𝐓𝐨 𝐒𝐮𝐛𝐬𝐜𝐫𝐢𝐛𝐞 ►►
https://www.youtube.com/channel/UC9HlQRmKgG3jeVD_fBxj1Pw/videos

LIKE | COMMENT | SHARE | SUBSCRIBE

FreeWebsiteCode.com tries to provide HTML, CSS, SCSS, JavaScript, React, Android Studio, Java, PHP, Laravel, Python, Django, C#(C Sharp), and ASP.net-related projects 100% free. We try to make learning easier. Free Website Code always tries to give free projects to those who are new learners. Free projects and source code will help to learn easily. They can save time and learn more.

Leave a Comment

Join Our Newsletter Today To Get Update

Stay updated with all latest premium themes, pulgins, HTML template & Much More.
Subscribe
SUBSCRIBE NOW
close-link
%d bloggers like this: