diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b1fafe1
--- /dev/null
+++ b/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HTML Gymnastics</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<header>
+    <span>Gymtastic</span>
+    <nav>
+        <a>Home</a>
+        <a>About Us</a>
+        <a>Contact Us</a>
+    </nav>
+</header>
+<main>
+    <h1>Fitness For Life!</h1>
+    <section>
+<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 <a class="discount-link">50%</a>!</p>
+<a href="#" class="main-button orange-button">GET MEMBERSHIP</a>
+    </section>
+    <h1>Follow us on</h1>
+    <a href="#" class="main-button purple-button solid-button">Instagram</a>
+    <a href="#" class="main-button blue-button solid-button">Facebook</a>
+    <a href="#" class="main-button red-button solid-button">Youtube</a>
+
+    <section class="testimonial-section">
+        <div class="testimonial">
+          <blockquote>
+            "Joining this Gym was the best decision I ever made."
+          </blockquote>
+          <p class="testimonial-author">Kyle Vann</p>
+        </div>
+    
+        <div class="testimonial">
+          <blockquote>
+            "It ain’t about how hard you hit. It’s about how hard you can get hit and keep moving forward; how much you can take and keep moving forward. That’s how winning is done!"
+          </blockquote>
+          <p class="testimonial-author">Rocky Balboa</p>
+        </div>
+
+</main>
+ <footer class="footer">
+        <h4>Popular features</h4>
+        <ul>
+            <li>Gyms Near Me 
+              <ul>
+                <li><a>Gyms in London</a></li>
+                <li><a>Gyms in Cardiff</a></li>
+                <li><a>Gyms in Glasgow</a></li>
+                
+              </ul>
+            </li>
+            <li><a>Fitness Classes</a></li>
+            <li><a>Personal Trainers</a></li>
+            <li><a>Gym Membership Deals & Offers</a></li>
+          </ul>
+    </footer>
+</body>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..67139f5
--- /dev/null
+++ b/style.css
@@ -0,0 +1,143 @@
+header {
+    display: flex;
+    background-color: #357BA6;
+    justify-content: center;
+    align-items: center;
+}
+
+header span {
+    color: #fff;
+    font-size: 30px;
+    font-weight: 600;
+    padding: 15px;
+}
+
+h1 {
+    color: #357BA6;
+}
+
+h4 {
+    color: #FFFFFF;
+    font-weight: 400;
+    font-size: 20px;
+    display: block;
+
+}
+
+body {
+    padding: 0;
+    margin: 0;
+    font-family: "Roboto", sans-serif;
+}
+
+nav {
+    flex-grow: 1;
+}
+
+nav a {
+    padding: 15px;
+    color: #fff;
+    
+}
+
+main {
+padding: 20px;
+}
+
+.discount-link {
+    color: #357BA6; 
+    font-weight: 800;
+     
+  }
+  
+
+.main-button {
+    display: inline-block;
+    padding: 18px 50px;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 15px;
+    outline: 0.5px solid #1F1F1F;
+    transition: background-color 0.3s ease;
+    box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
+    margin: 10px;
+
+}
+.solid-button {
+    font-weight: 800;
+}
+
+.orange-button {
+    background-color: #FFFFFF;
+    box-shadow: none;
+    color: #E78435;
+    outline: 3px solid #E78435;
+    margin-bottom: 20px;
+}
+.orange-button:hover {
+    background-color: #E79F65;
+}
+
+.purple-button {
+    background-color: #874CF4;
+}
+.purple-button:hover {
+    background-color: #AD87F5;
+}
+
+.blue-button {
+    background-color: #3677EA;
+}
+.blue-button:hover {
+    background-color: #81A7EB;
+}
+
+.red-button {
+    background-color: #E93223;
+}
+.red-button:hover {
+    background-color: #E98981;
+}
+
+.testimonial-section {
+    margin-top: 50px;
+  }
+
+  .testimonial {
+    margin-bottom: 30px;
+  }
+
+  .testimonial blockquote {
+    font-style: italic;
+    font-size: 18px;
+    color: #333;
+  }
+
+  .testimonial-author {
+    font-weight: bold;
+    margin-top: 10px;
+  }
+
+ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: block;
+    font-weight: 600;
+  }
+ul li ul {
+    margin-left: 20px;
+    font-weight: 400;
+} 
+.footer {
+    background-color: #357BA6;
+    padding: 25px;
+    width: 100%;
+    height: auto;
+    color: #FFFFFF;
+    padding-top: 5px;
+   padding-bottom: 90px;
+}
+
+
+
