diff --git a/gymsite.html b/gymsite.html
new file mode 100644
index 0000000..eb0e7de
--- /dev/null
+++ b/gymsite.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="styles.css" />
+    <title>Gymtastic Home</title>
+  </head>
+  <body>
+    <div id="topbar">
+      <ul id="navbar">
+        <li><h2>Gymtastic</h2></li>
+        <li>Home</li>
+        <li>About Us</li>
+        <li>Contact Us</li>
+      </ul>
+    </div>
+    <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 today and save a whopping <span>50%</span>!</p>
+      <p id="membutton">GET MEMBERSHIP</p>
+      <h1>Follow us on</h1>
+      <article id="social-list">
+        <li class="socials" style="background-color: purple">Instagram</li>
+        <li class="socials" style="background-color: blue">Facebook</li>
+        <li class="socials" style="background-color: red">Youtube</li>
+      </article>
+    </main>
+    <div id="bottombar">
+      <br>
+      <ul id="linksmenu"></ul>
+        <h4>Popular features</h4>
+          <li class="boldI">Gyms Near Me</li>
+        <ul>
+          <li>Gyms in London</li>
+          <li>Gyms in Cardiff</li>
+          <li>Gyms in Glasgow</li>
+        </ul>
+        <li class="boldI">Fitness Classes</li>
+        <li class="boldI">Personal Trainers</li>
+        <li class="boldI">Gym Membership Deals & Offers</li>
+      </ul>
+      <br>
+    </div>
+  </body>
+</html>
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..3ab42fb
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,59 @@
+* {
+  font-family: Arial, Helvetica, sans-serif;
+}
+div {
+  background-color: cornflowerblue;
+  color: white;
+}
+h1,
+span {
+  color: cornflowerblue;
+}
+h1 {
+  font-weight: 650;
+}
+main {
+  margin: 70px;
+}
+li {
+  list-style-type: none;
+}
+#navbar li {
+  display: inline-block;
+  margin: 15px;
+  font-size: 30px;
+}
+main p,
+main li {
+  font-size: 20px;
+}
+#membutton {
+  color: orange;
+  height: 25px;
+  width: 200px;
+  padding: 20px;
+  border: 2px solid orange;
+  border-radius: 25px;
+}
+#social-list li {
+  display: inline-block;
+  margin: 10px;
+  font-weight: 700;
+  font-size: x-large;
+  text-align: center;
+  line-height: 20px;
+  height: 20px;
+  width: 175px;
+  padding: 25px;
+}
+.socials {
+  border-radius: 25px;
+  color: white;
+}
+#bottombar h4,
+#bottombar li {
+  margin-left: 50px;
+}
+.boldI {
+  font-weight: bold;
+}
