Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>HERCULEAN >> Blessed with Muscles</title>

  <!-- internal css -->
  <link rel="stylesheet" href="css\landing_page.css">

  <!-- fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Merriweather&family=Abril+Fatface&family=PT+Serif:ital,wght@1,700&family=Red+Rose:wght@300&family=Faster+One&family=Metal+Mania&family=Poppins&family=Berkshire+Swash&family=Lobster&family=Playfair+Display:wght@600&display=swap" rel="stylesheet">

  <!-- for media query -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <header style =
  " background-color: var(--color-scrolled-header-background)"
  >
<div class="header__logo">
      <a href="landing-page.html">
        <h1 class="header__logo-heading">Herculean</h1>
      </a>
    </div>

    <nav class="header__nav">
      <ul class="header__nav-list">
        <li class="header__nav-item"><a href="landing-page.html" class="header__nav-link">Get Started</a></li>
        <li class="header__nav-item"><span class="header__nav-link link__one">Classes</span>
          <div class="submenu">
            <ul class="submenu1__list">
              <li class="submenu1__item submenu-list"><a href="bodybuilding.html" class="submenu1__link submenu__link">Body Building</a></li>
              <li class="submenu1__item submenu-list"><a href="weightloss.html" class="submenu1__link submenu__link">Weight Loss</a></li>
              <li class="submenu1__item submenu-list"><a href="strengthtraining.html" class="submenu1__link submenu__link">Strength Training</a></li>
              <li class="submenu1__item submenu-list"><a href="yoga.html" class="submenu1__link submenu__link">Yoga</a></li>
            </ul>
          </div>
        </li>
        <li class="header__nav-item"><a href="" target="_blank" class="header__nav-link link__three">Schedule</a>
        </li>

        <li class="header__nav-item"><span class="header__nav-link link__one">Career</span>
          <div class=" submenu">
            <ul class="submenu4__list">
              <li class="submenu4__item submenu-list"><a href="" class="submenu4__link submenu__link">Trainer</a></li>
              <li class="submenu4__item submenu-list"><a href="" class="submenu4__link submenu__link">Nutritionist</a></li>
              <li class="submenu4__item submenu-list"><a href="" class="submenu3__link submenu__link">Zumba Instructor</a></li>
            </ul>
          </div>
        </li>

        <li class="header__nav-item"><a href="" class="header__nav-link">Contact</a></li>
        <li class="header__nav-item"><span class="header__nav-link">Sign Out</span></li>
      </ul>
    </nav>
  </header>


<section class="loggedIn__Container">
  <div class="loggedIn__Sidebar">
    <div class="sidebar__container">

    <!-- Register Member -->
      <div class="sidebar-item clickactive" id ="item-1">
        <div class="sidebar-item-icon">
          <svg class="icon icon-user"><use xlink:href="#icon-user">
            <symbol id="icon-user" viewBox="0 0 32 32">
<path d="M0 32v-3c0-4.484 5.649-6.179 13.099-6.862-1.636-1.014-2.92-3.864-3.589-6.14-0.003 0-0.006 0.002-0.010 0.002-0.068 0-1.5-1.791-1.5-4 0-1.938-0.138-3.554 1.007-3.92-0.001-0.027-0.007-0.053-0.007-0.080 0-2.457 1.271-4.61 3.187-5.859 0.495-1.235 2.004-2.141 3.813-2.141s3.318 0.906 3.813 2.141c1.916 1.249 3.187 3.402 3.187 5.859 0 0.027-0.006 0.053-0.007 0.080 1.145 0.366 1.007 1.982 1.007 3.92 0 2.209-1.588 4-1.5 4-0.004 0-0.007-0.002-0.010-0.002-0.669 2.275-1.953 5.126-3.589 6.14 7.45 0.683 13.099 2.315 13.099 6.862v3h-32z"></path>
</symbol>
            </use></svg>
        </div>
        <div class="sidebar-item-icon-heading admin-heading admin-register-heading">
            Register Member
        </div>
      </div>

      <!-- Current Members -->
      <div class="sidebar-item" id ="item-2">
        <div class="sidebar-item-icon">
            <svg class="icon icon-list"><use xlink:href="#icon-list">
              <symbol id="icon-list" viewBox="0 0 32 32">
<path d="M7 24h-6c-0.553 0-1 0.447-1 1v6c0 0.553 0.447 1 1 1h6c0.553 0 1-0.447 1-1v-6c0-0.553-0.447-1-1-1zM6 29c0 0.553-0.447 1-1 1h-2c-0.553 0-1-0.447-1-1v-2c0-0.553 0.447-1 1-1h2c0.553 0 1 0.447 1 1v2zM31 26h-18c-0.553 0-1 0.447-1 1v2c0 0.553 0.447 1 1 1h18c0.553 0 1-0.447 1-1v-2c0-0.553-0.447-1-1-1zM31 14h-18c-0.553 0-1 0.447-1 1v2c0 0.553 0.447 1 1 1h18c0.553 0 1-0.447 1-1v-2c0-0.553-0.447-1-1-1zM7 0h-6c-0.553 0-1 0.447-1 1v6c0 0.553 0.447 1 1 1h6c0.553 0 1-1.447 1-2v-5c0-0.553-0.447-1-1-1zM6 5c0 0.553-0.447 1-1 1h-2c-0.553 0-1-0.447-1-1v-2c0-0.553 0.447-1 1-1h2c0.553 0 1 0.447 1 1v2zM7 12h-6c-0.553 0-1 0.447-1 1v6c0 0.553 0.447 1 1 1h6c0.553 0 1-0.447 1-1v-6c0-0.553-0.447-1-1-1zM6 17c0 0.553-0.447 1-1 1h-2c-0.553 0-1-0.447-1-1v-2c0-0.553 0.447-1 1-1h2c0.553 0 1 0.447 1 1v2zM31 2h-18c-0.553 0-1 0.447-1 1v2c0 0.553 0.447 1 1 1h18c0.553 0 1-0.447 1-1v-2c0-0.553-0.447-1-1-1z"></path>
</symbol>
            </use></svg>
        </div>
        <div class="sidebar-item-icon-heading admin-heading sidebar-item-icon-heading-payment">
          Current Members
        </div>
      </div>

      <!-- Course Details -->
      <div class="sidebar-item" id ="item-3">
        <div class="sidebar-item-icon">
        <svg class="icon icon-location"><use xlink:href="#icon-location">
          <symbol id="icon-location" viewBox="0 0 32 32">
<path d="M16.013 32v-16.017h-16.013l32-15.983-15.987 32z"></path>
</symbol>
          </use></svg>
        </div>
        <div class="sidebar-item-icon-heading admin-heading admin-course-heading">
            Course Details
        </div>
      </div>

