D a i l y W e b D e s i g n s
Pricing
Contact
Offcanvas Menu Open
Logo

© All Rights Reserved
by Daily Web Designs

Pricing
Contact

Agency Website Design Using HTML CSS JavaScript With Source Code

  Hi everybody! Using HTML, CSS, and JavaScript, you will learn how to create a responsive website web design company HTML CSS And JAVASCRIPT in this Blog. Us
Agency Website Design Using HTML CSS JavaScript With Source Code

 

Hi everybody! Using HTML, CSS, and JavaScript, you will learn

how to create a responsive website web design company HTML CSS And JAVASCRIPT in this Blog.

Using standard JavaScript, users can use the navigation buttons on the web design moving car animation  website design to navigate through each slide. The clip-path property is utilized for the transition on the slide. I hope that when you design a website with online moving car animation , this video will be helpful.

You can download all of the source files and codes from this location. The code from the text editors must be copied and pasted. Try it out first by watching the video tutorial. It will assist you in comprehending everything. After that, if your code isn’t working right, look at the source codes provided and compare them to your own. It will assist you in comprehending everything, including your errors.

Index.html

				
					<!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>Complete Responsive Virtual Reality Service Website Design</title>
     <!-- custom css file link -->
     <link rel="stylesheet" href="style.css">
     <!-- font awesome file link -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<!-- header section starting -->
<header>
    <a href="#">VR.</a>
    <nav>
        <ul>
            <li><a href="#home">home</a>
            <li><a href="#about">about</a>
            <li><a href="#service">service</a>
            <li><a href="#team">team</a>
            <li><a href="#contact">contact</a>
            <li><a href="#faq">FAQ</a>
        </ul>
    </nav>
</header>
<!-- header section ends -->
<!-- home section starts -->
<section id="home">
<h1>dive into virtual reality services</h1>
<h3>you have a vision. we have a team to get you there.</h3>
<a href="#"><button>get started</button></a>
</section>
<!-- home section ends here -->
<!-- about section starts -->
<section id="about">
    <h1>about us</h1>
            <h3>we bulid virtual reality that build your business</h3>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.Lorem, ipsum  consectetur adipisicing elit.
            Dolorem nisi repudiandae placeat ut farhan Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            molestiae reiciendis eum in obcaecati inventore.</p>
            <a href="#"><button>Read more</button></a>
            <img decoding="async" src="img/about.svg" alt="">
</section>
<!-- about section ends here -->
<!-- service section starts here -->
<section id="service">
    <h1>our services</h1>
            <img decoding="async" src="img/video.svg" alt="">
            <h3>Video Production</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus tempora
            laboriosam ut esse id minima nemo, repudiandae delectus voluptatibus,
            corrupti non expedita perferendis molestiae excepturi ab nulla consequatur architecto. Ipsam.</p>
            <a href="#"><button>Read more</button></a>
            <h3>3D Animation</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus tempora
            laboriosam ut esse id minima nemo, repudiandae delectus voluptatibus,
            corrupti non expedita perferendis molestiae excepturi ab nulla consequatur architecto. Ipsam.</p>
            <a href="#"><button>Read more</button></a>
            <img decoding="async" src="img/Animation.svg" alt="">
            <img decoding="async" src="img/real estate.svg" alt="">
            <h3>Real Estate</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus tempora
            laboriosam ut esse id minima nemo, repudiandae delectus voluptatibus,
            corrupti non expedita perferendis molestiae excepturi ab nulla consequatur architecto. Ipsam.</p>
            <a href="#"><button>Read more</button></a>
            <h3>Testimonials video</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus tempora
            laboriosam ut esse id minima nemo, repudiandae delectus voluptatibus,
            corrupti non expedita perferendis molestiae excepturi ab nulla consequatur architecto. Ipsam.</p>
            <a href="#"><button>Read more</button></a>
            <img decoding="async" src="img/testimonials.svg" alt="">
            <img decoding="async" src="img/event.svg" alt="">
            <h3>Event video</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus tempora
            laboriosam ut esse id minima nemo, repudiandae delectus voluptatibus,
            corrupti non expedita perferendis molestiae excepturi ab nulla consequatur architecto. Ipsam.</p>
            <a href="#"><button>Read more</button></a>
            <h3>Education</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus tempora
            laboriosam ut esse id minima nemo, repudiandae delectus voluptatibus,
            corrupti non expedita perferendis molestiae excepturi ab nulla consequatur architecto. Ipsam.</p>
            <a href="#"><button>Read more</button></a>
            <img decoding="async" src="img/educational.svg" alt="">
