some fixes (#1)

* replace hr's with css margins, constrain text * move contact css into separate file * put navbar logo above other items on page * copy nav + footer from other pages * change a lot of very specific px values over to more responsive units * improve contrast on form
bca-code-for-charity · Apr 2, 2024 · f3977b8 · f3977b8
1 parent 1c45f4e
commit f3977b8
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 163 deletions.
diff --git a/contactUs.html b/contactUs.html
@@ -18,188 +18,74 @@
     <!-- Compiled and minified JavaScript -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
 
-    <style>
-        body {
-            margin: 0;
-            padding: 0;
-        }
-        nav ul li a {
-            color: black;
-            font-size: 13px;
-            margin-left: 25px;
-            margin-right: 25px;
-        }
-        .nav-wrapper {
-            background-color: white;
-        }
-        .contactCont {
-            font-weight: bold;
-            display: inline-flex;
-            padding: 25px 35px; 
-            justify-content: center;
-            align-items: center;
-            gap: 9px;
-            border-radius: 21px;
-            background: rgba(217, 217, 217, 0.71);
-            box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-            text-align: center;
-            position: absolute;
-            top: 37%;
-            left: 50%;
-            transform: translate(-50%, -25%);
-        }
-
-        .navBanner {
-            position: relative;
-            width: 100%;
-            height: 489px;
-            border: 1px solid #304562;
-            background: url(img/dedilseFigmaBanner.png), lightgray 0px -139.5px / 100% 294.479% no-repeat;
-            background-size: cover;
-            background-position: center;
-        }
-
-        form {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            margin-top: 50px;
-        }
-
-        form div {
-            margin-bottom: 20px;
-        }
-
-        form label {
-            font-weight: bold;
-        }
-
-        form input,
-        form textarea {
-            width: 803px;
-            padding: 15px;
-            font-size: 30px;
-            border: 1px solid #C45A4C;
-            background: #FFF;
-        }
-
-        form textarea {
-            height: 290px;
-            resize: none;
-            border: 1px solid #C45A4C;
-        }
-
-        button {
-            width: 165.912px;
-            height: 50px;
-            color: #FFF;
-            background-color: #C45A4C;
-            border: none;
-            font-size: 20px;
-            border-radius: 20px;
-            margin-bottom: 100px;
-        }
-
-        footer {
-            width: 100%; 
-            height: 520px;
-            background-color: #C45A4C;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        }
-
-        .footerContent {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 100%; 
-        }
-
-        .footerWords {
-            display: flex;
-            gap: 82px; 
-            justify-content: center; 
-            align-items: center; 
-
-        }
-
-        .footerWords a {
-            color: #FFF; 
-            font-size: 20px; 
-            text-decoration: none; 
-            transition: color 0.3s;
-        }
-
-        .footerWords a:hover {
-            color: #E0E0E0; 
-        }
-
-
-    </style>
+    <link rel="stylesheet" href="styles/contact.css">
+    <link rel="stylesheet" href="./styles/nav.css">
 </head>
 <body>
     <nav>
-        <div class="nav-wrapper">
-            <ul class="left">
-                <li><a href="ourStory.html">OUR STORY</a></li>
-                <li><a href="ourProjects.html">OUR PROJECTS</a></li>
-            </ul>
-            <ul class="right">
-                <li><a href="donate.html">DONATE</a></li>
-                <li><a href="getStarted.html">GET STARTED</a></li>
-                <li><a href="contactUs.html">CONTACT US</a></li>
-            </ul>
-        </div>
+        <ul class="topLeft">
+            <li><a href="ourStory.html" class="ourStory">OUR STORY</a></li>
+            <div class="dropdown">
+                <a href="ourStory.html">ABOUT US</a>
+                <a href="timeline.html">TIMELINE</a>
+            </div>
+            <li><a href="ourProjects.html">OUR PROJECTS</a></li>
+        </ul>
+        <img class="logo" src="img/dedilseLogo.png" alt="De Dil Se Logo">
+        <ul class="topRight">
+            <li><a href="donate.html">DONATE</a></li>
+            <li><a href="contactUs.html">CONTACT US</a></li>
+        </ul>
     </nav>
-
     <div class="navBanner">
         <h5 class="contactCont">CONTACT US</h5>
     </div>
 
     <form>
         <div>
-            <label for="name">Name</label> <br />
-            <input type="text" name="name" id="name" />
+            <label for="name">Name</label> <br/>
+            <input type="text" name="name" id="name"/>
         </div>
 
         <div>
-            <label for="email">Email</label> <br />
-            <input type="email" name="email" id="email" />
+            <label for="email">Email</label> <br/>
+            <input type="email" name="email" id="email"/>
         </div>
 
         <div>
-            <label for="phone">Phone Number</label> <br />
+            <label for="phone">Phone Number</label> <br/>
             <input type="tel" name="phone" id="phone" />
         </div>
 
         <div>
-            <label for="message">Message</label> <br />
-            <textarea name="message" id="message" rows="4"></textarea>
+            <label for="message">Message</label> <br/>
+            <textarea name="message" id="message"></textarea>
+        </div>
+
+        <div>
+            <button type="submit">SEND</button>
         </div>
-
-        <button type="submit">SEND</button>
     </form>
 
-
     <footer>
-        <div class="footerContent">
-            <div class="footerWords">
+        <ul class="bottom-links">
+            <li>
                 <a href="ourStory.html">OUR STORY</a>
+                <a href="ourStory.html" class="bottom-footer bottom-footer-1">ABOUT US</a>
+                <a href="timeline.html" class="bottom-footer">TIMELINE</a>
+            </li>
+            <li>
                 <a href="ourProjects.html">OUR PROJECTS</a>
-                <a href="donate.html">DONATE</a>
-                <a href="getStarted.html">GET STARTED</a>
-                <a href="contactUs.html">CONTACT US</a>
-            </div>
-        </div>
+                <a href="ourProjects.html#p1" class="bottom-footer bottom-footer-1">PROJECT #1</a>
+                <a href="ourProjects.html#p2" class="bottom-footer">PROJECT #2</a>
+            </li>
+            <li><a href="donate.html">DONATE</a></li>
+            <li><a href="contactUs.html">CONTACT US</a></li>
+        </ul>
     </footer>
 
-
-
-
-
+    <script src="./scripts/nav.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
     <script> M.AutoInit();</script>
-
 </body>
 </html>
diff --git a/index.html b/index.html
@@ -33,16 +33,16 @@
 
     <img src="./img/Community-Foodbank-of-New-Jersey-distribution.webp" id="navImg"
         alt="Community Food Bank Distribution" class="headerImg">
-    <hr>
 
     <div id="dedilse">
         <h1 class="centeredText">DE DIL SE</h1>
         <!-- Add breaks given text -->
-        <p class="dedilseInnerText">Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, eligendi. Est
-            temporibus repellendus sint, inventore ratione laboriosam amet veritatis aliquam esse, saepe ab eum error
-            animi voluptas. Libero, quam sunt?</p>
-        <br>
-        <p class="dedilseInnerText">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, ipsum?</p>
+        <p class="dedilseInnerText">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
+        aute irure dolor in reprehenderit in voluptate velit esse <br/><br/>cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
     </div>
     <h2 class="centeredText" id="ourpartnerstext">OUR PARTNERS</h2>
     <div id="ourpartners">
@@ -59,12 +59,12 @@ <h2 class="centeredText" id="ourpartnerstext">OUR PARTNERS</h2>
             <p id="partner3tag" class="partnertag">Lorem Ipsum</p>
         </div>
     </div>
-    <hr>
+
     <div id="imgBar">
         <img src="./img/r1.jpeg" alt="Some image1" class="randomImg">
         <img src="./img/r2.webp" alt="Some image2" class="randomImg">
     </div>
-    <hr>
+
     <footer>
         <ul class="bottom-links">
             <li>

diff --git a/styles/contact.css b/styles/contact.css
@@ -0,0 +1,72 @@
+body {
+    margin: 0;
+    padding: 0;
+}
+
+.nav-wrapper {
+    background-color: white;
+}
+
+.contactCont {
+    font-weight: bold;
+    padding: 2rem 2.5rem;
+    border-radius: 1.3rem;
+    background: #d9d9d9b5;
+    box-shadow: 0px 4px 4px 0px #00000040;
+    text-align: center;
+    width: max-content;
+    margin: 37vh 50vw 37vh;
+    transform: translate(-50%, -25%);
+}
+
+.navBanner {
+    position: relative;
+    width: 100%;
+    height: 80vh;
+    border: 1px solid #304562;
+    background: url('../img/dedilseFigmaBanner.png'), #304562 0px -140px / 100% 295% no-repeat;
+    background-size: cover;
+    background-position: center;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 4rem;
+}
+
+form div {
+    margin-bottom: 1.1rem;
+}
+
+form label {
+    font-weight: bold;
+    color: black !important;
+}
+
+form input,
+form textarea {
+    width: 50vw;
+    padding: 1rem;
+    font-size: 1.3rem;
+    background: #FFF;
+}
+
+form textarea {
+    height: 30vh;
+    resize: none;
+    border: 1px solid #C45A4C;
+    margin: 5vh auto;
+}
+
+button {
+    width: 10vw;
+    height: 3rem;
+    color: #FFF;
+    background-color: #C45A4C;
+    border: none;
+    font-size: 1.2rem;
+    border-radius: 1.2rem;
+    margin-bottom: 6vh;
+}
diff --git a/styles/index.css b/styles/index.css
@@ -48,24 +48,32 @@ hr {
 }
 
 #imgBar {
-    margin-top: 3vh;
+    margin: 12vh 0 7vh;
     width: 100%;
     display: flex;
     justify-content: space-around;
 }
 
 #imgBar img {
-    border: 1px solid black;
+    border-right: 1px solid black;
     max-width: 100%;
     height: auto;
 }
 
+#imgBar img:last-of-type {
+    border-right: none;
+}
+
 #dedilse {
     text-align: center;
+    margin: 4vh auto 0;
+    width: 70vw;
 }
 
 .dedilseInnerText {
     margin: 3vh 5vw;
+    line-height: 1.5rem;
+    color: #304562;
 }
 
 /* Media Queries */

diff --git a/styles/nav.css b/styles/nav.css
@@ -52,6 +52,7 @@ nav ul li a {
     width: 125px;
     height: 125px;
     margin-top:30px;
+    z-index: 3;
 }
 
 footer {