diff --git a/articles.html b/articles.html index 3b85685..de20f0b 100644 --- a/articles.html +++ b/articles.html @@ -1017,11 +1017,12 @@

Index

- All
@@ -1081,7 +1082,6 @@
Deplastic
/>

Reach out to us anytime, anywhere through our social media accounts


-

REACH OUT!

@@ -1179,7 +1179,7 @@

var checkBox = document.getElementById(checkboxID); var searchTerm = document.getElementById("search").value.toUpperCase(); - if(checkboxID == "all") checkBox.checked = true; + if (checkboxID == "all") checkBox.checked = true; for (var i = 0; i < elements.length; i++) { if (checkBox.id == "all" && checkBox.checked) { @@ -1192,7 +1192,11 @@ elements[i].style.display = "none"; } - if(elements[i].style.display == "block" && !elements[i].getElementsByClassName("article-title")[0].innerHTML.toUpperCase().includes(searchTerm)) elements[i].style.display = "none"; + if ( + elements[i].style.display == "block" && + !elements[i].getElementsByClassName("article-title")[0].innerHTML.toUpperCase().includes(searchTerm) + ) + elements[i].style.display = "none"; } } diff --git a/assets/css/style.css b/assets/css/style.css index 54379b7..d91a84d 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1676,12 +1676,6 @@ a.navbar-brand.our_logo { text-align: justify; font-family: AgrandirRegular; } - .facts-wrapper { - margin-top: 870px; - height: 500px; - width: 100%; - position: absolute; - } .facts-details { margin-bottom: 25px; color: #bcd9d7; @@ -1984,8 +1978,8 @@ a.navbar-brand.our_logo { .donations-link { background: -webkit-linear-gradient(#9187e9, #cb49f9); background-clip: border-box; --webkit-background-clip: text; --webkit-text-fill-color: transparent; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; } .card-main { @@ -2066,6 +2060,64 @@ a.navbar-brand.our_logo { bottom: 0; right: 0; left: 0; } */ + +.sources-container { + background: url(../images/Rectangle\ 39.png) center center no-repeat; + background-size: cover; + width: 100%; + align-items: center; + display: block; + margin: 0 auto; + justify-content: center; + overflow: scroll; + overflow-x: hidden; +} +.sources-logo-square { + max-width: 100px; + max-height: 100px; + margin: 20px; +} +.sources-logo-rectangle { + max-width: 300px; + max-height: 100px; + margin: 20px; +} +.sources-logo-rectangle-alt { + max-width: 300px; + max-height: 100px; + margin: 20px; + filter: contrast(100%); +} +@media only screen and (max-width: 430px) { + .sources-container { + background: url(../images/Rectangle\ 39.png) center center no-repeat; + background-size: cover; + width: 100%; + max-height: 250px; + align-items: center; + display: block; + margin: 0 auto; + justify-content: center; + overflow: scroll; + overflow-x: hidden; + } + .sources-logo-square { + max-width: 25px; + max-height: 25px; + margin: 10px; + } + .sources-logo-rectangle { + max-width: 75px; + max-height: 25px; + margin: 10px; + } + .sources-logo-rectangle-alt { + max-width: 75px; + max-height: 25px; + margin: 10px; + filter: contrast(100%); + } +} @media only screen and (max-width: 1000px) { .donations-block { display: none; @@ -2091,6 +2143,23 @@ a.navbar-brand.our_logo { width: 50%; padding: 0; } + + .sources-logo-square { + max-width: 50px; + max-height: 50px; + margin: 20px; + } + .sources-logo-rectangle { + max-width: 150px; + max-height: 50px; + margin: 20px; + } + .sources-logo-rectangle-alt { + max-width: 150px; + max-height: 50px; + margin: 20px; + filter: contrast(100%); + } } /* @@ -2202,7 +2271,7 @@ a.navbar-brand.our_logo { .timeline-1 h1 { font-size: 2.5rem; color: #0d1115; - font-family: AgrandirRegular; + font-family: Agrandir; text-align: center; } .timeline-1 .container { @@ -2296,6 +2365,9 @@ a.navbar-brand.our_logo { top: 40%; display: none; } +.timeline-text-five a { + color: #cb49f9; +} .timeline-ph-container { width: 40%; text-align: justify; @@ -2467,6 +2539,19 @@ a.navbar-brand.our_logo { .mobile-message { display: none; } +.facts-number-container { + background-color: #000; + max-height: 50px; + min-width: 25px; + border-radius: 10px; + font-family: Agrandir; + font-size: 1.2rem; + color: #a8c1c0; + text-align: center; + align-items: center; + justify-content: center; + margin-bottom: 5px; +} @media only screen and (max-width: 899px) { .timeline-background { width: 100%; @@ -2494,4 +2579,36 @@ a.navbar-brand.our_logo { line-height: 1; margin: 5vh; } -} \ No newline at end of file + + .facts-number-container { + background-color: #000; + max-height: 50px; + min-width: 25px; + border-radius: 10px; + font-family: Agrandir; + font-size: 1.2rem; + color: #a8c1c0; + text-align: center; + align-items: center; + justify-content: center; + margin-left: 20px; + margin-bottom: 5px; + } +} + +@media only screen and (max-width: 575px) { + .facts-number-container { + background-color: #000; + max-height: 50px; + min-width: 25px; + border-radius: 10px; + font-family: Agrandir; + font-size: 1.2rem; + color: #a8c1c0; + text-align: center; + align-items: center; + justify-content: center; + margin-bottom: 5px; + width: 25%; + } +} diff --git a/assets/images/sources logos/National-Geographic-logo.png b/assets/images/sources logos/National-Geographic-logo.png new file mode 100644 index 0000000..95c78c8 Binary files /dev/null and b/assets/images/sources logos/National-Geographic-logo.png differ diff --git a/assets/images/sources logos/Plastic-Oceans_Logo.png b/assets/images/sources logos/Plastic-Oceans_Logo.png new file mode 100644 index 0000000..065d0b0 Binary files /dev/null and b/assets/images/sources logos/Plastic-Oceans_Logo.png differ diff --git a/assets/images/sources logos/Slo_Active_logo.png b/assets/images/sources logos/Slo_Active_logo.png new file mode 100644 index 0000000..b75559a Binary files /dev/null and b/assets/images/sources logos/Slo_Active_logo.png differ diff --git a/assets/images/sources logos/World_Health_Organization_logo.png b/assets/images/sources logos/World_Health_Organization_logo.png new file mode 100644 index 0000000..c95bf49 Binary files /dev/null and b/assets/images/sources logos/World_Health_Organization_logo.png differ diff --git a/assets/images/sources logos/center_for_biological_diversity_logo.png b/assets/images/sources logos/center_for_biological_diversity_logo.png new file mode 100644 index 0000000..fb1d2aa Binary files /dev/null and b/assets/images/sources logos/center_for_biological_diversity_logo.png differ diff --git a/assets/images/sources logos/condor_ferries_logo.png b/assets/images/sources logos/condor_ferries_logo.png new file mode 100644 index 0000000..0862309 Binary files /dev/null and b/assets/images/sources logos/condor_ferries_logo.png differ diff --git a/assets/images/sources logos/eco-watch-logo.jpg b/assets/images/sources logos/eco-watch-logo.jpg new file mode 100644 index 0000000..ec5f910 Binary files /dev/null and b/assets/images/sources logos/eco-watch-logo.jpg differ diff --git a/assets/images/sources logos/eco-watch-logo.png b/assets/images/sources logos/eco-watch-logo.png new file mode 100644 index 0000000..9698fdf Binary files /dev/null and b/assets/images/sources logos/eco-watch-logo.png differ diff --git a/assets/images/sources logos/national-geographic-logo.jpg b/assets/images/sources logos/national-geographic-logo.jpg new file mode 100644 index 0000000..61190ff Binary files /dev/null and b/assets/images/sources logos/national-geographic-logo.jpg differ diff --git a/assets/images/sources logos/our_world_in_data_logo.png b/assets/images/sources logos/our_world_in_data_logo.png new file mode 100644 index 0000000..42011ae Binary files /dev/null and b/assets/images/sources logos/our_world_in_data_logo.png differ diff --git a/assets/js/timelineAnimate.js b/assets/js/timelineAnimate.js index a7ea2f5..bfe4dca 100644 --- a/assets/js/timelineAnimate.js +++ b/assets/js/timelineAnimate.js @@ -50,16 +50,16 @@ if ($(window).scrollTop() <= 11400 && $(window).scrollTop() > 10700) { - document.getElementById("awareness-text").innerHTML = "fight for the cause, consider donating here"; + document.getElementById("awareness-text").innerHTML = "Fight for the cause, consider donating here"; } else if ($(window).scrollTop() <= 10700 && $(window).scrollTop() > 10000) { document.getElementById("awareness-text").innerHTML = "and there's nothing we can do, unless we work together"; } else if ($(window).scrollTop() <= 10000 && $(window).scrollTop() > 9300) { - document.getElementById("awareness-text").innerHTML = "single-use plastic is a big reason why this is happening"; + document.getElementById("awareness-text").innerHTML = "Single-use plastic is a big reason why this is happening"; } else if ($(window).scrollTop() <= 9300 && $(window).scrollTop() > 8600) { - document.getElementById("awareness-text").innerHTML = "plastic is killing our planet"; + document.getElementById("awareness-text").innerHTML = "Plastic is killing our planet"; $("#awareness-text").fadeIn(); } else{ diff --git a/donations.html b/donations.html index 5234f4e..32ed3d4 100644 --- a/donations.html +++ b/donations.html @@ -305,7 +305,6 @@
Deplastic
/>

Reach out to us anytime, anywhere through our social media accounts


-

REACH OUT!

diff --git a/index.html b/index.html index b7052bb..98c4240 100644 --- a/index.html +++ b/index.html @@ -93,16 +93,14 @@

-
-
- -
+
A few facts about plastic,
and why it is harmful.
+
01

Since the 1950s, around 8.3 billion tons of plastic have been produced worldwide.
@@ -149,7 +147,38 @@

@@ -200,9 +229,6 @@
-
- -
@@ -250,7 +276,6 @@
Deplastic
/>

Reach out to us anytime, anywhere through our social media accounts


-

REACH OUT!

@@ -340,11 +365,17 @@

var counter = 0; var elem = document.getElementById("facts1"); var inst = setInterval(change, 10000); - + var elem2 = document.getElementById("facts-numbering"); function change() { $("#facts1").fadeOut(500, function () { elem.innerHTML = text[counter]; }); + + $("#facts-numbering").fadeOut(500, function () { + elem2.innerHTML = "0" + (counter + 1); + }); + + $("#facts-numbering").fadeIn(500); $("#facts1").fadeIn(500); counter++; if (counter >= text.length) { diff --git a/timeline.html b/timeline.html index 9360417..0d1f14c 100644 --- a/timeline.html +++ b/timeline.html @@ -234,7 +234,6 @@
Deplastic
/>

Reach out to us anytime, anywhere through our social media accounts


-

REACH OUT!