</section>
<!-- service section ends here -->
<!-- team section starts -->
<section id="team">
    <h1>our team</h1>
                <img decoding="async" src="img/pic-1.png" alt="">
                <h3>Edward Bey</h3>
                virtual designer
                <a href="#"></a>
                <a href="#"></a>
                <a href="#"></a>
            <img decoding="async" src="img/pic-2.png" alt="">
            <h3>lalisa Bey</h3>
            virtual assistance
            <a href="#"></a>
            <a href="#"></a>
            <a href="#"></a>
        <img decoding="async" src="img/pic-3.png" alt="">
        <h3>jenna Bey</h3>
        virtual developer
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
</section>
<!-- team section ends here -->
<!-- contact section starts here -->
<section id="contact">
    <h1>contact us</h1>
            <img decoding="async" src="img/contact.svg" alt="">
            <form action="">
                    <input type="text" placeholder="first name">
                    <input type="text" placeholder="last name">
                <input type="email" placeholder="email">
                <textarea placeholder="message" cols="30" rows="10"></textarea>
                <input type="submit" value="send">
            </form>
</section>
<!-- contact section ends here -->
<!-- FAQ section starts here -->
<section id="faq">
    <h1>FAQ</h1>
            <img decoding="async" src="img/faq.svg" alt="">
                    +
                    <h3>How much will it cost?</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae officia similique odio eligendi
                        quia quibusdam illum qui dignissimos alias recusandae? Deserunt, molestiae doloribus.
                        Voluptate autem totam pariatur ipsum. Ducimus, consequatur.</p>
                    +
                    <h3>How to update in virtual reality?</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae officia similique odio eligendi
                        quia quibusdam illum qui dignissimos alias recusandae? Deserunt, molestiae doloribus.
                        Voluptate autem totam pariatur ipsum. Ducimus, consequatur.</p>
                    +
                    <h3>is virtual provided freely?</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae officia similique odio eligendi
                        quia quibusdam illum qui dignissimos alias recusandae? Deserunt, molestiae doloribus.
                        Voluptate autem totam pariatur ipsum. Ducimus, consequatur.</p>
                    +
                    <h3>how long it take to update?</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae officia similique odio eligendi
                        quia quibusdam illum qui dignissimos alias recusandae? Deserunt, molestiae doloribus.
                        Voluptate autem totam pariatur ipsum. Ducimus, consequatur.</p>
                    +
                    <h3>is it seo freindly?</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae officia similique odio eligendi
                        quia quibusdam illum qui dignissimos alias recusandae? Deserunt, molestiae doloribus.
                        Voluptate autem totam pariatur ipsum. Ducimus, consequatur.</p>
</section>
<!-- FAQ section ends here -->
<!-- footer section starts here -->
<section>
    <h1>created by dailywebdesign || all rights reserved</h1>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
</section>
<!-- jquery file link -->
<!-- custom js file link -->
</body>
</html>

style.css

				
					@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;1,100;1,200;1,300;1,500&display=swap');
