Template:Http://2014.igem.org/Team:Colombia
From 2013.igem.org
Line 54: | Line 54: | ||
</style> | </style> | ||
+ | |||
+ | |||
+ | /* Webfont link */ | ||
+ | @import url(http://fonts.googleapis.com/css?family=Unica+One); | ||
+ | |||
+ | /* Plugin base styles */ | ||
+ | |||
+ | .slider { | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .slides { | ||
+ | position: relative; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | letter-spacing: 0; | ||
+ | word-spacing: 0; | ||
+ | font-size: 0; | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | -webkit-transform: translate3d(0,0,0); | ||
+ | } | ||
+ | |||
+ | .slides li { | ||
+ | display: inline-block; | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | } | ||
+ | |||
+ | .slides li img { | ||
+ | width: 100%; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | /* Non-plugin styles */ | ||
+ | |||
+ | * { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | position: relative; | ||
+ | width: 90%; | ||
+ | max-width: 600px; | ||
+ | margin: 0 auto; | ||
+ | font-family: 'Unica One', sans-serif; | ||
+ | } | ||
+ | |||
+ | .slide-nav { | ||
+ | position: absolute; | ||
+ | bottom: 20px; | ||
+ | right: 20px; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | .slide-nav ul { | ||
+ | letter-spacing: 0; | ||
+ | word-spacing: 0; | ||
+ | font-size: 0; | ||
+ | } | ||
+ | |||
+ | .slide-nav li { display: inline-block; } | ||
+ | |||
+ | .slide-nav li a { | ||
+ | display: block; | ||
+ | color: #444; | ||
+ | background: #FFF; | ||
+ | text-decoration: none; | ||
+ | border-radius: 50%; | ||
+ | width: 26px; | ||
+ | height: 26px; | ||
+ | line-height: 26px; | ||
+ | font-size: 12px; | ||
+ | text-align: center; | ||
+ | margin: 0 0 0 6px; | ||
+ | } | ||
+ | |||
+ | .slide-nav li a.active { color: #DEBB1E; } | ||
+ | |||
+ | |||
Line 761: | Line 842: | ||
</td> | </td> | ||
+ | |||
+ | <section class="slider"> | ||
+ | |||
+ | <nav class="slide-nav"> | ||
+ | <ul> | ||
+ | <li><a href="#">01</a></li> | ||
+ | <li><a href="#">02</a></li> | ||
+ | <li><a href="#">03</a></li> | ||
+ | <li><a href="#">04</a></li> | ||
+ | <li><a href="#">05</a></li> | ||
+ | <li><a href="#">06</a></li> | ||
+ | </ul> | ||
+ | </nav> | ||
+ | |||
+ | <ul class="slides"> | ||
+ | <li><img src="http://kylefoster.me/cp/Up01.jpg" alt="Slide One"></li> | ||
+ | <li><img src="http://kylefoster.me/cp/Up02.jpg" alt="Slide Two"></li> | ||
+ | <li><img src="http://kylefoster.me/cp/Up03.jpg" alt="Slide Three"></li> | ||
+ | <li><img src="http://kylefoster.me/cp/Up04.jpg" alt="Slide Four"></li> | ||
+ | <li><img src="http://kylefoster.me/cp/Up05.jpg" alt="Slide Five"></li> | ||
+ | <li><img src="http://kylefoster.me/cp/Up06.jpg" alt="Slide Five"></li> | ||
+ | </ul> | ||
+ | |||
+ | </section> | ||
Revision as of 15:48, 22 August 2014
/* Webfont link */ @import url(http://fonts.googleapis.com/css?family=Unica+One); /* Plugin base styles */ .slider { position: relative; width: 100%; overflow: hidden; } .slides { position: relative; padding: 0; list-style: none; letter-spacing: 0; word-spacing: 0; font-size: 0; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); } .slides li { display: inline-block; -webkit-backface-visibility: hidden; } .slides li img { width: 100%; height: auto; } /* Non-plugin styles */ * { margin: 0; padding: 0; } body { position: relative; width: 90%; max-width: 600px; margin: 0 auto; font-family: 'Unica One', sans-serif; } .slide-nav { position: absolute; bottom: 20px; right: 20px; z-index: 1; } .slide-nav ul { letter-spacing: 0; word-spacing: 0; font-size: 0; } .slide-nav li { display: inline-block; } .slide-nav li a { display: block; color: #444; background: #FFF; text-decoration: none; border-radius: 50%; width: 26px; height: 26px; line-height: 26px; font-size: 12px; text-align: center; margin: 0 0 0 6px; } .slide-nav li a.active { color: #DEBB1E; } '