<!-- Trainers Details -->
  <div class="sidebar-item" id ="item-4">
        <div class="sidebar-item-icon">
            <svg class="icon icon-location-restroom"><use xlink:href="#icon-location-restroom">
              <symbol id="icon-location-restroom" viewBox="0 0 20 20">
        <path d="M12 16h-3l2-4.5v-2.5c0-1.1 0.9-2 2-2h2c1.105 0 2 0.895 2 2v0 2.5l2 4.5h-3v4h-4v-4zM7 13h2v-4c0-1.105-0.895-2-2-2v0h-4c-1.105 0-2 0.895-2 2v0 4h2v7h4v-7zM5 6c-1.657 0-3-1.343-3-3s1.343-3 3-3v0c1.657 0 3 1.343 3 3s-1.343 3-3 3v0zM14 6c-1.657 0-3-1.343-3-3s1.343-3 3-3v0c1.657 0 3 1.343 3 3s-1.343 3-3 3v0z"></path>
        </symbol>
            </use></svg>
        </div>
        <div class="sidebar-item-icon-heading admin-heading">
          Trainers Details
        </div>
      </div>


    </div>
  </div>

<!-- ***********LOGIN CONTENT********* -->
<div class="loggedIn__Content" id ='adminCont'>
<!-- ***********REGISTER CONTENT********* -->
<div class="registerContent" id="register">

<table class="register__table" id="table">
  <tr class="register__headRow">
    <th class="register__heading">Name</th>
    <th class="register__heading">Gender</th>
    <th class="register__heading">Age</th>
    <th class="register__heading">Programme</th>
    <th class="register__heading">Email</th>
    <th class="register__heading">Contact</th>
    <td class="addDel"></td>
 </tr>

<!-- 1st trainee -->
<tr class="trainee__row" id='reg-row-1'>
  <td class="trainee__details">Harshit Basu</td>
  <td class="trainee__details">M</td>
  <td class="trainee__details">26</td>
  <td class="trainee__details">Strength Training</td>
  <td class="trainee__details">harshitbasu@gmail.com</td>
  <td class="trainee__details">8547554252</td>
  <td class="trainee__details addDel">

    <!-- addBtn -->
    <span class="btn addBtn" id="add">
        <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
          <symbol id="icon-plus" viewBox="0 0 20 20">
  <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
  </symbol>

        </use></svg>

</span>

    <!-- delBtn -->
  <span class="deleteBtn" id="del">
    <svg class="icon icon-bin" id="delBtn"><use xlink:href="#icon-bin">
      <symbol id="icon-bin" viewBox="0 0 32 32">
<path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
<path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
</symbol>

  </td>
</tr>
<!-- 2nd trainee -->

<tr class="trainee__row" id='reg-row-2'>
  <td class="trainee__details">Riya Sen</td>
  <td class="trainee__details">F</td>
  <td class="trainee__details">24</td>
  <td class="trainee__details">Weight Loss</td>
  <td class="trainee__details">riyasen@gmail.com</td>
  <td class="trainee__details">8547554252</td>
  <td class="trainee__details addDel">
    <!-- addBtn -->
    <span class="btn addBtn" id = "add">
        <svg class="icon icon-plus" id="addBtn"><use xlink:href="#icon-plus">
          <symbol id="icon-plus" viewBox="0 0 20 20">
  <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
  </symbol>

        </use></svg>

</span>

    <!-- delBtn -->
  <span class="deleteBtn" id = "del">
    <svg class="icon icon-bin" id = "delBtn"><use xlink:href="#icon-bin">
      <symbol id="icon-bin" viewBox="0 0 32 32">
<path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
<path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
</symbol>

  </td>
</tr>

<!-- 3rd trainee -->

<tr class="trainee__row downBorder" id='reg-row-3'>
  <td class="trainee__details">Palak Gupta</td>
  <td class="trainee__details">F</td>
  <td class="trainee__details">24</td>
  <td class="trainee__details">Yoga</td>
  <td class="trainee__details">palakgupta@gmail.com</td>
  <td class="trainee__details">8547554252</td>
  <td class="trainee__details addDel">
    <!-- addBtn -->
    <span class="btn addBtn" id = "add">
        <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
          <symbol id="icon-plus" viewBox="0 0 20 20">
  <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
  </symbol>

        </use></svg>

</span>

    <!-- delBtn -->
  <span class="deleteBtn" id="del">
    <svg class="icon icon-bin" id = "delBtn"><use xlink:href="#icon-bin">
      <symbol id="icon-bin" viewBox="0 0 32 32">
<path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
<path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
</symbol>

  </td>
</tr>


<!-- 4th trainee -->
<tr class="trainee__row" id='reg-row-4'>
  <td class="trainee__details">Rishabh Gandhi</td>
  <td class="trainee__details">M</td>
  <td class="trainee__details">30</td>
  <td class="trainee__details">Body Building</td>
  <td class="trainee__details">rishabhgandhi@gmail.com</td>
  <td class="trainee__details">8547554252</td>
  <td class="trainee__details addDel">
    <!-- addBtn -->
    <span class="btn addBtn" id = "add">
        <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
          <symbol id="icon-plus" viewBox="0 0 20 20">
  <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
  </symbol>

        </use></svg>

</span>

    <!-- delBtn -->
  <span class="deleteBtn" id="del">
    <svg class="icon icon-bin" id = "delBtn"><use xlink:href="#icon-bin">
      <symbol id="icon-bin" viewBox="0 0 32 32">
<path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
<path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
</symbol>

  </td>
</tr>

</table>
</div>

