Team:UCLA/anuved verma ucla2014 workspace/CSS
From 2014.igem.org
(Difference between revisions)
Anuvedverma (Talk | contribs) |
Anuvedverma (Talk | contribs) |
||
(145 intermediate revisions not shown) | |||
Line 261: | Line 261: | ||
.boxgridMedium { | .boxgridMedium { | ||
width: 298px; | width: 298px; | ||
- | height: | + | height: 435px; |
float: left; | float: left; | ||
} | } | ||
Line 291: | Line 291: | ||
} | } | ||
h2.onBlack { | h2.onBlack { | ||
+ | font-family: Verdana; | ||
color:white; | color:white; | ||
margin-top: -5px; | margin-top: -5px; | ||
Line 330: | Line 331: | ||
width: 2px; | width: 2px; | ||
height: 65%; | height: 65%; | ||
- | z-index: | + | z-index: 8; |
} | } | ||
.spiderbutton{ | .spiderbutton{ | ||
Line 337: | Line 338: | ||
width: 110px; | width: 110px; | ||
height: 56px; | height: 56px; | ||
- | z-index: | + | z-index: 10; |
background-image: url('https://static.igem.org/mediawiki/2014/a/ac/Spiderbutton2.png'); | background-image: url('https://static.igem.org/mediawiki/2014/a/ac/Spiderbutton2.png'); | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
Line 345: | Line 346: | ||
left: 65%; | left: 65%; | ||
width: 45px; | width: 45px; | ||
+ | z-index: 10; | ||
} | } | ||
.spiderweb{ | .spiderweb{ | ||
Line 350: | Line 352: | ||
right: 0px; | right: 0px; | ||
top: 0px; | top: 0px; | ||
+ | pointer-events:none; | ||
z-index:9; | z-index:9; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
</style> | </style> | ||
+ | |||
+ | |||
<!--SIDE MENU BAR--> | <!--SIDE MENU BAR--> | ||
Line 406: | Line 377: | ||
z-index:11; | z-index:11; | ||
} | } | ||
- | #side_menu { | + | #side_menu #side_menu_title{ |
text-align:center; | text-align:center; | ||
font-family:Papyrus; | font-family:Papyrus; | ||
Line 447: | Line 418: | ||
top:0; | top:0; | ||
/*background:#550D00;*/ | /*background:#550D00;*/ | ||
- | background: # | + | background: #560606; |
z-index:10; | z-index:10; | ||
} | } | ||
Line 464: | Line 435: | ||
font-family:arial; | font-family:arial; | ||
font-size:14px; | font-size:14px; | ||
- | border-bottom:thin solid # | + | border-bottom:thin solid #FE9797; |
} | } | ||
#menu{ | #menu{ | ||
Line 472: | Line 443: | ||
} | } | ||
#menu a:hover{ | #menu a:hover{ | ||
- | background:# | + | background:#AA3939; |
} | } | ||
#menu li ul{ | #menu li ul{ | ||
- | background:# | + | background:#560606; |
/* display:none; */ | /* display:none; */ | ||
position:absolute; | position:absolute; | ||
Line 495: | Line 466: | ||
<style type="text/css"> | <style type="text/css"> | ||
.slider{ | .slider{ | ||
- | + | position: relative; | |
- | + | width: 1150px; | |
- | + | height: 350px; | |
- | + | margin: auto; | |
- | + | overflow: hidden; | |
- | + | z-index: 0; | |
- | + | background-image: url('https://static.igem.org/mediawiki/2014/c/c3/Debut_light.png'); | |
- | + | ||
} | } | ||
- | .slider | + | .slider .slider_left{ |
- | + | position: absolute; | |
- | + | background-color:black; | |
- | + | top: 0px; | |
+ | left: 0px; | ||
+ | width: 50px; | ||
+ | height: 100%; | ||
+ | opacity: 0.5; | ||
+ | z-index: 2; | ||
} | } | ||
- | . | + | .slider .slider_left img{ |
- | + | position: relative; | |
- | + | width: 100%; | |
- | + | height: 200px; | |
- | + | top: 25%; | |
- | + | left: 10px; | |
} | } | ||
- | . | + | .slider .slider_right{ |
- | + | position: absolute; | |
- | + | background-color:black; | |
- | + | top: 0px; | |
- | + | left: 1100px; | |
- | + | width: 50px; | |
- | + | height: 100%; | |
+ | opacity: 0.5; | ||
+ | z-index: 2; | ||
} | } | ||
+ | .slider .slider_right img{ | ||
+ | position: relative; | ||
+ | width: 100%; | ||
+ | height: 200px; | ||
+ | top: 25%; | ||
+ | left: -10px; | ||
+ | } | ||
+ | .slider .slider_imgs{ | ||
+ | position: absolute; | ||
+ | } | ||
+ | .slider .slider_imgs div{ | ||
+ | float: left; | ||
+ | width: 1150px; | ||
+ | height: 350px; | ||
+ | } | ||
+ | .slider .slider_imgs #slide1{ | ||
+ | float: left; | ||
+ | background-image:url('http://www.thinksnaps.com/wp-content/uploads/2014/07/Green-Bubbles-Awesome-Background.jpg'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | .slider .slider_imgs #slide2{ | ||
+ | float: left; | ||
+ | background-image:url('http://4vector.com/i/free-vector-exquisite-leaf-background-01-vector_015360_exquisite_leaf_background_01_vector.jpg'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | .slider .slider_imgs #slide3{ | ||
+ | float: left; | ||
+ | background-image:url('http://wallpaper-download.net/wallpapers/random-wallpapers-green-lime-background-wallpaper-32549.jpg'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | </style> | ||
- | + | ||
- | + | <!--PAGE HEADERS--> | |
- | + | <style type="text/css"> | |
- | + | .page_header{ | |
+ | position: absolute; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2014/b/b3/Debut_dark.png'); | ||
+ | width: 100%; | ||
+ | height: 70%; | ||
+ | z-index: 0; | ||
} | } | ||
+ | .page_header .page_header_box{ | ||
+ | position: absolute; | ||
+ | overflow: hidden; | ||
+ | z-index: 0; | ||
+ | } | ||
+ | #box1{ | ||
+ | background-color:#0A64A4; | ||
+ | width:20%; | ||
+ | height:80%; | ||
+ | top:10%; | ||
+ | left:10%; | ||
+ | opacity: 0.5; | ||
+ | } | ||
+ | #box2{ | ||
+ | background-color:#0A64A4; | ||
+ | width:20%; | ||
+ | height:80%; | ||
+ | top:10%; | ||
+ | left:30%; | ||
+ | opacity: 0.5; | ||
+ | } | ||
+ | #box3{ | ||
+ | background-color:#0A64A4; | ||
+ | width:20%; | ||
+ | height:80%; | ||
+ | top:10%; | ||
+ | left:50%; | ||
+ | opacity: 0.5; | ||
+ | } | ||
+ | #box4{ | ||
+ | background-color:#0A64A4; | ||
+ | width:20%; | ||
+ | height:80%; | ||
+ | top:10%; | ||
+ | left:70%; | ||
+ | opacity: 0.5; | ||
+ | } | ||
+ | </style> | ||
- | + | ||
- | + | <!--CONTENT SECTIONS--> | |
- | + | <style type="text/css"> | |
- | + | .content_container{ | |
- | + | position: absolute; | |
- | + | background-image: url('https://static.igem.org/mediawiki/2014/c/c3/Debut_light.png'); | |
- | + | /*top: 85%;*/ | |
+ | width: 99%; | ||
+ | padding: 0 0 0 0; | ||
+ | margin: auto; | ||
+ | margin-bottom: 50px; | ||
+ | border-radius: 0px; | ||
+ | z-index: -1; | ||
} | } | ||
- | + | .page_content{ | |
- | + | position: relative; | |
+ | background-color: #FFFFCC; | ||
+ | width: 99%; | ||
+ | padding: 0 0 0 0; | ||
+ | margin: auto; | ||
+ | margin-bottom: 20px; | ||
+ | border-radius: 25px; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | .content_subsection{ | ||
+ | position: relative; | ||
+ | width: 85%; | ||
+ | padding: 10px 10px 10px 10px; | ||
+ | margin: auto; | ||
} | } | ||
</style> | </style> | ||
+ | |||
</html> | </html> |
Latest revision as of 04:28, 22 September 2014