Team:UCLA/Aal/Csstemplate
From 2014.igem.org
(Difference between revisions)
(125 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | .container{ | ||
+ | width:800px; | ||
+ | height:400px; | ||
+ | padding:20px; | ||
+ | border:1px solid gray; | ||
+ | -webkit-box-sizing:border-box; | ||
+ | -moz-box-sizing:border-box; | ||
+ | box-sizing:border-box; | ||
+ | background: black; | ||
+ | } | ||
+ | .slider_wrapper{ | ||
+ | overflow: hidden; | ||
+ | position:relative; | ||
+ | height:280px; | ||
+ | top:auto; | ||
+ | } | ||
+ | #image_slider{ | ||
+ | |||
+ | position: relative; | ||
+ | height: auto; | ||
+ | list-style: none; | ||
+ | overflow: hidden; | ||
+ | float: left; | ||
+ | /*Chrom default padding for ul is 40px */ | ||
+ | padding:0px; | ||
+ | margin:0px; | ||
+ | } | ||
+ | #image_slider li{ | ||
+ | position: relative; | ||
+ | float: left; | ||
+ | } | ||
+ | .nvgt{ | ||
+ | position:absolute; | ||
+ | top: 120px; | ||
+ | height: 50px; | ||
+ | width: 30px; | ||
+ | opacity: 0.6; | ||
+ | } | ||
+ | .nvgt:hover{ | ||
+ | opacity: 0.9; | ||
+ | } | ||
+ | #prev{ | ||
+ | background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/prev.png') no-repeat center; | ||
+ | left: 0px; | ||
+ | } | ||
+ | #next{ | ||
+ | background: #000 url('https://dl.dropboxusercontent.com/u/65639888/image/next.png') no-repeat center; | ||
+ | right: 0px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
.test{ | .test{ | ||
background-color:red; | background-color:red; | ||
Line 7: | Line 61: | ||
border: 2px solid #0000FF; | border: 2px solid #0000FF; | ||
border-radius: 25px; | border-radius: 25px; | ||
- | padding: 10px 40px; | + | padding: 10px 40px; |
margin-bottom: 20px; | margin-bottom: 20px; | ||
margin-top: 20px; | margin-top: 20px; | ||
Line 17: | Line 71: | ||
} | } | ||
.image{ | .image{ | ||
- | content:url(http://www. | + | content:url(http://www.smashingmagazine.com/images/nature-wallpapers/24.jpg); |
max-width: 200px; | max-width: 200px; | ||
max-height:200px; | max-height:200px; | ||
} | } | ||
.overlay{ | .overlay{ | ||
- | background- | + | background-image:url('http://www.lcaid.com/images/full/2014/01/22/spider-wallpaper-high-definition-wallpaper-background_spider-wallpaper.jpghttp://images.alphacoders.com/260/260921.jpg'); |
- | + | ||
- | . | + | |
- | + | ||
} | } | ||
#test2{ | #test2{ | ||
position:fixed; | position:fixed; | ||
- | |||
background-color:red; | background-color:red; | ||
+ | left:-100px; | ||
width:30px; | width:30px; | ||
height:500px; | height:500px; | ||
+ | padding: 10px 40px; | ||
border: 2px solid #0000FF; | border: 2px solid #0000FF; | ||
border-radius: 25px; | border-radius: 25px; | ||
- | |||
margin-bottom: 20px; | margin-bottom: 20px; | ||
margin-top: 20px; | margin-top: 20px; | ||
- | + | top:10%; | |
- | + | ||
- | top: | + | |
} | } | ||
#test2 > p { | #test2 > p { | ||
font-family: "Comic Sans MS", cursive, sans-serif; | font-family: "Comic Sans MS", cursive, sans-serif; | ||
+ | } | ||
+ | #test3{ | ||
+ | position:absolute; | ||
+ | width:10px; | ||
+ | right:10px; | ||
+ | top: 45%; | ||
+ | height:50px; | ||
+ | background-color:blue; | ||
+ | } | ||
+ | .spiderbutton{ | ||
+ | position: fixed; | ||
+ | top: 550px; | ||
+ | left: 1200px; | ||
+ | z-index: 0; | ||
+ | } | ||
+ | .spiderline{ | ||
+ | position: fixed; | ||
+ | left:896px; | ||
+ | top: -95px; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | .spiderweb{ | ||
+ | position: fixed; | ||
+ | right: 0px; | ||
+ | top: 0px; | ||
+ | z-index:1; | ||
} | } | ||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 23:36, 8 September 2014