Awareness Environment

Copy and paste the following elements in the body html.

Head

ID Banner

<h1> Lets Save Our Planet Earth </h1>

<p> Environmental Awareness: Why It’s Important To Save the Planet ? </p>

</div>

<a href="#features"> <span></span>Explore </a>

</div>

</section>

CSS for Banner

*{

/*for all text */

font-family: 'El Messiri', sans-serif;

margin: 0;

padding: 0;

}

#banner{

height: 650px;

background:linear-gradient(rgba(0,0,0,0.1), #1eb300) , url(images/banner.jpg);

background-size: cover;

background-position: center;

}

.logo{

width: 140px;

margin-top: 20px;

}

.banner-text{

color: white;

text-align: center;

padding-top: 180px;

}

.banner-text h1{

font-size: 80px;

}

.banner-text p{

font-size: 30px;

}

.banner-btn{

margin: 10px 0px;

text-align: center

}

.banner-btn a{

width:200px;

text-decoration: none;

display: inline-block;

margin: 0 10px;

padding: 12px 0;

color: white;

border: .5px solid #fff;

position: relative;

z-index: 1;

transition: color 0.5s;

}

.banner-btn a span {

width: 0%;

height: 100%;

position: absolute;

top:0;

left:0;

background: #fff;

z-index: -1;

transition: 0.5s;

}

.banner-btn a:hover span {

width: 100%;

}

.banner-btn a:hover{

color: #000;

}

CSS for content

.title-text{

text-align: center;

padding-bottom: 20px;

margin-bottom: 10px;

}

/* font-weight: bold;*/

.title-text p{

font-size: 40px;

color: #000;

}

.title-text h1{

font-size:30px;

color: #1ca700;

}

.contents{

margin-bottom: 20px;

margin-left: 40px;

margin-right: 40px;

margin-top: 15px;

font-size: 16px;

color: #000000;

font-weight: normal;

background: linear-gradient( #fff, #ECFFDC);

}

ID Features

<p>Highlights On Environmental Study</p>

<h1>Why Environmental Awareness is important! </h1>

<h3 class="contents">Environmental awareness means exactly what you may think: an awareness around the natural environment and the choices that either promote its well-being or cause it more harm. It is also the awareness that the earth is in need of protection for its survival. Along with this, the term “environmentalism” is an ideology that humans are responsible to protect and preserve the environment from human-caused afflictions. As previously stated, human-made choices are the number one reason why the planet is becoming sicker every day. Environmentalism on a large scale is one of the best ways to combat the devastating consequences of these human decisions and help the planet’s health take a complete 180 degree in the other direction. </h3>

<h1>Major Environmental Problems </h1>

<h3 id="EnvironmentalIsuues" class="contents">Some environmental life species require substantial areas to help provide food, living space, and other different assets. These creatures are called area specific.

At the point when the biome is divided, the vast patches of living space don’t exist anymore. It becomes more troublesome for the wildlife to get the assets they need in order to survive. The environment goes on, even though the animals and plant life are not there to help sustain it properly. </h3>

</div>

<span>Land Disturbance </span>

</span></span></div>

<p>A more basic cause of environmental degradation is land damage. Numerous weedy plant species, for example, garlic & mustard, are both foreign and obtrusive.

A rupture in the environmental surroundings provides for them a chance to start growing and spreading. These plants can assume control over nature, eliminating the local greenery. The result is a territory with a solitary predominant plant which doesn’t give satisfactory food assets to all the environmental life. Thus the whole environment can be destroyed because of these invasive species.</p>

</div>

</div>

<span>Pollution</span>

</span></span></div>

<p>Pollution, in whatever form, whether it is air, water, land or noise is harmful to the environment. Air pollution pollutes the air that we breathe, which causes health issues.

Water pollution degrades the quality of water that we use for drinking purposes. Land pollution results in the degradation of the earth’s surface as a result of human activities.

Noise pollution can cause irreparable damage to our ears when exposed to continuous large sounds like honking of vehicles on a busy road or machines producing large noise in a factory or a mill.</p>

</div>

</div>

<span>Over Population</span>

</span></span></div>

<p>Rapid population growth puts strain on natural resources, which results in the degradation of our environment. Mortality rate has gone down due to better medical facilities, which has resulted in an increased lifespan.

More population simply means more demand for food, clothes and shelter. You need more space to grow food and provide homes to millions of people. This results in deforestation, which is another factor in environmental degradation.</p>

</div>

</div>

<span>Landfills</span>

</span></span></div>

<p>Landfills pollute the environment and destroy the beauty of the city. Landfills come within the city due to the large amount of waste that gets generated by households, industries, factories and hospitals.

Landfills pose a great risk to the health of the environment and the people who live there. Landfills produce a foul smell when burned and cause substantial environmental degradation.</p>

</div>

</div>

<span>Deforestation</span>

</span></span></div>

<p>Deforestation is the cutting down of trees to make way for more homes and industries. Rapid growth in population and urban sprawl are two of the major causes of deforestation. Apart from that, the use of forest land for agriculture, animal grazing, harvest for fuelwood and logging are some of the other causes of deforestation. Deforestation contributes to global warming as decreased forest size puts carbon back into the environment.</p>

</div>

</div>

</section>

CSS for Features

.feature-box{

width: 80%;

display: flex;

text-align: center;

margin-bottom: 25px;

margin: auto;

}

.features{

flex-basis: 50%;

}

.features-img{

flex-basis: 50%;

margin: auto;

}

.features-img img{

width: 70%;

border-radius: 10px;

margin-bottom: 25px;

}

.features span{

font-size: 30px;

color: #1ca700;

}

.features-icon .fas{

line-height: 50px;

border-radius: 8px;

border: 1px solid #1ca700;

width: 50px;

height: 50px;

}

ID ImpactonEnvironment

<p>Impacts On Environment</p>

<h1>Effects of Environmental Degradation</h1>

</div>

<h3>Impact on Human Health</h3>

<hr>

<p>Areas exposed to toxic air pollutants can cause respiratory problems like pneumonia and asthma. Millions of people are known to have died due to the indirect effects of air pollution.</p>

</div>

<h3>Loss of Biodiversity</h3>

<hr>

<p>Deforestation, global warming, overpopulation and pollution are a few of the major causes of loss of biodiversity.</p>

</div>

<h3>Ozone Layer Depletion</h3>

<hr>

<p>The presence of chlorofluorocarbons, hydrochlorofluorocarbons in the atmosphere, is causing the ozone layer to deplete and emit harmful radiation back to the earth.</p>

</div>

<h3>Loss For the Tourism Industry</h3>

<hr>

<p>The deterioration of the environment can be a huge setback for the tourism industry that relies on tourists for their daily livelihood. </p>

</div>

<h3>Economic Impact</h3>

<hr>

<p>Environmental degradation can have a significant economic impact in terms of restoration of green cover, cleaning up of landfills and protection of endangered species.</p>

</div>

<h3>Global Warming</h3>

<hr>

<p>Global warming is the long-term warming of the planet’s overall temperature. Fossil fuels include coal, oil, and natural gas, and burning them causes what is known as the “greenhouse effect”. </p>

</div>

</section>

CSS for ImpactOnEnvirontment

#ImpactOnEnvironment{

width: 100%;

background-color: #efefef;

}

