Agency Website Design Using HTML CSS JavaScript With Source Code

Leave a Comment / By /

 

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 class="header">
    <a href="#" class="logo"><i class="fab fa-modx"></i>VR.</a>
    <div class="fas fa-bars"></div>
    <nav class="navbar">
        <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" class="home">
<h1 class="banner">dive into virtual reality services</h1>
<h3 class="slogan">you have a vision. we have a team to get you there.</h3>
<a href="#"><button>get started</button></a>

<div class="wave wave1"></div>
<div class="wave wave2"></div>
<div class="wave wave3"></div>

<div class="fas fa-cog nut1"></div>
<div class="fas fa-cog nut2"></div>

</section>

<!-- home section ends here -->

<!-- about section starts -->

<section id="about" class="about">
    <h1 class="heading">about us</h1>
    <div class="row">
        <div class="contect">
            <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 class="btn">Read more</button></a>
        </div>

        <div class="img">
            <img decoding="async" src="img/about.svg" alt="">
        </div>
    </div>
</section>

<!-- about section ends here -->

<!-- service section starts here -->

<section class="service" id="service">
    <h1 class="heading">our services</h1>

    <div class="row">
        <div class="img">
            <img decoding="async" src="img/video.svg" alt="">
        </div>
        <div class="content">
            <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 class="btn">Read more</button></a>
        </div>
    </div>

    <div class="row">
        
        <div class="content">
            <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 class="btn">Read more</button></a>
        </div>
        <div class="img">
            <img decoding="async" src="img/Animation.svg" alt="">
        </div>
    </div>

    <div class="row">
        <div class="img">
            <img decoding="async" src="img/real estate.svg" alt="">
        </div>
        <div class="content">
            <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 class="btn">Read more</button></a>
        </div>
        
    </div>


    <div class="row">
        
        <div class="content">
            <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 class="btn">Read more</button></a>
        </div>
        <div class="img">
            <img decoding="async" src="img/testimonials.svg" alt="">
        </div>
    </div>

    <div class="row">
        <div class="img">
            <img decoding="async" src="img/event.svg" alt="">
        </div>
        <div class="content">
            <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 class="btn">Read more</button></a>
        </div>
        
    </div>

    <div class="row">
        
        <div class="content">
            <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 class="btn">Read more</button></a>
        </div>
        <div class="img">
            <img decoding="async" src="img/educational.svg" alt="">
        </div>
    </div>
</section>

<!-- service section ends here -->

<!-- team section starts -->

<section class="team" id="team">
    <h1 class="heading">our team</h1>
    <div class="row">

        <div class="card">
            <div class="img">
                <img decoding="async" src="img/pic-1.png" alt="">
            </div>
            <div class="info">
                <h3>Edward Bey</h3>
                <span>virtual designer</span>
                <div class="icons">
                <a href="#" class="fab fa-facebook-f"></a>
                <a href="#" class="fab fa-twitter"></a>
                <a href="#" class="fab fa-instagram"></a>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="img">
            <img decoding="async" src="img/pic-2.png" alt="">
        </div>
        <div class="info">
            <h3>lalisa Bey</h3>
            <span>virtual assistance</span>
            <div class="icons">
            <a href="#" class="fab fa-facebook-f"></a>
            <a href="#" class="fab fa-twitter"></a>
            <a href="#" class="fab fa-instagram"></a>
        </div>
    </div>
</div>

<div class="card">
    <div class="img">
        <img decoding="async" src="img/pic-3.png" alt="">
    </div>
    <div class="info">
        <h3>jenna Bey</h3>
        <span>virtual developer</span>
        <div class="icons">
        <a href="#" class="fab fa-facebook-f"></a>
        <a href="#" class="fab fa-twitter"></a>
        <a href="#" class="fab fa-instagram"></a>
    </div>
</div>
</div>

    </div>
</section>

<!-- team section ends here -->

<!-- contact section starts here -->

<section class="contact" id="contact">
    <h1 class="heading">contact us</h1>
    <div class="row">
        <div class="img">
            <img decoding="async" src="img/contact.svg" alt="">
        </div>
        <div class="form-container">
            <form action="">
                <div class="inputBox">
                    <input type="text" placeholder="first name">
                    <input type="text" placeholder="last name">
                </div>
                <input type="email" placeholder="email">
                <textarea placeholder="message" cols="30" rows="10"></textarea>
                <input type="submit" value="send">
            </form>
        </div>
    </div>
</section>

<!-- contact section ends here -->

<!-- FAQ section starts here -->

<section class="faq" id="faq">
    <h1 class="heading">FAQ</h1>
    <div class="row">
        <div class="img">
            <img decoding="async" src="img/faq.svg" alt="">
        </div>
        <div class="accordion-container">

            <div class="accordion">
                <div class="accordion-header">
                    <span>+</span>
                    <h3>How much will it cost?</h3>
                </div>
                <div class="accordion-body">
                    <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>
                </div>
            </div>

            <div class="accordion">
                <div class="accordion-header">
                    <span>+</span>
                    <h3>How to update in virtual reality?</h3>
                </div>
                <div class="accordion-body">
                    <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>
                </div>
            </div>

            <div class="accordion">
                <div class="accordion-header">
                    <span>+</span>
                    <h3>is virtual provided freely?</h3>
                </div>
                <div class="accordion-body">
                    <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>
                </div>
            </div>

            <div class="accordion">
                <div class="accordion-header">
                    <span>+</span>
                    <h3>how long it take to update?</h3>
                </div>
                <div class="accordion-body">
                    <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>
                </div>
            </div>

            <div class="accordion">
                <div class="accordion-header">
                    <span>+</span>
                    <h3>is it seo freindly?</h3>
                </div>
                <div class="accordion-body">
                    <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>
                </div>
            </div>


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

<!-- FAQ section ends here -->

<!-- footer section starts here -->

<section class="footer">
    <h1>created by dailywebdesign || all rights reserved</h1>
    <div class="icons">
        <a href="#" class="fab fa-facebook-f"></a>
        <a href="#" class="fab fa-twitter"></a>
        <a href="#" class="fab fa-instagram"></a>
    </div>
</section>


































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


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

</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 Comment

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

Scroll to Top