Merge pull request #7 from AmosBlack/main

Update style.css for Gapping
Virtual4087 · Oct 14, 2023 · 5657ef5 · 5657ef5
2 parents 535d8f1 + 14bb85c
commit 5657ef5
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 36 deletions.
diff --git a/index.html b/index.html
@@ -25,7 +25,7 @@
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <div class="banner">
+    <div class="banner section">
         <nav>
             <div class="logo"><img src="images/For_Website/4x/Website_name.png" alt="Logo" width="160px"></div>
             <div class="nav_buttons">
@@ -52,7 +52,7 @@
         <div class="text"><br>We plant trees on your behalf. $1 = 1 Tree Planted.<br>Plant a Tree, Restore Biodiversity, and Transform Our Planet.</div>
     </div> -->
 
-    <div class="locations">
+    <div class="locations section">
         <div class="heading">WHERE WE PLANT<br>
             <div class="line"></div>
         </div>
@@ -69,27 +69,27 @@
 
 
 
-    <div class="Video">
+    <div class="Video section">
         <iframe width="100%" height="100%" src="https://www.youtube.com/embed/ibPe7iuTFZw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
     </div>
 
-    <div class="Donate">
+    <div class="Donate section">
         <div class="text">Trees are nature's superheroes, fighting climate change, supporting livelihoods, and nurturing life.<br> Together, we can make a difference, one tree at a time.<br><br><span>~ Founder</span><br><br></div>
         <button>JUST $1 PLANTS A TREE</button>
     </div>
 
-    <div class="get_involved">
+    <div class="get_involved section">
             <div class="Option" id="_1">INDIVIDUALS</div>
             <div class="Option" id="_2">BUSINESSES</div>
             <div class="Option" id="_3">SCHOOLS</div> 
     </div>
 
-    <div class="events">
+    <div class="events section">
         <div class="plant_with_us">PLANT WITH US<span class="join_us">Join our local events and make a positive impact with your own hands</span></div>
         <button>VIEW EVENTS</button>
     </div>
 
-    <div class="Goals">
+    <div class="Goals section">
         <div class="heading">OUR GOALS<br>
             <div class="line"></div>
     </div>

diff --git a/style.css b/style.css
@@ -1,12 +1,12 @@
 *{
-    scroll-behaviour:smooth;
+    scroll-behavior:smooth;
 }
 
 body{
     margin: 0px;
     padding: 0px;
     font-family: sans-serif;
-    height: 600vh;
+    /* height: 600vh; */
 
     display: flex;
     flex-direction: column;
@@ -19,9 +19,12 @@ html{
     scroll-behavior: smooth;
 }
 
+.section{
+    margin-bottom: 3em;
+}
+
 .banner{
     height: 100vh;
-
     display: grid;
     grid-template-rows: 10% 1fr;
 }
@@ -199,13 +202,15 @@ nav .nav_buttons{
 }
 
 .locations{
-    width: 70%;
     margin: 0px auto;
-
-    display: grid;
+    height: fit-content ;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    /* display: grid;
     grid-template-rows: repeat(4, 1fr);
-    grid-template-columns: repeat(3, 1fr);
-    justify-items: center;
+    grid-template-columns: repeat(3, 1fr); */
+    /* justify-items: center; */
     align-items: center;
     row-gap: 3%;
 }
@@ -228,14 +233,17 @@ nav .nav_buttons{
 .locations img{
     width: 300px;
     border-radius: 10px;
+    margin: 5px 10px;
     transition: 2sec;
     background-image: red;
+    margin: 10px auto;
 }
 
 .locations .country_images{
     position: relative;
     transition: 0.5s;
     cursor: pointer;
+    margin: 5px 10px;
 }
 
 .locations .country_images:hover{
@@ -246,12 +254,12 @@ nav .nav_buttons{
     color: white;
     font-size: 18px;
     font-family: 'Oswald', sans-serif;
-
+    max-width: inherit;
     position: absolute;
-    top: 83%;
+    top: 80%;
     left: 0;
     right: 0;
-    bottom: 2%;
+    bottom: 6%;
 
     text-align: center;
 
@@ -319,18 +327,21 @@ nav .nav_buttons{
 }
 
 .Video{
-    margin: 0px auto;
-    width: 1100px;
-    height: 620px;
+    margin: 2em auto;
+    width: 90vw;
+    height: 100vh;
 }
 
 .Goals{
-    height: 60vh;
-    width: 70%;
+    width: 80vw;
     margin: 0px auto;
-    display: grid;
+    margin-bottom: 2em;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    /* display: grid;
     grid-template-rows: 0.3fr 1fr;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, 1fr); */
     column-gap: 15vh;
     text-align: center;
 }
@@ -351,11 +362,14 @@ nav .nav_buttons{
 }
 
 .Goals .images {
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.377);
+    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.377);
     border-radius: 20px;
     display: flex;
     flex-direction: column;
-
+    justify-content: center;
+    max-width: 300px;
+    margin: 5px 10px;
+    padding: 10px 5px;
     gap: 4%;
     font-size: 14px;
 }
@@ -376,11 +390,10 @@ nav .nav_buttons{
 }
 
 .get_involved{
-    width: 65%;
     margin: 0px auto;
-
+    width: 80vw;
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     flex-wrap: wrap;
 }
 
@@ -447,8 +460,6 @@ nav .nav_buttons{
 
     font-size: 20px;
 
-    position: absolute;
-    left: 90%;
 }
 
 .Donate button{
@@ -472,7 +483,6 @@ nav .nav_buttons{
 }
 
 .footer{
-    height: 400px;
     background-color: #141414;
     border-top: 1px solid black;
     color: rgb(160, 160, 160);
@@ -481,11 +491,12 @@ nav .nav_buttons{
 
     display: flex;
     flex-direction: column;
+    justify-content: space-between;
 }
 
 .footer .upper_part{
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
     flex: 1;
 }
 
@@ -517,15 +528,15 @@ nav .nav_buttons{
 .upper_part .signup {
     flex: 1;
     display: flex;
-    justify-content: flex-end;
+    /* justify-content: flex-end; */
     align-items: center;
 }
 
 .upper_part .container{
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: flex-end;
+    /* justify-content: flex-end; */
     gap: 15px;
 }