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>Discord | Your Place to Talk and Hang Out</title>
    <link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Nav Section -->
    <div class="bg-[#404EED] 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>

    <!--Hero Section-->
    <section class="bg-[#404EED] w-full min-h-[550px] relative overflow-x-hidden">
        <!--images-->
        <img src="./images/Image0.svg" alt=""
        class="hidden xl:block z-10 absolute bottom-0 top-auto scale-x-125">
        <img src="./images/Image1.svg" alt=""
        class="hidden xl:block z-10 absolute bottom-0  -right-[15%]">
        <img src="./images/Image2.svg" alt=""
        class="hidden xl:block absolute z-10 bottom-0 -left-[17%]">

        <!--main Content-->
        <div class="relative container xl:px-0 w-full max-w-[780px] mx-auto text-center 
        flex flex-col xl:h-[555px] gap-5 text-[#fff] pt-[50px] xl:pt-[120px]">
            
            <h1 class="font-[800] xl:text-center md:text-[56px] z-20 text-[55px] font-['GintoNord'] ">
                IMAGINE A PLACE...</h1>
            <p class="font-[380] text-[19px] text-center md:leading-[32.5px]  leading-[32px] font-['gg sans'] gap-x-1
              z-20 xl:self-center">
                ...where you can belong to a school club, a gaming group, or a worldwide art community. Where just you and a handful of friends can spend time together. A place that makes it easy to talk every day and hang out more often.</p>


            <!--For Buttons-->
            <div class="hidden xl:flex flex-row item-center justify-center gap-10 font-[500] z-20 pt-2">
                <a href="#" class="bg-white text-black p-4 px-10 rounded-full hover:text-[#404EED] hover:shadow-2xl ">
                    <p>
                      <i class="fa-solid fa-download mr-2"></i>
                      Download for Windows
                    </p>
                  </a>
                  <a href="#" class="bg-[#23272a] text-center text-white p-4 px-10 rounded-full hover:bg-opacity-95 hover:shadow-2xl">
                    <p>
                      Open Discord In your Browser
                    </p>
                  </a>
            </div>
        </div>
    </section>

    <!--Section 1-->
    <section class="relative bg-white w-full overflow-x-hidden lg:py-8  lg:mb-4 px-7 py-14">
        <div class="max-w-[1200px] mx-auto flex flex-col justify-between px-7 item-center md:py-36 md:flex-row md:px-0">
            <img src="./images/section1Image.svg" alt=""
            class="md:w-[50%]">

            <div class="w-[80%] mx-auto md:ml-16 md:pl-6 mt-14 xl:w-[60%]">
                <h1 class="font-[700] text-[47px] font-['ggSans'] text-slate-900 leading-[54px] 
                md:leading-[57.6px]  md:text-[48px] sm:text-[28px] md:mt-0">
                    Create an invite-only place where you belong</h1>
                <p class="font-['ggSans'] text-[16px] sm:text-[20px] font-[400] mt-[24px] ">
                    Discord servers are organized into topic-based channels where you can collaborate, share, and just talk about your day without clogging up a group chat.</p>
            </div>
        </div>
    </section>

   <!--section 2-->
    <section class="w-full  bg-[#f6f6f6] ">
        <div class="flex  flex-col md:flex-row max-w-[1200px] py-10 md:py-36
         mx-auto justify-between item-center px-7 md:px-0 lg:mb-10 ">
            <!--left secion-->
            <div class="lg:w-[31%] flex flex-col item-center justify-center w-[80%] mx-auto mt-12">
                <h1 class="font-[700] text-[47px] font-['ggSans']  text-slate-900 leading-[54px]  md:mt-0">
                    Where hanging out is easy</h1>
                <p class="font-['ggSans'] text-[16px] sm:text-[20px] font-[400] mt-[24px]">
                    Grab a seat in a voice channel when you’re free. Friends in your server can see you’re around and instantly pop in to talk without having to call.</p>
            </div>

            <!--Right Section-->
            <img src="./images/section2Image.svg" alt=""
            class="pt-12">
        </div>
    </section>

    <!--section 3-->
    <section class="relative bg-white w-full overflow-x-hidden lg:py-20 lg:mb-12 px-7 py-14">
        <div class="max-w-[1200px] mx-auto flex flex-col md:flex-row justify-between px-7 py-6 item-center">
            <img src="./images/section3Image.svg" alt="">

            <div class="w-[80%] mx-auto md:ml-16 md:pl-6 mt-14">
                <h1 class="font-[700] text-[47px] font-['ggSans'] text-slate-900 leading-[54px]  md:mt-0">
                    From few to a fandom</h1>
                <p class="font-['ggSans'] text-[16px] sm:text-[20px] font-[400] mt-[24px] ">
                    Get any community running with moderation tools and custom member access. Give members special powers, set up private channels, and more.</p>
            </div>
        </div>
    </section>

    <!--section 4-->
    <section class="w-full  bg-[#f6f6f6] py-20">
        <div class="flex flex-col justify-between item-center max-w-[1200px] mx-auto px-7">
            <!--left section-->
            <div class="max-w-[1000px] mx-auto gap-y-4 flex flex-col justify-between">
                <h1 class="font-[650] text-[40px] font-['GintoNord'] text-center text-slate-800">
                    RELIABLE TECH FOR STAYING CLOSE</h1>
                <p class="font-[380] text-[19px] text-center leading-[32px] font-['gg sans'] gap-x-1">
                    Low-latency voice and video feels like you’re in the same room. Wave hello over video, watch friends stream their games, or gather up and have a drawing session with screen share.
                </p>
            </div>

            <!--Right section-->
            <div class="pb-10">
                <img src="./images/section4Image.svg" alt=""
                class="w-full">
            </div>

            <!--for buttons-->
            <div class="text-[32px] font-['ggSans'] font-[700] relative w-[100%] flex flex-col items-center gap-[40px]">
                <img src="./images/section5Image.svg" class="md:block hidden absolute top-0" alt="" />
                <h1 class="md:text-center pt-[30px] leading-[38px]">
                    Ready to start your journey?</h1>
                <a class="bg-[#404EED] hidden md:block w-fit text-white text-[20px] 
                font-[500] font-['ggSans'] px-[32px] py-[16px] rounded-full hover:bg-opacity-80 hover:shadow-2xl cursor-pointer">
                 <i class="fa-solid fa-download mr-2"></i>
                 Download for Windows
                </a>
            </div>
           
        </div>
    </section>

    <!--Footer 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>