Difference between revisions of "Team:ETH Zurich/Team"

Line 1: Line 1:
 
{{ETH_Zurich_2}}
 
{{ETH_Zurich_2}}
−
{{ETH Zurich/BootstrapCSS}}
 
  
 
<html>
 
<html>
  
 
<head>
 
<head>
−
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
+
  <!--<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">-->
 
<style>
 
<style>
−
/* Carousel */
+
h3 {
 +
  display: inline-block;
 +
  padding: 10px;
 +
  background: #B9121B;
 +
  border-top-left-radius: 10px;
 +
  border-top-right-radius: 10px;
 +
}
  
−
#quote-carousel {
+
.full-screen {
−
    padding: 0 10px 30px 10px;
+
  background-size: cover;
−
    margin-top: 30px;
+
  background-position: center;
−
    /* Control buttons  */
+
  background-repeat: no-repeat;
−
    /* Previous button  */
+
−
    /* Next button  */
+
−
    /* Changes the position of the indicators */
+
−
    /* Changes the color of the indicators */
+
−
}
+
−
#quote-carousel .carousel-control {
+
−
    background: none;
+
−
    color: #CACACA;
+
−
    font-size: 2.3em;
+
−
    text-shadow: none;
+
−
    margin-top: 30px;
+
−
}
+
−
#quote-carousel .carousel-control.left {
+
−
    left: -60px;
+
−
}
+
−
#quote-carousel .carousel-control.right {
+
−
    right: -60px;
+
−
}
+
−
#quote-carousel .carousel-indicators {
+
−
    right: 50%;
+
−
    top: auto;
+
−
    bottom: 0px;
+
−
    margin-right: -19px;
+
−
}
+
−
#quote-carousel .carousel-indicators li {
+
−
    width: 50px;
+
−
    height: 50px;
+
−
    margin: 5px;
+
−
    cursor: pointer;
+
−
    border: 4px solid #CCC;
+
−
    border-radius: 50px;
+
−
    opacity: 0.4;
+
−
    overflow: hidden;
+
−
    transition: all 0.4s;
+
−
}
+
−
#quote-carousel .carousel-indicators .active {
+
−
    background: #333333;
+
−
    width: 128px;
+
−
    height: 128px;
+
−
    border-radius: 100px;
+
−
    border-color: #f33;
+
−
    opacity: 1;
+
−
    overflow: hidden;
+
−
}
+
−
.carousel-inner {
+
−
    min-height: 300px;
+
−
}
+
−
.item blockquote {
+
−
    border-left: none;
+
−
    margin: 0;
+
−
}
+
−
.item blockquote p:before {
+
−
    content: "\f10d";
+
−
    font-family: 'Fontawesome';
+
−
    float: left;
+
−
    margin-right: 10px;
+
 
}
 
}
 
</style>
 
</style>
Line 77: Line 26:
 
<div class="container">
 
<div class="container">
 
<div class="row">
 
<div class="row">
−
                    <div class="col-md-12" data-wow-delay="0.2s">
+
<div id="mycarousel" class="carousel slide" data-ride="carousel">
−
                        <div class="carousel slide" data-ride="carousel" id="quote-carousel">
+
  <!-- Indicators -->
−
                            <!-- Bottom Carousel Indicators -->
+
  <ol class="carousel-indicators">
−
                            <ol class="carousel-indicators">
+
    <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
−
                                <li data-target="#quote-carousel" data-slide-to="0" class="active"><img class="img-responsive " src="https://static.igem.org/mediawiki/2017/a/a3/T--ETH_Zurich--Team_Picture.jpeg" alt="">
+
    <li data-target="#mycarousel" data-slide-to="1"></li>
−
                                </li>
+
    <li data-target="#mycarousel" data-slide-to="2"></li>
−
                                <li data-target="#quote-carousel" data-slide-to="1"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/rssems/128.jpg" alt="">
+
    <li data-target="#mycarousel" data-slide-to="3"></li>
−
                                </li>
+
    <li data-target="#mycarousel" data-slide-to="4"></li>
−
                                <li data-target="#quote-carousel" data-slide-to="2"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/adellecharles/128.jpg" alt="">
+
  </ol>
−
                                </li>
