Team:UCLA/Template/CSS
From 2014.igem.org
(Difference between revisions)
Anuvedverma (Talk | contribs) |
Anuvedverma (Talk | contribs) |
||
(133 intermediate revisions not shown) | |||
Line 14: | Line 14: | ||
padding-top: 100px; | padding-top: 100px; | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||
- | font-family: Georgia, Times, "Times New Roman", serif; | + | font-family: Georgia, Times, "Times New Roman", serif; |
display:none; | display:none; | ||
} | } | ||
- | h1, h2, h3, h4, h5 { font-family: Georgia, Times, "Times New Roman", serif;} | + | h1, h2, h3, h4, h5 { |
+ | /*font-family: Helvetica, Georgia, Times, "Times New Roman", serif;*/ | ||
+ | font-family: 'Roboto', sans-serif; | ||
+ | border-bottom: 0px solid #aaa; | ||
+ | } | ||
Line 73: | Line 77: | ||
#contentcontainer { /*-- creates container for all content on page --*/ | #contentcontainer { /*-- creates container for all content on page --*/ | ||
- | font-family: Arial, Helvetica, sans-serif; | + | font-family: Arial, Helvetica, sans-serif; |
+ | font-family: 'Roboto', sans-serif; | ||
font-weight: normal; | font-weight: normal; | ||
font-size: 14px; | font-size: 14px; | ||
Line 144: | Line 149: | ||
color: #414141; | color: #414141; | ||
font-size: 25px; | font-size: 25px; | ||
- | font-family: Georgia, Times, "Times New Roman", serif; | + | /*font-family: Georgia, Times, "Times New Roman", serif;*/ |
+ | font-family: 'Roboto', sans-serif; | ||
padding: 10px 15px 5px 10px; | padding: 10px 15px 5px 10px; | ||
- | border-bottom: 1px solid #ccc; | + | border-bottom: 1px solid #ccc; |
margin-bottom: 0px; | margin-bottom: 0px; | ||
} | } | ||
Line 231: | Line 237: | ||
.style { | .style { | ||
font-size: 30px; | font-size: 30px; | ||
- | font-family: 'Pacifico', cursive; | + | /*font-family: 'Pacifico', cursive;*/ |
+ | /*font-family: "Times New Roman", Times, serif;*/ | ||
+ | font-family: 'Roboto', sans-serif; | ||
} | } | ||
Line 247: | Line 255: | ||
} | } | ||
.content { | .content { | ||
- | font-family: Tahoma; | + | /*font-family: Tahoma;*/ |
+ | font-family: 'Roboto', sans-serif; | ||
font-size: 12px; | font-size: 12px; | ||
color: #3D3D3D; | color: #3D3D3D; | ||
Line 300: | Line 309: | ||
h2.onBlack { | h2.onBlack { | ||
font-family: Verdana; | font-family: Verdana; | ||
+ | font-family: 'Roboto', sans-serif; | ||
color:white; | color:white; | ||
margin-top: -5px; | margin-top: -5px; | ||
Line 328: | Line 338: | ||
.spider{ | .spider{ | ||
position: fixed; | position: fixed; | ||
- | top: | + | top: 50px; |
right: 0px; | right: 0px; | ||
width: 200px; | width: 200px; | ||
- | height: | + | height: 95%; |
z-index: 10; | z-index: 10; | ||
+ | |||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
Line 338: | Line 349: | ||
position: relative; | position: relative; | ||
left: 75%; | left: 75%; | ||
- | + | top: 0%; | |
background-color: #A8A8A8; | background-color: #A8A8A8; | ||
width: 2px; | width: 2px; | ||
- | height: | + | height: 80%; |
z-index: 100; | z-index: 100; | ||
} | } | ||
Line 438: | Line 449: | ||
} | } | ||
</style> | </style> | ||
- | |||
Line 450: | Line 460: | ||
top:0; | top:0; | ||
/*background:#550D00;*/ | /*background:#550D00;*/ | ||
- | background: # | + | background: #006699; |
z-index:20; | z-index:20; | ||
} | } | ||
Line 460: | Line 470: | ||
} | } | ||
#menu a{ | #menu a{ | ||
- | color: | + | color:white; |
- | font-family: ' | + | font-family: Helvetica; |
+ | font-family: 'Roboto', sans-serif; | ||
padding:18px 5px 15px 5px; | padding:18px 5px 15px 5px; | ||
text-decoration:none; | text-decoration:none; | ||
Line 468: | Line 479: | ||
text-align:center; | text-align:center; | ||
font-size:16px; | font-size:16px; | ||
- | border-bottom:thin solid # | + | border-bottom:thin solid #0099CC; |
} | } | ||
#menu{ | #menu{ | ||
Line 476: | Line 487: | ||
} | } | ||
#menu a:hover{ | #menu a:hover{ | ||
- | background:# | + | background:#0099CC; |
} | } | ||
#menu li ul{ | #menu li ul{ | ||
- | background:# | + | background:#006699; |
/* display:none; */ | /* display:none; */ | ||
position:absolute; | position:absolute; | ||
Line 561: | Line 572: | ||
background-size: cover; | background-size: cover; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
+ | background-position: 0% 50%; | ||
} | } | ||
.slider .slider_imgs #slide3{ | .slider .slider_imgs #slide3{ | ||
Line 573: | Line 585: | ||
background-size: cover; | background-size: cover; | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
+ | background-position: 0% 65%; | ||
} | } | ||
</style> | </style> | ||
- | <!-- | + | |
+ | <!--HP SLIDER--> | ||
<style type="text/css"> | <style type="text/css"> | ||
- | . | + | .hpslider{ |
+ | position: relative; | ||
+ | width: 1150px; | ||
+ | height: 400px; | ||
+ | margin: auto; | ||
+ | overflow: hidden; | ||
+ | z-index: 13; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2014/c/c3/Debut_light.png'); | ||
+ | } | ||
+ | .hpslider .hpslider_left{ | ||
position: absolute; | position: absolute; | ||
- | background- | + | background-color:black; |
+ | top: 0px; | ||
+ | left: 0px; | ||
+ | width: 50px; | ||
+ | height: 100%; | ||
+ | opacity: 0.5; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | .hpslider .hpslider_left img{ | ||
+ | position: relative; | ||
width: 100%; | width: 100%; | ||
- | height: | + | height: 200px; |
- | + | top: 27%; | |
+ | left: 10px; | ||
} | } | ||
- | . | + | .hpslider .hpslider_right{ |
position: absolute; | position: absolute; | ||
- | + | background-color:black; | |
- | + | top: 0px; | |
- | + | left: 1100px; | |
- | + | width: 50px; | |
- | background-color: | + | height: 100%; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
opacity: 0.5; | opacity: 0.5; | ||
+ | z-index: 2; | ||
} | } | ||
- | + | .hpslider .hpslider_right img{ | |
- | + | position: relative; | |
- | width: | + | width: 100%; |
- | height: | + | height: 200px; |
- | top: | + | top: 27%; |
- | left: | + | left: -10px; |
- | + | ||
} | } | ||
- | + | .hpslider .hpslider_imgs{ | |
- | + | position: absolute; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | .hpslider .hpslider_imgs div{ |
- | background- | + | float: left; |
- | + | width: 1150px; | |
- | + | height: 400px; | |
- | + | } | |
- | left: | + | .hpslider .hpslider_imgs #slide1{ |
- | + | float: left; | |
+ | background-image:url('https://static.igem.org/mediawiki/2014/d/d1/Silkworms.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 25% 50%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide2{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/f/fa/Cocoons.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide3{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/2/28/Fahrion_UCLA_iGEM_statement.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 65%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide4{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/9/96/Fahrion_Non_Fluoresce.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 65%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide5{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/b/b3/Fahrion_Blue_Fluoresce_side.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 65%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide6{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/4/4c/Fahrion_process_Anuved_Dewal.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 40%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide7{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/9/95/Fahrion_Process_full.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 10% 50%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide8{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/f/f4/Fahrion_full_nonfluoresce.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 30%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide9{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/5/58/Fahrion_Group.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 45%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide10{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/b/be/Fahrion_David_Discussion.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 40%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide11{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/5/59/Fahrion_Process_Aal.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 40%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide12{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/f/fa/Cocoons.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 65%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide13{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/e/ef/Fahrion_Blue_Straight.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 65%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide14{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/6/62/Fahrion_Process_Observers.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 50%; | ||
+ | } | ||
+ | .hpslider .hpslider_imgs #slide15{ | ||
+ | float: left; | ||
+ | background-image:url('https://static.igem.org/mediawiki/2014/5/57/Fahrion_Historical_Wall.JPG'); | ||
+ | background-size: cover; | ||
+ | background-repeat: no-repeat; | ||
+ | background-position: 0% 45%; | ||
} | } | ||
</style> | </style> | ||
+ | |||
Line 632: | Line 758: | ||
background-image: url('https://static.igem.org/mediawiki/2014/b/b3/Debut_dark.png'); | background-image: url('https://static.igem.org/mediawiki/2014/b/b3/Debut_dark.png'); | ||
width: 100%; | width: 100%; | ||
- | height: | + | height: 450px; |
z-index: 0; | z-index: 0; | ||
margin-bottom: 200px; | margin-bottom: 200px; | ||
Line 642: | Line 768: | ||
} | } | ||
#box1{ | #box1{ | ||
- | background- | + | background-image:url('https://static.igem.org/mediawiki/2014/f/fa/Cocoons.JPG'); |
- | width: | + | background-size:1500px; |
+ | width:21%; | ||
height:80%; | height:80%; | ||
top:10%; | top:10%; | ||
Line 650: | Line 777: | ||
} | } | ||
#box2{ | #box2{ | ||
- | background- | + | background-image:url('http://www.visualphotos.com/photo/1x7581974/silk_fibres_coloured_sem_H1200410.jpg'); |
- | width: | + | background-position:50% 50%; |
+ | width:21%; | ||
height:80%; | height:80%; | ||
top:10%; | top:10%; | ||
Line 658: | Line 786: | ||
} | } | ||
#box3{ | #box3{ | ||
- | background- | + | background-image: url('https://static.igem.org/mediawiki/2014/3/31/Pcrgel.jpg'); |
- | width: | + | background-size:750px; |
+ | background-position:70% 70%; | ||
+ | width:21%; | ||
height:80%; | height:80%; | ||
top:10%; | top:10%; | ||
Line 666: | Line 796: | ||
} | } | ||
#box4{ | #box4{ | ||
- | background- | + | background-image:url('https://static.igem.org/mediawiki/2014/a/a2/Spiderweb.jpg'); |
- | width: | + | |
+ | width:21%; | ||
height:80%; | height:80%; | ||
top:10%; | top:10%; | ||
Line 676: | Line 807: | ||
+ | <!--HP PAGE HEADERS--> | ||
+ | <style type="text/css"> | ||
+ | .hppage_header{ | ||
+ | position: absolute; | ||
+ | background-image: url('https://static.igem.org/mediawiki/2014/b/b3/Debut_dark.png'); | ||
+ | width: 100%; | ||
+ | height: 475px; | ||
+ | z-index: 0; | ||
+ | margin-bottom: 200px; | ||
+ | } | ||
+ | .hppage_header .hppage_header_box{ | ||
+ | position: absolute; | ||
+ | overflow: hidden; | ||
+ | z-index: 0; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
+ | <!--EDITING--> | ||
<!--CONTENT SECTIONS--> | <!--CONTENT SECTIONS--> | ||
<style type="text/css"> | <style type="text/css"> | ||
Line 681: | Line 831: | ||
position: absolute; | position: absolute; | ||
background-image: url('https://static.igem.org/mediawiki/2014/c/c3/Debut_light.png'); | background-image: url('https://static.igem.org/mediawiki/2014/c/c3/Debut_light.png'); | ||
- | top: | + | font-family: 'Roboto', sans-serif; |
- | width: | + | top: 550px; |
+ | width: 100%; | ||
padding: 0 0 0 0; | padding: 0 0 0 0; | ||
margin: auto; | margin: auto; | ||
margin-bottom: 50px; | margin-bottom: 50px; | ||
+ | margin-left: 0px; | ||
border-radius: 0px; | border-radius: 0px; | ||
z-index: -1; | z-index: -1; | ||
Line 692: | Line 844: | ||
.page_content{ | .page_content{ | ||
position: relative; | position: relative; | ||
- | background-color: # | + | background-color: #FFEE80; |
width: 99%; | width: 99%; | ||
padding: 0 0 0 0; | padding: 0 0 0 0; | ||
margin: auto; | margin: auto; | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||
- | border-radius: 25px; | + | /*border-radius: 25px;*/ |
z-index: -1; | z-index: -1; | ||
} | } | ||
Line 711: | Line 863: | ||
<style> | <style> | ||
table{ | table{ | ||
+ | font-family: 'Roboto', sans-serif; | ||
background-image: url('https://static.igem.org/mediawiki/2014/c/cb/Debut_light.png'); | background-image: url('https://static.igem.org/mediawiki/2014/c/cb/Debut_light.png'); | ||
} | } | ||
+ | |||
+ | ulJ | ||
+ | { | ||
+ | list-style-type: none; | ||
+ | } | ||
+ | |||
+ | ulN | ||
+ | { | ||
+ | list-style-type:none; | ||
+ | margin:10; | ||
+ | } | ||
+ | |||
</style> | </style> | ||
+ | |||
+ | |||
</html> | </html> |
Latest revision as of 02:41, 18 October 2014