diff --git a/index.html b/index.html
new file mode 100644
index 0000000..45ec8b0
--- /dev/null
+++ b/index.html
@@ -0,0 +1,49 @@
+<!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">
+    <title>Gymtastic</title>
+    <link rel="stylesheet" href="style.css" >
+</head>
+<body>
+    <header>
+        <h1>Gymtastic</h1>
+        <p>Home</p>
+        <p>About Us</p>
+        <p>Contact Us</p>
+    </header>
+    <main>
+        <div>
+            <h2>Fitness for life!</h2>
+            <br>
+            <p>Every gym is desined with you in mind, from the way they're laid out, to the range of equipment available.</p>
+            <br>
+            <p>Get your membership today and save a whopping <span>50%</span>!</p>
+            <br>
+            <button id="Membership">GET MEMBERSHIP</button>
+        </div>
+        <div>
+            <h2>Follow us on</h2>
+            <button id="Instagram">Instagram</button>
+            <button id="Facebook">Facebook</button>
+            <button id="YouTube">YouTube</button>
+        </div>
+    </main>
+    <footer>
+        <h3>Poular features</h3>
+        <br>
+        <p>Gyms Near Me</p>
+        <ul>
+            <li>Gyms in London</li>
+            <li>Gyms in Cardiff</li>
+            <li>Gyms in Glasgow</li>
+        </ul>
+        <p>Fitness Classes</p>
+        <p>Personal Trainers</p>
+        <p>Gym Membership Deals & Offers</p>
+    </footer>
+    
+</body>
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..03c2869
--- /dev/null
+++ b/style.css
@@ -0,0 +1,87 @@
+* {
+    margin: 0px;
+    box-sizing: border-box;
+}
+
+header, footer {
+    background-color: rgb(47, 107, 236);
+    padding: 15px;
+    color: white;
+    padding-bottom: 20px;
+}
+
+main {
+    padding: 20px;
+}
+
+header * {
+    display: inline-block;
+    margin-right: 25px;
+}
+
+/* p {
+    font-weight: 500;
+} */
+
+h2 {
+    color:rgb(47, 107, 236);
+    font-weight: 1000;
+    font-size: 30px;
+    /* display: inline-block; */
+}
+
+span {
+    color:rgb(47, 107, 236);
+    font-weight: 900;
+}
+
+h3 {
+    font-weight: 400;
+}
+
+button {
+    color: white;
+    border-radius: 10px;
+    padding: 10px 20px;
+    border: black 1px solid;
+    margin-right: 15px;
+    font-size: larger;
+    font-weight: 550;
+}
+
+ul {
+    list-style-type: none;
+    
+}
+
+footer p {
+    font-weight: 600;
+}
+
+main > div + div > h2 {
+    margin-bottom: 8px;
+}
+
+#Membership {
+    color: orange;
+    border: orange solid 2px;
+    background-color: white;
+    font-weight: 500;
+    font-size: 15px;
+    margin-bottom: 20px;
+}
+
+#Instagram {
+    background-color: blueviolet;
+}
+
+#Facebook {
+    background-color: rgb(71, 110, 241);
+}
+
+#YouTube {
+    background-color: red;
+}
+
+
+
