diff --git a/index.html b/index.html
new file mode 100644
index 0000000..819a6b6
--- /dev/null
+++ b/index.html
@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Gymtastic</title>
+    <style>
+      .body {
+        margin: 0;
+        font-family: Arial, sans-serif;
+        line-height: 1.6;
+      }
+      ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+      a {
+        text-decoration: none;
+        color: white;
+        padding-left: 40px;
+        font-size: 20px;
+      }
+      .navbar {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        background-color: #2a7ea0;
+        color: white;
+        padding: 15px 30px;
+      }
+      .navbar-brand {
+        font-weight: bold;
+        font-size: 30px;
+      }
+      .navbar-menu {
+        display: flex;
+      }
+      .navbar-menu a {
+        color: white;
+        font-weight: normal;
+      }
+      .main-content {
+        text-align: left;
+        margin: 20px;
+        max-width: 800px;
+      }
+      .main-content h1 {
+        color: #2a7ea0;
+        font-size: 36px;
+        margin-bottom: 20px;
+      }
+      .main-content p {
+        color: #333;
+        font-size: 18px;
+        margin-bottom: 20px;
+      }
+      .main-content p span {
+        color: #2a7ea0;
+        font-weight: bold;
+      }
+      .cta-button {
+        display: inline-block;
+        padding: 10px 20px;
+        color: orangered;
+        border: 2px solid orangered;
+        border-radius: 5px;
+        font-weight: bold;
+        margin-top: 10px;
+        margin-bottom: 30px;
+      }
+
+      .social-media {
+        text-align: left;
+        margin-top: 40px;
+      }
+      .social-media h2 {
+        color: #2a7ea0;
+        font-size: 24px;
+      }
+      .social-buttons {
+        display: flex;
+        justify-content: left;
+        gap: 20px;
+        margin-top: 20px;
+      }
+      .social-button {
+        padding: 10px 20px;
+        color: white;
+        font-weight: bold;
+        border-radius: 5px;
+        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        text-align: center;
+      }
+      .social-button.instagram {
+        background-color: #9b51e0;
+      }
+      .social-button.facebook {
+        background-color: #007bff;
+      }
+      .social-button.youtube {
+        background-color: #dc3545;
+      }
+      .footer {
+        background-color: #2a7ea0;
+        color: white;
+        padding: 20px 30px;
+        text-align: left;
+      }
+      .footer h3 {
+        margin-bottom: 10px;
+      }
+      .footer ul li {
+        margin-bottom: 10px;
+      }
+      .footer ul ul {
+        margin-left: 15px;
+      }
+    </style>
+  </head>
+  <body>
+    <nav class="navbar">
+      <div class="navbar-brand">Gymtastic</div>
+      <ul class="navbar-menu">
+        <li><a>Home</a></li>
+        <li><a>About Us</a></li>
+        <li><a>Contact Us</a></li>
+      </ul>
+    </nav>
+    <main class="main-content">
+      <h1>Fitness for life!</h1>
+      <p>
+        Every gym is designed with you in mind, from the way they’re laid out,
+        to the range of equipment available.
+      </p>
+      <p>Get your membership today and save a whopping <span>50%</span>!</p>
+      <a class="cta-button">GET MEMBERSHIP</a>
+      <section class="social-media">
+        <h2>Follow us on</h2>
+        <div class="social-buttons">
+          <a class="social-button instagram">Instagram</a>
+          <a class="social-button facebook">Facebook</a>
+          <a class="social-button youtube">YouTube</a>
+        </div>
+      </section>
+    </main>
+    <footer class="footer">
+      <h3>Popular features</h3>
+      <ul>
+        <li>
+          <strong>Gyms Near Me</strong>
+          <ul>
+            <li>Gyms in London</li>
+            <li>Gyms in Cardiff</li>
+            <li>Gyms in Glasgow</li>
+          </ul>
+        </li>
+        <li><strong>Fitness Classes</strong></li>
+        <li><strong>Personal Trainers</strong></li>
+        <li><strong>Gym Membership Deals & Offers</strong></li>
+      </ul>
+    </footer>
+  </body>
+</html>
