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

how to create a website using HTML CSS in this Blog.

Using standard, users can use the navigation buttons on the webpage using html and CSS design to navigate through each section. I hope that when you design a website with online responsive website with html and CSS, 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>Koral website desgin html & css</title>
    
    <!-- custom style file link -->
    <link rel="stylesheet" href="style.css">

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

</head>
<body>

    <div class="navbar">
        <img decoding="async" src="img/logo-koral.png" alt="">

        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">PAGE</a></li>
            <li><a href="#">PORTFOLIOS</a></li>
            <li><a href="#">HEADER</a></li>
            <li><a href="#">ELEMENTS</a></li>
            <li><a href="#">BLOG</a></li>
        </ul>
        <div class="nav_icon">
            <i class="fa fa-search" aria-hidden="true"></i>
            <i class="fa fa-shopping-cart" aria-hidden="true"></i>
            <i class="fa fa-bar-chart" aria-hidden="true"></i>
        </div>
    </div>
    

<div class="background_img">
    <div class="inner_img">
        <h1>hi there!</h1>
        <p>We'r Korel. Amazing colorful<br>WordPress theme</p>
    </div>
</div>
<br><br><br><br>
<!-- main -->

<div class="div1">
    <div class="div">
        <div class="text">
            <h1>Designers
                Developers</h1>
            <p>We strive to create architecture that is simple, beautiful, 
                and economical of both means and gestures.  
                We believe that architecture should be 
                integral with its place and that the best 
                buildings allow people to fully experience 
                the light and nature of that place.</p>    
        </div>
    </div>
</div>

<div class="relative_box">
    <img decoding="async" src="img/team1.jpg" alt="" width="335" height="339.89">
    <h1>Manuel Vanel</h1>
    <p>CEO</p>
</div>

<div class="relative_box1">
    <img decoding="async" src="img/team4.jpg" alt="" width="335" height="339.89">
    <h1>Lunada Carlos</h1>
    <p>DESIGNER</p>
</div>

<div class="relative_box2">
    <img decoding="async" src="img/team3.jpg" alt="" width="335" height="339.89">
    <h1>Naina Soraia</h1>
    <p>CTO</p>
</div>

<div class="relative_box3">
    <img decoding="async" src="img/team2.jpg" alt="" width="335" height="339.89">
    <h1>Lisa Bey</h1>
    <p>DESIGNER</p>
</div>
<br><br><br>

<!-- pagetitle -->

<div class="pagetitle">
    <div class="inner_text">
        <h3>We Design<br>
            Creative Digital<br>
            Products
        </h3>
        <button>PURCHASE KORAL NOW</button>
    </div>
</div>
<br><br><br><br>

<!-- box -->
<div class="vc">
    <div class="box1">
        <h1>About Our Agency</h1>
        <p>Objectively conceptualize technically sound ROI without web-enabled scenarios. 
            Professionally redefine integrated growth strategies without synergistic information. 
            Energistically procrastinate resource-leveling processes for unique alignments. 
            Energistically matrix efficient experiences through diverse collaboration and.</p>
    </div>

    <div class="box2">
        <h1>Our Mission</h1>
        <p>Objectively conceptualize technically sound ROI without web-enabled scenarios. 
            Professionally redefine integrated growth strategies without synergistic information. 
            Energistically procrastinate resource-leveling processes for unique alignments. 
            Energistically matrix efficient experiences through diverse collaboration and.</p>
    </div>

    <div class="box3">
        <h1>Our Skills</h1>
        <div class="box_inside">
            <div class="box_text">
                <h1>Development</h1>
                <p>95%</p>
            </div>
        </div>
        <br>

        <div class="box_inside1">
            <div class="box_text1">
                <h1>Design</h1>
                <p>85%</p>
            </div>
        </div>
        <br>

        <div class="box_inside2">
            <div class="box_text2">
                <h1>Marketing</h1>
                <p>70%</p>
            </div>
        </div>
        <br>

        <div class="box_inside3">
            <div class="box_text3">
                <h1>Consulting</h1>
                <p>65%</p>
            </div>
        </div>
        
    </div>
</div>

<!-- illustration -->

<div class="illustration">
    <h1>We do Illustrations</h1>
</div>

<!-- BoxImg -->

