HTMLify

<!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>Document</title>

    <link rel="stylesheet" href="style.css">

    <style>
        .corefeaturesection{
        background-size: 100% 100%;
        padding-top: 12rem;
        padding-bottom: 12rem;
      }
    
      .ctasection{
        background-size: 100% 100%;
      }

      .movecompany{
        animation: 10s infinite linear movecompanies;
      }
      
      @keyframes movecompanies {
        0%{
          top: 0%;
        }

        100%{
          top:-50%;
        }
      }

    </style>
</head>
<body>
    <div class="bg-[#402EED] font-ggSans pt-1 ">
        <nav class="flex  justify-between max-w-[1195px] mx-auto  h-[72px]  text-[#fff] items-center xl:px-0 px-7">
            <!--Image Section-->
            <div>
                <img src="./images/logo.svg" alt="">
            </div>
            
            <!--nav items-->
            
            <div class="hidden xl:flex gap-10  font-ggSans font-[600] text-[16px] ">
                <a href="#" class="capitalize hover:underline">Download</a>
                <a href="#" class="capitalize hover:underline">Nitro</a>
                <a href="#" class="capitalize hover:underline">Discover</a>
                <a href="#" class="capitalize hover:underline">Safety</a>
                <a href="#" class="capitalize hover:underline">Support</a>
                <a href="#" class="capitalize hover:underline">Blog</a>
                <a href="#" class="capitalize hover:underline">Careers</a>
            </div>

            <!--For buttons-->
            <div class="hidden xl:flex">
                <a href="#">
                <button class="bg-white text-[#2c2f33]  rounded-full px-4 p-2 self-center font-[500] text-[14px]"
                >Login</button>
              </div>
            </a>
        </nav>

        
    </div>

    <section class="relative font-ggSans flex flex-row">
        <div class="min-w-[230px] space-y-3 h-[680px] bg-[#404EED]">
            <a href="#" class="ml-6 items-center flex">
                <p class="text-white pt-5 font-[600] text-[16px] font-['gg sans'] ">
                    <i class="fa fa-user mr-2"></i>
                    Profile
                  </p>
            </a>
            
            <a href="#" class="pl-6 items-center flex">
                <p class="text-white pt-5 font-[600] text-[16px] font-['gg sans'] ">
                    <i class="fa fa-users mr-2"></i>
                    User
                  </p>
            </a>
            
            <a href="#" class="pl-6 flex items-center">
                <p class="text-white pt-5 font-[600] text-[16px] font-['gg sans'] ">
                    <i class="fas fa-tasks mr-2"></i>
                    Control Panel
                  </p>
            </a>
        </div>

        <!--right img-->
         <div class="w-full relative bg-gradient-to-r from-cyan-500 to-blue-500">
            <div class="w-[50%] h-full flex flex-col justify-center items-center space-y-4">
                <h1 class="font-[800] text-[45px]  text-white  font-['GintoNord'] m-4 pt-3">
                    Enhance Productivity with Employee Management System
                </h1>

                <p class="font-[380] text-[19px]  text-white text-slate-100  m-4 leading-[32px] font-['gg sans'] gap-x-1">
                    With Pocket HRMS Get Advanced Tools For Employee Management And Inspire The Best Performance In Your Staff.</p>
            
                    <!-- <a href="#" class="bg-blue-600 text-white p-2 px-5 rounded-full hover:shadow-2xl ">
                        <p>
                        
                          Learn More
                        </p>
                      </a> -->
                </div>
            <img src="./images/Website designer-amico.png" alt=""
            width="550px" class="right-0 bottom-6 absolute">

            <!-- <img src="./images/Website designer-rafiki.png" alt=""
            width="400px" class="absolute top-0 left-0"> -->

        </div>
        </div>

        <div></div>
    </section>

    <!-- <section class="relative font-ggSans flex flex-row">
        <div class="min-w-[230px] space-y-3 h-[680px] bg-[#404EED]"></div>

        <div class="w-full relative bg-white ">
            <img src="./images/sec1.jpg" alt=""
            width="700px">

            <div class="flex flex-col justify-between space-y-3">
                <h1 class="font-[800] text-[40px] font-['GintoNord'] mt-4 pt-3">
                    Employee Scheduling Made Easy</h1>
                
                <p class="font-[500] text-[19px]  leading-[32px] font-['gg sans'] gap-x-1">
                    An employee management system is a software, that helps your employees to give their best efforts every day to achieve the goals of your organization. It guides and manages employees efforts in the right direction. It also securely stores and manages personal and other work-related details for your employees. That makes it easier to store and access the data when there is a need.
                </p>
            </div>
        </div>
    </section> -->


    <section class="relative font-ggSans flex flex-row">
        <div class="min-w-[230px] space-y-3 h-[680px] bg-[#404EED]"></div>

        <div class="w-full relative bg-white ">
            <div class="flex flex-row justify-between items-center m-3 pt-8">
                <img src="./images/Digitize-Your-Pen-and-Paper-Forms-and-Checklists.png" alt=""
                width="700px">

                <div class="flex flex-col justify-between space-y-3">
                    <h1 class="font-[800] text-[40px] font-['GintoNord'] mt-4 pt-3">
                        Employee Scheduling Made Easy</h1>
                    
                    <p class="font-[500] text-[19px]  text-slate-500  leading-[32px] font-['gg sans'] gap-x-1">
                        Save more time than you can imagine by simplifying your scheduling</p>
                    <p class="font-[380] text-[17px] mt-3 pt-5 leading-[32px] font-['gg sans'] gap-x-1">
                        Schedule and dispatch shifts faster than ever! With a simple user interface & drag and drop capabilities , you’ll be able to spend less time on scheduling, and more time on growing your business.</p>
                </div>
            </div>

        </div>
    </section>

    <section class="relative font-ggSans flex flex-row">
        <div class="min-w-[230px] space-y-3 h-[680px] bg-[#404EED]"></div>

        <div class="w-full relative  bg-gradient-to-r from-cyan-500 to-blue-500 ">
            <div class="flex flex-row justify-between items-center m-3 pt-8">
                <div class="flex w-[50%] flex-col m-3 justify-between space-y-3">   
                    <h1 class="font-[800] text-[40px] text-white font-['GintoNord'] mt-4 pt-3">
                        Simple and Effective Time Tracking</h1>
                    
                    <p class="font-[500] text-[19px] text-white text-slate-300  leading-[32px] font-['gg sans'] gap-x-1">
                        Track and manage work hours on jobs and projects like never before</p>
                    <p class="font-[380] text-[17px] mt-3 pt-5 text-white leading-[32px] font-['gg sans'] gap-x-1">
                        Track your workforce time and location with a precise and easy-to-use GPS time clock, ensure employees arrive on time to the right location, simplify your payroll process, and create data-driven reports to scale your business.</p>
                </div>

                <img src="./images/Track-Time-With-The-1-Time-Clock.png" alt=""
                width="700px">
            </div>

        </div>
    </section>

    <section class="relative font-ggSans flex flex-row">
        <div class="min-w-[230px] space-y-3 h-[680px] bg-[#404EED]"></div>

        <div class="w-full relative  bg-[#f5f8fe] ">
            <div class="flex flex-row justify-between items-center m-3 pt-8">
               
                <!--right part-->
                <div class="relative w-[50%]  h-[500px] overflow-y-hidden mx-auto">
        
                    <div role="marquee" class="movecompany"></div>
                    <div style="background: linear-gradient(180deg, #f4f8ff, #fff0 );"
                    class="absolute w-full h-[150px] top-0 z-50">
            
                    </div>
                    
                    <img  src="./images/comanies.png" alt=""
                    class="absolute  h-auto object-cover movecompany">
                  
                    <div style="background: linear-gradient(0deg, #f4f8ff, #fff0 );"
                    class="absolute w-full h-[150px] bottom-0 z-50">
            
                    </div>
                </div>

                <div class="flex flex-col m-3 justify-between space-y-3">   
                    <h1 class="font-[900] text-[50px] text-center font-['GintoNord'] mt-4 pt-3">
                        Trusted By Over 36,000 Companies Worldwide
                    </h1>
                    
                </div>

                
            </div>

        </div>
    </section>

    <div class="bg-[#23272a]">

        <div class="container text-[#5865f2] max-w-[1200px] mx-auto pt-24 flex flex-col gap-10 pb-10">
          <!-- Section 1 -->
          <div class="flex xl:gap-[100px] gap-[40px] flex-col md:flex-row px-5">
            <!-- Left Section -->
            <div class="flex flex-col gap-[24px] w-[100%] md:w-[50%] xl:w-[20%]">
              <h1 class="font-[800] font-['GintoNord'] text-[32px] leading-[30.4px]">
                IMAGINE A
                <br />
                PLACE
              </h1>
              <div class="text-white text-[23px] flex gap-7">
                <a href="#">
                  <i class="fa-brands fa-twitter"></i>
                </a>
                <a href="#">
                  <i class="fa-brands fa-instagram"></i>
                </a>
                <a href="#">
                  <i class="fa-brands fa-square-facebook"></i>
                </a>
                <a href="#">
                  <i class="fa-brands fa-youtube"></i>
                </a>
              </div>
            </div>
    
            <!-- Right Section -->
            <div class="md:w-[75%] flex justify-around flex-wrap">
              <div class="w-[50%] xl:w-fit">
                <h2 class="text-[16px] font-['ggSans'] xl:py-[10px] py-[15px]">
                  Product
                </h2>
                <ul class="text-white flex flex-col gap-[10px] leading-[24px] font-[400] font-['ggSans']">
                  <li class="hover:underline"><a href="#">Download</a></li>
                  <li class="hover:underline"><a href="#">Nitro</a></li>
                  <li class="hover:underline"><a href="#">Status</a></li>
                </ul>
              </div>
    
              <div class="w-[50%] xl:w-fit">
                <h2 class="text-[16px] font-['ggSans'] xl:py-[10px] py-[15px]">
                  Company
                </h2>
                <ul class="text-white flex flex-col gap-[10px] leading-[24px] font-[400] font-['ggSans']">
                  <li class="hover:underline"><a href="#">About</a></li>
                  <li class="hover:underline"><a href="#">Jobs</a></li>
                  <li class="hover:underline"><a href="#">Branding</a></li>
                  <li class="hover:underline"><a href="#">Newsroom</a></li>
                  <li class="hover:underline text-[#1f1f1f00] select-none">
                    <a href="#">.</a>
                  </li>
                </ul>
              </div>
    
              <div class="w-[50%] xl:w-fit">
                <h2 class="text-[16px] font-['ggSans'] xl:py-[10px] py-[15px]">
                  Resources
                </h2>
                <ul class="text-white flex flex-col gap-[10px] leading-[24px] font-[400] font-['ggSans']">
                  <li class="hover:underline"><a href="#">Colleges</a></li>
                  <li class="hover:underline"><a href="#">Support</a></li>
                  <li class="hover:underline"><a href="#">Safety</a></li>
                  <li class="hover:underline"><a href="#">Blog</a></li>
                  <li class="hover:underline"><a href="#">Feedback</a></li>
                  <li class="hover:underline"><a href="#">Developers</a></li>
                  <li class="hover:underline"><a href="#">StreamKit</a></li>
                  <li class="hover:underline"><a href="#">Creators</a></li>
                </ul>
              </div>
    
              <div class="w-[50%] xl:w-fit">
                <h2 class="text-[16px] font-['ggSans'] xl:py-[10px] py-[15px]">
                  Policies
                </h2>
                <ul class="text-white flex flex-col gap-[10px] leading-[24px] font-[400] font-['ggSans']">
                  <li class="hover:underline"><a href="#">Terms</a></li>
                  <li class="hover:underline"><a href="#">Privacy</a></li>
                  <li class="hover:underline"><a href="#">Cookie Settings</a></li>
                  <li class="hover:underline"><a href="#">Guidelines</a></li>
                  <li class="hover:underline"><a href="#">Acknowledgements</a></li>
                  <li class="hover:underline"><a href="#">Licenses</a></li>
                  <li class="hover:underline"><a href="#">Moderation</a></li>
                </ul>
              </div>
            </div>
          </div>
    
          <!-- Section 2 -->
          <div class="flex border-t-2 border-[#5865f2] items-center justify-between pt-7 mx-5">
            <div class="text-white">
              <img src="./images/logo.svg" alt="logo">
            </div>
    
            <div class="xl:block hidden">
              <button
                class="text-white bg-[#5865f2] px-[16px] py-[7px] rounded-full leading-[24px] text-[14px] font-[500] hover:bg-[#5865f2]">
                Sign up
              </button>
            </div>
    
            <div class="block xl:hidden">
              <button
                class="text-white bg-[#5865f2] px-[16px] py-[7px] rounded-full leading-[24px] text-[14px] font-[500] hover:bg-[#5865f2]">
                Download
              </button>
            </div>
          </div>
        </div>
      </div>

    <script src="https://kit.fontawesome.com/58a810656e.js" crossorigin="anonymous"></script>

</body>
</html>