Diana Tamayo (Talk | contribs) |
|||
Line 1: | Line 1: | ||
{{TecMonterrey_GDL}} | {{TecMonterrey_GDL}} | ||
+ | |||
<html> | <html> | ||
+ | <style> | ||
+ | .smart-headers{ | ||
+ | font-family: 'Code Caption', sans-serif; | ||
+ | } | ||
+ | .cool-container{ | ||
+ | height: 33rem; | ||
+ | padding: 0 !important; | ||
+ | } | ||
− | + | .smart-headers h1{ | |
− | + | margin-top: 3rem; | |
− | + | margin-bottom: 3rem; | |
− | + | ||
color: #a36996; | color: #a36996; | ||
− | + | text-shadow: 5px 0px 0px #723f66; | |
− | font-size: | + | font-size: 5vw; |
− | font-weight: 900 | + | font-weight: 900; |
− | + | letter-spacing: -5px; | |
− | + | position: relative; | |
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | .smart-headers h3 span{ | ||
+ | font-weight: 900; | ||
+ | font-size: 110%; | ||
+ | color: #0c605c; | ||
+ | letter-spacing: -3px; | ||
+ | } | ||
+ | span.index{ | ||
+ | color: #2da7a0 !important; | ||
+ | font-size: 190% !important; | ||
+ | font-weight: 100 !important; | ||
+ | } | ||
− | + | .internal-wrapper{ | |
− | + | padding: 7% 15% 0 15%; | |
− | + | height: 100%; | |
− | + | } | |
− | + | ||
− | + | .paragraph{ | |
− | + | background-color: rgb(226, 184, 183); | |
+ | width: 100%; | ||
+ | margin-top: 2rem; | ||
+ | padding: .5rem; | ||
+ | min-height: 170px; | ||
+ | } | ||
− | + | /* Slider styling */ | |
+ | .carousel-indicators li{ | ||
+ | width: 12px; | ||
+ | height: 12px; | ||
+ | margin-top: 8px; | ||
+ | border-radius: 100%; | ||
+ | background-color: #a36996; | ||
+ | } | ||
+ | .carousel-indicators li.active{ | ||
+ | width: 20px; | ||
+ | height: 20px; | ||
+ | margin-top: 0; | ||
+ | background-color: #7c4e72; | ||
+ | } | ||
+ | #carouselExampleIndicators{ | ||
+ | height: 100%; | ||
+ | } | ||
+ | .carousel-item{ | ||
+ | height: 100%; | ||
+ | } | ||
+ | .left-arrow{ | ||
+ | transform: rotate(90deg); | ||
+ | } | ||
+ | .right-arrow{ | ||
+ | transform: rotate(-90deg); | ||
+ | } | ||
− | + | </style> | |
− | + | ||
− | </ | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <script> | |
− | </ | + | $(document).ready(() => { |
+ | $('.carousel').carousel({ | ||
+ | interval: false | ||
+ | }) | ||
+ | }); | ||
+ | </script> | ||
+ | <div class="container"> | ||
+ | <div class="smart-headers text-center"> | ||
+ | <h1>INTERLAB</h1> | ||
+ | </div> | ||
− | + | <div class="cool-container"> | |
− | + | <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> | |
− | < | + | <ol class="carousel-indicators"> |
− | + | <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> | |
− | + | <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> | |
− | + | <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> | |
− | + | <li data-target="#carouselExampleIndicators" data-slide-to="3"></li> | |
− | + | <li data-target="#carouselExampleIndicators" data-slide-to="4"></li> | |
− | + | <li data-target="#carouselExampleIndicators" data-slide-to="5"></li> | |
− | + | </ol> | |
− | + | <div class="carousel-inner"> | |
− | + | <div class="carousel-item active"> | |
− | + | <div class="internal-wrapper"> | |
− | + | <div class="row"> | |
− | + | <div class="col-md-6 smart-headers"> | |
− | + | <h3><span class="index">A.</span><span>CALIBRATION</span></h3> | |
− | + | <h3 class="text-right"><span>PROTOCOLS</span></h3> | |
− | + | <div class="paragraph"> | |
− | + | <p class="text"> | |
− | + | Párrafo explicando experimento, controles y eso al lado de las | |
− | + | cinéticas o resultados de x experimento | |
− | + | </p> | |
− | + | </div> | |
− | + | </div> | |
− | + | <div class="col-md-6"> | |
− | < | + | Graph |
− | + | </div> | |
− | < | + | </div> |
− | + | </div> | |
− | + | </div> | |
− | <p class= " | + | <div class="carousel-item"> |
− | + | <p>slide 2</p> | |
− | + | </div> | |
− | + | <div class="carousel-item"> | |
− | < | + | <p>slide 3</p> |
− | </ | + | </div> |
− | + | <div class="carousel-item"> | |
− | + | <p>slide 4</p> | |
− | + | </div> | |
− | + | <div class="carousel-item"> | |
− | + | <p>slide 5</p> | |
− | + | </div> | |
− | + | <div class="carousel-item"> | |
− | + | <p>slide 6</p> | |
− | + | </div> | |
− | + | </div> | |
− | < | + | <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> |
− | + | <span aria-hidden="true"><img src="https://static.igem.org/mediawiki/2018/c/ce/T--TecMonterrey_GDL--flechas.png" width="40" class="left-arrow"></span> | |
− | + | <span class="sr-only">Previous</span> | |
− | + | </a> | |
− | + | <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> | |
− | + | <span aria-hidden="true"><img src="https://static.igem.org/mediawiki/2018/c/ce/T--TecMonterrey_GDL--flechas.png" width="40" class="right-arrow"></span> | |
− | + | <span class="sr-only">Next</span> | |
− | + | </a> | |
− | + | </div> | |
− | + | </div> | |
− | <a href="https://static.igem.org/mediawiki/2018/ | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
</div> | </div> | ||
− | < | + | <br> |
+ | <br> | ||
</html> | </html> | ||
+ | |||
+ | {{TecMonterrey_GDL/Footer}} |
Revision as of 00:25, 3 September 2018
INTERLAB