Online Education 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 online education website design using HTML CSS And JAVASCRIPT in this Blog.

Using standard JavaScript, users can use the navigation buttons on the web design best online learning 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 tutoring sites for teachers, 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 online Cryptocurrency education website design</title>

    <!-- font awesome cdn link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <!-- custom css file link -->
    <link rel="stylesheet" href="style.css">

</head>
<body>
    
 <!-- header section starts  -->
 <div id="menu-btn" class="fas fa-bars"></div>

 <header class="header">
     <a href="" class="logo"> <i class="fas fa-infinity"></i> Crypto edu </a>
     <nav class="navbar">
         <a href="#home"> <i class="fas fa-angle-right"></i> home </a>
         <a href="#category"> <i class="fas fa-angle-right"></i> category </a>
         <a href="#about"> <i class="fas fa-angle-right"></i> about </a>
         <a href="#courses"> <i class="fas fa-angle-right"></i> courses </a>
         <a href="#pricing"> <i class="fas fa-angle-right"></i> pricing </a>
         <a href="#contact"> <i class="fas fa-angle-right"></i> contact </a>
         <a href="#reviews"> <i class="fas fa-angle-right"></i> reviews </a>
         <a href="#blogs"> <i class="fas fa-angle-right"></i> blogs </a>
     </nav>

     <div class="share">
         <a href="#" class="fab fa-facebook"></a>
         <a href="#" class="fab fa-twitter"></a>
         <a href="#" class="fab fa-instagram"></a>
         <a href="#" class="fab fa-linkedin"></a>
     </div>

     <p class="credit">created by <span>dailywebdesign</span> || all right reserved</p>
 </header>

<!-- header section ends -->

<!-- home section starts -->

<section class="home" id="home">
    <div class="img">
        <img decoding="async" src="img/home-img.svg">
    </div>
    <div class="content">
        <span>online Cryptocurrency education</span>
        <h3>A better learning future starts here. <a href="">get started</a></h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        Maiores dignissimos dolor ipsum voluptatem farhan fuga minima animi quae unde eum!</p>
        <a href="#courses" class="btn"> our courses</a>
    </div>
</section>

<!-- home section ends here -->

<!-- info section starts here -->

<section class="info-container">

    <div class="box">
        <i class="fas fa-user-graduate"></i>
            <div class="info">
                 <h3>+550</h3>
                 <p>User</p>
            </div>
    </div>

    <div class="box">
        <i class="fas fa-laptop-code"></i>
            <div class="info">
                 <h3>+70</h3>
                 <p>courses</p>
            </div>
    </div>

    <div class="box">
        <i class="fas fa-chalkboard-teacher"></i>
            <div class="info">
                 <h3>+170</h3>
                 <p>experts</p>
            </div>
    </div>
</section>

<!-- info section ends here -->

<!-- category section starts here -->


<section class="category" id="category">

    <div class="heading">
        <span>our category</span>
        <h3>our top category</h3>
    </div>

    <div class="box-container">

        <div class="box">
            <i class="fas fa-user"></i>
            <h3>avtars</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
        </div>

        <div class="box">
            <i class="fab fa-medium"></i>
            <h3>art & media</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
        </div>

        <div class="box">
            <i class="fas fa-id-card-alt"></i>
            <h3>trading cards</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
        </div>

        <div class="box">
            <i class="fas fa-link"></i>
            <h3>virtual worlds</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
        </div>

        <div class="box">
            <i class="fas fa-key"></i>
            <h3>access</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
        </div>

        <div class="box">
            <i class="fab fa-draft2digital"></i>
            <h3>digiphysical goods</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
        </div>

    </div>

</section>

<!-- category section ends here -->

<!-- about section starts here -->

<section class="about" id="about">
    <div class="img">
        <img decoding="async" src="img/about-img.svg" alt="">
    </div>
    <div class="content">
        <span>about us</span>
        <h3>best online platform for Crypto learning</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis Lorem ipsum dolor sit amet, 
            Lorem ipsum dolor.</p>
            <a href="#" class="btn">read more</a>
    </div>