<div class="BoxImg">
    <div class="img">
        <img decoding="async" src="img/project01.jpg" alt="">
        <div class="text_box">
            <h1>Spactrum</h1>
            <p>Photograpy / Photoshop</p>
        </div>
    </div>

    <div class="img1">
        <img decoding="async" src="img/project04.jpg" alt="">
        <div class="text_box1">
            <h1>Coral</h1>
            <p>Photograpy / Photoshop</p>
        </div>
    </div>

    <div class="img2">
        <img decoding="async" src="img/project06.jpg" alt="">
        <div class="text_box2">
            <h1>Pretty in Pink</h1>
            <p>Photograpy / Photoshop</p>
        </div>
    </div>

    <div class="img3">
        <img decoding="async" src="img/project07.jpg" alt="">
        <div class="text_box3">
            <h1>Dragon Fruit</h1>
            <p>Photograpy / Photoshop</p>
        </div>
    </div>

    <div class="img4">
        <img decoding="async" src="img/project08.jpg" alt="">
        <div class="text_box4">
            <h1>IPhone X Wallpaper</h1>
            <p>Photograpy / Photoshop</p>
        </div>
    </div>

    <div class="img5">
        <img decoding="async" src="img/project03.jpg" alt="">
        <div class="text_box5">
            <h1>Concert</h1>
            <p>Photograpy / Photoshop</p>
        </div>
    </div>
</div>


<!-- services -->

<div class="services">
    <h1>Our Services</h1>
</div>

<div class="services_box">
    <div class="box7">
        <i class="fa fa-table" aria-hidden="true"></i>
        <h1>RESPONSIVE DESIGN</h1>
        <p>Flexible strategic theme areas through redefine <br>team driven human resource</p>
    </div>

    <div class="box8">
        <i class="fa fa-anchor" aria-hidden="true"></i>
        <h1>VISUAL PAGE BUILDER</h1>
        <p>Flexible strategic theme areas through redefine <br>team driven human resource</p>
    </div>

    <div class="box9">
        <i class="fa fa-music" aria-hidden="true"></i>
        <h1>UPPER TEMPLATES</h1>
        <p>Flexible strategic theme areas through redefine <br>team driven human resource</p>
    </div>

    <div class="box10">
        <i class="fa fa-shopping-cart" aria-hidden="true"></i>
        <h1>FREE SUPPORT</h1>
        <p>Flexible strategic theme areas through redefine <br>team driven human resource</p>
    </div>

    <div class="box11">
        <i class="fa fa-cogs" aria-hidden="true"></i>
        <h1>ADMIN PANEL</h1>
        <p>Flexible strategic theme areas through redefine <br>team driven human resource</p>
    </div>

    <div class="box12">
        <i class="fa fa-bars" aria-hidden="true"></i>
        <h1>UNLIMITED PORTFOLIOS</h1>
        <p>Flexible strategic theme areas through redefine <br>team driven human resource</p>
    </div>
        
    
</div>



<div class="banner">
     <img decoding="async" src="img/graphics8.jpg" alt="">
     <div class="box13">
         <h1>1,250</h1>
         <h2>PROJECT</h2>
         <hr>
         <p>lorem ipsum dolor mauris</p>
     </div>

     <div class="box14">
        <h1>500</h1>
        <h2>CLIENTS</h2>
        <hr>
        <p>lorem ipsum dolor mauris</p>
    </div>

    <div class="box15">
        <h1>350</h1>
        <h2>AWARDS</h2>
        <hr>
        <p>lorem ipsum dolor mauris</p>
    </div>
</div>

<!-- clients -->

<div class="clients">
    <h1>Our Clients</h1>
</div>

<div class="client_img">
    <img decoding="async" src="img/team1.jpg" alt="" height="69px" width="69px">
    <div class="text1">
        <p>"Rapidiously integrate based resources whereas low-risk high<br>
            -yield technologies. Proactively innovate market positioning<br> 
            products without B2B products resources before one-to-one<br> 
            applications recaptiualize negotiate timely synergy"</p>
    </div>
    <h1>Jack Shaperd</h1>
    <h2>Upper</h2>
</div>

<!-- contact us -->

<div class="contactus">
    <div class="box16">
        <div class="circle">
            <i class="fa fa-phone" aria-hidden="true"></i></div>
            <h1>CALL US</h1>
            <p>PT (+351) 729 133 194<br>
               AU (+18) 833 841 442</p>
        </div>
    

    <div class="box17">
        <div class="circle">
            <i class="fa fa-envelope" aria-hidden="true"></i></div>
            <h1>EMAIL US</h1>
            <p>marketing@example.com<br>
                hello@example.com</p>
        </div>

        <div class="box18">
            <div class="circle">
                <i class="fa fa-map-marker" aria-hidden="true"></i></div>
                <h1>OUR HOME</h1>
                <p>PO Box 16122 Collins Street West<br>
                    Victoria 8007 Australia</p>
            </div>
            <div class="instagram">
    
                <h1>INSTAGRAM @UPPER</h1>
            
            </div>
    </div>

    <!-- footer img -->