.ImpactEnvironment-box{

justify-content: space-around;

display: flex;

flex-wrap: wrap;

margin: auto;

width: 80%;

}

.single-impact img{

width: 100%;

height: 270px;

border-radius: 5px;

}

.single-impact{

text-align: center;

flex-basis: 48%;

margin-bottom: 20px;

color: white;

height: 270px;

}

.overlay{

cursor: pointer;

border-radius: 7px;

margin-top: -270px;

background: linear-gradient(rgba(255,255,255,0.5),#00ffff );

width: 100%;

height: 100%;

opacity: 0;

position: relative;

}

.single-impact:hover .overlay{

opacity: 1;

}

.impact-description{

left: 10%;

position: relative;

width: 80%;

margin-top: -40px;

bottom: 0;

transition: bottom 1s;

opacity:0;

}

.single-impact:hover .impact-description{

bottom: 40%;

opacity: 1;

}

ID testimonial

<p>Top Environmentalists</p>

<h1>What Environmentalists say! </h1>

</div>

<h4>Lady Bird Johnson <i class="fa fa-twitter"></i></h4>

<small>@LadyBirdJohnson</small>

</div>

<p>“The environment is where we all meet; where we all have a mutual interest; it is the one thing all of us share.” <br> <br>

-Lady Bird Johnson</p>

</div>

<small>@JohnPaulII</small>

</div>

<p>The Earth will not continue to offer its harvest, except with faithful stewardship. We cannot say we love the land and then take steps to destroy it for use by future generations.” <br>

—John Paul II</p>

</div>

<h4>John Ruskin <i class="fa fa-twitter"></i></h4>

<small>@JohnRuskin</small>

</div>

<p>Nature is painting for us, day after day, pictures of infinite beauty.” <br><br><br>

—John Ruskin</p>

</div>

</section>

CSS for testimonial

#testimonial{

width: 100%;

padding: 70px 0;

}

.testimonial-row{

flex-wrap: wrap;

justify-content: space-between;

display: flex;

width: 90%;

margin: auto;

}

.testimonial-col{

transition: transform 0.5s;

cursor: pointer;

border-radius: 5px;

box-shadow: 0 10px 20px 3px #7fbf7f;

padding: 10px;

margin-bottom: 30px;

flex-basis: 28%;

}

.testimonial-col:hover{

transform: translateY(-16px);

}

.testimonial-col p{

font-size: 17px;

}

.user img{

width: 40px;

border-radius: 3px;

}

.user-info .fa{

margin-left: 10px;

color: #27c0ff;

font-size:20px;

}

.user-info small{

color: #27c0ff;

}

ID footer

<h1>Join Us in the Noble Cause!</h1>

</div>

<h1>Environmental Awareness Ltd.</h1>

<p><i class="fa fa-clock-o"></i> Available 24x7 </p>

<p><i class="fa fa-map-marker"></i> Indonesia</p>

</div>

<h1>Get in Touch with Us</h1>

<p><i class="fa fa-address-card"></i> Jakarta, Indonesia</p>

<p>contactcenter@gmail.com</p>

</div>

</section>

CSS for footer

#footer{

background: #e4e1e1;

padding: 10px 0 20px;

}

.footer-row{

width: 80%;

margin: 0 auto;

display: flex;

justify-content: space-between;

flex-wrap: wrap;

}

.footer-img{

position: absolute;

left: 35%;

opacity: 0.3;

width: 370px;

}