</section>

<!-- about section ends here -->

<!-- courses section starts here -->

<section class="courses" id="courses">
    <div class="heading">
        <span>our courses</span>
        <h3>popular courses</h3>
    </div>
    <div class="box-container">

        <div class="box">
            <div class="img">
                <img decoding="async" src="img/course-1.svg">
                <h3>portfolio management</h3>
            </div>
            <div class="content">
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
                <h3>portfolio management</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
                <a href="#" class="btn">select courses</a>
            </div>
        </div>

        <div class="box">
            <div class="img">
                <img decoding="async" src="img/course-2.svg">
                <h3>future ideas</h3>
            </div>
            <div class="content">
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
                <h3>future ideas</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
                <a href="#" class="btn">select courses</a>
            </div>
        </div>

        <div class="box">
            <div class="img">
                <img decoding="async" src="img/course-3.svg">
                <h3>business analysis</h3> </h3>
            </div>
            <div class="content">
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
                <h3>business analysis</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
                <a href="#" class="btn">select courses</a>
            </div>
        </div>

        <div class="box">
            <div class="img">
                <img decoding="async" src="img/course-4.svg">
                <h3>crypto analytics</h3> 
            </div>
            <div class="content">
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
                <h3>crypto analytics</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
                <a href="#" class="btn">select courses</a>
            </div>
        </div>

        <div class="box">
            <div class="img">
                <img decoding="async" src="img/course-5.svg">
                <h3>manage profile</h3> 
            </div>
            <div class="content">
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
                <h3>manage profile</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
                <a href="#" class="btn">select courses</a>
            </div>
        </div>

        <div class="box">
            <div class="img">
                <img decoding="async" src="img/course-6.svg">
                <h3>crypto investing</h3> 
            </div>
            <div class="content">
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
                <h3>crypto investing</h3> 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
                <a href="#" class="btn">select courses</a>
            </div>
        </div>
    </div>
</section>

<!-- courses section ends here -->

<!-- pricing section starts here -->

<section class="pricing" id="pricing">
    <div class="heading">
        <span>choose a plan</span>
        <h3>affordable plans</h3>
    </div>
    <div class="box-container">

        <div class="box">
        <h3>basic plan</h3>
        <img decoding="async" src="img/price-1.svg" alt="">
        <div class="amount"> <span>$</span>30<span>/mo</span> </div>
        <div class="list">
        <p><i class="fas fa-check"></i> full courses</p>
        <p><i class="fas fa-check"></i> online exams</p>
        <p><i class="fas fa-check"></i> certificate</p>
        <p><i class="fas fa-times"></i> full modules</p>
        <p><i class="fas fa-times"></i> 24/7 support</p>
        </div>
        <a href="#" class="btn">choose plan</a>
    </div>

    <div class="box">
        <h3>standard plan</h3>
        <img decoding="async" src="img/price-2.svg" alt="">
        <div class="amount"> <span>$</span>50<span>/mo</span> </div>
        <div class="list">
        <p><i class="fas fa-check"></i> full courses</p>
        <p><i class="fas fa-check"></i> online exams</p>
        <p><i class="fas fa-check"></i> certificate</p>
        <p><i class="fas fa-check"></i> full modules</p>
        <p><i class="fas fa-times"></i> 24/7 support</p>
        </div>
        <a href="#" class="btn">choose plan</a>
    </div>

    <div class="box">
        <h3>premium plan</h3>
        <img decoding="async" src="img/price-3.svg" alt="">
        <div class="amount"> <span>$</span>90<span>/mo</span> </div>
        <div class="list">
        <p><i class="fas fa-check"></i> full courses</p>
        <p><i class="fas fa-check"></i> online exams</p>
        <p><i class="fas fa-check"></i> certificate</p>
        <p><i class="fas fa-check"></i> full modules</p>
        <p><i class="fas fa-check"></i> 24/7 support</p>
        </div>
        <a href="#" class="btn">choose plan</a>
    </div>

