diff --git a/README.md b/README.md index 7a4518d..cee6705 100644 --- 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 new file mode 100644 index 0000000..718fb9a --- /dev/null +++ b/index.html @@ -0,0 +1,63 @@ + + + + + + + Document + + + + +
+
+ + +
+
+ +
+ +
+
+ NEW + MONOGRAPH DASHBOARD +
+ +

POWERFUL INSIGHTS
INTO YOUR TEAM

+ +

Project planning and time tracking
for agile teams

+ +
+ + TO SEE A PREVIEW +
+
+
+
+ + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..077e42f --- /dev/null +++ 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 new file mode 100644 index 0000000..70f4e1b --- /dev/null +++ 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; + } +}