index.html

--- 
layout: default
---
<div id="top" class="splash">
    <div class="text-vertical-center">
        <div class=" col-lg-8 col-lg-offset-2">
            <img class="img-fluid img-landing" src="img/logos/logo-white.png">
            <h3 class="desc">The premier west-coast Science Olympiad invitational, hosted by Stanford and UC Berkeley students.</h3>
            <h3 class="desc">February 13, 2021</h3>
            <br>		
			<!--script src="{{ "/js/countdown.js" | prepend: site.baseurl }}"></script>
            <div id="countdown"></div-->
            <a href="/final-scores" class="btn btn-xlg btn-light">Final Scores & Tests</a>  
            <a href="http://eepurl.com/b7zsSj" class="btn btn-xlg btn-light">Mailing List</a>
            <br>
            <br>
			
            <br>
        </div>
    </div>
</div>
<section id="about" class="info">
    <div class="container">
        <div class="col-lg-12 text-center">
			
               <h2>RUN BY STANFORD AND UC BERKELEY STUDENTS</h2>
               <p class="lead">Led by previous national medalists, Golden Gate Science Olympiad represents a collaboration between Stanford University and University of California, Berkeley students. Coming on February 13, 2021 will be the fifth annual Division C tournament. Explore the tabs above for more information.</p><br>
			   <h2>2021 GGSO AWARDS CEREMONY</h2>
			   <center>
			   <div class="video-wrap">
				<div class="video-container">
			   <iframe width="560" height="315" src="https://www.youtube.com/embed/gxqpG2aL6c0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
			   </div>
			   </div>
			   </center>

           </div>
        </div>
    </div>
</section>
<div id="carousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
        <li data-target="#carousel" data-slide-to="3"></li>
        <li data-target="#carousel" data-slide-to="4"></li>
        <li data-target="#carousel" data-slide-to="5"></li>
        <li data-target="#carousel" data-slide-to="6"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active ad0">
            <img src="img/slideshow/0.png">
        </div>
        <div class="item ad1">
            <img src="img/slideshow/1.png">
        </div>
        <div class="item ad2">
            <img src="img/slideshow/2.png">
        </div>
        <div class="item ad3">
            <img src="img/slideshow/3.png">
        </div>
        <div class="item ad4">
            <img src="img/slideshow/4.png">
        </div>
        <div class="item ad5">
            <img src="img/slideshow/5.png">
        </div>
        <div class="item ad6">
            <img src="img/slideshow/6.png">
        </div>
    </div>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $('.carousel').carousel({
      interval: 5000,
      pause: 'none'
    })
  });
</script>