<!-- ***********CURRENT CONTENT********* -->
<div class="currentContent" id="current">
  <table class="register__table" id="table">
    <tr class="register__headRow">
      <th class="register__heading">Name</th>
      <th class="register__heading">Gender</th>
      <th class="register__heading">Age</th>
      <th class="register__heading">Programme</th>
      <th class="register__heading">Email</th>
      <th class="register__heading">Contact</th>
      <td class="addDel"></td>
   </tr>

  <!-- 1st trainee -->
  <tr class="trainee__row" id='curr-row-1'>
    <td class="trainee__details">Ricky Mathur</td>
    <td class="trainee__details">M</td>
    <td class="trainee__details">26</td>
    <td class="trainee__details">Strength Training</td>
    <td class="trainee__details">rickymathur@gmail.com</td>
    <td class="trainee__details">8547554252</td>
    <td class="trainee__details addDel">

      <!-- addBtn -->
      <span class="btn addBtn disappear" id="add">
          <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
            <symbol id="icon-plus" viewBox="0 0 20 20">
    <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
    </symbol>

          </use></svg>

  </span>

    <!-- delBtn -->
    <span class="deleteBtn" id="del">
      <svg class="icon icon-bin" id = "delBtn"><use xlink:href="#icon-bin">
        <symbol id="icon-bin" viewBox="0 0 32 32">
  <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
  <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
  </symbol>

    </td>
  </tr>

  <!-- 2nd trainee -->

  <tr class="trainee__row" id='curr-row-2'>
    <td class="trainee__details">Sameer Raina</td>
    <td class="trainee__details">M</td>
    <td class="trainee__details">24</td>
    <td class="trainee__details">Weight Loss</td>
    <td class="trainee__details">sameerraina@gmail.com</td>
    <td class="trainee__details">8547554252</td>
    <td class="trainee__details addDel">

      <!-- addBtn -->
      <span class="btn addBtn disappear" id="add">
          <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
            <symbol id="icon-plus" viewBox="0 0 20 20">
    <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
    </symbol>

          </use></svg>

  </span>

    <!-- delBtn -->
    <span class="deleteBtn" id="del">
      <svg class="icon icon-bin" id = "delBtn"><use xlink:href="#icon-bin">
        <symbol id="icon-bin" viewBox="0 0 32 32">
  <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
  <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
  </symbol>

    </td>
  </tr>

  <!-- 3rd trainee -->

  <tr class="trainee__row downBorder" id='curr-row-3'>
    <td class="trainee__details">Mukta Vasudev</td>
    <td class="trainee__details">F</td>
    <td class="trainee__details">24</td>
    <td class="trainee__details">Yoga</td>
    <td class="trainee__details">muktavasudev@gmail.com</td>
    <td class="trainee__details">8547554252</td>
    <td class="trainee__details addDel">

      <!-- addBtn -->
      <span class="btn addBtn disappear" id="add">
          <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
            <symbol id="icon-plus" viewBox="0 0 20 20">
    <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
    </symbol>

          </use></svg>

  </span>

    <!-- delBtn -->
    <span class="deleteBtn" id="del">
      <svg class="icon icon-bin" id = "delBtn"><use xlink:href="#icon-bin">
        <symbol id="icon-bin" viewBox="0 0 32 32">
  <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
  <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
  </symbol>

    </td>
  </tr>


  <!-- 4th trainee -->
  <tr class="trainee__row" id='curr-row-4'>
    <td class="trainee__details">Simran Singh</td>
    <td class="trainee__details">F</td>
    <td class="trainee__details">30</td>
    <td class="trainee__details">Yoga</td>
    <td class="trainee__details">simransingh@gmail.com</td>
    <td class="trainee__details">8547554252</td>
    <td class="trainee__details addDel">

      <!-- addBtn -->
      <span class="btn addBtn disappear" id="add">
          <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
            <symbol id="icon-plus" viewBox="0 0 20 20">
    <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
    </symbol>

          </use></svg>

  </span>

    <!-- delBtn -->
    <span class="deleteBtn" id="del">
      <svg class="icon icon-bin" id = "delBtn"><use xlink:href="#icon-bin">
        <symbol id="icon-bin" viewBox="0 0 32 32">
  <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
  <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
  </symbol>

    </td>
  </tr>

  </table>
</div>

<!-- ***********PROGRAMME CONTENT********* -->

<div class="programmeContent" id="programme">
  <table class="register__table" id="table">
    <tr class="register__headRow">
      <th class="register__heading">Programme</th>
      <th class="register__heading">Strength</th>
      <th class="register__heading">Trainers</th>
      <th class="register__heading">Price</th>
   </tr>

  <!-- bodybuilding -->
  <tr class="trainee__row" id='row-1'>
    <td class="trainee__details"><a href="bodybuilding.html" class="trainee__details-links">Body Building</a></td>
    <td class="trainee__details">42</td>
    <td class="trainee__details">5</td>
    <td class="trainee__details">1500 INR per month </td>

  </tr>

  <!-- Strength Training -->

  <tr class="trainee__row" id='row-2'>
    <td class="trainee__details"><a href="strengthtraining.html" class="trainee__details-links">Strength Training</a></td>
    <td class="trainee__details">36</td>
    <td class="trainee__details">4</td>
    <td class="trainee__details">1200 INR per month </td>

  </tr>

  <!-- WeightLoss -->

  <tr class="trainee__row downBorder" id='row-3'>
    <td class="trainee__details"><a href="weightloss.html" class="trainee__details-links">WeightLoss</a></td>
    <td class="trainee__details">44</td>
    <td class="trainee__details">8</td>
    <td class="trainee__details">2300 INR per month </td>

  </tr>


  <!-- Yoga -->
  <tr class="trainee__row" id='row-4'>
    <td class="trainee__details"><a href="yoga.html" class="trainee__details-links">Yoga</a></td>
    <td class="trainee__details">40</td>
    <td class="trainee__details">6</td>
    <td class="trainee__details">2400 INR per month </td>

  </tr>

  </table>
</div>

<!-- ***********TRAINER CONTENT********* -->
<div class="trainerContent" id="trainer">

<div class="trainer-details trainer-1">
  <div class="trainer__header">
    <figure class="trainer__figure">
      <img src="img\trainers\bodybuilder2.jpg" alt="" class="trainer__figure-img">
      <!-- bodybuilder -->
    </figure>
  <figcaption class="trainer__figcaption">
    <h4 class="about-trainer">Shaukat Khan</h4>
    <p class="about-trainer about-trainer-modified">Strength Trainer </p>

  </figcaption>
</div>
<div class="trainee__enrolled">
  <!-- Trainee Information -->
  <table class="register__table" id="table">
    <tr class="register__headRow">
      <th class="register__heading">Trainee Strength</th>
      <th class="register__heading"></th>
      <th class="register__heading"></th>
      <th class="register__heading"></th>

   </tr>

  <!-- 1st trainee -->
  <tr class="trainee__row" id='enr-row-1'>
    <td class="trainee__details">Priyanka Jaggi</td>
    <td class="trainee__details">priyankajaggi@gmail.com</td>
    <td class="trainee__details">8547554252</td>
    <td class="trainee__details addDel">

      <!-- addBtn -->
      <span class="btn addBtn disappear" id="add">
          <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
            <symbol id="icon-plus" viewBox="0 0 20 20">
    <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
    </symbol>

          </use></svg>

  </span>

    <!-- delBtn -->
    <span class="deleteBtn" id="del">
      <svg class="icon icon-bin" id = "delBtn"><use xlink:href="#icon-bin">
        <symbol id="icon-bin" viewBox="0 0 32 32">
  <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
  <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
  </symbol>

    </td>
  </tr>

  <!-- 2nd trainee -->
  <tr class="trainee__row" id='enr-row-2'>
    <td class="trainee__details">Victor D'souza</td>
    <td class="trainee__details">victord@gmail.com</td>
    <td class="trainee__details">8547554252</td>
    <td class="trainee__details addDel">

      <!-- addBtn -->
      <span class="btn addBtn disappear" id="add">
          <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
            <symbol id="icon-plus" viewBox="0 0 20 20">
    <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
    </symbol>

          </use></svg>

  </span>

    <!-- delBtn -->
    <span class="deleteBtn" id="del">
      <svg class="icon icon-bin" id = "delBtn"><use xlink:href="#icon-bin">
        <symbol id="icon-bin" viewBox="0 0 32 32">
  <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
  <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
  </symbol>

    </td>
  </tr>

  <!-- 3rd trainee -->
  <tr class="trainee__row" id='enr-row-3'>
    <td class="trainee__details">Remona Singh</td>
    <td class="trainee__details">remonasingh@gmail.com</td>
    <td class="trainee__details">8547554252</td>
    <td class="trainee__details addDel">

      <!-- addBtn -->
      <span class="btn addBtn disappear" id="add">
          <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
            <symbol id="icon-plus" viewBox="0 0 20 20">
    <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
    </symbol>

          </use></svg>

  </span>

    <!-- delBtn -->
    <span class="deleteBtn" id="del">
      <svg class="icon icon-bin" id = "delBtn"><use xlink:href="#icon-bin">
        <symbol id="icon-bin" viewBox="0 0 32 32">
  <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
  <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
  </symbol>

    </td>
  </tr>

  <!-- 4th trainee -->
  <tr class="trainee__row" id='enr-row-4'>
    <td class="trainee__details">Vaibhav Seth</td>
    <td class="trainee__details">vaibhavseth@gmail.com</td>
    <td class="trainee__details">8547554252</td>
    <td class="trainee__details addDel">

      <!-- addBtn -->
      <span class="btn addBtn disappear" id="add">
          <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
            <symbol id="icon-plus" viewBox="0 0 20 20">
    <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
    </symbol>

          </use></svg>

  </span>

    <!-- delBtn -->
    <span class="deleteBtn" id="del">
      <svg class="icon icon-bin" id = "delBtn"><use xlink:href="#icon-bin">
        <symbol id="icon-bin" viewBox="0 0 32 32">
  <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
  <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
  </symbol>

    </td>
  </tr>
