From 31b7b2c6806df2e0bbc29e51309c9bc626868d54 Mon Sep 17 00:00:00 2001
From: Shovit <119912892+Virtual4087@users.noreply.github.com>
Date: Fri, 13 Oct 2023 11:33:53 +0545
Subject: [PATCH] Create style.css

---
 style.css | 591 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 591 insertions(+)
 create mode 100644 style.css

diff --git a/style.css b/style.css
new file mode 100644
index 0000000..fd4e82f
--- /dev/null
+++ b/style.css
@@ -0,0 +1,591 @@
+body{
+    margin: 0px;
+    padding: 0px;
+    font-family: sans-serif;
+    height: 600vh;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    position: relative;
+}
+
+html{
+    scroll-behavior: smooth;
+}
+
+.banner{
+    height: 100vh;
+
+    display: grid;
+    grid-template-rows: 10% 1fr;
+}
+
+.banner::before{
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    height: 100vh;
+    background-image: linear-gradient(rgba(0, 0, 0, 0.6),rgba(29, 29, 29, 0.6)), url("../images/For_Website/child-hands-holding-caring-young-green-plant.jpg");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    z-index: -1;
+}
+
+nav{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0px 8%;
+
+    transition-property: background-color;
+    transition-duration: 0.3s;
+}
+
+nav .logo img{
+    cursor: pointer;
+}
+
+nav .nav_buttons{
+    padding: 0px;
+    margin: 0px;
+
+    height: 100%; 
+    width: 35%;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr); 
+    position: relative;
+}
+
+.nav_buttons .nav_button{
+    text-decoration: none;
+    color: #bbbbbb; 
+    font-family: 'Poppins', sans-serif;
+    letter-spacing: 0.5px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+    font-size: 14px;
+    cursor: pointer;
+
+    transition-duration: 0.3s;
+    position: relative;
+}
+
+.nav_buttons .nav_button::after{
+    content: "";
+    position: absolute;
+    bottom: 30%; 
+    left: 15%;
+
+    height: 2px;
+    width: 0;
+
+    background-color: rgb(51, 175, 20);
+    border-radius: 20px;
+    transition: 0.3s;
+}
+
+.nav_buttons .nav_button:hover::after{
+    width: 70%;
+}
+
+.nav_buttons .nav_button:hover{
+    color: rgb(255, 255, 255);
+    transform: scale(1.1);
+}
+
+.banner .body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    
+    flex-direction: column;
+    gap: 2%;
+}
+
+.body .text{
+    color: white;
+    font-size: 18px;
+
+    text-align: center;
+}
+
+.text .Big_Text{
+    font-size: 50px;
+    font-weight: bold;
+    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.514);
+}
+
+.body .page_buttons{
+    display: flex;
+    justify-content: space-between;
+}
+
+.page_buttons button{
+    --color_1: #ffffff;
+    color: #ffffff;
+    background: none;
+    font-family: 'Poppins', sans-serif;
+    font-size: 14px;
+
+    letter-spacing: 1px;
+    cursor: pointer;
+
+    padding: 15px 25px;
+    margin: 10px;
+
+    border: 1px solid var(--color_1);
+
+    transition: 0.5s;
+    position: relative;
+    overflow: hidden;
+}
+
+.page_buttons .two{
+    color: #000000;
+}
+
+.page_buttons .one:hover{
+    color: #000000;
+}
+
+.page_buttons .two:hover{
+    color: #ffffff;
+}
+
+.page_buttons button::before{
+    content: "";
+    position: absolute;
+    left: 0;
+    height: 0;
+    width: 100%;
+    background: var(--color_1);
+    transition: 0.5s;
+    z-index: -1;
+}
+
+.one::before{
+    top: 0;
+    border-radius: 0 0 50% 50%;
+}
+
+.two::before{
+    bottom: 0;
+    border-radius: 50% 50% 0 0;
+}
+
+.page_buttons .two::before{
+    height: 180%;
+}
+
+.page_buttons .one:hover::before{
+    height: 180%;
+}
+
+.page_buttons .two:hover::before{
+    height: 0;
+}
+
+.locations{
+    width: 70%;
+    margin: 0px auto;
+
+    display: grid;
+    grid-template-rows: repeat(4, 1fr);
+    grid-template-columns: repeat(3, 1fr);
+    justify-items: center;
+    align-items: center;
+    row-gap: 3%;
+}
+
+.locations .heading{
+    grid-column-start: 1;
+    grid-column-end: 4;
+    font-size: 35px;
+    width: 100%;
+    text-align: center;
+}
+
+.locations .line{
+    height: 1px;
+    width: 60%;
+    background-color: #000000;
+    margin: 20px auto;
+}
+
+.locations img{
+    width: 300px;
+    border-radius: 10px;
+    transition: 2sec;
+    background-image: red;
+}
+
+.locations .country_images{
+    position: relative;
+    transition: 0.5s;
+    cursor: pointer;
+}
+
+.locations .country_images:hover{
+    transform: scale(1.05);
+}
+
+.country_images span{
+    color: white;
+    font-size: 18px;
+    font-family: 'Oswald', sans-serif;
+
+    position: absolute;
+    top: 83%;
+    left: 0;
+    right: 0;
+    bottom: 2%;
+
+    text-align: center;
+
+    background-color: rgba(0, 0, 0, 0.562);
+    border-radius: 0px 0px 10px 10px;
+    transition: 0.5s;
+}
+
+.locations .country_images:hover span{
+    background-color: #ffffff;
+    color: #000000;
+}
+
+.events{
+    height: 60vh;
+
+    background-image: linear-gradient(rgba(0, 0, 0, 0.55),rgba(0, 0, 0, 0.55)), url(../images/For_Website/Event.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.plant_with_us{
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    color: white;
+    font-family: 'Oswald', sans-serif;
+    font-size: 50px;;
+    letter-spacing: 0.5px;
+    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.514);
+}
+
+.join_us{
+    font-family: Arial, Helvetica, sans-serif;
+    color: white;
+    font-size: 18px;
+    text-shadow: none;
+}
+
+.events button{
+    color: #ffffff;
+    background: none;
+    font-family: 'Poppins', sans-serif;
+    font-size: 15px;
+    letter-spacing: 0.5px;
+    
+    padding: 15px 25px;
+    margin: 40px;
+    border: 1px solid #ffffff;
+    cursor: pointer;
+
+    transition: 0.5s;
+}
+
+.events button:hover{
+    transform: scale(1.05);
+    color: #000000;
+    background-color: #ffffff;
+}
+
+.Video{
+    margin: 0px auto;
+    width: 1100px;
+    height: 620px;
+}
+
+.Goals{
+    height: 60vh;
+    width: 70%;
+    margin: 0px auto;
+    display: grid;
+    grid-template-rows: 0.3fr 1fr;
+    grid-template-columns: repeat(3, 1fr);
+    column-gap: 15vh;
+    text-align: center;
+}
+
+.Goals .heading{
+    width: 100%;
+    text-align: center;
+    font-size: 35px;
+    grid-column-start: 1;
+    grid-column-end: 4;
+}
+
+.Goals .line{
+    height: 1px;
+    width: 60%;
+    margin: 20px auto;
+    background-color: #000000;
+}
+
+.Goals .images {
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.377);
+    border-radius: 20px;
+    display: flex;
+    flex-direction: column;
+
+    gap: 4%;
+    font-size: 14px;
+}
+
+.Goals .images img{
+    margin: 5% auto;
+}
+
+.Goals .images span{
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 24px;
+}
+
+.Goals .images .text{
+    flex: 1;
+    padding: 2%;
+}
+
+.get_involved{
+    width: 65%;
+    margin: 0px auto;
+
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+.get_involved .Option{
+    height: 400px;
+    width: 340px;
+    margin: 8px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
+    font-family: 'Poppins', sans-serif;
+    letter-spacing: 2px;
+    font-size: 25px;
+    cursor: pointer;
+    border-radius: 15px;
+}
+
+.get_involved #_1{
+    background-image: linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)), url("../images/For_Website/Individual.jpg");
+    background-size: cover;
+}
+
+.get_involved #_2{
+    background-image: linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)), url("../images/For_Website/Businesses.jpg");
+    background-size: cover;
+}
+
+.get_involved #_3{
+    background-image: linear-gradient(rgba(0, 0, 0, 0.3),rgba(0, 0, 0, 0.3)), url("../images/For_Website/School.jpg");
+    background-size: cover;
+}
+
+.Donate{
+    /* height: 60vh; */
+    padding: 10vh 0px;
+    background-image: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4)), url("https://i.pinimg.com/originals/80/6d/6b/806d6b97c0f3194063250e416f00084f.jpg");
+    background-size: cover;
+    background-attachment: fixed;
+
+    color: rgb(255, 255, 255);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.Donate .text{
+    position: relative;
+
+    text-align: center;
+    font-size: 25px;
+    font-family: 'Ysabeau', sans-serif;
+}
+
+.Donate span{
+
+    font-size: 20px;
+
+    position: absolute;
+    left: 90%;
+}
+
+.Donate button{
+    color: #000000;
+    background: white;
+    font-family: 'Poppins', sans-serif;
+    font-size: 15px;
+    letter-spacing: 0.5px;
+    
+    padding: 15px;
+    border: 1px solid #ffffff;
+    cursor: pointer;
+
+    transition: 0.5s;
+}
+
+.Donate button:hover{
+    transform: scale(1.05);
+    color: #ffffff;
+    background-color: rgba(0, 0, 0, 0);
+}
+
+.footer{
+    height: 400px;
+    background-color: #141414;
+    border-top: 1px solid black;
+    color: rgb(160, 160, 160);
+    font-family: 'Poppins', sans-serif;
+    padding: 0px 300px;
+
+    display: flex;
+    flex-direction: column;
+}
+
+.footer .upper_part{
+    display: flex;
+    justify-content: space-around;
+    flex: 1;
+}
+
+.upper_part .links{
+    flex: 1.5;
+    display: flex;
+    justify-content: space-between;
+}
+
+.upper_part .links a{
+    text-decoration: none;
+    color: rgb(160, 160, 160);
+    font-size: 15px;
+    position: relative;
+    transition: 0.5s;
+}
+
+.links a:hover{
+    color: rgb(255, 255, 255);
+    transform: scale(1.03);
+}
+
+.links .column{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 20px;
+}
+
+.upper_part .signup {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.upper_part .container{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 15px;
+}
+
+.container input{
+    height: 30px;
+    width: 250px;
+
+    border: 1px solid rgb(255, 255, 255);
+    border-radius: 5px;
+    color: rgb(0, 0, 0);
+    padding-left: 10px;
+    margin: 5px;
+    background-color: white;
+}
+
+.container input::placeholder{
+    font-size: 12px;
+}
+
+.container button{
+
+    font-family: 'Poppins', sans-serif;
+    font-size: 13px;
+    letter-spacing: 0.5px;
+    background-color: rgba(255, 255, 255, 0);
+    color: white;
+    border: 1px solid white;
+    
+    padding: 8px 15px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: 0.5s;
+}
+
+.container button:hover{
+    transform: scale(1.05);
+    color: #000000;
+    background: rgb(255, 255, 255);
+}
+
+.container .Login{
+    font-size: 12px;
+}
+
+.container .Login a{
+    color: white;
+}
+
+.footer .lower_part{
+    flex: 0.3;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+}
+
+.lower_part .social_medias{
+    gap: 10px;
+}
+
+.social_medias img{
+    cursor: pointer;
+    transition: 0.5s;
+}
+
+.social_medias img:hover{
+    transform: scale(1.1);
+}
+
+.lower_part .rights_reserved{
+    position: absolute;
+    bottom: 60%;
+    right: 35%;
+}