<div class="footer_img">
    <div class="box">
        <div class="imgBox">
            <img decoding="async" src="img/project04.jpg" alt="">
        </div>
    </div>

    <div class="box">
        <div class="imgBox">
            <img decoding="async" src="img/project03.jpg" alt="">
        </div>
    </div>

    <div class="box">
        <div class="imgBox">
            <img decoding="async" src="img/project06.jpg" alt="">
        </div>
    </div>

    <div class="box">
        <div class="imgBox">
            <img decoding="async" src="img/project07.jpg" alt="">
        </div>
    </div>

    <div class="box">
        <div class="imgBox">
            <img decoding="async" src="img/project08.jpg" alt="">
        </div>
    </div>

    <div class="box">
        <div class="imgBox">
            <img decoding="async" src="img/project04.jpg" alt="">
        </div>
    </div>

    <div class="box">
        <div class="imgBox">
            <img decoding="async" src="img/project01.jpg" alt="">
        </div>
    </div>

    <div class="box">
        <div class="imgBox">
            <img decoding="async" src="img/project03.jpg" alt="">
        </div>
    </div>

    <div class="box">
        <div class="imgBox">
            <img decoding="async" src="img/project08.jpg" alt="">
        </div>
    </div>

    <div class="box">
        <div class="imgBox">
            <img decoding="async" src="img/project04.jpg" alt="">
        </div>
    </div>

    <div class="box">
        <div class="imgBox">
            <img decoding="async" src="img/project06.jpg" alt="">
        </div>
    </div>
</div>

<!-- links -->


<div class="links">
     <div class="box">
         <img decoding="async" src="img/logo-koral@2x.png" alt="" height="37" width="111">
         <button><i class="fab fa-facebook" aria-hidden="true"></i></button>
         <button><i class="fab fa-instagram" aria-hidden="true"></i></button>
         <button><i class="fab fa-twitter" aria-hidden="true"></i></button>
         <button><i class="fab fa-pinterest-p" aria-hidden="true"></i></button>
         <button><i class="fab fa-dribbble" aria-hidden="true"></i></button>
         <h1>koral © 2022 by dailywebdesign</h1>
     </div>
</div>



















</body>
</html>

style.css

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

body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.navbar{
    background-color: #fff;
    margin: 0px;
    padding: 20px;
    position:fixed;
    display: inline-flex;
    height: 40px;
    width: 100%;
    z-index: 1;
}

.navbar ul{
    float: right;
    margin-left: 180px;
    margin-top:1px;
    font-family: 'Montserrat', 'Arial', 'sans-serif', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0px;
}
.navbar li{
    font-weight: 700px;
    display: inline-block;
    list-style-type: none;
    padding: 10px;
    margin: 7px;
}
.navbar img{
    width:111px;
    height:37px;
    margin: 10px;
}
.navbar a{
    color: #000;
    text-decoration: none;
}
.navbar a:hover{
    text-decoration: line-through;
    color: #fa7268;
}

.nav_icon{
    margin-right:100px;
    margin-left:auto;
    padding: 15px;
    letter-spacing:10px;
    word-spacing: 10px;
}

.background_img{
    background-image: url(img/wallpaper2.jpg);
    height:100vh;
    background-size: cover;
    background-position:center;
    display: table;
    width: 100%;
}

.inner_img{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}
.inner_img h1{
    font-family: 'Montserrat', sans-serif;
    font-size: 195px;
    font-weight:bold;
    color: rgb(255,255,255);
    margin: 20px;
    letter-spacing:-8px;
    line-height: 96px;
}
.inner_img p{
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 40px;
    color:#fff;
}

/* main */

.div1{
   width: 100%;
   height:900px;
}
.div{
    width: 340px;
    height:517px;
    border: 12px solid red;
    margin:30px;
    position: relative;
    opacity: 0.9;
}

.text{
    width: 289px;
    height:444px;
    border:0px;
    position: absolute;
    margin: 30px;
    margin-left: 70px;
    background-color: #fff;
}
.text h1{
    font-weight: 700px;
    font-size: 60px;
    padding:-0px;
    line-height: 56px;
    font-family: 'Montserrat';
}
.text p{
    font-weight: normal;
    font-size: 16px;
    color:#222025;
    line-height: 26px;
    font-family: 'Muli', 'Arial', 'sans-serif';
}

