Reverting my changes

CommuniCare1 · Sep 22, 2024 · 6423acb · 6423acb
1 parent ed468d6
commit 6423acb
Show file tree

Hide file tree

Showing 11 changed files with 164 additions and 127 deletions.
diff --git a/about.css b/about.css
@@ -36,16 +36,6 @@ button{
 }
 
 /*About Us Starts*/
-header::before{
-    content: '';
-    position: absolute;
-    top:0;
-    left:0;
-    width: 100%;
-    height: 100%;
-    background: #fff;
-
-}
 .aboutus-about {
     padding:80px;
     position:relative;
@@ -619,8 +609,7 @@ header::before{
         font-size: 50px;
         left: -1em;
         position: relative;
-        margin-top: -201px;-
-        box;
+        margin-top: -201px;
         margin-top: -5em;
         margin-bottom: -12em;
         }
@@ -630,7 +619,7 @@ header::before{
     .team img {margin-bottom: 5px;}
     .team p {font-size: 14px;
         margin: 0;
-        width:100%;}
+        width:100%;
+    }
 }
-
-/*About Us Ends*/
+/*About Us Ends*/
diff --git a/about.html b/about.html
@@ -12,23 +12,29 @@
         <link href="https://fonts.googleapis.com/css2?family=Domine:[email protected]&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
         <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
     </head>
+
     <body>
         <header>
-            <img src="images/Brand/Logo.svg"/>
-            <img src="images/Brand/Logo text.svg"/>
-            <nav class="navbar">
-                <a href="index.html">Home</a>
-                <a href="about.html">About</a>
-                <a href="workshops.html">Workshops</a>
-                <a href="contact.html">Contact</a>
-                <button onclick="document.location='app.html'">Our App</button>
-            </nav>
-            <input type="checkbox" id="check">
-            <label for="check" class="icons">
-                <i class='bx bx-menu' id="menu-icon"style="font-size: 2.8rem; color: #1C3312;"></i>
-                <i class='bx bx-x'id="close-icon"style="font-size: 2.8rem; color: #1C3312;"></i>
-            </label>
+            <div class = "container">
+                <div class = "image">
+                    <img class="leaf"src="images/Brand/Logo.svg"/>
+                    <img src="images/Brand/Logo text.svg"/>
+                </div>
+                <nav class="navbar">
+                    <a href="index.html">Home</a>
+                    <a href="about.html">About</a>
+                    <a href="workshops.html">Workshops</a> 
+                    <a href="contact.html">Contact</a> 
+                    <button onclick="document.location='app.html'">Our App</button>
+                </nav>
+                <input type="checkbox" id="check">
+                <label for="check" class="icons">
+                    <i class='bx bx-menu' id="menu-icon"style="font-size: 2.8rem; color: #1C3312;"></i>
+                    <i class='bx bx-x'id="close-icon"style="font-size: 2.8rem; color: #1C3312;"></i>
+                </label>
+            </div>
         </header>
+
         <section class="aboutus-about">
             <img src="images/Brand/leaf sprout.svg"/>
             <h1>About Us</h1>

diff --git a/app.css b/app.css
@@ -21,30 +21,21 @@ button{
     font-optical-sizing: auto;
     font-weight: 700;
     font-style: normal;
-    font-size:0.938rem;
+    font-size:15px;
+    font-variation-settings:"wdth" 100;
     padding: 10px;
     box-sizing: border-box;
     border: none;
-    border-radius:3.125rem;
-    width: 10rem;
+    border-radius: 50px;
+    width: 160px;
     color: #1C3312;
-    height: 1.25rem;
+    height: 50px;
     margin-top: 20px;
     justify-content: center;
     transition: all 0.3s ease;
 }
 
 /*App Starts*/