</table>

</div>

</div>

<hr class="style-one">

<div class="trainer-details trainer-2">

  <div class="trainer__header">
    <figure class="trainer__figure">
      <img src="img\trainers\bodybuilding-woman2.jpg" alt="" class="trainer__figure-img">
      <!-- bodybuilding-woman -->
    </figure>
  <figcaption class="trainer__figcaption">
    <h4 class="about-trainer">Sanjana Singa</h4>
    <p class="about-trainer about-trainer-modified">Bodybuilding Coach </p>
  </figcaption>
</div>

<div class="trainee__enrolled">
  <!-- Trainee Information -->
  <table class="register__table" id="table">
    <tr class="register__headRow">
      <th class="register__heading">Trainee Strength</th>
      <th class="register__heading"></th>
      <th class="register__heading"></th>
      <th class="register__heading"></th>

   </tr>

  <!-- 1st trainee -->
  <tr class="trainee__row" id='enr-row-1'>
    <td class="trainee__details">Priyanka Jaggi</td>
    <td class="trainee__details">priyankajaggi@gmail.com</td>
    <td class="trainee__details">8547554252</td>
    <td class="trainee__details addDel">

      <!-- addBtn -->
      <span class="btn addBtn disappear" id="add">
          <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
            <symbol id="icon-plus" viewBox="0 0 20 20">
    <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
    </symbol>

          </use></svg>

  </span>

    <!-- delBtn -->
    <span class="deleteBtn" id="del">
      <svg class="icon icon-bin" id = "delBtn"><use xlink:href="#icon-bin">
        <symbol id="icon-bin" viewBox="0 0 32 32">
  <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
  <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
  </symbol>

    </td>
  </tr>

  <!-- 2nd trainee -->
  <tr class="trainee__row" id='enr-row-2'>
    <td class="trainee__details">Victor D'souza</td>
    <td class="trainee__details">victord@gmail.com</td>
    <td class="trainee__details">8547554252</td>
    <td class="trainee__details addDel">

      <!-- addBtn -->
      <span class="btn addBtn disappear" id="add">
          <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
            <symbol id="icon-plus" viewBox="0 0 20 20">
    <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
    </symbol>

          </use></svg>

  </span>

    <!-- delBtn -->
    <span class="deleteBtn" id="del">
      <svg class="icon icon-bin" id = "delBtn"><use xlink:href="#icon-bin">
        <symbol id="icon-bin" viewBox="0 0 32 32">
  <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
  <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
  </symbol>

    </td>
  </tr>

  <!-- 3rd trainee -->
  <tr class="trainee__row" id='enr-row-3'>
    <td class="trainee__details">Remona Singh</td>
    <td class="trainee__details">remonasingh@gmail.com</td>
    <td class="trainee__details">8547554252</td>
    <td class="trainee__details addDel">

      <!-- addBtn -->
      <span class="btn addBtn disappear" id="add">
          <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
            <symbol id="icon-plus" viewBox="0 0 20 20">
    <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
    </symbol>

          </use></svg>

  </span>

    <!-- delBtn -->
    <span class="deleteBtn" id="del">
      <svg class="icon icon-bin" id = "delBtn"><use xlink:href="#icon-bin">
        <symbol id="icon-bin" viewBox="0 0 32 32">
  <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
  <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
  </symbol>

    </td>
  </tr>

  <!-- 4th trainee -->
  <tr class="trainee__row" id='enr-row-4'>
    <td class="trainee__details">Vaibhav Seth</td>
    <td class="trainee__details">vaibhavseth@gmail.com</td>
    <td class="trainee__details">8547554252</td>
    <td class="trainee__details addDel">

      <!-- addBtn -->
      <span class="btn addBtn disappear" id="add">
          <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
            <symbol id="icon-plus" viewBox="0 0 20 20">
    <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
    </symbol>

          </use></svg>

  </span>

    <!-- delBtn -->
    <span class="deleteBtn" id="del">
      <svg class="icon icon-bin" id = "delBtn"><use xlink:href="#icon-bin">
        <symbol id="icon-bin" viewBox="0 0 32 32">
  <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
  <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
  </symbol>

    </td>
  </tr>
</table>

</div>

</div>
<hr class="style-one">

