Difference between revisions of "Template:UIUC Illinois"
| Line 1: | Line 1: | ||
<html> | <html> | ||
| + | * {box-sizing:border-box} | ||
| + | |||
| + | /* Slideshow container */ | ||
| + | .slideshow-container { | ||
| + | max-width: 1000px; | ||
| + | position: relative; | ||
| + | margin: auto; | ||
| + | } | ||
| + | |||
| + | .mySlides { | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | /* Next & previous buttons */ | ||
| + | .prev, .next { | ||
| + | cursor: pointer; | ||
| + | position: absolute; | ||
| + | top: 50%; | ||
| + | width: auto; | ||
| + | margin-top: -22px; | ||
| + | padding: 16px; | ||
| + | color: white; | ||
| + | font-weight: bold; | ||
| + | font-size: 18px; | ||
| + | transition: 0.6s ease; | ||
| + | border-radius: 0 3px 3px 0; | ||
| + | } | ||
| + | |||
| + | /* Position the "next button" to the right */ | ||
| + | .next { | ||
| + | right: 0; | ||
| + | border-radius: 3px 0 0 3px; | ||
| + | } | ||
| + | |||
| + | /* On hover, add a black background color with a little bit see-through */ | ||
| + | .prev:hover, .next:hover { | ||
| + | background-color: rgba(0,0,0,0.8); | ||
| + | } | ||
| + | |||
| + | /* Caption text */ | ||
| + | .text { | ||
| + | color: #f2f2f2; | ||
| + | font-size: 15px; | ||
| + | padding: 8px 12px; | ||
| + | position: absolute; | ||
| + | bottom: 8px; | ||
| + | width: 100%; | ||
| + | text-align: center; | ||
| + | } | ||
| + | |||
| + | /* Number text (1/3 etc) */ | ||
| + | .numbertext { | ||
| + | color: #f2f2f2; | ||
| + | font-size: 12px; | ||
| + | padding: 8px 12px; | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | } | ||
| + | |||
| + | /* The dots/bullets/indicators */ | ||
| + | .dot { | ||
| + | cursor:pointer; | ||
| + | height: 13px; | ||
| + | width: 13px; | ||
| + | margin: 0 2px; | ||
| + | background-color: #bbb; | ||
| + | border-radius: 50%; | ||
| + | display: inline-block; | ||
| + | transition: background-color 0.6s ease; | ||
| + | } | ||
| + | |||
| + | .active, .dot:hover { | ||
| + | background-color: #717171; | ||
| + | } | ||
| + | |||
| + | /* Fading animation */ | ||
| + | .fade { | ||
| + | -webkit-animation-name: fade; | ||
| + | -webkit-animation-duration: 1.5s; | ||
| + | animation-name: fade; | ||
| + | animation-duration: 1.5s; | ||
| + | } | ||
| + | |||
| + | @-webkit-keyframes fade { | ||
| + | from {opacity: .4} | ||
| + | to {opacity: 1} | ||
| + | } | ||
| + | |||
| + | @keyframes fade { | ||
| + | from {opacity: .4} | ||
| + | to {opacity: 1} | ||
| + | } | ||
| + | |||
| + | |||
| + | |||
| + | |||
<script> | <script> | ||
Revision as of 17:23, 29 June 2017
* {box-sizing:border-box} /* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; } .mySlides { display: none; } /* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } /* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; } /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); } /* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */ .numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */ .dot { cursor:pointer; height: 13px; width: 13px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active, .dot:hover { background-color: #717171; } /* Fading animation */ .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} }
