<div id="div1" class="div">
<div id="title"><h1> Plastic Waste in Vietnam </h1></div>
<div>
<h2 id="question">Did you know?</h2>
</div>
<div id="fact1" class="circle1">
<p id="text1">Vietnam lies in the top 5 countries with the most plastic waste thrown into the environment.</p>
</div>
<div id="bigplasticbottle">
<img id="bigplastic" src="https://i.postimg.cc/Twzf2YqB/plastic.png">
</div>
<div>
<h3 id="question2">What is plastic waste?</h3>
</div>
<div>
<img id="plasticwaste" src="https://i.postimg.cc/pdGbcWpg/plastic-glass-with-straw.png">
</div>
<div id="fact1" class="circle2">
<p id="text2">Plastic wastes are plastic items created and used by man and also throw away into the environment by man. It is the accumulation of plastic and creates pollution.</p>
</div>
<div>
<h4 id="question3" class="divquestion">Why is Vietnam one of the top contributors to plastic waste?</h4>
</div>
<div id="infodiv" class="infodiv">
<p id="text3">The main reason Vietnam is one of the top contributors to plastic is because of the overuse of plastic bags and bottles, and not reusing them, but rather throwing them into the environment.</p>
</div>
<div>
<img id="top" src="https://i.postimg.cc/PfZVPWmC/go-to-the-top.png">
</div>
<div id="scroll1" class="tooltip">Effects
<span class="tooltiptext">Go to Effects</span>
</div>
<div id="scroll2" class="tooltip">Solutions
<span class="tooltiptext">Go to Solutions</span>
</div>
<div id="scroll3" class="tooltip">Sources
<span class="tooltiptext">Go to Sources</span>
</div>
<div>
<img id="VN" src="https://i.postimg.cc/bv8dtDN0/vietnam.png">
</div>
<div>
<img id="map" src="https://i.postimg.cc/L8jn5BR6/vietnam_place.png">
</div>
</div>
<div id="container">
<div id="title1">
<h1>Effects of Plastic Waste</h1>
</div>
<div class="infodiv" id="info1">
<p id="text4">Plastic waste can lead to the death of lots of creatures, including human. Animals mistaken plastic for food, therefore, they consume it and die or get poisoned. Some of these animals or consumed by humans, bringing diseases to humans as well.</p>
</div>
<div class="infodiv" id="info2">
<p id="text4">Plastic Waste can also create all sorts of pollution like land, air, and water pollution. Plastic items are made with lots of toxic acids and if these acids leaks out, it could be very harmful for the land, but also for humans and other living things.</p>
</div>
<div class="infodiv" id="info3">
<p id="text4">Plastic waste can affect a whole food chain. The plastic is mistaken as food and consumed by small creatures. The bigger predators consume these little creatures and get sick. These creatures are then consumed by bigger predators and the poison and disease is spread around the whole ecosystem.</p>
</div>
<div>
<img id="toxic" src="https://i.postimg.cc/YqVs0t9x/nuclear.png">
</div>
<div>
<img id="pollution" src="https://i.postimg.cc/TPvNjQnL/waste.png">
</div>
<div>
<img id="bag" src="https://i.postimg.cc/N0b8yxDw/shopping-bag.png">
</div>
</div>
<div id="container2">
<div>
<img id="tree" class="flat" src="https://i.postimg.cc/rmDMsdMn/leafless-tree.png">
</div>
<div id="title1">
<h1>Solutions</h1>
<p id="text2"></p>
</div>
<tr>
<td>
<!--Creates the popup body-->
<div class="popup-overlay1">
<!--Creates the popup content-->
<div>
<h4>Ways to Recycle Plastic:</h4>
</div>
<div>
<p3 id="recycle1"><ol>
<li>Sort all your plastic items in categories because every plastic object is made differently.</li>
<li>Give these to the plastic factory, they will recieve these and cut them into smaller pieces.</li>
<li>These little plastic pieces will be cleaned by the factory through machines and technologies.</li>
<li>These materials will be melted and used to form new materials for humans to use.</li>
</ol></p3>
</div>
<div>
<img id="recycleimg" src="https://i.postimg.cc/NjV9Lppv/plastic-bottle.png">
</div>
<!--popup's close button-->
<button class="close1">Close</button>
</div>
<!--Content shown when popup is not displayed-->
<button id="button" class="open1">Recycle</button>
<!--End of the popup body-->
</td>
</tr>
<tr>
<td>
<!--Creates the popup body-->
<div class="popup-overlay2">
<!--Creates the popup content-->
<div>
<h3>Ways to Reuse Plastic:</h3>
</div>
<div>
<p2 id="reuse1"><ol>
<li>Bring your plastic bag everywhere you go, and don't throw them away. Keep them for later uses.</li>
<li>Buy a reusable plastic bottle and refill it after you're done instead of buying packaged plastic bottles.</li>
<li>Buy resuable plastic containers to contain your food and materials in, instead of putting them in plastic bags and throwing them away after you use it once.</li>
<li>It might feels nice to start off a new year with new folders, but folders last for a long time, reuse the folders and reduce the use of plastic.</li>
<li>Don't just throw away all your plastic toys when you finished using them, give them to the orphanage or other unfortunate people, so they can play too.</li>
</ol></p2>
</div>
<!--popup's close button-->
<button class="close2">Close</button>
</div>
<!--Content shown when popup is not displayed-->
<button id="button1" class="open2">Reuse</button>
<!--End of the popup body-->
</td>
</tr>
<tr>
<td>
<!--Creates the popup body-->
<div class="popup-overlay3">
<!--Creates the popup content-->
<div>
<h2>Things <b id="you">YOU</b> Should Avoid Buying/Using:</h2>
</div>
<div>
<p1><ul>
<li>Plastic straws</li>
<li>Packaged plastic bottles</li>
<li>Plastic bags</li>
<li>Packaged food in plastic containers</li>
<li>Plastic cups</li>
<li>Plastic wraps</li>
</ul></p1>
</div>
<!--popup's close button-->
<button class="close3">Close</button>
</div>
<!--Content shown when popup is not displayed-->
<button id="button2" class="open3">Avoid</button>
<!--End of the popup body-->
</td>
</tr>
<div id="why">
<h id="question4">Why should we recycle?</h>
</div>
<div id="explain">
<p id="text6">We should recycle plastic waste because if we throw them away, they will pollute our environment and bodies of water, why not just optimize their use and use them over and over again. This way, we aren’t necessarily using trash, but we’re helping reduce plastic and pollution in our area.
</p>
</div>
<div>
<img class="leaf" id="leaf1" src="https://i.postimg.cc/nhjj0MSQ/leaf.png">
</div>
<div>
<img class="leaf" id="leaf2" src="https://i.postimg.cc/nhjj0MSQ/leaf.png">
</div>
<div>
<img class="leaf" id="leaf3" src="https://i.postimg.cc/nhjj0MSQ/leaf.png">
</div>
<div>
<img class="leaf" id="leaf4" src="https://i.postimg.cc/nhjj0MSQ/leaf.png">
</div>
<div>
<img id="picbottle1" class="picbottle" src="https://i.postimg.cc/JnCs50fT/water.png">
</div>
<div>
<img id="picbottle2" class="picbottle" src="https://i.postimg.cc/2S3LzPdx/plastic-bottle1.png">
</div>
</div>
<div id="container3">
<div>
<img id="orangebottle" src="https://i.postimg.cc/BQm1fqF6/bottle.png">
</div>
<div id="title2">
<h2> Sources</h2>
</div>
<div>
<p><ol id="text5">
<li>Badore, Margaret. “11 Easy Ways to Reduce Your Plastic Waste Today.” TreeHugger, Treehugger, 4 June 2018, www.treehugger.com/green-home/11-easy-ways-reduce-your-plastic-waste-today.html.</li>
<li>Krum, Randy. “The 6 Principles of Design.” Blog About Infographics and Data Visualization - Cool Infographics, 3 Feb. 2015, 11:45 AM, coolinfographics.com/blog/2015/2/3/the-6-principles-of-design.html.</li>
<li>“Tips to Use Less Plastic.” Tips to Use Less Plastic - Green Education Foundation | GEF | Sustainability Education, www.greeneducationfoundation.org/nationalgreenweeksub/waste-reduction-tips/tips-to-use-less-plastic.html.</li>
<li>vietnamnet.vn. “Vietnam Plastic Waste among Highest in World - News VietNamNet.” Vietnamnet NEW, english.vietnamnet.vn/fms/environment/204133/vietnam-plastic-waste-among-highest-in-world.html.</li>
<li>“What Is Plastic Recycling and How to Recycle Plastic - Conerve Energy Future.” Conserve Energy Future, 25 Dec. 2016, www.conserve-energy-future.com/recyclingplastic.php.</li>
<li>Wiesenfeld, Justin. “8 Types of Infographics: Which Is Right For You? [Quiz].” Piktochart Infographics, Piktochart, 21 Mar. 2017, piktochart.com/blog/8-types-of-infographics-which-right-for-you/.</li>
<li>“Flat Drawings Related to Plastic Waste No Watermark - Google Search.” Computer Integrated Manufacturing - Google Search, Forbes, bit.ly/2Q1upMR.</li>
</ol></p>
</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
.pulse{
animation-name: pulse;
animation-name: pulse;
animation-duration: 3.5s;
animation-duration: 3.5s;
animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.popup-overlay1 {
/*Hides pop-up when there is no "active" class*/
visibility:hidden;
position:absolute;
background:#ffffff;
border:3px solid #666666;
width:50%;
height:50%;
left: 25%;
}
.popup-overlay1.active{
/*displays pop-up when "active" class is present*/
visibility:visible;
text-align:center;
z-index: 1;
}
.popup-overlay2 {
/*Hides pop-up when there is no "active" class*/
visibility:hidden;
position:absolute;
background:#ffffff;
border:3px solid #666666;
width:50%;
height:50%;
left: 25%;
}
.popup-overlay2.active{
/*displays pop-up when "active" class is present*/
visibility:visible;
text-align:center;
z-index: 1;
}
.popup-overlay3 {
/*Hides pop-up when there is no "active" class*/
visibility:hidden;
position:absolute;
background:#ffffff;
border:3px solid #666666;
width:50%;
height:50%;
left: 25%;
}
.popup-overlay3.active{
/*displays pop-up when "active" class is present*/
visibility:visible;
text-align:center;
z-index: 1;
}
/*This is the button for the pop up message */
button{
display:inline-block;
vertical-align:middle;
border-radius:30px;
margin:.50rem;
font-size: 3rem;
color:green;
background: #ffffff;
border:1px solid #666666;
}
#bigplasticbottle {
position: absolute;
left: 380px;
top: 410px;
}
#bigplastic {
height: 250px;
}
button:hover{
border:1px solid #666666;
background:green;
color:#ffffff;
}
#button {
position: absolute;
margin-left: auto;
margin-right: auto;
top: 150px;
left: 200px;
}
#button1 {
position: absolute;
margin-left: auto;
margin-right: auto;
top: 100px;
left: 450px;
}
#button2 {
position: absolute;
margin-left: auto;
margin-right: auto;
top: 350px;
left: 580px;
}
#title1 {
text-align: center;
text-decoration: underline;
font-size: 30px;
padding-top: 1px;
color:white;
}
#tree {
position: absolute;
margin-left: auto;
margin-right: auto;
top: 139px;
left: 160px;
}
#div1 {
background-color: green;
width: 1200px;
height: 1400px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
position: relative;
background-color: mediumseagreen;
}
#title {
font-family: 'Righteous', cursive;
font-size: 60px;
color: white;
text-align: center;
text-decoration: underline;
padding-top: .00003px;
}
#title2 {
font-family: 'Tangerine', serif;
font-size: 50px;
color: #ECF0F1;
text-align: center;
text-decoration: underline;
top: -50px;
left: 480px;
position: absolute;
}
#orangebottle {
position: absolute;
height: 100px;
top: 10px;
left: 380px;
}
/* tangerine font */
@import url(https://fonts.googleapis.com/css?family=Tangerine);
/* bigshot one font */
@import url(https://fonts.googleapis.com/css?family=Bigshot+One);
/* Over the rainbow font */
@import url(https://fonts.googleapis.com/css?family=Over+the+Rainbow);
/* pacifico font */
@import url(https://fonts.googleapis.com/css?family=Pacifico);
/* Content styling */
/* fonts for the text */
@import url('https://fonts.googleapis.com/css?family=Merriweather:700|Roboto');
#container {
width: 1200px;
height: 1250px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
position: relative;
background-color: mediumseagreen;
}
#container2 {
width: 1200px;
height: 650px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
position: relative;
background-color: mediumseagreen;
}
#container3 {
width: 1200px;
height: 650px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
position: relative;
background-color: mediumseagreen;
}
.divquestion {
width: 600px;
height: 650px;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
position: relative;
background-color: seamediumgreen;
}
.infodiv {
position: relative;
background-color: green;
height: 280px;
width: 800px;
}
#infodiv {
margin-top: 175px;
margin-left: 20px;
margin-right: auto;
}
#explain {
position: relative;
background-color: green;
height: 300px;
width: 400px;
margin-top: 50px;
margin-left: 760px;
margin-right: auto;
}
.lol {
border: dotted;
border-size: 30px;
}
#container6 {
width: 800px;
height: 650px;
margin-top: 0;
margin-left: auto;
margin-right: auto;
position: relative;
background-color: mediumpurple;
}
#you {
text-decoration: underline;
color: red;
}
.circle1 {
width: 300px;
height: 300px;
border-radius: 50%;
color: #fff;
background: green;
margin-left: 50px;
margin-top: 180px;
}
.circle2 {
width: 383px;
height: 383px;
border-radius: 50%;
color: #fff;
background: green;
margin-left: 700px;
margin-top: -300px;
}
#text1 {
position: relative;
text-align: center;
line-height: 50px;
padding-top: 50px;
font-size: 23px;
}
#text2 {
position: relative;
text-align: center;
line-height: 50px;
padding-top: 90px;
font-size: 15pt;
}
#text3 {
text-align: center;
font-size: 25px;
color: white;
line-height: 80px;
padding-top: 25px;
padding-left: 30px;
padding-right: 30px;
}
#text4{
text-align: center;
font-size: 30px;
color: white;
line-height: 50px;
padding-top: 15px;
}
#text5 {
text-align: center;
font-size: 20pt;
color: white;
line-height: 30px;
padding-top: 20px;
position: absolute;
top: 80px;
}
#text6 {
text-align: center;
font-size: 17pt;
color: white;
line-height: 30px;
padding-top: 10px;
position: absolute;
}
#question {
color: white;
font-size: 45px;
position: absolute;
left: 15px;
top: 350px;
font-family: 'Orbitron', sans-serif;
}
#question2 {
color: white;
font-size: 45px;
position: absolute;
left: 620px;
top: 350px;
font-family: 'Orbitron', sans-serif;
}
#question3 {
color: white;
font-size: 45px;
position: absolute;
left: 100px;
top: 800px;
font-family: 'Orbitron', sans-serif;
}
#question4 {
color: white;
font-size: 35px;
position: absolute;
left: 750px;
top: 150px;
font-family: 'Orbitron', sans-serif;
}
#plasticwaste {
height: 150px;
position: absolute;
top: 470px;
left: 1050px;
}
#top {
height: 200px;
position:absolute;
top: 1000px;
left: 920px;
}
@keyframes pulse {
0% {
transform: scale(0.9);
opacity: 0.7;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.9);
opacity: 0.7;
}
}
@-webkit-keyframes pulse {
0% {
transform: scale(0.95);
opacity: 0.9;
}
50% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.95);
opacity: 0.7;
}
}
.tossing{
animation-name: tossing;
animation-name: tossing;
animation-duration: 2.5s;
animation-duration: 2.5s;
animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes tossing {
0% {
transform: rotate(-4deg);
}
50% {
transform: rotate(4deg);
}
100% {
transform: rotate(-4deg);
}
}
@-webkit-keyframes tossing {
0% {
transform: rotate(-4deg);
}
50% {
transform: rotate(4deg);
}
100% {
transform: rotate(-4deg);
}
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 170px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
left: -20px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
#scroll1 {
position: absolute;
top: 320px;
left: 370px;
font-size: 30pt;
color: #E74C3C;
}
#scroll2 {
position absolute;
top: -1015px;
left: 515px;
font-size: 30pt;
color: #2ECC71;
}
#scroll3 {
position absolute;
top: -1015px;
left: 540px;
font-size: 30pt;
color: #34495E;
}
#info2 {
margin-top: 80px;
margin-left: 350px;
margin-right: auto;
}
#info3 {
margin-top: 100px;
margin-left: 20px;
margin-right: auto;
}
#info1 {
margin-top: 0px;
margin-left: 50px;
margin-right: auto;
}
#toxic {
height: 250px;
position: absolute;
top: 170px;
left: 920px;
}
#pollution {
height: 250px;
position: absolute;
top: 530px;
left: 50px;
}
#bag {
height:300px;
position: absolute;
top: 875px;
left: 870px;
}
.picbottle {
height:100px;
position: absolute;
}
#picbottle1 {
top: 340px;
left: 470px;
}
#picbottle2 {
top: 300px;
left: 250px;
}
#map {
height: 300px;
position: absolute;
top: 10px;
left: 965px;
}
#VN {
height: 150px;
position: absolute;
top: 10px;
left: 0px;
}
.slideRight{
animation-name: slideRight;
animation-name: slideRight;
animation-duration: 1s;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
visibility: visible !important;
}
@keyframes slideRight {
0% {
transform: translateX(-150%);
}
50%{
transform: translateX(8%);
}
65%{
transform: translateX(-4%);
}
80%{
transform: translateX(4%);
}
95%{
transform: translateX(-2%);
}
100% {
transform: translateX(0%);
}
}
@-webkit-keyframes slideRight {
0% {
transform: translateX(-150%);
}
50%{
transform: translateX(8%);
}
65%{
transform: translateX(-4%);
}
80%{
transform: translateX(4%);
}
95%{
transform: translateX(-2%);
}
100% {
transform: translateX(0%);
}
}
.bounce{
animation-name: bounce;
animation-name: bounce;
animation-duration: 1.6s;
animation-duration: 1.6s;
animation-timing-function: ease;
animation-timing-function: ease;
transform-origin: 50% 100%;
transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
@keyframes bounce {
0% {
transform: translateY(0%) scaleY(0.6);
}
60%{
transform: translateY(-100%) scaleY(1.1);
}
70%{
transform: translateY(0%) scaleY(0.95) scaleX(1.05);
}
80%{
transform: translateY(0%) scaleY(1.05) scaleX(1);
}
90%{
transform: translateY(0%) scaleY(0.95) scaleX(1);
}
100%{
transform: translateY(0%) scaleY(1) scaleX(1);
}
}
@-webkit-keyframes bounce {
0% {
transform: translateY(0%) scaleY(0.6);
}
60%{
transform: translateY(-100%) scaleY(1.1);
}
70%{
transform: translateY(0%) scaleY(0.95) scaleX(1.05);
}
80%{
transform: translateY(0%) scaleY(1.05) scaleX(1);
}
90%{
transform: translateY(0%) scaleY(0.95) scaleX(1);
}
100%{
transform: translateY(0%) scaleY(1) scaleX(1);
}
}
.leaf {
height: 70px;
position: absolute;
}
#leaf1 {
top: 120px;
left: 597px;
}
#leaf2 {
top: 270px;
left: 586px;
}
#leaf3 {
top: 320px;
left: 195px;
}
#leaf4 {
top: 297px;
left: 325px;
}
.hatch{
animation-name: hatch;
animation-name: hatch;
animation-duration: 2s;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
transform-origin: 50% 100%;
transform-origin: 50% 100%;
transform-origin: 50% 100%;
visibility: visible !important;
}
@keyframes hatch {
0% {
transform: rotate(0deg) scaleY(0.6);
}
20% {
transform: rotate(-2deg) scaleY(1.05);
}
35% {
transform: rotate(2deg) scaleY(1);
}
50% {
transform: rotate(-2deg);
}
65% {
transform: rotate(1deg);
}
80% {
transform: rotate(-1deg);
}
100% {
transform: rotate(0deg);
}
}
@-webkit-keyframes hatch {
0% {
transform: rotate(0deg) scaleY(0.6);
}
20% {
transform: rotate(-2deg) scaleY(1.05);
}
35% {
transform: rotate(2deg) scaleY(1);
}
50% {
transform: rotate(-2deg);
}
65% {
transform: rotate(1deg);
}
80% {
transform: rotate(-1deg);
}
100% {
transform: rotate(0deg);
}
}
.slideExpandUp{
animation-name: slideExpandUp;
animation-name: slideExpandUp;
animation-duration: 1.6s;
animation-duration: 1.6s;
animation-timing-function: ease-out;
animation-timing-function: ease -out;
visibility: visible !important;
}
@keyframes slideExpandUp {
0% {
transform: translateY(100%) scaleX(0.5);
}
30%{
transform: translateY(-8%) scaleX(0.5);
}
40%{
transform: translateY(2%) scaleX(0.5);
}
50%{
transform: translateY(0%) scaleX(1.1);
}
60%{
transform: translateY(0%) scaleX(0.9);
}
70% {
transform: translateY(0%) scaleX(1.05);
}
80%{
transform: translateY(0%) scaleX(0.95);
}
90% {
transform: translateY(0%) scaleX(1.02);
}
100%{
transform: translateY(0%) scaleX(1);
}
}
@-webkit-keyframes slideExpandUp {
0% {
transform: translateY(100%) scaleX(0.5);
}
30%{
transform: translateY(-8%) scaleX(0.5);
}
40%{
transform: translateY(2%) scaleX(0.5);
}
50%{
transform: translateY(0%) scaleX(1.1);
}
60%{
transform: translateY(0%) scaleX(0.9);
}
70% {
transform: translateY(0%) scaleX(1.05);
}
80%{
transform: translateY(0%) scaleX(0.95);
}
90% {
transform: translateY(0%) scaleX(1.02);
}
100%{
transform: translateY(0%) scaleX(1);
}
}
#recycleimg {
height: 100px;
}$(document).ready(function() {
$("#bigplasticbottle").addClass("pulse");
$('#scroll1').click(function() {
$('html, body').animate({scrollTop:'1550px'}, 500);
});
$('#scroll2').click(function() {
$('html, body').animate({scrollTop: '2800px'}, 500);
});
$('#scroll3').click(function() {
$('html, body').animate({scrollTop:'3500px'}, 500);
});
$("#plasticwaste").hover(function(){
$(this).fadeTo( "slow", 0.33 )
}, function(){
$(this).fadeTo( "slow", 1 )
});
$("#plasticwaste").hover(function(){
$(this).fadeTo( "slow", 0.33 )
}, function(){
$(this).fadeTo( "slow", 1 )
});
$("#top").hover(function(){
$(this).addClass("tossing")}, function (){
$(this).removeClass("tossing")
});
$("#toxic").hover(function(){
$(this).addClass("slideRight")}, function (){
$(this).removeClass("slideRight")
});
$("#bag").hover(function(){
$(this).addClass("bounce")}, function (){
$(this).removeClass("bounce")
});
$(".leaf").hover(function(){
$(this).addClass("pulse")}, function (){
$(this).removeClass("pulse")
});
$("#VN").hover(function(){
$(this).addClass("hatch")}, function (){
$(this).removeClass("hatch")
});
$("#map").hover(function(){
$(this).addClass("slideExpandUp")}, function (){
$(this).removeClass("slideExpandUp")
});
$(window).scroll(function() {
$('#animatedElement').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+400) {
$(this).addClass("slideUp");
}
});
});
$(".open1").on("click", function(){
$(".popup-overlay1, .popup-content").addClass("active");
});
//removes the "active" class to .popup and .popup-content when the "Close" button is clicked
$(".close1, .popup-overlay1").on("click", function(){
$(".popup-overlay1, .popup-content").removeClass("active");
});
// how to highlight an element
$('.howtohighlight').on('mouseenter', function() { $('.howtohighlight').css("background-color",'black');
$('.howtohighlight').css("color",'white');
});
$('.howtohighlight').on('mouseleave', function () { $('.howtohighlight').css("background-color",'white');
$('.howtohighlight').css("color",'black');
});
$(".open2").on("click", function(){
$(".popup-overlay2, .popup-content").addClass("active");
});
//removes the "active" class to .popup and .popup-content when the "Close" button is clicked
$(".close2, .popup-overlay2").on("click", function(){
$(".popup-overlay2, .popup-content").removeClass("active");
});
$(".open3").on("click", function(){
$(".popup-overlay3, .popup-content").addClass("active");
});
//removes the "active" class to .popup and .popup-content when the "Close" button is clicked
$(".close3, .popup-overlay3").on("click", function(){
$(".popup-overlay3, .popup-content").removeClass("active");
});
}); // end of ready document
External CSS
This Pen doesn't use any external CSS resources.