index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://unpkg.com/sheryjs/dist/Shery.css" />
  <link rel="shortcut icon" href="https://parspng.com/wp-content/uploads/2022/10/rolexpng.parspng.com-2.png">
  <title>Rolex | Watches</title>
</head>

<body>
     <div id="main">
<div id="nav">
        <div id="nav-1">
            <h2>Menu<i class="ri-menu-3-line"></i></h2>
            <div id="nav-2">
              <img id="nav-img" src="https://parspng.com/wp-content/uploads/2022/10/rolexpng.parspng.com-2.png" alt="">
                <h1 id="heading">Rolex</h1>
                <div id="nav-3">



                    </div>
                </div>
            </div>
        </div>
    </div>
     <video class="centervid" playsinline autoplay loop muted  > 
        <source src="rolex.webm" type="video/webm">
     </video> 

     <h2 id="text">   Explore the Rolex collection </h2>
     <h2 id="text2">  The Rolex collection offers a wide range of prestigious, high-precision <br> timepieces, from Professional to Classic models to suit any wrist.</h2>

     <img id="top1" src="https://media.rolex.com/image/upload/v1710347640/rolexcom/new-watches/2024/main-navigation/rolex-watches-navigation-submariner-m124060-0001-10156_rsa_submariner_41_m124060_0001_carrousel_24.jpg">
     <div class="container">
     <div class="bottom-left">submariner</div>
     <div class="bottom-left2">The supreme diver's watch</div>
    </div>

    <div class="container2">
      <div class="bottom-left3">Day-Date</div>
      <div class="bottom-left4">More Day- More Date</div>
     <img id="top2" src="https://media.rolex.com/image/upload/v1710347632/rolexcom/new-watches/2024/main-navigation/rolex-watches-navigation-day-date-m228235-0055-10150_rsa_cad24_everose_carrousel_24.jpg">
    </div>

    <div class="container3">
      <div class="bottom-left5">DeepSea</div>
      <div class="bottom-left6">Defying the impossible</div>
     <img id="top3" src="https://assets.gqindia.com/photos/5cdc6fd78e62998473f380af/16:9/w_1920,c_limit/rolex-deep-sea-dive.jpg">
    </div>

    <div class="container4">
      <div class="bottom-left7">GMT-Master</div>
      <div class="bottom-left8">two time-zones, two-colours, uniquely iconic</div>
     <img id="top4" src="https://images.ctfassets.net/a9wd67qru8w4/21YOkg5kNRCvUgRotuh2nd/e802b177e908084432e9cb34c2f9c33a/GMT-steel.jpg?fm=jpg&w=1130&q=100&fl=progressive">
    </div>
   
    <!-- <img id="fun"  src="https://data.textstudio.com/output/sample/animated/9/3/6/5/reality-1-5639.gif" alt="reality">
    <br>
    <img id="fun2" src="https://encrypted-tbn2.gstatic.com/shopping?q=tbn:ANd9GcTSFyB5-lElU2V297V42lL9xuvz9VwFIZ5gB4WvDaI2Q7kzpl2wLJ9rTEI9-MfyBZ-I_Zo4GDOrOx1bKONiVEH05OfK0-Jn8HQ3DgLaU1ZllZrnisKjx5S5" alt="ben 10|doreamon">
  
    <h3 id="fun3">Fun(❌) Real fact we cannot even {sell} <br> this 100rupees Watches leave That rolex's </h3> -->

    <h4 id="footer">
        any rights ( NOT ) reserved copyraight@ Rolex.com
        <br> 
        email :- aayuXX@XXXXXX.com
        <br>
         phone :- 91+ 902XXXXXXX
        <br>
        </div>

</div>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/TextPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script  type="text/javascript"  src="https://unpkg.com/sheryjs/dist/Shery.js"></script>
<script src="./script.js"></script>

</body>
</html>