Merge pull request #14 from MiguelRobles7/Fixes-&-Optimizations

Fixes & optimizations

articles.html

@@ -1017,11 +1017,12 @@
                   <h3 style="font-family: Agrandir; font-size: 1.6rem">Index</h3>
                   <div class="first-sidebar">
                     <!-- FILTERS -->
-                    <label for="all"><input class="radio" name="index" type="radio" id="all" onclick="filter('all','all')" checked />All</label
+                    <label for="all"
+                      ><input class="radio" name="index" type="radio" id="all" onclick="filter('all','all')" checked />All</label
                     ><br />
                     <label for="who"
                       ><input
-                      class="radio"
+                        class="radio"
                         name="index"
                         type="radio"
                         id="ccc"
@@ -1030,7 +1031,7 @@ <h3 style="font-family: Agrandir; font-size: 1.6rem">Index</h3>
                     ><br />
                     <label for="ccc"
                       ><input
-                      class="radio"
+                        class="radio"
                         name="index"
                         type="radio"
                         id="who"
@@ -1039,7 +1040,7 @@ <h3 style="font-family: Agrandir; font-size: 1.6rem">Index</h3>
                     ><br />
                     <label for="tnw"
                       ><input
-                      class="radio"
+                        class="radio"
                         name="index"
                         type="radio"
                         id="ng"
@@ -1048,7 +1049,7 @@ <h3 style="font-family: Agrandir; font-size: 1.6rem">Index</h3>
                     ><br />
                     <!-- SEARCH BAR -->
                     <div class="search-wrapper">
-                      <input type="text" id="search" placeholder="Search an Article">
+                      <input type="text" id="search" placeholder="Search an Article" />
                       <button type="submit" onclick="filter('all','all')"><i class="fa fa-search"></i></button>
                     </div>
                   </div>
@@ -1081,7 +1082,6 @@ <h5>Deplastic</h5>
                 /></a>
                 <p>Reach out to us anytime, anywhere through our social media accounts</p>
                 <br />
-                <p>REACH OUT!</p>
               </div>
               <div class="col-md-3 col-sm-6 col-xs-12 segment-two">
                 <p>
@@ -1179,7 +1179,7 @@ <h4 class="footer-contacts">CONTACT US</h4>
         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 @@ <h4 class="footer-contacts">CONTACT US</h4>
             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";
         }
       }
     </script>

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;
   }
-}
+
+  .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%;
+  }
+}

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 <a href='donations.html'> donating here</a>";
+            document.getElementById("awareness-text").innerHTML = "Fight for the cause, consider <a href='donations.html'> donating here</a>";
         }
         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{

donations.html

@@ -305,7 +305,6 @@ <h5>Deplastic</h5>
                 /></a>
                 <p>Reach out to us anytime, anywhere through our social media accounts</p>
                 <br />
-                <p>REACH OUT!</p>
               </div>
               <div class="col-md-3 col-sm-6 col-xs-12 segment-two">
                 <p>

index.html

@@ -93,16 +93,14 @@
           <div class="container">
             <div class="wow bounceInRight" data-wow-duration="3s">
               <div class="row">
-                <div class="col-sm-5 phone-remove"></div>
-                <div class="col-sm-1 phone-remove">
-                  <a href="articles.html"><img src="assets/images/QR.png" style="margin-left: 10px; width: 100%" /></a>
-                </div>
+                <div class="col-sm-6 phone-remove"></div>
                 <div class="col-md-6 details">
                   <div class="facts-header">
                     A few facts about plastic,<br />
                     <span>and why it is harmful.</span>
                   </div>
                   <div class="row col-sm-12">
+                    <div id="facts-numbering" class="col-sm-2 facts-number-container">01</div>
                     <p id="facts1" class="facts-details col-sm-12">
                       Since the 1950s, around 8.3 billion tons of plastic have been produced worldwide.
                       <br />
@@ -149,7 +147,38 @@
               <div class="row">
                 <div class="col-sm">
                   <img src="assets/images/Rectangle 40.png" style="width: 100%" />
-                  <img src="assets/images/Rectangle 39.png" style="width: 100%" />
+                  <div class="sources-container">
+                    <a href="https://www.biologicaldiversity.org/" target="_blank">
+                      <img
+                        class="sources-logo-square"
+                        src="assets/images/sources logos/center_for_biological_diversity_logo.png"
+                      />
+                    </a>
+                    <a href="https://www.condorferries.co.uk/help-info" target="_blank">
+                      <img class="sources-logo-rectangle" src="assets/images/sources logos/condor_ferries_logo.png" />
+                    </a>
+                    <a href="https://www.ecowatch.com/" target="_blank">
+                      <img class="sources-logo-rectangle" src="assets/images/sources logos/eco-watch-logo.jpg" />
+                    </a>
+                    <a href="https://www.nationalgeographic.com/" target="_blank">
+                      <img class="sources-logo-rectangle" src="assets/images/sources logos/national-geographic-logo.jpg" />
+                    </a>
+                    <a href="https://ourworldindata.org/" target="_blank">
+                      <img class="sources-logo-square" src="assets/images/sources logos/our_world_in_data_logo.png" />
+                    </a>
+                    <a href="https://plasticoceans.org/" target="_blank">
+                      <img class="sources-logo-rectangle" src="assets/images/sources logos/Plastic-Oceans_Logo.png" />
+                    </a>
+                    <a href="https://sloactive.com/" target="_blank">
+                      <img class="sources-logo-rectangle" src="assets/images/sources logos/Slo_Active_logo.png" />
+                    </a>
+                    <a href="https://www.who.int/" target="_blank">
+                      <img
+                        class="sources-logo-rectangle-alt"
+                        src="assets/images/sources logos/World_Health_Organization_logo.png"
+                      />
+                    </a>
+                  </div>
                 </div>
               </div>
             </div>
@@ -200,9 +229,6 @@
     <div class="scroll-wrapper">
       <div class="scroll-group">
         <div class="container">
-          <div class="row">
-            <img src="assets/images/Vector.svg" />
-          </div>
           <div class="row">
             <a href="#section1">
               <img class="scroll-btn" id="sec1Btn" src="assets/images/Ellipse 8.svg" />
@@ -250,7 +276,6 @@ <h5>Deplastic</h5>
                 /></a>
                 <p>Reach out to us anytime, anywhere through our social media accounts</p>
                 <br />
-                <p>REACH OUT!</p>
               </div>
               <div class="col-md-3 col-sm-6 col-xs-12 segment-two">
                 <p>
@@ -340,11 +365,17 @@ <h4 class="footer-contacts">CONTACT US</h4>
       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) {

timeline.html

@@ -234,7 +234,6 @@ <h5>Deplastic</h5>
                 /></a>
                 <p>Reach out to us anytime, anywhere through our social media accounts</p>
                 <br />
-                <p>REACH OUT!</p>
               </div>
               <div class="col-md-3 col-sm-6 col-xs-12 segment-two">
                 <p>