.relative_box{
    position: relative;
    margin-left: 465px;
    margin-top: -899px;
}

.relative_box h1{
    position: absolute;
    color:#000000;
    bottom: 10%;
    font-size: 22px;
    font-family: 'Montserrat';
}
.relative_box p{
    position: absolute;
    color:#c0c0c0;
    bottom:2%;
    font-family: 'Montserrat';
}

.relative_box1{
    position: relative;
    margin-left:830px;
    margin-top: -240px;
}

.relative_box1 h1{
    position: absolute;
    color: #000000;
    bottom:10%;
    font-size: 'Montserrat';
}

.relative_box1 p{
    position: absolute;
    color: #c0c0c0;
    bottom:2%;
    font-family: 'Montserrat';
}

.relative_box2{
    position: relative;
    margin-left:465px;
}
.relative_box2 h1{
    position: absolute;
    color: #000000;
    bottom: 10%;
    font-size: 22px;
    font-family: 'Montserrat';
}
.relative_box2 p{
    position: absolute;
    color: #c0c0c0;
    bottom:2%;
    font-family: 'Montserrat';
}

.relative_box3{
    position: relative;
    margin-left:830px;
    margin-top:-240px;
}
.relative_box3 h1{
    position: absolute;
    color: #000000;
    bottom: 10%;
    font-size: 22px;
    font-family: 'Montserrat';
}
.relative_box3 p{
    position: absolute;
    color: #c0c0c0;
    bottom: 2%;
    font-family: 'Montserrat';
}

