Team:UCLA/anuved verma ucla2014 workspace/CSS
From 2014.igem.org
(Difference between revisions)
Anuvedverma (Talk | contribs) |
Anuvedverma (Talk | contribs) |
||
Line 1: | Line 1: | ||
<html> | <html> | ||
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'> | <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
Line 523: | Line 313: | ||
</style> | </style> | ||
+ | <!--SPIDER TOP BUTTON--> | ||
+ | <style type="text/css"> | ||
+ | .spider{ | ||
+ | position: fixed; | ||
+ | top: 210px; | ||
+ | right: 0px; | ||
+ | width: 200px; | ||
+ | height: 80%; | ||
+ | z-index: 0; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | .spiderline{ | ||
+ | position: relative; | ||
+ | left: 75%; | ||
+ | background-color: #A8A8A8; | ||
+ | width: 2px; | ||
+ | height: 65%; | ||
+ | z-index: 0; | ||
+ | } | ||
+ | .spiderbutton{ | ||
+ | position: relative; | ||
+ | left: 50%; | ||
+ | width: 110px; | ||
+ | height: 56px; | ||
+ | z-index: 0; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2014/a/ac/Spiderbutton2.png'); | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | .backtotop{ | ||
+ | position: relative; | ||
+ | left: 65%; | ||
+ | width: 45px; | ||
+ | } | ||
+ | .spiderweb{ | ||
+ | position: fixed; | ||
+ | right: 0px; | ||
+ | top: 0px; | ||
+ | z-index:9; | ||
+ | } | ||
+ | <style> | ||
+ | <!--CONTENT DIV--> | ||
+ | <!--SUMMARY TITLES--> | ||
+ | <style type="text/css"> | ||
+ | .content_div_container{ | ||
+ | background-color:blue; | ||
+ | position: fixed; | ||
+ | display:inline-block; | ||
+ | border: 2px solid #CCCCB2; | ||
+ | border-radius: 10px; | ||
+ | margin: 20px 20px 20px 20px; | ||
+ | overflow:hidden; | ||
+ | height: 400px; | ||
+ | width: 400px; | ||
+ | } | ||
+ | .content_div_text{ | ||
+ | position: absolute; | ||
+ | padding: 10 10 10 10; | ||
+ | top: 300px; | ||
+ | left: 0; | ||
+ | background-color:black; | ||
+ | opacity: 0.5; | ||
+ | } | ||
+ | .content_div_text h3 { | ||
+ | font-family: Verdana; | ||
+ | margin: 10px 10px 10px 10px; | ||
+ | color: white; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | .content_div_text p { | ||
+ | font-family: Verdana; | ||
+ | margin: 10px 10px 10px 10px; | ||
+ | color: white; | ||
+ | } | ||
+ | </style> | ||
+ | <!--SIDE MENU BAR--> | ||
+ | <style type="text/css"> | ||
+ | #side_menu{ | ||
+ | position:fixed; | ||
+ | background-image: url('http://inspirationhut.net/wp-content/uploads/2012/11/Old-Paper-Texture-2.png'); | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: -540px -10px; | ||
+ | top:-10px; | ||
+ | left:-170px; | ||
+ | width:150px; | ||
+ | height:1070px; | ||
+ | padding: 80px 50px 0 0; | ||
+ | /*border: 2px solid #D46A6A;*/ | ||
+ | /*border-radius: 25px;*/ | ||
+ | margin-bottom: 20px; | ||
+ | margin-top: 20px; | ||
+ | z-index:9; | ||
+ | } | ||
+ | #side_menu h1, h2, h3, h4{ | ||
+ | text-align:center; | ||
+ | font-family:Papyrus; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
+ | |||
+ | <!--TOP MENU BAR--> | ||
+ | <style type="text/css"> | ||
+ | #top_menu{ | ||
+ | position:fixed; | ||
+ | padding: 12px 0 0 0; | ||
+ | width:100%; | ||
+ | left:0; | ||
+ | top:0; | ||
+ | /*background:#550D00;*/ | ||
+ | background: #203135; | ||
+ | z-index:10; | ||
+ | } | ||
+ | #menu li{ | ||
+ | position:relative; | ||
+ | float:left; | ||
+ | list-style:none; | ||
+ | } | ||
+ | #menu a{ | ||
+ | color:white; | ||
+ | padding:18px 0 15px 0; | ||
+ | text-decoration:none; | ||
+ | width:98px; | ||
+ | display:block; | ||
+ | text-align:center; | ||
+ | font-family:arial; | ||
+ | font-size:14px; | ||
+ | border-bottom:thin solid #255C69; | ||
+ | } | ||
+ | #menu{ | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | width:900px; | ||
+ | } | ||
+ | #menu a:hover{ | ||
+ | background:#0F829D; | ||
+ | } | ||
+ | #menu li ul{ | ||
+ | background:#203135; | ||
+ | /* display:none; */ | ||
+ | position:absolute; | ||
+ | text-align:center; | ||
+ | top:50px; | ||
+ | right:0px; | ||
+ | } | ||
+ | #menu li:hover ul{ | ||
+ | display:block; | ||
+ | } | ||
+ | #dropdown_menu li ul li{ | ||
+ | position:relative; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
+ | |||
+ | <!--SLIDER--> | ||
+ | <style type="text/css"> | ||
+ | .slider{ | ||
+ | width:800px; | ||
+ | height:350px; | ||
+ | overflow:hidden; | ||
+ | margin:0px auto; | ||
+ | background-image:url("https://2014.igem.org/File:Loader.gif"); | ||
+ | background-repeat:no-repeat; | ||
+ | background-position:center; | ||
+ | position: relative; | ||
+ | } | ||
+ | .slider img{ | ||
+ | width:800px; | ||
+ | height:350px; | ||
+ | display:none; | ||
+ | } | ||
+ | .slider_nav{ | ||
+ | width:800px; | ||
+ | margin:0 auto; | ||
+ | position:relative; | ||
+ | top:-200px; | ||
+ | z-index:10; | ||
+ | } | ||
+ | .shadow{ | ||
+ | background-image:url("https://2014.igem.org/File:Slider-shadow.jpg"); | ||
+ | background-repeat:no-repeat; | ||
+ | background-position:top; | ||
+ | width:864px; | ||
+ | height:144px; | ||
+ | margin:0px auto; | ||
+ | } | ||
+ | |||
+ | #container { | ||
+ | width: 100px; | ||
+ | height: 100px; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #navi, | ||
+ | #infoi { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | } | ||
+ | |||
+ | #infoi { | ||
+ | z-index: 10; | ||
+ | } | ||
+ | </style> | ||
</html> | </html> |
Revision as of 23:51, 19 September 2014