:root{
    --color:#c250f0;
}
*{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-transform: capitalize;
    transition: all .2s linear;
    text-decoration: none;
}
html{
    font-size: 62.5%;
}
body{
    overflow-x: hidden;
}
.heading{
    margin: 2rem;
    padding-top: 6rem;
    display: inline-block;
    font-size: 3.5rem;
    color: var(--color);
    position: relative;
    letter-spacing: .2rem;
}
.heading::before,
.heading::after{
    content: ' ';
    position: absolute;
    height: 2.5rem;
    width: 2.5rem;
    border-top:.4rem solid var(--color);
    border-left:.4rem solid var(--color);
}
.heading::before{
    top: 5.8rem;
    left: -2rem;
}
.heading::after{
    bottom: -.5rem;
    right: -2rem;
    transform: rotate(180deg);
}
.btn{
    outline: none;
    border: none;
    border-radius:5rem;
    background: var(--color);
    color:#fff;
    cursor: pointer;
    height:3.5rem;
    width:15rem;
    font-size: 1.7rem;
    box-shadow: 0 .2rem .5rem rgba(0,0,0,.3);
}
.btn:hover{
    letter-spacing: .1rem;
    opacity: .8;
}
.header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding:1rem 2rem;
    position:fixed;
    top: 0;
    left: 0;
    z-index:100;
}
.header .logo{
    font-size: 2.5rem;
    color: #fff;
}
.header .logo i{
    padding:0.5rem;
}
.header .navbar ul{
     list-style-type: none;
     display:flex;
     align-items: center;
     justify-content:space-around;
}
.header .navbar ul li{
    margin: 0 1.5rem;
}
.header .navbar ul li a{
    font-size: 2rem;
    color: #fff;
}
.header .navbar ul li a:hover{
    color: #ccc;
}
.header .fa-bars{
    color: #fff;
    cursor: pointer;
    font-size: 3rem;
    display: none;
}
.home{
    min-height: 100vh;
    width: 100%;
    background:url(img/main.jpg);
    background-repeat:no-repeat;
    background-size: cover;
    background-position:center;
    display:flex;
    justify-content:center;
    flex-flow: column;
    text-align: center;
    padding: 0 1rem;
    position: relative;
    overflow: hidden !important;
}
.home .banner{
    color: #fff;
    font-size: 5rem;
    text-shadow: 0 .3rem .5rem rgba(0,0,0,.3);
}
.home .slogan{
    color: #eee;
    font-size: 2.5rem;
    font-weight: 400;
}
.home button{
    height:4rem;
    width:18rem;
    background: #fff;
    color: #444;
    cursor: pointer;
    border: none;
    outline: none;
    margin-top: 1rem;
    font-size: 2rem;
    font-weight: 400;
    box-shadow: 0.3rem .5rem rgba(0,0,0,.3);
}
.home button:hover{
    letter-spacing:.1rem;
}
.home .wave{
    position:absolute;
    bottom:-.5rem;
    left: 0;
    height:11rem;
    width: 100%;
    background: url(img/wave.png);
    background-size: 100rem 11rem;
    background-repeat: repeat-x;
    animation: waves 10s linear infinite;
}
.home .wave2{
    animation-duration: reverse;
    opacity: .2;
}
.home .wave3{
    animation-duration: 4s;
    opacity: .5;
}
@keyframes waves{
    0%{
       background-position: 0;
    }
    100%{
        background-position-x: 100rem;
    }
}
.home .fa-cog{
    position: absolute;
    font-size: 30rem;
    opacity: .15;
    color: #fff;
    animation: rotate 10s linear infinite;
}
.home .nut1{
    top:10%;
    left: -15rem;
}
.home .nut2{
    bottom:23%;
    right: -13rem;
    animation-duration: reverse;
}
@keyframes rotate{
    100%{
        transform:rotate(360deg);
    }
}
.about{
    min-height: 100vh;
    width: 100vw;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.about .row{
    display:flex;
    align-items: center;
    justify-content:space-around;
    padding: 0 4rem;
}
.about .row .contect{
    text-align:left;
}
.about .row .img img{
    width: 50vw;
}
.about .row .contect h3{
    font-size:3rem;
    color: var(--color);
}
.about .row .contect p{
    font-size:1.5rem;
    color: #333;
    padding: 1rem 0;
}
.about::before,
.about::after{
    content: '';
    position:absolute;
    z-index: -1;
    opacity: .5;
    border-radius: 50%;
}
.about::before{
    height:50rem;
    width:50rem;
    background: #ccc;
    bottom: -10rem;
    left: -10rem;
}
.about::after{
    height:60rem;
    width:60rem;
    background: var(--color);
    top: -10rem;
    right: -10rem;
}
.service{
    width: 100vw;
    text-align: center;
}
.service .row{
    margin: 2rem 0;
    padding:0 2rem;
    display:flex;
    align-items: center;
    justify-content: center;
}
.service .row .img img{
    height:55vh;
    width:50vw;
}
.service .row .content{
    text-align:left;
    padding:0 3rem;
}
.service .row .content h3{
    font-size: 3rem;
    color: var(--color);
}
.service .row .content p{
    font-size: 1.5rem;
    color: #333;
    padding:1rem;
}
.team{
    min-height: 100vh;
    width:100vw;
    text-align: center;
    background-color:#222;
}
.team .heading{
    color: #fff;
}
.team .heading::before,
.team .heading::after{
    border-color: #fff;
}
.team .row{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.team .row .card{
    height:35rem;
    width:25rem;
    background: #fff;
    text-align: center;
    margin: 7rem 2rem;
    position: relative;
    overflow: hidden;
    -webkit-box-reflect: below .2rem linear-gradient(transparent 70%, #0004);
}
.team .row .card .img{
    margin: 1rem 0;
    padding-top: 4rem;
}
.team .row .card .img img{
    height: 13rem;
    width: 13rem;
    border-radius: 50%;
    border: .5rem solid #fff;
    box-shadow: 0 0 .5rem 0 rgba(0, 0, 0,.3);
    object-fit: cover;
}
.team .row .card .info h3{
    font-size: 2rem;
    color:#333;
}
.team .row .card .info span{
    font-size: 1.8rem;
    color:var(--color);
}
.team .row .card .info .icons a{
    margin-top:4rem;
    padding:0 1rem;
    font-size:2rem;
    color:#333;
}
.team .row .card .info .icons a:hover{
    color:var(--color);
}
.team .row .card::before,
.team .row .card::after{
    content:"";
    position:absolute;
    border-radius: 50%;
    height:15rem;
    width:15rem;
    z-index: -1;
}
.team .row .card::before{
    background: var(--color);
    top: -3rem;
    right: -4rem;
}
.team .row .card::after{
    background: #ccc;
    bottom: -3rem;
    left: -4rem;
}
.contact{
    min-height: 100vh;
    width:100vw;
    text-align: center;
}
.contact .row{
    display: flex;
    align-items: center;
    justify-content:center;
}
.contact .row .img img{
    height:70vh;
    width:50vw;
}
.contact .row .form-container{
    width:50%;
    text-align:left;
    padding:0 5rem;
}
.contact .row .form-container input, textarea{
    outline: none;
    border:none;
    height:4rem;
    background: none;
    border-radius: .5rem;
    box-shadow: .2rem .2rem .5rem rgba(0, 0, 0,.2);
    padding:0 1rem;
    margin:1rem 0;
    font-size: 1.6rem;
}
.contact .row .form-container .inputBox{
    width: 100%;
    display:flex;
    justify-content:space-between;
}
.contact .row .form-container .inputBox input[type="text"]{
    width:49%;
}
.contact .row .form-container input[type="email"]{
    width:100%;
}
.contact .row .form-container textarea{
    width:100%;
    height:20rem;
    padding:1rem;
    resize:none;
}
.contact .row .form-container input[type="submit"]{
    background-color:var(--color);
    color:#fff;
    cursor: pointer;
    height:4rem;
    width:10rem;
}
.contact .row .form-container input[type="submit"]:hover{
   opacity: .8;
   letter-spacing: 0.5rem;
}
.faq{
    min-height: 100vh;
    width: 100vw;
    text-align: center;
    padding:0 2rem;
}
.faq .row{
    display: flex;
    align-items: center;
    justify-content: center;
    padding:0 2rem;
}
.faq .row .img img{
    height:70vh;
    width:50vw;
}
.faq .row .accordion-container{
    width:50%;
    text-align:left;
}
.faq .row .accordion-container .accordion .accordion-header{
    background-color: var(--color);
    margin: 1rem 0;
    box-shadow: .1rem .1rem .3rem rgba(0,0,0,.3);
    cursor: pointer;
}
.faq .row .accordion-container .accordion .accordion-header span{
    display: inline-block;
    text-align: center;
    height:4rem;
    width:5rem;
    line-height: 4rem;
    font-size:2rem;
    background:#fff;
    color: #333;
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
.faq .row .accordion-container .accordion .accordion-header h3{
    display: inline;
    color: #fff;
    font-weight: 400;
    padding-left: .5rem;
    font-size: 1.5rem;
}
.faq .row .accordion-container .accordion .accordion-body{
    padding: 1rem;
    color: #444;
    box-shadow: .1rem .1rem .3rem rgba(0, 0, 0,.3);
    font-size: 1.3rem;
    display: none;
}
.faq .row .accordion-container .accordion:nth-child(1) .accordion-body{
    display: block;
}
.footer{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content:space-between;
    padding: 1rem 2rem;
    margin-top:1rem;
    background:var(--color);
}
.footer h1{
    color:#fff;
    letter-spacing:.1rem;
    font-weight: 400;
}
.footer .icons a{
    color:#fff;
    font-size: 1.8rem;
    padding:0 1rem;
}
/* media queries */
@media(max-width:768px){
    html{
        font-size: 50%;
    }
    .header .fa-bars{
        display: block;
    }
    .header .navbar{
        position:fixed;
        top: -120%;
        left: 0;
        height:auto;
        width:100%;
        background-color: #fff;
        z-index:1000;
        border-top: .1rem solid rgba(0,0,0,.3);
    }
    .header .navbar ul{
        height: 100%;
        width: 100%;
        flex-flow: column;
    }
    .header .navbar ul li{
        margin: 1rem 0;
    }
    .header .navbar ul li a{
        color: #444;
        font-size:2.4rem;
    }
    .header .fa-times{
        transform:rotate(180deg);
    }
    .header .nav-toggle{
        top:5.8rem;
    }
    .home .banner{
        font-size: 4rem;
    }
    .home .slogan{
        font-size: 1.7rem;
    }
    .about .row{
        flex-flow: column-reverse;
        padding:0.2rem;
    }
    .about .row .img img{
        width:100vw;
    }
    .service .row{
        flex-flow: column-reverse;
    }
    .service .row:nth-child(even){
        flex-flow: column;
    }
    .service .row .img img{
        width:100vw;
    }
    .service .row .content{
        padding:0;
    }
    .contact .row{
        flex-flow: column;
    }
    .contact .row .img img{
        width:100vw;
    }
    .contact .row .form-container{
        width:100%;
        padding: 0 1.5rem;
    }
    .faq{
        padding: 0;
    }
    .faq .row{
        padding: 0 1rem;
        flex-flow: column;
    }
    .faq .row .img img{
        width:100vw;
    }
    .faq .row .accordion-container{
        width:100%;
    }
}
@media (max-width: 550px){
    .footer{
        flex-flow: column;
    }
    .footer h1{
        text-align:center;
    }
    .footer .icons{
        padding:2rem 0;
    }
}

main.js

				
					$(document).ready(function() {
    $('.fa-bars').click(function(){
        $(this).toggleClass('fa-times');
        $('.navbar').toggleClass('nav-toggle');
    });
    $(window).on('load scroll', function(){
        $('.fa-bars').removeClass('fa-times');
        $('.navbar').removeClass('nav-toggle');
        if($(window).scrollTop() > 30){
            $('.header').css({'background':'#c250f0', 'box-shadow':'0 .2rem .5rem rgba(0,0,0,.4'});
        }else{
            $('.header').css({'background':'none', 'box-shadow':'none'});
        }
    });
    $('.accordion-header').click(function(){
        $('.accordion .accordion-body').slideUp();
        $(this).next('.accordion-body').slideDown();
        $('.accordion .accordion-header span').text('+');
        $(this).children('span').text('-');
    });
});

images

web design company
web design company

Agency Website

web design company
web design company

 

Leave a Reply

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

Daily Web Designs

Email

contact@dailywebdesigns.com

About Us

Hi, I am a web developer passionate about creating and designing beautiful desktop and mobile web interfaces developed in HTML CSS & JavaScript.

Quick Links

Resources

Social

Locate Us

©2025. All Rights Reserved .

By Daily Web Designs