<div class="trainer-details trainer-3">
  <div class="trainer__header">
    <figure class="trainer__figure">
      <img src="img\trainers\yoga2.jpg" alt="" class="trainer__figure-img">
      <!-- yoga -->
    </figure>
  <figcaption class="trainer__figcaption">
    <h4 class="about-trainer">Ridhima Chattani</h4>
    <p class="about-trainer about-trainer-modified">Yoga and Meditation</p>

  </figcaption>
  </div>
  <div class="trainee__enrolled">
    <!-- Trainee Information -->
    <table class="register__table" id="table">
      <tr class="register__headRow">
        <th class="register__heading">Trainee Strength</th>
        <th class="register__heading"></th>
        <th class="register__heading"></th>
        <th class="register__heading"></th>

     </tr>

    <!-- 1st trainee -->
    <tr class="trainee__row" id='enr-row-1'>
      <td class="trainee__details">Priyanka Jaggi</td>
      <td class="trainee__details">priyankajaggi@gmail.com</td>
      <td class="trainee__details">8547554252</td>
      <td class="trainee__details addDel">

        <!-- addBtn -->
        <span class="btn addBtn disappear" id="add">
            <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
              <symbol id="icon-plus" viewBox="0 0 20 20">
      <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
      </symbol>

            </use></svg>

    </span>

      <!-- delBtn -->
      <span class="deleteBtn" id="del">
        <svg class="icon icon-bin" id = "delBtn"><use xlink:href="#icon-bin">
          <symbol id="icon-bin" viewBox="0 0 32 32">
    <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
    <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
    </symbol>

      </td>
    </tr>

    <!-- 2nd trainee -->
    <tr class="trainee__row" id='enr-row-2'>
      <td class="trainee__details">Victor D'souza</td>
      <td class="trainee__details">victord@gmail.com</td>
      <td class="trainee__details">8547554252</td>
      <td class="trainee__details addDel">

        <!-- addBtn -->
        <span class="btn addBtn disappear" id="add">
            <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
              <symbol id="icon-plus" viewBox="0 0 20 20">
      <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
      </symbol>

            </use></svg>

    </span>

      <!-- delBtn -->
      <span class="deleteBtn" id="del">
        <svg class="icon icon-bin" id = "delBtn"><use xlink:href="#icon-bin">
          <symbol id="icon-bin" viewBox="0 0 32 32">
    <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
    <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
    </symbol>

      </td>
    </tr>

    <!-- 3rd trainee -->
    <tr class="trainee__row" id='enr-row-3'>
      <td class="trainee__details">Remona Singh</td>
      <td class="trainee__details">remonasingh@gmail.com</td>
      <td class="trainee__details">8547554252</td>
      <td class="trainee__details addDel">

        <!-- addBtn -->
        <span class="btn addBtn disappear" id="add">
            <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
              <symbol id="icon-plus" viewBox="0 0 20 20">
      <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
      </symbol>

            </use></svg>

    </span>

      <!-- delBtn -->
      <span class="deleteBtn" id="del">
        <svg class="icon icon-bin" id = "delBtn"><use xlink:href="#icon-bin">
          <symbol id="icon-bin" viewBox="0 0 32 32">
    <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
    <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
    </symbol>

      </td>
    </tr>

    <!-- 4th trainee -->
    <tr class="trainee__row" id='enr-row-4'>
      <td class="trainee__details">Vaibhav Seth</td>
      <td class="trainee__details">vaibhavseth@gmail.com</td>
      <td class="trainee__details">8547554252</td>
      <td class="trainee__details addDel">

        <!-- addBtn -->
        <span class="btn addBtn disappear" id="add">
            <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
              <symbol id="icon-plus" viewBox="0 0 20 20">
      <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
      </symbol>

            </use></svg>

    </span>

      <!-- delBtn -->
      <span class="deleteBtn" id="del">
        <svg class="icon icon-bin" id = "delBtn"><use xlink:href="#icon-bin">
          <symbol id="icon-bin" viewBox="0 0 32 32">
    <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
    <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
    </symbol>

      </td>
    </tr>
  </table>

  </div>

</div>
<hr class="style-one">

<div class="trainer-details trainer-4">
  <div class="trainer__header">
    <figure class="trainer__figure">
      <img src="img\trainers\strength2.jpg" alt="" class="trainer__figure-img">
      <!-- nutrition -->
    </figure>
  <figcaption class="trainer__figcaption">
    <h4 class="about-trainer">Bhushan Shergil</h4>
    <p class="about-trainer about-trainer-modified">Body Building Coach  </p>

  </figcaption>
  </div>
  <div class="trainee__enrolled">
    <!-- Trainee Information -->
    <table class="register__table" id="table">
      <tr class="register__headRow">
        <th class="register__heading">Trainee Strength</th>
        <th class="register__heading"></th>
        <th class="register__heading"></th>
        <th class="register__heading"></th>

     </tr>

    <!-- 1st trainee -->
    <tr class="trainee__row" id='enr-row-1'>
      <td class="trainee__details">Priyanka Jaggi</td>
      <td class="trainee__details">priyankajaggi@gmail.com</td>
      <td class="trainee__details">8547554252</td>
      <td class="trainee__details addDel">

        <!-- addBtn -->
        <span class="btn addBtn disappear" id="add">
            <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
              <symbol id="icon-plus" viewBox="0 0 20 20">
      <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
      </symbol>

            </use></svg>

    </span>

      <!-- delBtn -->
      <span class="deleteBtn" id="del">
        <svg class="icon icon-bin"  id = "delBtn"><use xlink:href="#icon-bin">
          <symbol id="icon-bin" viewBox="0 0 32 32">
    <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
    <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
    </symbol>

      </td>
    </tr>

    <!-- 2nd trainee -->
    <tr class="trainee__row" id='enr-row-2'>
      <td class="trainee__details">Victor D'souza</td>
      <td class="trainee__details">victord@gmail.com</td>
      <td class="trainee__details">8547554252</td>
      <td class="trainee__details addDel">

        <!-- addBtn -->
        <span class="btn addBtn disappear" id="add">
            <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
              <symbol id="icon-plus" viewBox="0 0 20 20">
      <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
      </symbol>

            </use></svg>

    </span>

      <!-- delBtn -->
      <span class="deleteBtn" id="del">
        <svg class="icon icon-bin" id = "delBtn"><use xlink:href="#icon-bin">
          <symbol id="icon-bin" viewBox="0 0 32 32">
    <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
    <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
    </symbol>

      </td>
    </tr>

    <!-- 3rd trainee -->
    <tr class="trainee__row" id='enr-row-3'>
      <td class="trainee__details">Remona Singh</td>
      <td class="trainee__details">remonasingh@gmail.com</td>
      <td class="trainee__details">8547554252</td>
      <td class="trainee__details addDel">

        <!-- addBtn -->
        <span class="btn addBtn disappear" id="add">
            <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
              <symbol id="icon-plus" viewBox="0 0 20 20">
      <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
      </symbol>

            </use></svg>

    </span>



      <!-- delBtn -->
      <span class="deleteBtn" id="del">
        <svg class="icon icon-bin"  id = "delBtn"><use xlink:href="#icon-bin">
          <symbol id="icon-bin" viewBox="0 0 32 32">
    <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
    <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
    </symbol>

      </td>
    </tr>

    <!-- 4th trainee -->
    <tr class="trainee__row" id='enr-row-4'>
      <td class="trainee__details">Vaibhav Seth</td>
      <td class="trainee__details">vaibhavseth@gmail.com</td>
      <td class="trainee__details">8547554252</td>
      <td class="trainee__details addDel">

        <!-- addBtn -->
        <span class="btn addBtn disappear" id="add">
            <svg class="icon icon-plus" id = "addBtn"><use xlink:href="#icon-plus">
              <symbol id="icon-plus" viewBox="0 0 20 20">
      <path d="M16 10c0 0.553-0.048 1-0.601 1h-4.399v4.399c0 0.552-0.447 0.601-1 0.601s-1-0.049-1-0.601v-4.399h-4.399c-0.552 0-0.601-0.447-0.601-1s0.049-1 0.601-1h4.399v-4.399c0-0.553 0.447-0.601 1-0.601s1 0.048 1 0.601v4.399h4.399c0.553 0 0.601 0.447 0.601 1z"></path>
      </symbol>

            </use></svg>

    </span>

      <!-- delBtn -->
      <span class="deleteBtn" id="del">
        <svg class="icon icon-bin" id = "delBtn"><use xlink:href="#icon-bin">
          <symbol id="icon-bin" viewBox="0 0 32 32">
    <path d="M4 10v20c0 1.1 0.9 2 2 2h18c1.1 0 2-0.9 2-2v-20h-22zM10 28h-2v-14h2v14zM14 28h-2v-14h2v14zM18 28h-2v-14h2v14zM22 28h-2v-14h2v14z"></path>
    <path d="M26.5 4h-6.5v-2.5c0-0.825-0.675-1.5-1.5-1.5h-7c-0.825 0-1.5 0.675-1.5 1.5v2.5h-6.5c-0.825 0-1.5 0.675-1.5 1.5v2.5h26v-2.5c0-0.825-0.675-1.5-1.5-1.5zM18 4h-6v-1.975h6v1.975z"></path>
    </symbol>

      </td>
    </tr>
  </table>


  </div>

