main.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>Exercise and Plans</title>
    <link rel="stylesheet" href="main.css" />
    <link rel="stylesheet" href="footer.css" />
    <link rel="stylesheet" href="sandy_navbar.css" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
    />
    <style>
      #exercise {
        width: 1140px;
        margin: auto;
        margin-top: 70px;
        /* z-index: 1; */
      }
      #exercise > h1 {
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 36px;
        font-weight: 500;
        padding-bottom: 20px;
        border-bottom: 1px solid rgb(238, 231, 231);
      }
      #picture {
        width: 1140px;
        margin: auto;
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(3, 364.8px);
        grid-template-rows: repeat(3, 310.25px);
        gap: 10px;
        z-index: 1;
      }
      #picture > div {
        z-index: 1;
        position: relative;
      }
      #picture img {
        display: block;
        width: 100%;
        height: 100%;
      }
      .smallDiv {
        background-color: rgba(4, 4, 4, 0.6);
        color: white;
        position: relative;
        top: -40px;
        height: 40px;
        display: grid;
        justify-content: center;
        align-items: center;
        z-index: 3;
      }
      .smallDiv > h2 {
        font-size: 20px;
        font-weight: 300;
      }

      .smallDiv:hover {
        background-color: rgba(0, 123, 174, 0.7);
        position: relative;
        top: -60px;
        height: 60px;
        cursor: pointer; 
      }
      #total {
        width: 1140px;
        margin: auto;
      }
      .mainDiv {
        display: flex;
      }
      .div1 , .div2{
        border:1px solid rgb(224, 213, 213);
      }
      .div1{
        width:117px;
        height:57px;
        display: grid;
        justify-content: center;
        align-items: center;
      }
      .img{
        display: block;
        height:48px;
        width:48px;
        margin:0px 26px;
      }
      .div2{
          width:992px;
          height:57px;
          display: grid;
         justify-content: flex-start;
         align-items: center;
          padding: 10px;
       
      }
      .h3{
        color: #428bca;
        font-size: 15px;
        font-weight: 700;
      }
      .h31{
        font-size: 15px;
        font-weight: 500;
        width:650px;
        height:20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: rgb(85, 82, 82);
      }
      .h1{
          font-size: 30px;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-weight:500;
          margin-top: 30px;
          margin-bottom: 10px;
      }
      #triceps{
        margin-bottom: 80px;
      }
      .ap{
        color: #ffffff;
      }
      
    </style>
  </head>
  <body>
    <nav id="nav">
      <div id="one_div">
        <a href="sandy.html"><img id="logo_gymwolf" src="https://www.gymwolf.com/img/gymwolf.png" alt=""></a>
       </div>
       <div id="two_div">
         <div ><a class="ap" href="progress.html" >Progress</a></div>
         <div><a class="ap" href="">Calculators</a></div>
         <div><a class="ap" href="main.html">Exercise and plans</a></div>
         <div><a class="ap" href="my_trainer.html">My personal trainer</a></div>
         <div><a class="ap" href=""><i class="fa-solid fa-comments"></i></a></div>
         <div><p class="ap" id="baljor">Sign In</p></div>
         <div><a class="ap" href=""><i class="fa-solid fa-magnifying-glass"></i></a></div>
       </div>
       <div id="three_div"></div>
    </nav>
    <!-- <div id="mainDiv"></div> -->
    <!-- <div id="list"></div> -->
    <div id="exercise"><h1>Exercise List</h1></div>
    <div id="picture"></div>
    <div>
      <div id="total">
      <h1 class="h1">Abdominal</h1>
      <div id="abdominal"></div>
      <h1 class="h1">Back</h1>
      <div id="back"></div>
      <h1 class="h1">Biceps</h1>
      <div id="biceps"></div>
      <h1 class="h1">Chest</h1>
      <div id="chest"></div>
      <h1 class="h1">Combined</h1>
      <div id="combined"></div>
      <h1 class="h1">Legs</h1>
      <div id="legs"></div>
      <h1 class="h1">Shoulder</h1>
      <div id="shoulder"></div>
      <h1 class="h1">Triceps</h1>
      <div id="triceps"></div>
    </div>
    <div id="footer-top"><div id="footer">
      <div>
          <p class="top">ABOUT</p>
          <p class="below"><a  href="https://www.gymwolf.com/about">About us</a></p>
          <p class="below"><a  href="">Contact</a></p>
      </div>
  
      <div>
          <p class="top">LEGAL</p>
          <p class="below"><a href="https://www.gymwolf.com/tos">Terms of Service</a></p>
          <p class="below"><a  href="">Privacy</a></p>
          <p class="below"><a  href="">Pricing</a></p>
      </div>
  
      <div>
          <p class="top">Get the app</p>
          <div><a href="https://play.google.com/store/apps/details?id=com.mooncascade.gymwolf"><img id="gapp" src="https://www.rdsdelivery.com/wp-content/uploads/2016/11/get-it-on-google-play-icon-logo-e1486678715107-300x105.png.webp" alt=""></a></div>
          <div><a href="https://apps.apple.com/us/app/gymwolf/id1228119580"><img id="aapp" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Available_on_the_App_Store_%28black%29_SVG.svg/203px-Available_on_the_App_Store_%28black%29_SVG.svg.png?20130522010834" alt=""></a> </div>
          
         
      </div>
  
      <div>
          <p class="top">SOCIAL</p>
          <img src="" alt="">
      </div>
  
      <div>
          <p class="top">LANGUAGE</p>
          <p class="below"><a  href="">Eesti keeles</a></p>
      </div>
  
  
     
      
  </div>
  <hr>
  <p class="below1">Copyright © Mooncascade OÜ. All Rights Reserved. Tel: +372 5344 5686. E-mail: info@gymwolf.com</p></div>
  </body>
</html>

<script  src="main.js"></script>