how to create a website using HTML and CSS | simple website using HTML and CSS with source code

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

- Responsive Website
January 17, 2023
1 Views

how to create a website using HTML and CSS | simple website using HTML and CSS with source code

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>
        <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>
        <h1>hi there!</h1>
        <p>We'r Korel. Amazing colorful<br />WordPress theme</p>
<br /><br /><br /><br />
<!-- main -->
            <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>
    <img decoding="async" src="img/team1.jpg" alt="" width="335" height="339.89">
    <h1>Manuel Vanel</h1>
    <p>CEO</p>
    <img decoding="async" src="img/team4.jpg" alt="" width="335" height="339.89">
    <h1>Lunada Carlos</h1>
    <p>DESIGNER</p>
    <img decoding="async" src="img/team3.jpg" alt="" width="335" height="339.89">
    <h1>Naina Soraia</h1>
    <p>CTO</p>
    <img decoding="async" src="img/team2.jpg" alt="" width="335" height="339.89">
    <h1>Lisa Bey</h1>
    <p>DESIGNER</p>
<br /><br /><br />
<!-- pagetitle -->
        <h3>We Design<br />
            Creative Digital<br />
            Products
        </h3>
        <button>PURCHASE KORAL NOW</button>
<br /><br /><br /><br />
<!-- box -->
        <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>
        <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>
        <h1>Our Skills</h1>
                <h1>Development</h1>
                <p>95%</p>
        <br />
                <h1>Design</h1>
                <p>85%</p>
        <br />
                <h1>Marketing</h1>
                <p>70%</p>
        <br />
                <h1>Consulting</h1>
                <p>65%</p>
<!-- illustration -->
    <h1>We do Illustrations</h1>
<!-- BoxImg -->
        <img decoding="async" src="img/project01.jpg" alt="">
            <h1>Spactrum</h1>
            <p>Photograpy / Photoshop</p>
        <img decoding="async" src="img/project04.jpg" alt="">
            <h1>Coral</h1>
            <p>Photograpy / Photoshop</p>
        <img decoding="async" src="img/project06.jpg" alt="">
            <h1>Pretty in Pink</h1>
            <p>Photograpy / Photoshop</p>
        <img decoding="async" src="img/project07.jpg" alt="">
            <h1>Dragon Fruit</h1>
            <p>Photograpy / Photoshop</p>
        <img decoding="async" src="img/project08.jpg" alt="">
            <h1>IPhone X Wallpaper</h1>
            <p>Photograpy / Photoshop</p>
        <img decoding="async" src="img/project03.jpg" alt="">
            <h1>Concert</h1>
            <p>Photograpy / Photoshop</p>
<!-- services -->
    <h1>Our Services</h1>
        <h1>RESPONSIVE DESIGN</h1>
        <p>Flexible strategic theme areas through redefine <br />team driven human resource</p>
        <h1>VISUAL PAGE BUILDER</h1>
        <p>Flexible strategic theme areas through redefine <br />team driven human resource</p>
        <h1>UPPER TEMPLATES</h1>
        <p>Flexible strategic theme areas through redefine <br />team driven human resource</p>
        <h1>FREE SUPPORT</h1>
        <p>Flexible strategic theme areas through redefine <br />team driven human resource</p>
        <h1>ADMIN PANEL</h1>
        <p>Flexible strategic theme areas through redefine <br />team driven human resource</p>
        <h1>UNLIMITED PORTFOLIOS</h1>
        <p>Flexible strategic theme areas through redefine <br />team driven human resource</p>
     <img decoding="async" src="img/graphics8.jpg" alt="">
         <h1>1,250</h1>
         <h2>PROJECT</h2>
         <hr />
         <p>lorem ipsum dolor mauris</p>
        <h1>500</h1>
        <h2>CLIENTS</h2>
        <hr />
        <p>lorem ipsum dolor mauris</p>
        <h1>350</h1>
        <h2>AWARDS</h2>
        <hr />
        <p>lorem ipsum dolor mauris</p>
<!-- clients -->
    <h1>Our Clients</h1>
    <img decoding="async" src="img/team1.jpg" alt="" height="69px" width="69px">
        <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>
    <h1>Jack Shaperd</h1>
    <h2>Upper</h2>
<!-- contact us -->
            <h1>CALL US</h1>
            <p>PT (+351) 729 133 194<br />
               AU (+18) 833 841 442</p>
            <h1>EMAIL US</h1>
            <p>marketing@example.com<br />
                hello@example.com</p>
                <h1>OUR HOME</h1>
                <p>PO Box 16122 Collins Street West<br />
                    Victoria 8007 Australia</p>
                <h1>INSTAGRAM @UPPER</h1>
    <!-- footer img -->
            <img decoding="async" src="img/project04.jpg" alt="">
            <img decoding="async" src="img/project03.jpg" alt="">
            <img decoding="async" src="img/project06.jpg" alt="">
            <img decoding="async" src="img/project07.jpg" alt="">
            <img decoding="async" src="img/project08.jpg" alt="">
            <img decoding="async" src="img/project04.jpg" alt="">
            <img decoding="async" src="img/project01.jpg" alt="">
            <img decoding="async" src="img/project03.jpg" alt="">
            <img decoding="async" src="img/project08.jpg" alt="">
            <img decoding="async" src="img/project04.jpg" alt="">
            <img decoding="async" src="img/project06.jpg" alt="">
<!-- links -->
         <img decoding="async" src="img/logo-koral@2x.png" alt="" height="37" width="111">
         <button></button>
         <button></button>
         <button></button>
         <button></button>
         <button></button>
         <h1>koral © 2022 by dailywebdesign</h1>
</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;
}