codetopiacommunity · AJ-254 · Dec 10, 2025 · Dec 11, 2025
diff --git a/README.md b/README.md
@@ -24,11 +24,10 @@ Check out this [instructions](https://github.com/codetopiacommunity/first-contri
 
 Now open `Contributors.md` file in a text editor, add your name to it and it should be it should be in this format:
 
-```bash
 ## Contributors
 
-- [Your Full Name](https://github.com/githubusername)
-```
+- [Juliet Asiedu](https://github.com/AJ-254)
+- [Katey Kwesi](https://github.com/KateyKwesi)
 
 ### Deploying your projects
 
@@ -47,8 +46,8 @@ This guide explains how to **invite a collaborator** to your GitHub repository,
 
 Before inviting a collaborator, ensure that:
 
-- You have **forked the repository** from the **Codetopia Community Repo**.  
-- You have **Admin access** to the forked repository.  
+- You have **forked the repository** from the **Codetopia Community Repo**.
+- You have **Admin access** to the forked repository.
 - You have the **GitHub username or email** (associated with GitHub) of the collaborator you have been assigned to.
 
 ---
@@ -57,7 +56,7 @@ Before inviting a collaborator, ensure that:
 
 To learn how to invite a collaborator, follow the steps demonstrated in the video below:
 
-**[Watch the tutorial video on how to invite a collaborator to your GitHub repository](https://youtu.be/yx3VkC6z2EE?si=UtOlFGYkwtSB7NyE)**  
+**[Watch the tutorial video on how to invite a collaborator to your GitHub repository](https://youtu.be/yx3VkC6z2EE?si=UtOlFGYkwtSB7NyE)**
 
 ---
 

diff --git a/index.html b/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="container">
+        <div class="herobackground"></div>
+        <nav>
+            <div class="logo"><img src="./images/logo.svg" alt="" width="20px"></div>
+            <div class="navlinks">
+                <div class="desktop">
+                    <a href="" class="navlink">PRODUCE</a>
+                    <a href="" class="navlink">FEATURES</a>
+                    <a href="" class="navlink">PRICING</a>
+                    <a href="" class="dot navlink">.</a>
+                    <a href="" class="login navlink">LOGIN</a>
+                </div>
+                <div class="mobile">
+                    <img src="./images/icon-hamburger.svg" alt="" width="20px" class="openburger">
+                    <img src="./images/icon-close.svg" alt="" class="closeburger">
+                </div>
+            </div>
+
+        </nav>
+        <div class="modal hidden">
+            <a href="" class="navlink">PRODUCT</a>
+            <a href="" class="navlink">FEATURES</a>
+            <a href="" class="navlink">PRICING</a>
+            <div class="rule"></div>
+            <a href="" class="login navlink">LOGIN</a>
+        </div>
+        <main>
+            <div class="heroimg">
+                <img src="./images/illustration-devices.svg" alt="">
+            </div>
+
+          <div class="herocontent">
+    <div class="badge-group">
+        <span class="badge-pill">NEW</span>
+        <span class="badge-label">MONOGRAPH DASHBOARD</span>
+    </div>
+
+    <h1>POWERFUL INSIGHTS<br>INTO YOUR TEAM</h1>
+
+    <p class="body-copy">Project planning and time tracking <br> for agile teams</p>
+
+    <div class="cta-group">
+        <button class="btn-primary">SCHEDULE A DEMO</button>
+        <span class="preview-label">TO SEE A PREVIEW</span>
+    </div>
+</div>
+        </main>
+    </div>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,9 @@
+const hambuger = document.querySelector(`.mobile`);
+const openBurger = document.querySelector(`.openburger`);
+const closeBurger = document.querySelector(`.closeburger`);
+const modal = document.querySelector(`.modal`);
+hambuger.addEventListener("click", () => {
+  openBurger.classList.toggle("openburger");
+  closeBurger.classList.toggle("closeburger");
+  modal.classList.toggle("hidden");
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,281 @@
+@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  position: relative;
+}
+
+.container {
+  min-height: 100vh;
+  overflow: hidden;
+  position: absolute;
+  z-index: 1;
+  width: 100%;
+}
+
+.desktop {
+  display: none;
+}
+.closeburger {
+  display: none;
+}
+.openburger {
+  display: block;
+}
+nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 2rem;
+  width: calc(90vw);
+  margin: auto;
+  font-family: "Barlow Condensed", sans-serif;
+}
+.modal {
+  position: absolute;
+  background-color: white;
+  width: 300px;
+  height: 250px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 5;
+  gap: 1rem;
+  margin-top: 3rem;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  font-family: "Barlow Condensed", sans-serif;
+  left: 50vw;
+  transform: translateX(-50%);
+  letter-spacing: 0.5px;
+  font-size: 1.2rem;
+}
+.hidden {
+  display: none;
+}
+
+.rule {
+  width: 100%;
+  height: 2px;
+  background-color: hsl(207, 33%, 95%);
+}
+.modal a {
+  text-decoration: none;
+  color: hsl(230, 29%, 20%);
+  font-weight: 700;
+}
+.login {
+  font-weight: 400 !important;
+}
+main {
+  display: flex;
+  height: 100vh;
+  width: 100%;
+  flex-direction: column;
+  gap: 1rem;
+  justify-content: space-around;
+}
+.heroimg {
+  width: calc(150vw);
+  height: 50vh;
+  position: relative;
+}
+
+.heroimg img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.herobackground {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  left: 50%;
+  background-color: hsl(207, 33%, 95%);
+  z-index: -1;
+  height: calc(55vh);
+  border-bottom-left-radius: 3rem;
+}
+
+.herocontent {
+  height: 50vh;
+  background-color: rgb(131, 131, 131);
+  direction: ltr;
+}
+
+.herocontent {
+    background-color: transparent;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start; 
+    text-align: left;
+    padding: 2rem 0; /* for mobile spacing */
+}
+
+.badge-group {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+    font-family: "Barlow Condensed", sans-serif;
+}
+
+.badge-pill {
+    background-color: hsl(230, 29%, 20%); 
+    color: white;
+    font-weight: 700;
+    font-size: 1rem;
+    padding: 0.3rem 0.8rem;
+    border-radius: 99px; 
+    text-transform: uppercase;
+}
+
+.badge-label {
+    color: hsl(230, 29%, 20%); 
+    opacity: 0.5; 
+    font-size: 1rem;
+    letter-spacing: 4px; 
+    text-transform: uppercase;
+}
+
+.herocontent h1 {
+    font-family: "Barlow Condensed", sans-serif;
+    font-weight: 700;
+    font-size: 3rem; 
+    line-height: 1; 
+    text-transform: uppercase;
+    color: hsl(230, 29%, 20%); 
+    margin-bottom: 1.5rem;
+}
+
+.body-copy {
+    font-family: "Barlow", sans-serif; 
+    font-weight: 400;
+    font-size: 18px; 
+    line-height: 1.5;
+    color: hsl(230, 29%, 20%); 
+    opacity: 0.6; 
+    margin-bottom: 3rem;
+    max-width: 350px;
+}
+
+.cta-group {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    font-family: "Barlow Condensed", sans-serif;
+}
+
+.btn-primary {
+    background-color: hsl(0, 100%, 68%); 
+    color: hsl(207, 33%, 95%); 
+    border: none;
+    padding: 0.9rem 1.8rem;
+    font-family: inherit;
+    font-weight: 700;
+    font-size: 1rem;
+    letter-spacing: 1px;
+    border-radius: 5px;
+    text-transform: uppercase;
+    cursor: pointer;
+    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
+    transition: opacity 0.2s;
+}
+
+.btn-primary:hover {
+    opacity: 0.8;
+}
+
+.preview-label {
+    color: hsl(230, 29%, 20%); 
+    opacity: 0.5;
+    font-size: 0.9rem;
+    letter-spacing: 4px;
+    text-transform: uppercase;
+}
+
+@media (min-width: 1024px) {
+    .herocontent h1 {
+        font-size: 4.5rem; 
+    }
+
+    .herocontent {
+        padding-left: 0; 
+    }
+}
+
+@media (min-width: 560px) {
+  .heroimg {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 90vw;
+    margin: auto;
+  }
+  .desktop {
+    display: flex;
+    gap: 1rem;
+  }
+  .desktop a {
+    text-decoration: none;
+    color: hsl(230, 29%, 20%);
+    font-weight: 700;
+  }
+  .mobile {
+    display: none;
+  }
+  .dot,
+  .login {
+    font-weight: 400 !important;
+  }
+  .modal {
+    display: none;
+  }
+}
+
+@media (min-width: 1024px) {
+  main {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    direction: rtl;
+    justify-content: center;
+    align-content: center;
+    column-gap: 3rem;
+    height: 100vh;
+  }
+  .heroimg {
+    width: 100%;
+  }
+  .heroimg img {
+    object-fit: cover;
+    object-position: 5rem;
+  }
+
+  .herobackground {
+    left: 55%;
+  }
+  nav {
+    font-size: 1.3rem;
+  }
+  .logo img {
+    width: 1.5rem;
+  }
+  .herocontent {
+    margin-left: 5rem;
+    direction: ltr;
+  }
+  .desktop {
+    gap: 2.5rem;
+  }
+}