</div>

</div>

 </div>

</section>

<!-- ***********FOOTER********* -->
<section class="footer">
<div class="footer__headingbox carousel__primary-heading"><a href="landing_page.html">HERCULEAN</a></div>

<div class="footer__container">
  <div class="footer__container-sect1">
      <div class="find_us carousel__secondary-heading"> Find Us</div>
      <p class="address address-1 carousel__para carousel__para-modified">58, 2nḍ Floor, Star Planet, Zone-2, MP Nagar</p>
      <p class="address address-2 carousel__para carousel__para-modified"> Bhopal(462011), Madhya Pradesh</p>
      <p class="address address-3 carousel__para carousel__para-modified">07554006576</p>
  </div>

  <div class="footer__container-sect2">
    <div class="carousel__secondary-heading">About Us</div>
  <nav class="footer__nav">
    <ul class="footer__nav-list">

      <li class="footer__nav-item carousel__para-modified"><a href="" class="footer__nav-link slide3__content-para-footer">Our Team</a></li>

       <li class="footer__nav-item carousel__para-modified"><a href="" class="footer__nav-link slide3__content-para-footer">Career</a></li>

       <li class="footer__nav-item carousel__para-modified"><a href="" class="footer__nav-link slide3__content-para-footer">Franchise</a></li>
      </ul>
  </nav>
  </div>


  <div class="footer__container-sect3">

    <div class="carousel__secondary-heading">Join Us</div>
    <div class="social-media__nav">
      <ul class="social-media-list">
        <li class="social-media-item">
      <a href="" class="social-media__link">
          <svg class="gmail">
            <use xlink:href = "icomoon/sprite.svg#icon-envelop"></use>
          </svg>
      </a>
      </li>

        <li class="social-media-item">
      <a href="" class="social-media__link">
        <svg class="fb">
          <use xlink:href = "icomoon/sprite.svg#icon-facebook-official"></use>
        </svg>
      </a>
      </li>

        <li class="social-media-item">
      <a href="" class="social-media__link">
        <svg class="insta">
          <use xlink:href = "icomoon/sprite.svg#icon-instagram">
                </use>
        </svg>
      </a>
      </li>
      </ul>

  </div>
  </div>
</div>

<div class="copyrightbox">
  <p class="primary--para primary--para-copyright">
    <span class="brand-name brand-name-modified"><a href="landing_page.html">HERCULEAN</a></span><sup><span class="copy">&copy;</span></sup> <br> <span class="rights">All rights reserved.</span>
  </p>
</div>

</section>

<script src="js/adminLogIn.js" charset="utf-8"></script>
</body>
</html>

              
            
!

CSS

              
                :root {
  --color-primary-silver-dark-1: #30444B;
  --color-primary-silver-dark-2: #385457;
  --color-primary-silver-dark-3: #101619;
  --color-primary-silver-dark-4: #204051;
  --color-primary-silver-dark-4-light: #305F79;
  --color-secondary-silver-light-1: #E9EAEC;
  --color-secondary-silver-light-a1:#AEB8C1;
  --color-secondary-silver-light-b1:#809575;
  --color-secondary-silver-light-2: #52796F;
  --color-secondary-silver-light-3: #DEE0E3;
  --color-secondary-silver-light-4: #F1F2F3;
  --color-invalid: #A61411;
  --color-text-hightlighted: #2B2D42;
  --color-white: #fff;
  --color-highlight-emerald: #53917E;
  --color-condition: #F5006A;
  --color-signin-heading: #0D181C;
  --color-scrolled-header-background: #84a59d;
  --color-border-bottom: #f4a261;
  --color-addBtn: #0F6B2F;
--color-delBtn: #EA3734;
  --bor-rad: 9px; }


*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  font-size: 62.5%;
  line-height: 1.2;
  background-color: transparent;
  overflow-x: hidden; }

a {
  text-decoration: none !important;
  color: inherit !important; }

ul {
  list-style: none; }

img {
  max-width: 100%; }

::-webkit-scrollbar {
  width: .9em; }

::-webkit-scrollbar-track {
  background-color: var(--color-primary-silver-dark-3);
  border-radius: var(--bor-rad); }

::-webkit-scrollbar-thumb {
  border-radius: var(--bor-rad);
  color: var(--color-white); }

::selection {
  background-color: var(--color-primary-silver-dark-4);
  color: var(--color-white);
  padding: .4em .6em; }


/**************************HEADINGS**********************************/
.header__logo-heading {
  font-family: 'Metal Mania', sans-serif;
  font-size: 3rem;
  padding: 0.2em 0.3em;
  color: var(--color-white);
  letter-spacing: 1.1px; }
  .header__logo-heading--footer {
    display: inline-block; }
  .header__logo-heading--modified {
    font-size: 3.6rem;
    background-image: linear-gradient(to right, var(--color-primary-silver-dark-1), var(--color-secondary-silver-light-2), var(--color-highlight-emerald));
    display: inline-block;
    -webkit-background-clip: text;
    color: transparent;
    font-family: 'Metal Mania', sans-serif; }


.header__nav-item {
  font-size: 1.1rem;
  margin-top: 1.2em;
  font-family: 'Poppins',sans-serif;
  letter-spacing: 1px;
  color: var(--color-white);
  text-transform: capitalize; }

.carousel__heading-text {
  font-size: 5rem;
  color: var(--color-white);
  font-family: 'Metal Mania',sans-serif;
  letter-spacing: 1.4px; }

.carousel__para {
  font-size: 2rem;
  line-height: 1.5;
  font-family: 'Abril Fatface', cursive;
  color: var(--color-white); }
  .carousel__para-modified {
    font-size: 1.2rem;
    letter-spacing: 2px; }

.carousel__primary-heading {
  font-size: 4rem;
  letter-spacing: 1.2px;
  font-family: 'Metal Mania', sans-serif;
  text-shadow: 0 2em 5em var(--color-primary-silver-dark-3);
  color: var(--color-white);
  text-align: center;
  max-width: 65%;
  border-bottom: 1px solid var(--color-border-bottom); }

.carousel__secondary-heading {
  font-size: 1.7rem;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border-bottom);
  color: var(--color-white);
  display: inline-block; }