</div>
</section>

<!-- pricing section ends here -->

<!-- contact section starts here -->

<section class="contact" id="contact">
    <div class="heading">
        <span>contact us</span>
        <h3>get in touch</h3>
    </div>

    <div class="row">
         <div class="contact-info-container">

             <div class="box">
                 <i class="fas fa-phone"></i>
                 <div class="info">
                     <h3>phone :</h3>
                     <p>+111-222-3333</p>
                     <p>+123-456-7890</p>
                 </div>
             </div>

             <div class="box">
                <i class="fas fa-envelope"></i>
                <div class="info">
                    <h3>email :</h3>
                    <p>shaikhfarhan@gmail.</p>
                    <p>farhan@gmail.com</p>
                </div>
            </div>

            <div class="box">
                <i class="fas fa-map"></i>
                <div class="info">
                    <h3>address :</h3>
                    <p>mumbai, india - 401203</p>
                </div>
            </div>
              <div class="share">
                  <a href="#" class="fab fa-facebook-f"></a>
                  <a href="#" class="fab fa-twitter"></a>
                  <a href="#" class="fab fa-instagram"></a>
                  <a href="#" class="fab fa-linkedin"></a>
              </div>
         </div>
         <form action="">
            <div class="inputBox">
                <input type="text" placeholder="name" name="" id="">
                <input type="email" placeholder="email" name="" id="">
            </div>
            <div class="inputBox">
                <input type="number" placeholder="phone" name="" id="">
                <input type="text" placeholder="subject" name="" id="">
            </div>
            <textarea name="" placeholder="message" id="" cols="30" rows="10"></textarea>
            <input type="submit" value="send message" class="btn">
        </form>
    </div>
</section>
<!-- contact section ends here -->

<!-- reviews section starts here -->

<section class="reviews" id="reviews">
    <div class="heading">
        <span>client reviews</span>
        <h3>what they say</h3>
    </div>
    <div class="box-container">

        <div class="box">
            <img decoding="async" src="img/pic-1.png">
            <h3>jenna bey</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
            <div class="stars">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star-half-alt"></i>
            </div>
        </div>

        <div class="box">
            <img decoding="async" src="img/pic-2.png">
            <h3>edward bey</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
            <div class="stars">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star-half-alt"></i>
            </div>
        </div>

        <div class="box">
            <img decoding="async" src="img/pic-3.png">
            <h3>lisa bey</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, reiciendis.</p>
            <div class="stars">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star-half-alt"></i>
            </div>
        </div>

    </div>
</section>

<!-- reviews section ends here -->

<!-- blogs section starts here -->

<section class="blogs" id="blogs">
    <div class="heading">
        <span>our blogs</span>
        <h3>our untold stories</h3>
    </div>

    <div class="box-container">

        <div class="box">
             <img decoding="async" src="img/blog-1.svg" alt="">
             <a href="#" class="title">blog title goes here.</a>
             <p class="blog-description">lorem ipsum dolor sit amet, consectetipsum doloripsum dolor</p>
             <div class="icons">
              <p><i class="fas fa-clender"></i>1st jan, 2022</p>
              <a href="#">read more</a>
             </div>
        </div>

        <div class="box">
            <img decoding="async" src="img/blog-2.svg" alt="">
            <a href="#" class="title">blog title goes here.</a>
            <p class="blog-description">lorem ipsum dolor sit amet, consectetipsum doloripsum dolor</p>
            <div class="icons">
             <p><i class="fas fa-clender"></i>2nd jan, 2022</p>
             <a href="#">read more</a>
            </div>
       </div>

       <div class="box">
        <img decoding="async" src="img/blog-3.svg" alt="">
        <a href="#" class="title">blog title goes here.</a>
        <p class="blog-description">lorem ipsum dolor sit amet, consectetipsum doloripsum dolor</p>
        <div class="icons">
         <p><i class="fas fa-clender"></i>12 jan, 2022</p>
         <a href="#">read more</a>
        </div>
   </div>

    </div>