-header::before{
-    content: '';
-    position: absolute;
-    top:0;
-    left:0;
-    width: 100%;
-    height: 100%;
-    background: #fff;
-
-}
 
 .meet-app {
     flex-grow: 1;

diff --git a/app.html b/app.html
@@ -16,21 +16,26 @@
     </head>
     <body>
         <header>
-            <img src="images/Brand/Logo.svg"/>
-            <img src="images/Brand/Logo text.svg"/>
-            <nav class="navbar">
-                <a href="index.html">Home</a>
-                <a href="about.html">About</a>
-                <a href="workshops.html">Workshops</a>
-                <a href="contact.html">Contact</a>
-                <button onclick="document.location='app.html'">Our App</button>
-            </nav>
-            <input type="checkbox" id="check">
-            <label for="check" class="icons">
-                <i class='bx bx-menu' id="menu-icon"style="font-size: 2.8rem; color: #1C3312;"></i>
-                <i class='bx bx-x'id="close-icon"style="font-size: 2.8rem; color: #1C3312;"></i>
-            </label>
+            <div class = "container">
+                <div class = "image">
+                    <img class="leaf"src="images/Brand/Logo.svg"/>
+                    <img src="images/Brand/Logo text.svg"/>
+                </div>
+                <nav class="navbar">
+                    <a href="index.html">Home</a>
+                    <a href="about.html">About</a>
+                    <a href="workshops.html">Workshops</a> 
+                    <a href="contact.html">Contact</a> 
+                    <button onclick="document.location='app.html'">Our App</button>
+                </nav>
+                <input type="checkbox" id="check">
+                <label for="check" class="icons">
+                    <i class='bx bx-menu' id="menu-icon"style="font-size: 2.8rem; color: #1C3312;"></i>
+                    <i class='bx bx-x'id="close-icon"style="font-size: 2.8rem; color: #1C3312;"></i>
+                </label>
+            </div>
         </header>
+
         <div class="meet-app">
             <div class="h1-box">
                 <h1>Meet The CommuniCare App</h1>

diff --git a/banner.css b/banner.css
@@ -11,6 +11,8 @@ body {
         "wdth" 100;
     text-align: center;
     align-items: center;
+    height: 100vh;
+    background: inherit;
 }
 
 button{
@@ -36,6 +38,7 @@ button{
 }
 
 /*Header/Navigation Bar Starts*/ /*ALMOST DONE JUST NEED MEDIA!!*/
+
 header {
     position: fixed;
     display:block;
@@ -107,7 +110,7 @@ header button:active {
     animation-name: dissolve;
 }
 
-header label{
+.icons{
     position: relative;
     font-size: 2.8rem;
     color: #1C3312;
@@ -119,9 +122,10 @@ header label{
 header #check{
     display:none
 }
+
 /* Media Queries */
 
-@media screen and (max-width: 1226px) {
+@media screen and (max-width: 1199px) {
     header {
         padding: 1.3rem 5%;
     }
@@ -134,9 +138,8 @@ header #check{
 
     .icons{
         display: inline-flex;
-        top: -38%;
         left: 30%;
-
+        bottom: 0%;
     }
     #menu-icon {
         display: block;
@@ -161,6 +164,7 @@ header #check{
         height: 0;
         background: rgba(0, 0, 0, 0.1);
         backdrop-filter: blur(50px);
+        overflow: hidden;
         box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
         background-color: rgba(255, 255, 255, 1);
         transition: .3s ease;
@@ -231,32 +235,41 @@ header #check{
 }
 
 @media screen and (max-width: 480px) {
-    header {padding: 0%;
-        width: 77%;}
+    header {
+        padding: 0%;
+        width: 63%;
+        height: 17%;
+    }
 
-    header img {margin-bottom: 10px;
+    header image {
+        margin-bottom: 10px;
         left: -4em;
-        top: 1em;}
+        top: 1em;
+    }
 
-    header button {width: 130px;
+    header button {
+        width: 130px;
         font-size: 14px;
         margin: 0.5rem auto;
-        display: block;}
+        display: block;
+    }
 
     header label {font-size: 2rem;
         top: -1.5em;
-        left: 5em;}
+        left: 5em;
+    }
 
-    header nav.navbar {
+    header .navbar {
         display: flex;
         flex-direction: column;
         align-items: center;
-        background-color: #fff; /* Adjust based on your design */
+        background-color: #fff;
         position: absolute;
-        top: 4rem; /* Adjust based on your header height */
+        top: 4rem; 
         right: 0;
         width: 100%;
-        display: none; /* Hide by default */}
+        display: none;
+    }
+}
 
-/* Header/Navigation Bar Ends */
-    }
+/* Header/Navigation Bar Ends */
diff --git a/banner.html b/banner.html
@@ -31,4 +31,4 @@
         </header>
     </body>
 
-</html>
+</html>
diff --git a/contact.css b/contact.css
@@ -1,4 +1,5 @@
-body {margin: 0;
+body {
+    margin: 0;
     padding: 0;
     padding-top: 150px;
     box-sizing: border-box;
@@ -9,13 +10,34 @@ body {margin: 0;
     font-variation-settings:
         "wdth" 100;
     text-align: center;
-    align-items: center;}
+    align-items: center;
+}
+
+button{
+    display: flex;
+    align-items: center;
+    background: #CAE4C5;
+    font-family: "Open Sans", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 700;
+    font-style: normal;
+    font-size:15px;
+    font-variation-settings:"wdth" 100;
+    padding: 10px;
+    box-sizing: border-box;
+    border: none;
+    border-radius: 50px;
+    width: 160px;
+    color: #1C3312;
+    height: 50px;
+    margin-top: 20px;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
 
 
 /*Contact Starts*/
-header{
-    padding: 1.3rem 5%;
-}
+
 .contact-container{
     width: 100%;
     color:#1C3312;
@@ -230,9 +252,6 @@ textarea{
 
 /* Media Queries */
 @media screen and (max-width: 1107px) {
-    header {
-        padding: 1.3rem 5%;
-    }
 
     .contact-box {
         flex-direction: column;

diff --git a/contact.html b/contact.html
@@ -18,21 +18,26 @@
     </head>
     <body>
         <header>
-            <img src="images/Brand/Logo.svg"/>
-            <img src="images/Brand/Logo text.svg"/>
-            <nav class="navbar">
-                <a href="index.html">Home</a>
-                <a href="about.html">About</a>
-                <a href="workshops.html">Workshops</a>
-                <a href="contact.html">Contact</a>
-                <button onclick="document.location='app.html'">Our App</button>
-            </nav>
-            <input type="checkbox" id="check">
-            <label for="check" class="icons">
-                <i class='bx bx-menu' id="menu-icon"style="font-size: 2.8rem; color: #1C3312;"></i>
-                <i class='bx bx-x'id="close-icon"style="font-size: 2.8rem; color: #1C3312;"></i>
-            </label>
+            <div class = "container">
+                <div class = "image">
+                    <img class="leaf"src="images/Brand/Logo.svg"/>
+                    <img src="images/Brand/Logo text.svg"/>
+                </div>
+                <nav class="navbar">
+                    <a href="index.html">Home</a>
+                    <a href="about.html">About</a>
+                    <a href="workshops.html">Workshops</a> 
+                    <a href="contact.html">Contact</a> 
+                    <button onclick="document.location='app.html'">Our App</button>
+                </nav>
+                <input type="checkbox" id="check">
+                <label for="check" class="icons">
+                    <i class='bx bx-menu' id="menu-icon"style="font-size: 2.8rem; color: #1C3312;"></i>
+                    <i class='bx bx-x'id="close-icon"style="font-size: 2.8rem; color: #1C3312;"></i>
+                </label>
+            </div>
         </header>
+
         <div class = "contact-container">
             <img src="images/Brand/leaf sprout.svg"/>
             <h1>Contact Us</h1>
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,4 +31,4 @@ @@
             </header>
         </body>
-    </html>
+    </html>