.carousel__secondary-heading--modified {
  font-size: 3.3rem;
  font-family: 'Playfair Display', serif;
  font-weight: 900; }


.sidebar-item-icon-heading {
  font-family: 'Playfair Display',sans-serif;
  font-size: .9rem;
  text-transform: uppercase;
  fill: var(--color-primary-silver-dark-4);
  margin-top: 5px; }
  .sidebar-item-icon-heading-payment {
    transform: translateX(15px); }

.footer__nav-heading {
  font-size: 1.5rem;
  font-family: 'Playfair Display',sans-serif;
  color: var(--color-white);
  font-style: italic;
  font-weight: bold;
  border-bottom: 2px solid var(--color-secondary-silver-light-3);
  text-align: center; }


.card__name-text {
  font-size: 1.1rem;
  color: var(--color-white);
  font-family: 'Playfair Display', sans-serif;
  text-transform: uppercase; }

.joinIn-text {
  font-size: 1.1rem;
  font-family: 'Playfair Display', sans-serif;
  font-weight: 400; } 
.primary--para{

  font-size: 1.4rem;
  margin-top: 1.3em;
/*   // color: var(--color-primary-silver-dark-3); */
  color:#0F1A17;
  font-weight: light;
  line-height: 1.6;
  font-family: 'Poppins',sans-serif;

  &-copyright{
    font-size: .9rem;
    color: var(--color-white);
    text-align: center;
    max-width: 65%;
    border-top: 1px solid var(--color-border-bottom);
/*     // margin-top: -2rem; */
  }

}
.brand-name{
  font-size:2.2rem;
  font-family: 'Metal Mania', sans;
  color:#577275;
  letter-spacing: 1.3px;
  transition: transform .5s ease;
    &-modified{
      color: var(--color-white);
      font-weight: 900;
      margin-bottom: -3em;
    }
}

/*******************header*****************************/
header {
  padding: 0 0.6em;
  transition: all 150ms ease-in;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 30;
  margin-top: -.3em; }

.heading {
  display: flex;
  align-items: center;
  justify-content: center; }


.header__logo {
  display: flex;
  align-items: center;
  justify-content: center; }

.header__nav {
  align-self: flex-start;
  margin-right: 5px;
  margin-top: 1.2em; }
  .header__nav-list {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .header__nav-list--footer {
      display: inline-block; }
    .header__nav-list:not(:first-child):hover .header__nav-link::after {
      opacity: 1; }
  .header__nav-item {
    cursor: pointer;
    position: relative;
    transition: all .5s ease; }
    .header__nav-item:not(:last-child) {
      margin-right: 3.5em; }
    .header__nav-item:hover .submenu {
      opacity: 1;
      visibility: visible; }
    .header__nav-item:hover {
      color: var(--color-primary-silver-dark-1); }
  .header__nav-link {
    padding: 0.8em 0.4em;
    position: relative;
    z-index: 0; }
    .header__nav-link::after {
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #DCE5E3;
      border-bottom-left-radius: 9px;
      border-bottom-right-radius: 9px;
      z-index: -2;
      transition: opacity 0.5s ease;
      opacity: 0; }
    .header__nav-link:hover::after {
      opacity: 1; }

.submenu {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 2.2em;
  left: 1em;
  background-color: var(--color-secondary-silver-light-a1);
  padding: 0.4em 0.3em 0.4em 0.2em;
  width: 13em;
  text-align: left;
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
  transition: all .4s ease;
  z-index: 13; }
  .submenu__link {
    filter: brightness(30%); }
    .submenu__link:hover {
      filter: brightness(900%); }

.submenu-list {
  line-height: 3; }
  .submenu-list:not(:last-child) {
    border-bottom: 1px solid var(--color-white); }

.active {
  color: var(--color-primary-silver-dark-1);
  padding: 0.8em 0.4em;
  position: relative; }
  .active::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-secondary-silver-light-3);
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
    z-index: -2;
    transition: opacity 0.5s ease; }


/***************logged in Container*********************/
.loggedIn__Container {
  margin-top: 7.2em;
  display: flex;
  justify-content: space-between; }

.loggedIn__Sidebar {
  flex: 0 0 150px;
  border-right: 2px solid var(--color-secondary-silver-light-1);
  background-color: var(--color-secondary-silver-light-3); }

.loggedIn__Content {
  flex: 1;
  position: relative; }

hr {
  border: 0;
  height: 1px;
  background: #333;
  background-image: linear-gradient(to right, #ccc, #333, #ccc); }

.sidebar__container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0 .3rem; }

.sidebar-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: .6rem .8rem;
  border: 1px solid var(--color-primary-silver-dark-3);
  margin: 2rem 0;
  cursor: pointer;
  transition: all 400ms ease;
  transform: scale(1); }
  .sidebar-item:hover {
    background-color: var(--color-secondary-silver-light-4); }
  .sidebar-item:focus {
    background-color: var(--color-secondary-silver-light-4);
    transform: scale(0.85); }
  .sidebar-item-icon svg {
    width: 3rem;
    height: 3rem;
    fill: var(--color-primary-silver-dark-4); }
.clickactive{
  background-color: var(--color-toggle-sidebutton);
}

.clickactive {
  background-color: var(--color-secondary-silver-light-a1); }


/*** toggling classes****/
.showDisplay {
  display: block; }

.hideDisplay {
  display: none; }
/***admin login******/

.registerContent{
  // background-color: red;
  display:inline-block;

  // border: 3px solid red;
  // padding: 1rem 2rem;
}

.currentContent{
 // background-color: yellow;
 display:none;
}

.programmeContent{
 // background-color: green;
 display:none;
}

.trainerContent{
 // background-color: blue;
 display:none;
}

.trainer{
    &-details{
      margin:1rem 0;
    }

  &__header{
    // border:3px solid red;
    display:flex;
    align-items: center;
    // flex-direction: column;
    justify-content: flex-start;
 }

 &__figure{
   // border:3px solid yellow;
   display:inline-block;
   outline:1px solid var(--color-primary-silver-dark-4-light);
   outline-offset: .4rem;
    margin-top: 1rem;
   margin-left: 3rem;
   flex: 0 0 20%;
   height:50%;
   object-fit: cover;
   &-img{
     // width:100%;
     // height:100%;
   }
 }

 &__figcaption{
      // border:3px solid green;
      margin-left: 1.5rem;
 }
}

hr.style-one {
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
}

.showDisplay{
  display:block;
}

.hideDisplay{
  display:none;
}
/*****table***/

.register{
  &__table{
    //border:1px solid var(--color-secondary-silver-light-2);
    border:1px solid  var(--color-primary-silver-dark-3);
    margin:1.96rem .6rem;
    border-collapse: separate;
    width:80vw;
    // border-collapse: collapse;
    text-align: center;

    & svg{
      width:1.4rem;
      height:1.4rem;
      cursor:pointer;
      transition: all .4s ease;
      transform: scale(.8);
      // &:hover{
      //   transform:translateY(-2px);
      //   transform: scale(1);
      // }
      // &:focus{
      //   outline: none;
      //   background-color: var(--color-secondary-silver-light-3);
      // }
    }

  }

  &__headRow{
    background-color: var(--color-secondary-silver-light-a1);
/*     // border-collapse: collapse; */
  }

  &__heading{
      padding:1rem 1.6rem;
  }

}

