diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..0b87d0f
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.DS_Store
+.zed
diff --git a/about-us.html b/about-us.html
new file mode 100644
index 0000000..92f256c
--- /dev/null
+++ b/about-us.html
@@ -0,0 +1,115 @@
+<!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="styles.css" />
+    <link rel="stylesheet" href="carousel.css" />
+  </head>
+  <body>
+    <div id="page-container">
+      <div id="content-wrap">
+        <div class="navbar">
+          <ul>
+            <li>
+              <a
+                href="./home.html"
+                style="font-weight: bold; font-size: 18px"
+              >
+                Gymtastic
+              </a>
+            </li>
+            <li><a href="./home.html">Home</a></li>
+            <li><a href="./about-us.html">About Us</a></li>
+            <li><a href="#contact-us">Contact Us</a></li>
+          </ul>
+        </div>
+        <div class="content">
+          <h1>About Us</h1>
+          <section>
+            <p>
+              Lorem ipsum dolor sit amet consectetur adipisicing elit.
+              Ipsa odit sapiente odio modi, saepe officiis mollitia
+              placeat tempora! Minima at, eaque natus alias omnis
+              eligendi iure quia reiciendis unde velit. Lorem ipsum
+              dolor sit amet consectetur adipisicing elit. Vel dolore
+              quia, quos molestiae aliquam pariatur laboriosam,
+              dolorum perspiciatis beatae blanditiis dignissimos.
+              Labore architecto aspernatur fugiat ullam a maiores
+              error obcaecati? Lorem, ipsum dolor sit amet consectetur
+              adipisicing elit. Recusandae reprehenderit laudantium,
+              labore facere culpa magnam! Alias aperiam molestias
+              officiis nulla dolores adipisci. Vitae dolores iure
+              accusantium odio, quam assumenda a?
+            </p>
+          </section>
+        </div>
+        <div>
+          <h1 style="margin-left: 20px">Our Gyms</h1>
+          <section>
+            <div class="carousel">
+              <div class="card-container">
+                <div class="card">
+                  <h2>London</h2>
+                  <p>📍 Westminster</p>
+                  <p>Open 24 hours</p>
+                </div>
+                <div class="card">
+                  <h2>Cardiff</h2>
+                  <p>📍 Splott</p>
+                  <p>Open 24 hours</p>
+                </div>
+                <div class="card">
+                  <h2>Glasgow</h2>
+                  <p>📍 Govanhill</p>
+                  <p>Open 24 hours</p>
+                </div>
+                <div class="card">
+                  <h2>London</h2>
+                  <p>📍 Camden</p>
+                  <p>Open 24 hours</p>
+                </div>
+                <div class="card">
+                  <h2>London</h2>
+                  <p>📍 Leicester Square</p>
+                  <p>Open 24 hours</p>
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+      <footer id="footer">
+        <p class="footer-heading">Popular Features</p>
+        <p class="footer-text">Gyms Near Me</p>
+        <div class="footer-list">
+          <p>Gyms in London</p>
+          <p>Gyms in Cardiff</p>
+          <p>Gyms in Glasgow</p>
+        </div>
+        <p class="footer-text">Fitness Classes</p>
+        <p class="footer-text">Personal Trainers</p>
+        <p class="footer-text">Gym Membership Deals & Offers</p>
+      </footer>
+    </div>
+    <script>
+      const listOfCardElements = document.querySelectorAll('.card')
+      const cardContainer = document.querySelector('.card-container')
+
+      listOfCardElements.forEach((cardElement, index) => {
+        cardElement.addEventListener('click', () => {
+          const scrollLeft = index * listOfCardElements[0].offsetWidth
+          cardContainer.scrollTo({
+            left: scrollLeft,
+            behavior: 'smooth',
+          })
+        })
+      })
+    </script>
+  </body>
+</html>
diff --git a/carousel.css b/carousel.css
new file mode 100644
index 0000000..c61dc56
--- /dev/null
+++ b/carousel.css
@@ -0,0 +1,39 @@
+.carousel {
+  width: 100%;
+  height: 166px;
+  margin-bottom: 50px;
+}
+
+.card-container {
+  width: 100%;
+  display: flex;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  gap: 8px;
+  width: 100%;
+  margin: 8px;
+  flex: 0 0 100%;
+}
+
+.card-container::-webkit-scrollbar {
+  display: none;
+}
+
+.card {
+  min-width: 250px;
+  height: 150px;
+  scroll-snap-align: start;
+  display: inline;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #181818;
+  color: white;
+  border-radius: 8px;
+  background-color: #3779a4;
+}
+
+.card:hover {
+  background: #6ba4c9;
+}
diff --git a/home.html b/home.html
new file mode 100644
index 0000000..b15bcab
--- /dev/null
+++ b/home.html
@@ -0,0 +1,103 @@
+<!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="styles.css" />
+  </head>
+  <body>
+    <div id="page-container">
+      <div id="content-wrap">
+        <div class="navbar">
+          <ul>
+            <li>
+              <a
+                href="./home.html"
+                style="font-weight: bold; font-size: 18px"
+              >
+                Gymtastic
+              </a>
+            </li>
+            <li><a href="./home.html">Home</a></li>
+            <li><a href="./about-us.html">About Us</a></li>
+            <li><a href="#contact-us">Contact Us</a></li>
+          </ul>
+        </div>
+        <div class="content">
+          <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 id="discount" href="#membership">50%</a>
+              !
+            </p>
+            <button class="membership-button">GET MEMBERSHIP</button>
+          </section>
+          <br />
+          <h1>Follow us on</h1>
+          <section>
+            <button
+              class="social-media-button"
+              style="background-color: #874af3"
+            >
+              Instagram
+            </button>
+            <button
+              class="social-media-button"
+              style="background-color: #3578ea"
+            >
+              Facebook
+            </button>
+            <button
+              class="social-media-button"
+              style="background-color: #e93123"
+            >
+              YouTube
+            </button>
+          </section>
+        </div>
+        <div class="testimonials">
+          <h1>Member Stories</h1>
+          <div class="quote-container">
+            <p class="quote">
+              This is the best gym ever!
+              <br />
+              <cite>- Alva Jordal</cite>
+            </p>
+            <p class="quote">
+              I love training at Gymtastic!
+              <br />
+              <cite>- Ezeikel Pemberton</cite>
+            </p>
+            <p class="quote">
+              It's fantastic with Gymtastic!
+              <br />
+              <cite>- Carlo Minciacchi</cite>
+            </p>
+          </div>
+        </div>
+      </div>
+      <footer id="footer">
+        <p class="footer-heading">Popular Features</p>
+        <p class="footer-text">Gyms Near Me</p>
+        <div class="footer-list">
+          <p>Gyms in London</p>
+          <p>Gyms in Cardiff</p>
+          <p>Gyms in Glasgow</p>
+        </div>
+        <p class="footer-text">Fitness Classes</p>
+        <p class="footer-text">Personal Trainers</p>
+        <p class="footer-text">Gym Membership Deals & Offers</p>
+      </footer>
+    </div>
+  </body>
+</html>
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..d568087
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,134 @@
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.navbar {
+  display: flex;
+  background-color: #3779a4;
+}
+
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+li {
+  float: left;
+}
+
+li a {
+  display: block;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+}
+
+li a:hover {
+  background-color: #6ba4c9;
+}
+
+.content {
+  margin: 20px;
+}
+
+#discount {
+  color: #3779a4;
+  font-weight: bold;
+  text-decoration: none;
+}
+
+.membership-button {
+  background-color: white;
+  color: orange;
+  border-style: solid;
+  border-width: 2px;
+  border-color: orange;
+  border-radius: 15px;
+}
+
+.social-media-button {
+  box-shadow:
+    0 4px 8px 0 rgba(0, 0, 0, 0.2),
+    0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  font-size: 20px;
+  color: white;
+  font-weight: bold;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 15px;
+  margin-right: 10px;
+}
+
+button {
+  padding-top: 15px;
+  padding-bottom: 15px;
+  padding-left: 25px;
+  padding-right: 25px;
+}
+
+.testimonials {
+  width: 100%;
+  margin: 20px;
+  margin-top: 50px;
+  margin-bottom: 50px;
+}
+
+.quote-container {
+  display: flex;
+  overflow-x: scroll;
+}
+
+.quote {
+  max-height: 50px;
+  width: 150px;
+  background: #f0f0f0;
+  padding: 20px;
+  border-radius: 15px;
+  margin-right: 10px;
+}
+
+footer {
+  background-color: #3779a4;
+  color: white;
+  line-height: 0.5;
+  padding: 20px;
+}
+
+.footer-heading {
+  padding-bottom: 10px;
+  font-size: 18px;
+}
+
+.footer-list {
+  margin-left: 20px;
+}
+
+.footer-text {
+  font-weight: bold;
+}
+
+h1 {
+  color: #3779a4;
+}
+
+#page-container {
+  position: relative;
+  min-height: 100%;
+}
+
+#content-wrap {
+  padding-bottom: 2.5rem;
+}
+
+#footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}
