index.html

<!-- @author Emre Kavak
05/12/2022
Home Page
 -->
 <!DOCTYPE html>
 <html lang="en">
     <head class="hm-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"> <!--mobile suits content-->
         <link rel="shortcut icon" type="image/x-icon" href="img/logo.png">
         <link rel="stylesheet" href="style.css" />
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Navbar icon -->
     </head>
     <body class="hm-body">  <!-- which wrap all the content -->
          <nav class="hm-nav"> <!-- this will go to all the pages -->
             <div class="hm-container">
                 <h1 class="hm-logo"><a class="hm-a" href="index.html">KometCare</a></h1>
                 <ul class="hm-ul">
                     <li><a href="index.html" class="hm-a current">Home</a></li> <!--(EmresPage)current class is used to higlight the content it will change in every page -->
                     <li><a href="aboutus.html" class="hm-a">About</a></li> <!--(IrenesPAge)-->
                     <li><a href="eligibility-requirement.html" class="hm-a">Eligibility Requirement</a></li> <!--(JinniesPage)-->
                     <li><a href="VisaRequirements.html" class="hm-a">VISA Requirement</a></li> <!--(EmresPage) -->
                     <li><a href="generalInfo.html" class="hm-a">General Information</a></li> <!--(MisosPage)-->
                     <li><a href="employment.html" class="hm-a">Employment</a></li> <!--(JinniesPage)-->
                     <li><a href="salaryDetail.html" class="hm-a">Salary Details</a></li> <!--(MisosPage)-->
                     <li><a href="contactus.html" class="hm-a">Contact</a></li> <!--(IrenesPAge)-->
                     <li><a href="javascript:void(0);" class="hm-icon" onclick="hmopennav()"> <!--When it's cliked it will display the nav bar-->
                         <i class="fa fa-bars"></i>
                       </a>
                     </li>
                 </ul>
             </div>
         </nav> 
 
         <div class="hm-hero">
             <div class="hm-container">
                 <h1 class="hm-h1">Welcome to KometCare</h1>
             </div>
         </div>

         <div class="hm-pcontainer">  <!--to wrap all the images and give the flexibilty in the container-->
            <div class="hm-panel active" style="background-image: url(/img/sl-image9.jpg);"></div>
            <div class="hm-panel" style="background-image: url(/img/visareq.webp)"></div>
            <div class="hm-panel" style="background-image: url(/img/sl-image5.jpg);"></div>
            <div class="hm-panel" style="background-image: url(/img/sl-image6.jpg);"></div>
            <div class="hm-panel" style="background-image: url(/img/sl-image8.jpg);"></div>
            <div class="hm-panel" style="background-image: url(/img/graffiti-on-the-wall.jpg);"></div>
            <div class="hm-panel" style="background-image: url(/img/bg-eligibility.jpg)"></div>
         </div>
 
         <script src="js/script.js"></script>
     </body>
 </html>
 