diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2ad498f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+        <link rel="stylesheet" href="style.css" />
+        <title>Gymtastic</title>
+    </head>
+
+    <body>
+    <nav> 
+        <ul>
+            <li><h3><strong>Gymtastic</strong></h3></li>
+            <li>Home</li>
+            <li> About Us</li>
+            <li> Contact Us </li>
+        </ul>
+    </nav>
+
+   <div class="main">
+        <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 todat and save a whopping <span>50%</span>!</p>
+            <a class="membership">get membership</a>
+            <h1>Follow us on</h1>
+
+        <ul class="links"> 
+            <li class="instagram">Instagram</li>   
+            <li class="facebook">Facebook</li>
+            <li class="youtube">YouTube</li> 
+       </ul>
+    </div>
+
+    </body>
+    <footer>
+        <ul class="info">
+            <li class="popular-features">Popular features</li>
+            <li class="near-me">Gyms Near Me</li>
+        </ul>
+                <ul class="locations">
+                    <li>Gyms in London</li>
+                    <li>Gyms in Cardiff</li>
+                    <li>Gyms in Glasgow</li>
+                </ul>
+        <ul class="more-info">
+            <li>Fitness Classes</li>
+            <li>Personal Trainers</li>
+            <li>Gym Membership Deals & Offers</li>
+        </ul>
+    </footer>
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..e766ac7
--- /dev/null
+++ b/style.css
@@ -0,0 +1,117 @@
+nav, footer {
+    background-color: rgb(7, 117, 157);
+}
+nav, footer, ul.links li {
+    color: white;
+}
+ul {
+    list-style: none;
+}
+nav li {
+    display: inline-block;
+    font-size: 20px;
+    padding-right: 35px;
+    margin-left: 20px;
+}
+
+div.main, div.review {
+    margin-left: 30px;
+}
+
+h1 {
+    color: rgb(18, 133, 174);
+    font-family: Arial, Helvetica, sans-serif;
+}
+p {
+    font-family: Arial, Helvetica, sans-serif;
+}
+p span {
+    color: rgb(23, 91, 163);
+    font-weight: bold;
+} 
+div.main a.membership {
+    color: rgb(237, 159, 14);
+    text-transform: uppercase;
+    padding-left: 25px;
+    padding-right: 25px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    border: 3px solid orange;
+    border-radius: 15px;
+    margin-top: 10px;
+    margin-bottom: 5px;
+    display: inline-block;
+    font-weight: bolder;
+}
+
+footer { 
+    padding-top: 10px;
+    padding-bottom: 15px;
+    margin-left: 0px;
+    padding-left: 20px;
+    margin-top: 20px ;
+
+}
+ul.links, ul {
+    padding-inline-start: 0px;
+}
+
+ul.links li {
+
+    display: inline-block;
+    font-size: 20px;
+    padding-top: 15px;
+    padding-bottom: 15px;
+    padding-left: 30px;
+    padding-right: 30px;
+    margin-right: 19px;
+    border-radius: 15px;
+    font-weight: bold;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+ li.instagram {
+    background-color: rgb(160, 12, 252);
+    box-shadow: rgb(128, 6, 204) 1px 1px 1px 1px;
+ }
+ li.facebook {
+    background-color: rgb(95, 122, 245);
+    box-shadow:rgb(52, 88, 248) 1px 1px 1px 1px;
+ }
+ li.youtube {
+    background-color: rgb(240, 62, 62);
+    box-shadow: rgb(247, 6, 6) 1px 1px 1px 1px;
+ }
+ div.review {
+    list-style: none;
+
+ }
+
+ .clearfix::after {
+    content: "";
+    clear: both;
+    display: table;
+  }
+ul.locations {
+    margin-block-start: 0px;
+    margin-block-end: 0px;
+    font-weight: bold;
+}
+ul.info, ul.location, ul.more-info {
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+
+ body, footer {
+    margin: 0px;
+ }
+ li.popular-features {
+    font-size: 19px;
+ }
+ li.near-me, li.more-info {
+    padding-top: 10px;
+    font-weight: bold;
+    font-size: 17px;
+ }
+ ul.location {
+    margin-left: 20px;
+ }
\ No newline at end of file
