homepage updates and building carousel

Author: whoins

CSS/currentResearch.css

@@ -1,5 +1,5 @@
 .bannerImage{
-    background-image: url(../src/Banner/DSC09695.jpeg);
+    background-image: url(../src/Banner/Research.jpeg);
     background-size: cover;
     background-position: top;
 }

CSS/index.css

@@ -219,6 +219,22 @@ a {
     text-align: center;
     border-bottom: 1px solid gray;
 }
+.upcomingEvents {
+    position:relative;
+    animation: move-words 28s linear infinite;
+    margin: 0;
+    color: rgb(24, 24, 24);
+}
+
+@keyframes move-words {
+    0% {
+      left: 100%;
+    }
+    100% {
+      left: -100%;
+    }
+}
+
 /*
 .Newshighlightscontent {
     margin: 20px 14vw 20px;

CSS/indexContent.css

@@ -58,8 +58,68 @@
     height: 100%; 
 }
     /*end code for photo collage*/
+/*
+.Newsbanner{
+    display: grid;
+    /*margin-top: 10vh;
+    width: 100vw;
+    height: 65vh;
+    grid-template-rows: 40% 60%;
+    background: linear-gradient(rgb(204, 68, 68), rgb(162, 140, 140));
+    color: white;
+}
+*/
+/*
+.carousel {
+    width: 100vw;
+    height: 65vh;
+    overflow: hidden;
+    position: relative;
+  }
 
+  .carousel-container {
+    display: flex;
+    transition: transform 0.5s ease;
+  }
 
+  .carousel-item {
+    flex: 0 0 100%; /* Adjust this value to changa the number of visible items 
+    background-size: 100vw;
+    background-position: top;
+    background-repeat: no-repeat;
+    position: relative;
+  }
+
+  .carousel-text {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    color: white;
+    font-size: 24px;
+    font-weight: bold;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+  }
+
+  .carousel-controls {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .carousel-control {
+    cursor: pointer;
+    padding: 10px;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+  }
+
+  .carousel-control:hover {
+    background-color: rgba(0, 0, 0, 0.8);
+  }
+*/
 .meetTheTeam{
     height: 1700px;
     color:rgb(255, 255, 255);
@@ -431,6 +491,58 @@
             text-decoration: underline;
         }
 
+/*
+.Newshighlightscontent {
+    margin: 20px 14vw 20px;
+    width: 78vw;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    column-gap: 3vw;
+    grid-gap: 8vh;
+    grid-template-rows: 1fr;
+}
+
+.newshighlightPanel{
+    grid-column: 1;
+    width: 100%;
+}
+
+.titleNewshighlight{
+    width: 100%;
+    margin-left: 2.5%;
+    text-align: center;
+    
+}
+
+    .newshighlight {
+        width: 90%;
+        padding: 2%;
+        background-color:rgb(240, 248, 255);
+        margin: 2% 0;
+        border-width: 100%;
+        border-radius: 15px;
+        /*border-top: 1px solid black;
+        border-bottom: 1px solid black;
+    }
+        .newshighlight img {
+            max-width: 100%;
+            height: auto;
+        }
+
+        .newshighlight h1 {
+            font-size: 2vw;
+            margin: 0;
+        }
+        .newshighlight h2 {
+            font-size: 1.5vw;
+            padding-bottom: 5px;
+        }
+
+        .newshighlight p, i {
+            font-size: calc(17px + 0.3vw); 
+            
+        }
+        /*
 
         .meetTheTeam{
             height: 2100px;
@@ -533,4 +645,6 @@
         .meetTheTeam h1{
             text-align: center;
         }
-    }
+    }
+
+    

index.html

@@ -26,9 +26,30 @@ <h1>Mountain Hydrology Research Group</h1>
             <img src="src/MTNHYDLOGO_large.png" />
         </div>
     </div>
+    <div>
+        <h2 class="upcomingEvents"> <p></p>Upcoming Events: MTNHYDR goes to Engineering Discovery Days May 2nd & 3rd, 2024!</h2>
+    </div>
     <div class="twitterfollow">
         <a href="https://twitter.com/uwmtnhydr?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @uwmtnhydr</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
     </div>
+    <!--<div class="Newsbanner">
+        <h1 id="Newsbanner">News Updates</h1>
+    </div>-->
+    <!--
+    <div class="carousel">
+        <div class="carousel-text">News Updates</div>
+        <div class="carousel-container">
+          <div class="carousel-item" > <img src="src/20221010_SOS GOTHIC BASIN_01169-X4.jpg"> </div>
+          <div class="carousel-item"> </div><img src="src/Banner/"> </div>
+          <div class="carousel-item" > </div><img src="src/Banner/Research.jpeg"> </div>
+          **** Add more images as needed ****
+        </div>
+        <div class="carousel-controls">
+          <div class="carousel-control prev">&lt;</div>
+          <div class="carousel-control next">&gt;</div>
+        </div>
+    </div>
+-->
     <div class="page" id="pageTwo">
         <div class="initialInfo" id="infoRight">
             <h2 class="initInfoBold">Our research goals</h2>
@@ -227,5 +248,31 @@ <h4>Undergraduate Student</h4>
     </div>
     <script src="./JS/jquery-3.6.0.min.js"></script>
     <script src="./JS/index.js"></script>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+          const container = document.querySelector('.carousel-container');
+          const prevBtn = document.querySelector('.prev');
+          const nextBtn = document.querySelector('.next');
+    
+          let currentIndex = 0;
+    
+          function showSlide(index) {
+            container.style.transform = `translateX(-${index * 100}%)`;
+          }
+    
+          function nextSlide() {
+            currentIndex = (currentIndex + 1) % container.children.length;
+            showSlide(currentIndex);
+          }
+    
+          function prevSlide() {
+            currentIndex = (currentIndex - 1 + container.children.length) % container.children.length;
+            showSlide(currentIndex);
+          }
+    
+          nextBtn.addEventListener('click', nextSlide);
+          prevBtn.addEventListener('click', prevSlide);
+        });
+      </script>
 </body>
 </html>