Merge pull request Niraj-1729#58 from Surieya/surieya

added-gymsoProject
chinmay7016 · Oct 21, 2023 · 2780848 · 2780848
2 parents b417dce + b154fde
commit 2780848
Show file tree

Hide file tree

Showing 9 changed files with 1,062 additions and 0 deletions.
diff --git a/gymsoWebsite/Images/bg.jpg b/gymsoWebsite/Images/bg.jpg
diff --git a/gymsoWebsite/Images/class1.jpg b/gymsoWebsite/Images/class1.jpg
diff --git a/gymsoWebsite/Images/class2.jpg b/gymsoWebsite/Images/class2.jpg
diff --git a/gymsoWebsite/Images/class3.jpg b/gymsoWebsite/Images/class3.jpg
diff --git a/gymsoWebsite/Images/team1.jpg b/gymsoWebsite/Images/team1.jpg
diff --git a/gymsoWebsite/Images/team2.jpg b/gymsoWebsite/Images/team2.jpg
diff --git a/gymsoWebsite/index.html b/gymsoWebsite/index.html
@@ -0,0 +1,192 @@
+ <!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">
+  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+  <title>Document</title>
+ </head>
+ <body>
+   <div class="nav">
+    <h2>Gymso Fitness</h2>
+    <ul id="item">
+       <li><a href="#home">Home</a></li>
+       <li><a href="#about">About us</a></li>
+       <li><a href="#class">Classes</a></li>
+       <li><a href="#contact">Contact</a></li>
+    </ul>
+    <div id="barDiv">
+    <span id="bar"></span>
+   </div>
+   </div>
+   <div id="home" class="back">
+    <div class="overlay"></div>
+    <div class="mid">
+      <p>New way to build a healthy life</p>
+      <h2>UPGRADE YOUR BODY AT GYMSO FITNESS</h2>
+      <a href="#" class="borderless">Get Started</a>
+      <a href="#" class="bordered">Learn More</a>
+     </div>
+  </div>
+
+  <div class="details">
+    <div class="one" data-aos="fade-up">
+      <h3>New to the gymso?</h3>
+      <h4>Your membership is up to 2 months FREE ($62.50 per month)</h4>
+      <p>Gymso is free HTML template by Tooplate for your commercial website. Bootstrap v4.2.1 Layout. Feel free to use it.</p>
+      <a href="#">Become a member today</a>
+    </div>
+    <div class="two" data-aos="fade-up">
+      <h3>Working Hours</h3>
+      <h4>Sunday:closed</h4>
+      <h4>Monday-Friday</h4>
+      <p>7:00 - 10:00PM</p>
+    </div>
+  </div>
+
+   <div class="trainer" id="about">
+    <div class="about" data-aos="fade-up">
+      <h2>Hello,we are Gymso</h2>
+      <p>A personal trainer is an individual who has earned a certification that
+        demonstrates they have achieved a level of competency for creating and delevering safe and effective 
+        exercise programs for apperantely healthy individuals and groups.
+      </p>
+      <br><br>
+    </div>
+
+
+    <div class="people" data-aos="fade-up">
+      <div class="team1">
+        <div class="img">
+          <img src="Images\team1.jpg" alt="">
+        </div>
+        <div class="teamDetails">
+          <h4>Mary Yan</h4>
+          <p>Yoga Instructor</p>
+        </div>
+      </div>
+
+      <div class="team1">
+        <div class="img">
+          <img src="Images\team2.jpg" alt="">
+        </div>
+        <div class="teamDetails">
+          <h4>Alex Rook</h4>
+          <p>Yoga Instructor</p>
+        </div>
+      </div>
+
+    </div>
+   </div>
+
+
+  <div class="class" id="class" data-aos="fade-up">
+    <p class="p">Get A Perfect Body</p>
+    <h2 class="h2">Our Training Classes</h2>
+  </div>
+
+    <div class="classMenu" data-aos="fade-up">
+
+      <div class="team" data-aos="fade-up">
+        <div class="img">
+          <img src="Images\class1.jpg" alt="">
+        </div>
+        <div class="teamDetails">
+          <div class="name">
+            <div class="nameDetails">
+              <h4>Yoga</h4>
+              <p>Trained by - <span>Bella</span></p>
+            </div>
+            <div class="num">
+              <h5>$30</h5>
+            </div>
+          </div>
+          <p class="pro">Lorem ipsum dolor sit amet,<br>consectetur adipisicing.</p>
+        </div>
+      </div>
+
+      <div class="team" data-aos="fade-up">
+        <div class="img">
+          <img src="Images\class2.jpg" alt="">
+        </div>
+        <div class="teamDetails">
+          <div class="name">
+            <div class="nameDetails">
+              <h4>Aerobic</h4>
+              <p>Trained by - <span>Bella</span></p>
+            </div>
+            <div class="num">
+              <h5>$30</h5>
+            </div>
+          </div>
+          <p class="pro">Lorem ipsum dolor sit amet,<br>consectetur adipisicing.</p>
+        </div>
+      </div>
+
+      <div class="team" data-aos="fade-up">
+        <div class="img">
+          <img src="Images\class3.jpg" alt="">
+        </div>
+        <div class="teamDetails">
+          <div class="name">
+            <div class="nameDetails">
+              <h4>Cardio</h4>
+              <p>Trained by - <span>Bella</span></p>
+            </div>
+            <div class="num">
+              <h5>$30</h5>
+            </div>
+          </div>
+          <p class="pro">Lorem ipsum dolor sit amet,<br>consectetur adipisicing.</p>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="contact" id="contact" data-aos="fade-up">
+
+    <div class="form" data-aos="fade-up">
+        <h2>Feel Free to ask anything</h2>
+        <div class="submit">
+          <input type="text" placeholder="Name">
+          <input type="text" placeholder="Email">
+          <textarea placeholder="Message"></textarea>
+          <a href="#">Send Message</a>
+        </div>
+    </div>
+
+    <div class="map" data-aos="fade-up">
+      <h2>Where you can find us</h2>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
+      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31094.982834019767!2d80.26638684809136!3d13.043764173035916!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a52689bb60132bb%3A0x549cf8edf62b60a!2sMarina%20Beach!5e0!3m2!1sen!2sin!4v1674804425254!5m2!1sen!2sin" width="1290" height="250" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+    </div>
+  </div>
+
+
+  <div class="footer" data-aos="fade-up">
+    <p>Copyright @ 2022 Gymso Fitness Co. <br> Design:Tech2 etc</p>
+    <div class="footer-details">
+      <p>[email protected]</p>
+      <p>000-000-0000</p>
+    </div>
+  </div>
+
+
+
+  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+  <script>
+    AOS.init({
+      offset:200,
+      duration:1000,
+    });
+  </script>
+
+
+
+
+
+<script src="script.js"></script>
+ </body>
+ </html>
diff --git a/gymsoWebsite/script.js b/gymsoWebsite/script.js
@@ -0,0 +1,10 @@
+let bar = document.getElementById("barDiv");
+let item = document.getElementById("item");
+bar.addEventListener("click",()=>{
+  if(item.style.right == "-250px"){
+    item.style.right = "0px";
+  }
+  else{
+    item.style.right = "-250px";
+  }
+})