</section>




























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

style.css

				
					@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400&display=swap');

*{
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    text-transform: capitalize;
    transition: all .2s linear;

}

html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

html::-webkit-scrollbar{
    width: 1rem;
}

html::-webkit-scrollbar-track{
    background: transparent;
}

html::-webkit-scrollbar-thumb{
    background: #BA68C8;
}
body{
    padding-left: 30rem;
}
section{
    padding:3rem 5%;
}

section:nth-child(even) {
    background: #f6f6f6;
}

.heading{
    text-align:center;
    margin-bottom:3rem;
}
.heading span{
    font-size:2rem;
    color: #BA68C8;
    text-transform: uppercase;
}
.heading h3{
    padding-top: 1rem;
    font-size: 3rem;
    color: #000;
    text-transform: uppercase;
}


.btn{
    display: inline-block;
    margin-top: 1rem;
    padding: 1.2rem 3rem;
    cursor:pointer;
    color: #fff;
    background-color: #000;
    font-size: 1.7rem;
}
.btn:hover{
    background-color: #BA68C8;
    
}

.header{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background:#BA68C8;
    width: 30rem;
    height: 100%;
    padding:3rem;
}
.header .logo{
    font-size: 2.5rem;
    color: #fff;
}
.header .logo i{
    color: #ff0;
}
.header .navbar{
    padding: 20% 0;
}
.header .navbar a{
    display: block;
    font-size: 2rem;
    margin: 1.7rem 0;
    color: #fff;
}
.header .navbar a i{
    color: #ff0;
    padding-right: .5rem;
}
.header .navbar a:hover{
    color: #ff0;
}
.header .navbar a:hover i{
    padding-right: 2rem;
}
.header .share{
    text-align: center;
}
.header .share a{
    height: 4.5rem;
    width: 4.5rem;
    line-height: 4.5rem;
    font-size: 1.8rem;
    background: #fff;
    color: #BA68C8;
    margin: 0 .1rem;
}
.header .share a:hover{
    color: #BA68C8;
    background: #000;
}
.header .credit{
    text-align: center;
    color:#fff;
    font-size: 1.6rem;
    padding-top: 15%;
}
.header .credit span{
    color: #ff0;
}

#menu-btn{
    position: fixed;
    top: 1rem;
    right:2rem;
    height:5rem;
    width:5rem;
    line-height: 5rem;
    font-size: 2.5rem;
    background: #BA68C8;
    color: #fff;
    cursor: pointer;
    text-align: center;
    z-index: 10000;
    display: none;
}

#menu-btn.fa-times {
    background: #fff;
    color: #BA68C8;
}

.home{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.home .img{
    flex: 1 1 40rem;
}
.home .img img{
    width: 100%;
}
.home .content{
    width: 45rem;
}
.home .content span{
    color: #000;
    font-size: 2rem;
    font-weight: bold;
}
.home .content h3{
    color: #000;
    font-size: 3rem;
    padding: 2rem 0;
}
.home .content h3 a{
    color: #BA68C8;
}
.home .content h3 a:hover{
    text-decoration: underline;
}
.home .content p{
    font-size: 1.4rem;
    color: #777;
    padding-bottom: 1rem;
    line-height: 2;
}

.info-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 2rem;
}
.info-container .box{
    padding:3rem;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    border: 0.1rem solid #999;
}
.info-container .box i{
    height:5rem;
    width:5rem;
    line-height:5rem;
    font-size: 2rem;
    border-radius:50%;
    background: #BA68C8;
    color: #fff;
    text-align: center;
}
.info-container .box h3{
    font-size: 2rem;
    padding-bottom: .5rem;
    color: #BA68C8;
}
.info-container .box p{
    font-size: 1.5rem;
    color: #777;
}