+
−
                            </ol>
+
  
−
                            <!-- Carousel Slides / Quotes -->
+
  <!-- Wrapper for slides -->
−
                            <div class="carousel-inner text-center">
+
  <div class="carousel-inner" role="listbox">
 +
    <div class="item">
 +
        <img src="https://unsplash.it/2000/1250?image=397" data-color="lightblue" alt="First Image">
 +
        <div class="carousel-caption">
 +
            <h3>First Image</h3>
 +
        </div>
 +
    </div>
 +
    <div class="item">
 +
        <img src="https://unsplash.it/2000/1250?image=689" data-color="firebrick" alt="Second Image">
 +
        <div class="carousel-caption">
 +
            <h3>Second Image</h3>
 +
        </div>
 +
    </div>
 +
    <div class="item">
 +
        <img src="https://unsplash.it/2000/1250?image=675" data-color="violet" alt="Third Image">
 +
        <div class="carousel-caption">
 +
            <h3>Third Image</h3>
 +
        </div>
 +
    </div>
 +
    <div class="item">
 +
        <img src="https://unsplash.it/2000/1250?image=658" data-color="lightgreen" alt="Fourth Image">
 +
        <div class="carousel-caption">
 +
            <h3>Fourth Image</h3>
 +
        </div>
 +
    </div>
 +
    <div class="item">
 +
        <img src="https://unsplash.it/2000/1250?image=638" data-color="tomato" alt="Fifth Image">
 +
        <div class="carousel-caption">
 +
            <h3>Fifth Image</h3>
 +
        </div>
 +
    </div>
 +
  </div>
  
−
                                <!-- Quote 1 -->
+
  <!-- Controls -->
−
                                <div class="item active">
+
  <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
−
                                    <blockquote>
+
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
−
                                        <div class="row">
+
    <span class="sr-only">Previous</span>
−
                                            <div class="col-sm-8 col-sm-offset-2">
+
  </a>
 +
  <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
 +
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 +
    <span class="sr-only">Next</span>
 +
  </a>
 +
</div>
 +
</div>
 +
</div>
  
−
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. !</p>
+
<script>
−
                                                <small>Someone famous</small>
+
var $item = $('.carousel .item');
−
                                            </div>
+
var $wHeight = $(window).height();
−
                                        </div>
+
$item.eq(0).addClass('active');
−
                                    </blockquote>
+
$item.height($wHeight);
−
                                </div>
+
$item.addClass('full-screen');
−
                                <!-- Quote 2 -->
+
−
                                <div class="item">
+
−
                                    <blockquote>
+
−
                                        <div class="row">
+
−
                                            <div class="col-sm-8 col-sm-offset-2">
+
  
−
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
+
$('.carousel img').each(function() {
−
                                                <small>Someone famous</small>
+
  var $src = $(this).attr('src');
−
                                            </div>
+
  var $color = $(this).attr('data-color');
−
                                        </div>
+
  $(this).parent().css({
−
                                    </blockquote>
+
    'background-image' : 'url(' + $src + ')',
−
                                </div>
+
    'background-color' : $color
−
                                <!-- Quote 3 -->
+
  });
−
                                <div class="item">
+
  $(this).remove();
−
                                    <blockquote>
+
});
−
                                        <div class="row">
+
−
                                            <div class="col-sm-8 col-sm-offset-2">
+
  
−
                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. .</p>
+
$(window).on('resize', function (){
−
                                                <small>Someone famous</small>
+
  $wHeight = $(window).height();
−
                                            </div>
+
  $item.height($wHeight);
−
                                        </div>
+
});
−
                                    </blockquote>
+
−
                                </div>
+
−
                            </div>
+
  
−
                            <!-- Carousel Buttons Next/Prev -->
+
$('.carousel').carousel({
−
                            <a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
+
  interval: 6000,
−
                            <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
+
  pause: "false"
−
                        </div>
+
});
−
                    </div>
+
</script>
−
                </div>
+
−
</div>
+
−
<hr class="divider"/>
+
−
<center>
+
−
<strong>Powered by <a href="http://bootstheme.club" target="_blank">BootsTheme.Club</a></strong>
+
−
</center>
+
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 14:03, 1 September 2017