.trainee{
    &__row{

      &:nth-child(even){
        background-color: var(--color-secondary-silver-light-3);
      }

    }

    &__details{
/*       // border:3px solid green; */
      border-spacing:1rem 2rem;
      padding:.5rem 1.4rem;
      width:10vw;
        &-links{

          // border:1px solid red;
          &:hover{
            text-decoration: underline;
          }
        }

    }
}


.icon-plus{
  fill: var(--color-addBtn);
}

.icon-bin{
  fill:var(--color-delBtn);
}

.btn{
/*   // border-right: 2px solid
  // height:3rem;
  // margin: -1rem .4rem 0; */
  border-right: 1px solid var(--color-primary-silver-dark-3);
  margin-top: -2.1rem;
  height: 20px;
  display: inline-block;
}


.disappear{
/*   // background-color: var(--color-white);
  // background-color: var(--color-secondary-silver-light-4); */
  display:none;
}



/*******************footer*****************************/ 

.footer {
  padding: 8em 0 4em;
  background-color: var(--color-primary-silver-dark-1); } 

.footer__container {
  display: flex;
  align-items: center;
  justify-content: space-around; }
  .footer__container-sect1, .footer__container-sect2, .footer__container-sect3 {
    margin: 5em 0; }

.footer__headingbox {
  margin: 0 auto; }

.copyrightbox {
  display: flex;
  align-items: center;
  justify-content: center; }

.find_us {
  margin-bottom: 1em; }

.address {
  line-height: 1.5; }

.footer__nav-list,
.social-media-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between; }

.footer__nav-item {
  color: var(--color-white);
  filter: brightness(60%); }
  .footer__nav-item:hover {
    filter: brightness(120%); }

.footer__nav-item:first-child,
.social-media-item:first-child {
  margin-top: 1em; }

.footer__nav-item:not(:last-child),
.social-media-item:not(:last-child) {
  margin-bottom: 1em; }

.footer__nav-link {
  margin-top: -3em; }

.footer svg {
  width: 3.1em;
  height: 3.1em;
  fill: var(--color-white);
  filter: brightness(60%); }
  .footer svg:not(:last-child) {
    margin-bottom: 4em; }
  .footer svg:hover {
    filter: brightness(120%); }

              
            
!

JS

              
                //getting side Button
const registerBtn = document.getElementById('item-1');
const currentBtn = document.getElementById('item-2');
const programmeBtn = document.getElementById('item-3');
const trainerBtn = document.getElementById('item-4');

//add,delete Button
// const addBtn = document.getElementById('addBtn');
// const delBtn = document.getElementById('delBtn');

const addBtn = document.querySelector('.icon-plus');
const delBtn = document.querySelector('.icon-bin');

//Event Delegation Container
const admiCont = document.getElementById('adminCont');

//getting side Content
const registerItem = document.getElementById('register');
const currentItem = document.getElementById('current');
const programmeItem = document.getElementById('programme');
const trainerItem = document.getElementById('trainer');


//show Register Details
function showRegisterDetails(){

  //registerBtn add toggle class
  registerBtn.classList.add('clickactive');
  currentBtn.classList.remove('clickactive');
  programmeBtn.classList.remove('clickactive');
  trainerBtn.classList.remove('clickactive');

  //for Register Details adding showDisplay class
  registerItem.classList.add('showDisplay');
  currentItem.classList.add('hideDisplay');
  programmeItem.classList.add('hideDisplay');
  trainerItem.classList.add('hideDisplay');

  // for 2nd click
    registerItem.classList.remove('hideDisplay');
    registerItem.classList.add('showDisplay');
}

//show Current Details
function showCurrentDetails(){

  //currentBtn add toggle class
  registerBtn.classList.remove('clickactive');
  currentBtn.classList.add('clickactive');
  programmeBtn.classList.remove('clickactive');
  trainerBtn.classList.remove('clickactive');

  //for Current Details adding showDisplay class
  registerItem.classList.add('hideDisplay');
  currentItem.classList.add('showDisplay');
  programmeItem.classList.add('hideDisplay');
  trainerItem.classList.add('hideDisplay');

  // for 2nd click
   currentItem.classList.remove('hideDisplay');
   currentItem.classList.add('showDisplay');
}

//show Programme Details
function showProgrammeDetails(){

  //programmeBtn add toggle class
  registerBtn.classList.remove('clickactive');
  currentBtn.classList.remove('clickactive');
  programmeBtn.classList.add('clickactive');
  trainerBtn.classList.remove('clickactive');

  //for Programme Details adding showDisplay class
  registerItem.classList.add('hideDisplay');
  currentItem.classList.add('hideDisplay');
  programmeItem.classList.add('showDisplay');
  trainerItem.classList.add('hideDisplay');

  // for 2nd click
  programmeItem.classList.remove('hideDisplay');
  programmeItem.classList.add('showDisplay');
}

//show Trainer Details
function showTrainerDetails(){

  //trainerBtn add toggle class
  registerBtn.classList.remove('clickactive');
  currentBtn.classList.remove('clickactive');
  programmeBtn.classList.remove('clickactive');
  trainerBtn.classList.add('clickactive');

  //for Trainer Details adding showDisplay class
  registerItem.classList.add('hideDisplay');
  currentItem.classList.add('hideDisplay');
  programmeItem.classList.add('hideDisplay');
  trainerItem.classList.add('showDisplay');

  // for 2nd click
  trainerItem.classList.remove('hideDisplay');
  trainerItem.classList.add('showDisplay');
}

//delete Item

// var deleteItem = function(event){
//   var itemId, element;


//   // itemId = event.target.parentNode.parentNode.parentNode.parentNode.id;
//   itemId = event.target.parentNode.parentNode.parentNode.parentNode.id;

//   console.log(itemId);

//   element = document.getElementById(itemId);
//   console.log(element);
//    if(element !== null){
//   element.parentNode.removeChild(element);
//  }

// }
 
var deleteItem = function(event){
  var itemId, element;


  // itemId = event.target.parentNode.parentNode.parentNode.parentNode.id;
  itemId = event.target.parentNode.parentNode.parentNode.parentNode.id;

  console.log(itemId);

  element = document.getElementById(itemId);
  console.log(element);
  if (!element || !itemId) return // return out if it cant get element || parentID ?
   if(element !== null){
  element.parentNode.removeChild(element);
 }
}

// adding click event
registerBtn.addEventListener('click',showRegisterDetails);

currentBtn.addEventListener('click',showCurrentDetails);

programmeBtn.addEventListener('click',showProgrammeDetails);

trainerBtn.addEventListener('click',showTrainerDetails);

admiCont.addEventListener('click', deleteItem);

              
            
!
999px

Console