.category .box-container{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 2rem;
}
.category .box-container .box{
    text-align: center;
    padding: 3rem 1rem;
    border: 0.1rem solid #999;
}
.category .box-container .box i {
    height: 5.5rem;
    width: 5.5rem;
    line-height: 5.5rem;
    font-size: 2rem;
    border-radius: .5rem;
    color: #fff;
    background: #BA68C8;
    margin-bottom: 1.5rem;
  }
.category .box-container .box i:hover{
    transform:translateY(-1rem);
}
.category .box-container .box h3{
    font-size: 2rem;
    color: #263238;
}
.category .box-container .box p{
    font-size: 1.4rem;
    color: #777;
    line-height: 2;
    padding-top: 1.5rem;
}

.about{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.about .img{
    flex: 1 1 40rem;
}

.about .img img{
    width: 100%;
}
.about .content{
    width: 45rem;
}
.about .content span{
    font-size:2rem;
    color: #BA68C8;
    font-weight: bold;
}
.about .content h3{
    padding-top: 2rem;
    font-size: 2.4rem;
    color: #263238;
}
.about .content p{
    padding: 1.5rem;
    line-height: 2;
    font-size: 1.4rem;
    color: #777;
}
.courses .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 2rem;
}
.courses .box-container .box{
    position: relative;
    padding: 2rem;
    border: 0.1rem solid #999;
    overflow: hidden;
    text-align: center;
}
.courses .box-container .box:hover .content{
    opacity: 1;
}
.courses .box-container .box .img img{
    width: 100%;
}
.courses .box-container .box .img h3{
    font-size: 2rem;
    color: #263238;
    font-weight: normal;
    padding-bottom: 1rem;
}
.courses .box-container .box .content{
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    background: #BA68C8;
    padding:2rem;
    opacity: 0;
}
.courses .box-container .box .content .stars{
    padding-bottom: 2rem;
}
.courses .box-container .box .content .stars i{
    font-size: 1.7rem;
    color: #ff0;
}
.courses .box-container .box .content h3{
    font-size: 2rem;
    color: #fff;
}
.courses .box-container .box .content p{
    font-size: 1.4rem;
    color: #fff;
    padding: 1.5rem 0;
    line-height: 2;
}
.courses .box-container .box .content .btn:hover{
    background:#ff0;
    color: #263238;
}

.pricing .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 2rem;
}
.pricing .box-container .box{
    text-align: center;
    padding:2rem;
    border: 0.1rem solid #999;
    background: #fff;
}
.pricing .box-container .box h3{
    font-size: 2rem;
    color: #263238;
}
.pricing .box-container .box img{
    height:20rem;
}
.pricing .box-container .box .amount{
    font-size: 5rem;
    color: #BA68C8;
}
.pricing .box-container .box .amount span{
    font-size:2.5rem;
}
.pricing .box-container .box .list{
    padding: 1.5rem 0;
    text-align: left;
}
.pricing .box-container .box .list p{
    padding: 1rem 0;
    font-size: 1.5rem;
    color: #777;
}
.pricing .box-container .box .list p i{
    color: #BA68C8;
    padding-right: .5rem;
}
.pricing .box-container .box .list p i.fa-times {
    color: #000;
}