.pagetitle{
    background-image: url(img/pagetitle.png);
    height:602px;
    background-position:center;
    background-size: cover;
    display: table;
    width: 100%;
}
.inner_text{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.inner_text h3{
    font-family: 'Montserrat';
    font-size: 71px;
    font-weight: 700;
    color:#ffffff;
    margin-top:50px;
}
.inner_text button{
    font-family: 'Montserrat';
    font-weight: bold;
    font-size: 17px;
    background-color:transparent;
    border:2px solid #fff;
    border-radius: 20px;
    padding: 10px;
    color: #fff;
    margin: 20px;
}
.inner_text button:hover{
    color: #fa539a;
    background-color: #fff;
    border:0px;
}

.vc{
    width: 100%;
    height:400px;
    position:relative;
}
.vc .box1{
    height:350px;
    width: 350px;
    margin: 30px;
    margin-left: 65px;
    float:left;
}
.box1 h1{
    color: #000;
    font-family: 'Montserrat';
    font-weight: bold;
}
.box1 p{
    font-family: 'Muli', 'Arial', 'sans-serif';
    font-weight: normal;
    font-size: 16px;
    color: #222025;
    line-height: 23px;
}

/* Our Mission */

.vc .box2{
    height:350px;
    width:350px;
    margin: 30px;
    margin-left: 65px;
    float: left;
}
.box2 h1{
    color: #000;
    font-family: 'Montserrat';
    font-weight: bold;
}
.box2 p{
    font-family: 'Muli', 'Arial', 'sans-serif';
    font-weight: normal;
    font-size: 16px;
    color: #222025;
    line-height: 23px;
}

/* our skills */

.vc .box3{
   height:350px;
   width: 350px;
   margin: 30px;
   margin-left:65px;
   float: left;
}
.box3 h1{
    color: #000;
    font-family: 'Montserrat';
    font-weight: bold;
}

.box_inside{
    width:350px;
    height:30px;
    background-color: #c0c0c0;
}
.box_text{
    position: relative;
    width:320px;
    height:30px;
    background-color: #fe4e4e;
}
.box_text h1{
    position: absolute;
    color: #fff;
    top: -1px;
    font-size: 12px;
    font-family: 'Montserrat';
    font-weight: bold;
}
.box_text p{
    position: absolute;
    color: #fff;
    left: 90%;
    font-family: 'Montserrat';
    top:-9px;
}

.box_inside1{
    width:350px;
    height:30px;
    background-color: #c0c0c0;
}
.box_text1{
    position: relative;
    width:300px;
    height:30px;
    background-color: #8e44ad;
}
.box_text1 h1{
    position: absolute;
    color: #fff;
    top: -1px;
    font-size: 12px;
    font-family: 'Montserrat';
    font-weight: bold;
}
.box_text1 p{
    position: absolute;
    color: #fff;
    left: 90%;
    font-family: 'Montserrat';
    top:-9px;
}

.box_inside2{
    width:350px;
    height:30px;
    background-color: #c0c0c0;
}
.box_text2{
    position: relative;
    width:270px;
    height:30px;
    background-color: #58d68d;
}
.box_text2 h1{
    position: absolute;
    color: #fff;
    top: -1px;
    font-size: 12px;
    font-family: 'Montserrat';
    font-weight: bold;
}
.box_text2 p{
    position: absolute;
    color: #fff;
    left: 90%;
    font-family: 'Montserrat';
    top:-9px;
}

.box_inside3{
    width:350px;
    height:30px;
    background-color: #c0c0c0;
}
.box_text3{
    position: relative;
    width:245px;
    height:30px;
    background-color: #5dade2;
}
.box_text3 h1{
    position: absolute;
    color: #fff;
    top: -1px;
    font-size: 12px;
    font-family: 'Montserrat';
    font-weight: bold;
}
.box_text3 p{
    position: absolute;
    color: #fff;
    left: 90%;
    font-family: 'Montserrat';
    top:-9px;
}

.illustration{
    background-color:#ffffff;
    width:100%;
    height:300px;
    display: table;
    background-size: cover;
    background-position: center;
}
.illustration h1{
    display:table-cell;
    text-align: center;
    vertical-align: middle;
    font-family: 'Montserrat';
    font-weight: bold;
    font-size:70px;
}

.BoxImg{
    width:100%;
    height:750px;
}
.img{
    height:336.75px;
    width:449px;
    position: relative;
    float: left;
}
.img img{
    height:336.75px;
    width:100%;
    float: left;
}
.text_box{
    width:100%;
    top: 0px;
    left: 0px;
    right: 0px;
    position: absolute;
    background-color: #f08080;
    opacity: 0.9;
    height:0;
    transition:.5s ease;
    overflow: hidden;
}
.text_box h1{
    position: absolute;
    color:#fff;
    text-align: center;
    top: 30%;
    left: 35%;
    font-family: 'Montserrat';
}
.text_box p{
    position: absolute;
    color: #fff;
    text-align: center;
    top: 50%;
    left: 30%;
    font-family: 'Muli', 'Arial', 'sans-serif';
}
.img:hover .text_box{
    height: 100%;
}



.img1{
    height:336.75px;
    width:449px;
    position: relative;
    float: left;
}
.img1 img{
    height:336.75px;
    width:100%;
    float: left;
}
.text_box1{
    width:100%;
    top: 0px;
    left: 0px;
    right: 0px;
    position: absolute;
    background-color: #f08080;
    opacity: 0.9;
    height:0;
    transition:.5s ease;
    overflow: hidden;
}
.text_box1 h1{
    position: absolute;
    color:#fff;
    text-align: center;
    top: 30%;
    left: 40%;
    font-family: 'Montserrat';
}
.text_box1 p{
    position: absolute;
    color: #fff;
    text-align: center;
    top: 50%;
    left: 30%;
    font-family: 'Muli', 'Arial', 'sans-serif';
}
.img1:hover .text_box1{
    height: 100%;
}


.img2{
    height:336.75px;
    width:449px;
    position: relative;
    float: left;
}
.img2 img{
    height:336.75px;
    width:100%;
    float: left;
}
.text_box2{
    width:100%;
    top: 0px;
    left: 0px;
    right: 0px;
    position: absolute;
    background-color: #f08080;
    opacity: 0.9;
    height:0;
    transition:.5s ease;
    overflow: hidden;
}
.text_box2 h1{
    position: absolute;
    color:#fff;
    text-align: center;
    top: 30%;
    left: 30%;
    font-family: 'Montserrat';
}
.text_box2 p{
    position: absolute;
    color: #fff;
    text-align: center;
    top: 50%;
    left: 30%;
    font-family: 'Muli', 'Arial', 'sans-serif';
}
.img2:hover .text_box2{
    height: 100%;
}


.img3{
    height:336.75px;
    width:449px;
    position: relative;
    float: left;
}
.img3 img{
    height:336.75px;
    width:100%;
    float: left;
}
.text_box3{
    width:100%;
    top: 0px;
    left: 0px;
    right: 0px;
    position: absolute;
    background-color: #f08080;
    opacity: 0.9;
    height:0;
    transition:.5s ease;
    overflow: hidden;
}
.text_box3 h1{
    position: absolute;
    color:#fff;
    text-align: center;
    top: 30%;
    left: 30%;
    font-family: 'Montserrat';
}
.text_box3 p{
    position: absolute;
    color: #fff;
    text-align: center;
    top: 50%;
    left: 30%;
    font-family: 'Muli', 'Arial', 'sans-serif';
}
.img3:hover .text_box3{
    height: 100%;
}


.img4{
    height:336.75px;
    width:449px;
    position: relative;
    float: left;
}
.img4 img{
    height:336.75px;
    width:100%;
    float: left;
}
.text_box4{
    width:100%;
    top: 0px;
    left: 0px;
    right: 0px;
    position: absolute;
    background-color: #f08080;
    opacity: 0.9;
    height:0;
    transition:.5s ease;
    overflow: hidden;
}
.text_box4 h1{
    position: absolute;
    color:#fff;
    text-align: center;
    top: 30%;
    left: 25%;
    font-family: 'Montserrat';
}
.text_box4 p{
    position: absolute;
    color: #fff;
    text-align: center;
    top: 50%;
    left: 30%;
    font-family: 'Muli', 'Arial', 'sans-serif';
}
.img4:hover .text_box4{
    height: 100%;
}


.img5{
    height:336.75px;
    width:449px;
    position: relative;
    float: left;
}
.img5 img{
    height:336.75px;
    width:100%;
    float: left;
}
.text_box5{
    width:100%;
    top: 0px;
    left: 0px;
    right: 0px;
    position: absolute;
    background-color: #f08080;
    opacity: 0.9;
    height:0;
    transition:.5s ease;
    overflow: hidden;
}
.text_box5 h1{
    position: absolute;
    color:#fff;
    text-align: center;
    top: 30%;
    left: 40%;
    font-family: 'Montserrat';
}
.text_box5 p{
    position: absolute;
    color: #fff;
    text-align: center;
    top: 50%;
    left: 30%;
    font-family: 'Muli', 'Arial', 'sans-serif';
}
.img5:hover .text_box5{
    height: 100%;
}

.services{
    width: 100%;
    height:250px;
    display: table;
    background-size: cover;
    background-position: center;
}
.services h1{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-family: 'Muli', 'Arial', 'sans-serif';
    font-weight: bold;
    font-size:50px;
}

.services_box{
    width:100%;
    height:700px;
}

.services_box .box7{
    height:250px;
    width:350px;
    margin: 30px;
    margin-left: 65px;
    float: left;
}

.services_box .box7 i{

    font-weight: bold;
    font-size: 70px;
    margin-left:150px;
    color: #fe4e4e;
}
.services_box .box7 h1{
    color: #000;
    font-family: 'Montserrat';
    font-size: 15px;
    text-align: center;
}
.services_box .box7 p{
    font-family: 'Roboto', sans-serif;
    text-align: center;
}





.services_box .box8{
    height:250px;
    width:350px;
    margin: 30px;
    margin-left: 65px;
    float: left;
}

.services_box .box8 i{

    font-weight: bold;
    font-size: 70px;
    margin-left:150px;
    color: #fe4e4e;
}
.services_box .box8 h1{
    color: #000;
    font-family: 'Montserrat';
    font-size: 15px;
    text-align: center;
}
.services_box .box8 p{
    font-family: 'Roboto', sans-serif;
    text-align: center;
}




.services_box .box9{
    height:250px;
    width:350px;
    margin: 30px;
    margin-left: 65px;
    float: left;
}

.services_box .box9 i{

    font-weight: bold;
    font-size: 70px;
    margin-left:150px;
    color: #fe4e4e;
}
.services_box .box9 h1{
    color: #000;
    font-family: 'Montserrat';
    font-size: 15px;
    text-align: center;
}
.services_box .box9 p{
    font-family: 'Roboto', sans-serif;
    text-align: center;
}





.services_box .box10{
    height:250px;
    width:350px;
    margin: 30px;
    margin-left: 65px;
    float: left;
}

.services_box .box10 i{

    font-weight: bold;
    font-size: 70px;
    margin-left:150px;
    color: #fe4e4e;
}
.services_box .box10 h1{
    color: #000;
    font-family: 'Montserrat';
    font-size: 15px;
    text-align: center;
}
.services_box .box10 p{
    font-family: 'Roboto', sans-serif;
    text-align: center;
}





.services_box .box11{
    height:250px;
    width:350px;
    margin: 30px;
    margin-left: 65px;
    float: left;
}

.services_box .box11 i{

    font-weight: bold;
    font-size: 70px;
    margin-left:150px;
    color: #fe4e4e;
}
.services_box .box11 h1{
    color: #000;
    font-family: 'Montserrat';
    font-size: 15px;
    text-align: center;
}
.services_box .box11 p{
    font-family: 'Roboto', sans-serif;
    text-align: center;
}





.services_box .box12{
    height:250px;
    width:350px;
    margin: 30px;
    margin-left: 65px;
    float: left;
}

.services_box .box12 i{

    font-weight: bold;
    font-size: 70px;
    margin-left:150px;
    color: #fe4e4e;
}
.services_box .box12 h1{
    color: #000;
    font-family: 'Montserrat';
    font-size: 15px;
    text-align: center;
}
.services_box .box12 p{
    font-family: 'Roboto', sans-serif;
    text-align: center;
}

.banner{
    width: 100%;
    height:450px;
}

.banner img{
    width: 100%;
    height:450px;
    position: absolute;
}

.banner .box13{
    height: 250px;
    width: 250px;
    margin: 30px;
    margin-left: 125px;
    float: left;
    margin-top: 91px;
    background-color:transparent;
}
.banner .box13 h1{
    text-align:center;
    color: #000;
    font-family: 'Montserrat';
    font-weight: bold;
    font-size: 55px;
    opacity: 0.9;
}
.banner .box13 h2{
    text-align: center;
    color: #000;
    font-family: 'Montserrat';
    font-weight: bold;
    font-size: 15px;
    margin-top:-30px;
    opacity: 0.9;
}
.banner .box13 hr{
    opacity: 0.9;
}
.banner .box13 p{
    text-align: center;
    color: #000;
    font-family: 'Montserrat';
    font-weight: bold;
    font-size: 15px;
    margin-top:30px;
    opacity: 0.9;
}


.banner .box14{
    height: 250px;
    width: 250px;
    margin: 30px;
    margin-left: 125px;
    float: left;
    margin-top: 91px;
    background-color:transparent;
}
.banner .box14 h1{
    text-align:center;
    color: #000;
    font-family: 'Montserrat';
    font-weight: bold;
    font-size: 55px;
    opacity: 0.9;
}
.banner .box14 h2{
    text-align: center;
    color: #000;
    font-family: 'Montserrat';
    font-weight: bold;
    font-size: 15px;
    margin-top:-30px;
    opacity: 0.9;
}
.banner .box14 hr{
    opacity: 0.9;
}
.banner .box14 p{
    text-align: center;
    color: #000;
    font-family: 'Montserrat';
    font-weight: bold;
    font-size: 15px;
    margin-top:30px;
    opacity: 0.9;
}


.banner .box15{
    height: 250px;
    width: 250px;
    margin: 30px;
    margin-left: 125px;
    float: left;
    margin-top: 91px;
    background-color:transparent;
}
.banner .box15 h1{
    text-align:center;
    color: #000;
    font-family: 'Montserrat';
    font-weight: bold;
    font-size: 55px;
    opacity: 0.9;
}
.banner .box15 h2{
    text-align: center;
    color: #000;
    font-family: 'Montserrat';
    font-weight: bold;
    font-size: 15px;
    margin-top:-30px;
    opacity: 0.9;
}
.banner .box15 hr{
    opacity: 0.9;
}
.banner .box15 p{
    text-align: center;
    color: #000;
    font-family: 'Montserrat';
    font-weight: bold;
    font-size: 15px;
    margin-top:30px;
    opacity: 0.9;
}

.clients{
    width: 100%;
    height:250px;
    display: table;
    background-size: cover;
    background-position: center;
}
.clients h1{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-family: 'Muli', 'Arial', 'sans-serif';
    font-weight: bold;
    font-size: 40px;
}

.client_img{
    width: 770px;
    height: 600px;
    margin-top:-95px;
    position: relative;
    margin-left:auto;
    margin-right:auto;
}
.client_img img{
    top: 10px;
    right:350px;
    position: absolute;
    border-radius:50%;
}

.client_img .text1{
    width: 700px;
    height:250px;
    position: absolute;
    top: 80px;
    left: 50px;
    right: 50px;
    bottom: 50px;
}

.client_img .text1 p{
    position: absolute;
    top: 30px;
    left: 50px;
    right:50px;
    bottom: 50px;
    font-family: 'Muli', 'Arial', 'sans-serif';
    line-height: 35px;
    opacity: 0.9;
    font-size: 20px;
    text-align: center;
}

.client_img h1{
    position: absolute;
    top:250px;
    left: 50px;
    right:50px;
    bottom:50px;
    font-family: 'Montserrat';
    text-align: center;
    font-size: 15px;
    margin: 40px;
    opacity: 0.9;
}

.client_img h2{
    position: absolute;
    top: 290px;
    left: 50px;
    right: 50px;
    bottom: 50px;
    font-family: 'Muli', 'Arial', 'sans-serif';
    text-align: center;
    font-size: 15px;
    color: #fe4e4e;
    margin-top: 30px;
    opacity: 0.7;
}

.contactus{
    background-image: url(img/footer-bg.jpg);
    width:100%;
    height:450px;
}

.contactus .box16{
    height:250px;
    width: 350px;
    margin: 30px;
    margin-left: 65px;
    margin-top: 100px;
    float: left;
}
.contactus .box16 .circle{
    height:60px;
    width: 60px;
    border-radius:50%;
    margin-left:150px;
    margin-top: 10px;
    background-color: #fe4e4e;
}
.contactus .box16 i{
    font-weight: bold;
    font-size: 40px;
    margin-left: 10px;
    color: #ffffff;
    line-height: 95px;
    margin-top: -15px;
}
.contactus .box16 h1{
    color: #39393a;
    font-family: 'Muli', 'Arial', 'sans-serif';
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    line-height: 45px;
}

.contactus .box16 p{
    font-family: 'Muli', 'Arial', 'sans-serif';
    text-align: center;
    color: #39393a;
    line-height:26px;
}

/*  */

.contactus .box17{
    height:250px;
    width: 350px;
    margin: 30px;
    margin-left: 65px;
    margin-top: 100px;
    float: left;
}
.contactus .box17 .circle{
    height:60px;
    width: 60px;
    border-radius:50%;
    margin-left:150px;
    margin-top: 10px;
    background-color: #fe4e4e;
}
.contactus .box17 i{
    font-weight: bold;
    font-size: 40px;
    margin-left: 10px;
    color: #ffffff;
    line-height: 95px;
    margin-top: -15px;
}
.contactus .box17 h1{
    color: #39393a;
    font-family: 'Muli', 'Arial', 'sans-serif';
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    line-height: 45px;
}

.contactus .box17 p{
    font-family: 'Muli', 'Arial', 'sans-serif';
    text-align: center;
    color: #39393a;
    line-height:26px;
}

/*  */
.contactus .box18{
    height:250px;
    width: 350px;
    margin: 30px;
    margin-left: 65px;
    margin-top: 100px;
    float: left;
}
.contactus .box18 .circle{
    height:60px;
    width: 60px;
    border-radius:50%;
    margin-left:150px;
    margin-top: 10px;
    background-color: #fe4e4e;
}
.contactus .box18 i{
    font-weight: bold;
    font-size: 40px;
    margin-left: 15px;
    color: #ffffff;
    line-height: 95px;
    margin-top: -15px;
}
.contactus .box18 h1{
    color: #39393a;
    font-family: 'Muli', 'Arial', 'sans-serif';
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    line-height: 45px;
}

.contactus .box18 p{
    font-family: 'Muli', 'Arial', 'sans-serif';
    text-align: center;
    color: #39393a;
    line-height:26px;
}


.instagram{
    width:100%;
    height:50px;
    display: table;
    background-size: cover;
    background-position: center;
}
.instagram h1{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    font-family: 'Montserrat';
    font-size: 15px;
}


/* /footer_img */

.footer_img{
    background-color: lightblue;
    width: 100%;
    height: 110px;
    display: flex;
}
.footer_img .box{
    position: relative;
    width: 100%;
    height:110px;
    background-color:yellow;
    margin: 0px;
    box-sizing: border-box;
    display: inline-block;
}
.footer_img .box .imgBox{
    position: relative;
    overflow: hidden;
}
.footer_img .box .imgBox img{
    width: 100%;
    height:110px;
    transition: transform 2s;
    overflow: hidden;

}
.footer_img .box:hover .imgBox img{
    transform: scaleX(1.2);
}

.links{
    width: 100%;
    height: 350px;
}

.links h1{
    font-family: 'Montserrat';
    font-weight: bold;
    font-size: 15px;
    position: relative;
    top:20px;
    left: 90px;
    right:50px;
}
.links .box{
    height:250px;
    width:350px;
    margin: 30px;
    margin-left: 495px;
    margin-top: 100px;
    position: absolute;
}
.links .box img{
    position: absolute;
    left: 119px;
    top: 50px;
    right: 50px;
}
.links .box button{
    height:27px;
    width:25px;
    margin: 7px;
    margin-bottom: -20px;
    background-color: transparent;
    text-align: left;
    color: #000;
    margin-top: 100px;
    margin-left: 30px;
    border:0px;
    font-size: 25px;
    
}
.links .box button:hover{
    color: #fe4e4e;
}