.contact .row{
    display:flex;
    flex-wrap: wrap;
    gap:2rem;
}
.contact .row .contact-info-container {
    width: 40rem;
}
.contact .row .contact-info-container .box{
    margin-bottom: 3rem;
    display: flex;
    gap:1.5rem;
}
.contact .row .contact-info-container .box i{
    height:5rem;
    width:5rem;
    line-height: 5rem;
    font-size:1.7rem;
    background: #BA68C8;
    color: #fff;
    border-radius:50%;
    text-align:center;
    margin-top:-1rem;
}
.contact .row .contact-info-container .box h3{
    font-size: 2rem;
    color: #263238;
    padding-bottom: 1rem;
}
.contact .row .contact-info-container .box p{
    font-size: 1.5rem;
    color: #777;
    line-height: 2;
}
.contact .row .contact-info-container .share{
    padding-top: 1rem;
}
.contact .row .contact-info-container .share a{
    height:5rem;
    width:5rem;
    line-height: 5rem;
    font-size: 2rem;
    background: #000;
    color: #BA68C8;
    margin-right: .1rem;
    text-align: center;
}
.contact .row .contact-info-container .share a:hover{
    background: #BA68C8;
    color: #fff;
}
.contact .row form{
    flex: 1 1 42rem;
}
.contact .row form .inputBox{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
}
.contact .row form .inputBox input{
    width: 49%;
}
.contact .row form .inputBox input,
.contact .row form textarea{
    padding:1.4rem;
    background: #f6f6f6;
    text-transform: none;
    color: #777;
    margin: .7rem 0;
    font-size: 1.6rem;
    border: 0.1rem solid #999;
}
.contact .row form textarea{
    width:100%;
    resize: none;
    height: 15rem;
    
}

.reviews .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 2rem;
}
.reviews .box-container .box{
    text-align: center;
    padding:3rem;
    background: #fff;
    border: 0.1rem solid #999;
}
.reviews .box-container .box img{
    height:10rem;
    width:10rem;
    border-radius: 50%;
    margin-bottom:1rem;
}
.reviews .box-container .box h3{
    font-size: 2rem;
    color: #263238;
}
.reviews .box-container .box p{
    line-height: 2;
    padding: 2rem 0;
    font-size: 1.3rem;
    color: #777;
}
.reviews .box-container .box .stars i{
    font-size: 1.7rem;
    color: #BA68C8;
}
.blogs .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap:2rem;
}

.blogs .box-container .box{
    text-align: center;
    padding: 2rem;
    border: 0.1rem solid #999;
}
.blogs .box-container .box:hover img{
    transform: translateY(-1rem);
}
.blogs .box-container .box img{
    height:20rem;
}
.blogs .box-container .box .title{
    display: block;
    margin-bottom:1rem;
    font-size: 2rem;
    color: #263238;
}
.blogs .box-container .box .title:hover{
    text-decoration: underline;
}
.blogs .box-container .box .blog-description{
    padding:1rem 0;
    font-size: 1.4rem;
    color: #777;
    line-height: 2;
}
.blogs .box-container .box .icons{
    padding-top: 1.7rem;
    margin-top:1.5rem;
    border-top: 0.1rem solid #999;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.blogs .box-container .box .icons p{
    font-size: 1.4rem;
    color: #777;
}
.blogs .box-container .box .icons p i{
    padding-right: .5rem;
    color: #BA68C8;
}
.blogs .box-container .box .icons a{
    font-size: 1.4rem;
    color: #263238;
}
.blogs .box-container .box .icons a:hover{
    text-decoration: underline;
}


















@media (max-width:1200px){
     html{
         font-size: 55%;
     }
}

@media (max-width:991px){
    body{
        padding-left: 0;
    }
    #menu-btn{
        display: block;
    }
    .header{
        left: -110%;
    }
    .header.active{
        left: 0;
        box-shadow: 0 0 0 100vw rgba(0,0,0,0.7);
        width: 35rem;
    }
    .home .content h3{
        font-size:2.5rem;
    }
}


@media (max-width:450px){
    html{
        font-size: 50%;
    }
    .contact .row form .inputBox input{
        width:100%;
    }
}

main.js

				
					let menu = document.querySelector('#menu-btn');
let header = document.querySelector('.header');

menu.onclick = function(){
    menu.classList.toggle('fa-times');
    header.classList.toggle('active');

}
window.onscroll = function(){
    menu.classList.remove('fa-times');
    header.classList.remove('active');

}

Leave a Comment

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

Scroll to Top