Team:INSA-Lyon/css soustitre
From 2014.igem.org
(51 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
padding:0; | padding:0; | ||
margin-top: 0; | margin-top: 0; | ||
- | background-color: #ffffff; | + | background-color: #ffffff; |
} | } | ||
/* PAGE SOUS-TITRE*/ | /* PAGE SOUS-TITRE*/ | ||
#igem{ | #igem{ | ||
- | padding-top: | + | padding-top: 15px; |
margin-right: 30px; | margin-right: 30px; | ||
text-align: right; | text-align: right; | ||
} | } | ||
- | |||
#soustitre{ | #soustitre{ | ||
margin-top: -25px; | margin-top: -25px; | ||
- | + | padding:0; | |
- | + | top:0; | |
- | + | background-position: center top; | |
- | + | background-repeat: no-repeat; | |
- | + | text-align: center; | |
- | + | height: 320px; | |
} | } | ||
#presentation { | #presentation { | ||
- | + | margin: auto; | |
- | + | width: 900px; | |
+ | padding-top: 30px; | ||
+ | padding-bottom: 30px; | ||
+ | padding-left: 50px; | ||
+ | } | ||
+ | |||
+ | .curlyon { | ||
+ | font-weight: bold; | ||
+ | font-size: 1.2em; | ||
+ | font-style: italic; | ||
+ | } | ||
+ | |||
+ | .presImage { | ||
+ | display: inline; | ||
+ | } | ||
+ | |||
+ | .presHidden { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .presImage img { | ||
+ | width: 525px; | ||
+ | } | ||
+ | |||
+ | .presCell { | ||
+ | margin: 10px 0px 35px 0px; | ||
+ | } | ||
+ | |||
+ | .presText { | ||
+ | word-wrap: normal; | ||
+ | width: 325px; | ||
+ | margin: 0; | ||
+ | padding-top: 100px; | ||
+ | font-size: 1.2em; | ||
+ | } | ||
+ | |||
+ | .presText p { | ||
+ | text-align: justify; | ||
+ | } | ||
+ | |||
+ | .presRight { | ||
+ | float: right; | ||
+ | padding-left: 20px; | ||
+ | padding-right: 15px; | ||
+ | } | ||
+ | |||
+ | .presLeft { | ||
+ | float: left; | ||
+ | padding-left: 15px; | ||
+ | padding-right: 20px; | ||
+ | } | ||
+ | |||
+ | .morePhotos { | ||
+ | margin-top: 30px; | ||
+ | } | ||
+ | |||
+ | .morePhotos a { | ||
+ | text-decoration: none; | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | .morePhotos h1 { | ||
+ | margin-bottom: 0px; | ||
+ | } | ||
+ | |||
+ | #morePhotos { | ||
+ | margin-top: 10px; | ||
+ | letter-spacing: 10px; | ||
+ | padding-left: 3px; | ||
+ | } | ||
+ | |||
+ | #morePhotos img { | ||
+ | width: 440px; | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | .center{ | ||
+ | text-align:center; | ||
} | } | ||
.icon { | .icon { | ||
- | + | color:#285459; | |
- | + | background:#FFF; | |
- | + | width:120px; | |
- | height: | + | height:70px; |
- | padding-top: | + | padding-top: 50px; |
text-align:center; | text-align:center; | ||
border-radius:50%; | border-radius:50%; | ||
margin-left: 20px; | margin-left: 20px; | ||
margin-right: 20px; | margin-right: 20px; | ||
- | margin-bottom: | + | margin-bottom: 20px; |
- | margin-top: | + | margin-top: 15px; |
overflow: hidden; | overflow: hidden; | ||
display: inline-block; | display: inline-block; | ||
Line 49: | Line 125: | ||
.iconmulti { | .iconmulti { | ||
- | + | color:#285459; | |
- | + | background:#FFF; | |
- | height: | + | width:120px; |
- | padding-top: | + | height:79px; |
+ | padding-top: 41px; | ||
text-align:center; | text-align:center; | ||
border-radius:50%; | border-radius:50%; | ||
margin-left: 20px; | margin-left: 20px; | ||
margin-right: 20px; | margin-right: 20px; | ||
- | margin-bottom: | + | margin-bottom: 20px; |
- | margin-top: | + | margin-top: 15px; |
overflow: hidden; | overflow: hidden; | ||
display: inline-block; | display: inline-block; | ||
Line 65: | Line 142: | ||
transition: all 0.3s ease-out; | transition: all 0.3s ease-out; | ||
} | } | ||
+ | |||
+ | .protocolsContainer | ||
+ | { | ||
+ | text-align:center; | ||
+ | } | ||
+ | |||
+ | .protocolsInnerContainer | ||
+ | { | ||
+ | max-width:950px; | ||
+ | margin: auto; | ||
+ | } | ||
+ | |||
+ | .protocolsButtonCell | ||
+ | { | ||
+ | margin: 25px 25px 15px 25px; | ||
+ | max-width: 200px; | ||
+ | min-width: 155px; | ||
+ | display: inline-block; | ||
+ | cursor: pointer; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .pImgOver { | ||
+ | position: absolute; | ||
+ | top: 45px; | ||
+ | left: 45px; | ||
+ | } | ||
+ | |||
+ | .protocolsButtonText | ||
+ | { | ||
+ | padding-top: 10px; | ||
+ | } | ||
+ | |||
+ | .protocolsButtonText span | ||
+ | { | ||
+ | font-family: "LatoReg", sans-serif; | ||
+ | } | ||
+ | |||
+ | .protocolsButtonCell:hover span | ||
+ | { | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
/*--------------------- CSS DU FOOTER ---------------------------------------------*/ | /*--------------------- CSS DU FOOTER ---------------------------------------------*/ | ||
Line 71: | Line 191: | ||
#footer | #footer | ||
{ | { | ||
- | + | padding-top: 15px; | |
- | + | background-color: #285459; | |
- | + | ||
margin-bottom: -50px; | margin-bottom: -50px; | ||
- | + | height: 200px; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
Line 91: | Line 207: | ||
color:#ffffff; | color:#ffffff; | ||
} | } | ||
+ | |||
+ | #footer a { | ||
+ | color:#ffffff; | ||
+ | } | ||
+ | |||
#contact{ | #contact{ | ||
- | |||
display: inline-block; | display: inline-block; | ||
background-color: #285459; | background-color: #285459; | ||
padding-left: 30px; | padding-left: 30px; | ||
margin-left: 50px; | margin-left: 50px; | ||
- | |||
} | } | ||
- | # | + | #footer1{ |
- | + | float: left; | |
+ | width: 250px; | ||
+ | margin-right: 50px; | ||
+ | display: inline-block; | ||
} | } | ||
- | + | #footer2{ | |
- | # | + | float: left; |
- | + | width: 250px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | #footer3{ |
- | + | width: 250px; | |
+ | margin-left: 50px; | ||
+ | display: inline-block; | ||
} | } | ||
- | |||
- | |||
- | |||
#copyright { | #copyright { | ||
- | |||
font-size: 0.8em !important; | font-size: 0.8em !important; | ||
background-color: #285459; | background-color: #285459; | ||
- | padding-bottom: | + | padding-bottom: 2px; |
- | padding-top: | + | padding-top: 16px; |
- | + | ||
} | } | ||
- | |||
- | |||
#fb { | #fb { | ||
float: right; | float: right; | ||
margin-right: 10px; | margin-right: 10px; | ||
- | + | margin-left: -70px; | |
+ | } | ||
+ | |||
+ | #twitter { | ||
+ | float: right; | ||
+ | margin-right: 50px; | ||
+ | margin-left: -60px; | ||
} | } |
Latest revision as of 02:19, 18 October 2014
html, body { padding:0; margin-top: 0;
background-color: #ffffff;
}
/* PAGE SOUS-TITRE*/
- igem{
padding-top: 15px; margin-right: 30px; text-align: right; }
- soustitre{
margin-top: -25px; padding:0; top:0; background-position: center top; background-repeat: no-repeat; text-align: center; height: 320px; }
- presentation {
margin: auto; width: 900px; padding-top: 30px; padding-bottom: 30px; padding-left: 50px; }
.curlyon {
font-weight: bold; font-size: 1.2em; font-style: italic;
}
.presImage {
display: inline;
}
.presHidden {
display: none;
}
.presImage img {
width: 525px;
}
.presCell {
margin: 10px 0px 35px 0px;
}
.presText {
word-wrap: normal; width: 325px; margin: 0; padding-top: 100px; font-size: 1.2em;
}
.presText p {
text-align: justify;
}
.presRight {
float: right; padding-left: 20px; padding-right: 15px;
}
.presLeft {
float: left; padding-left: 15px; padding-right: 20px;
}
.morePhotos {
margin-top: 30px;
}
.morePhotos a {
text-decoration: none; color: black;
}
.morePhotos h1 {
margin-bottom: 0px;
}
- morePhotos {
margin-top: 10px; letter-spacing: 10px; padding-left: 3px;
}
- morePhotos img {
width: 440px; margin-bottom: 10px;
}
.center{ text-align:center; }
.icon { color:#285459; background:#FFF; width:120px;
height:70px; padding-top: 50px; text-align:center; border-radius:50%; margin-left: 20px; margin-right: 20px; margin-bottom: 20px;
margin-top: 15px;
overflow: hidden; display: inline-block; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
}
.iconmulti { color:#285459; background:#FFF; width:120px;
height:79px; padding-top: 41px; text-align:center; border-radius:50%; margin-left: 20px; margin-right: 20px; margin-bottom: 20px;
margin-top: 15px;
overflow: hidden; display: inline-block; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;
}
.protocolsContainer {
text-align:center;
}
.protocolsInnerContainer {
max-width:950px; margin: auto;
}
.protocolsButtonCell {
margin: 25px 25px 15px 25px; max-width: 200px; min-width: 155px; display: inline-block; cursor: pointer;
position: relative; }
.pImgOver { position: absolute; top: 45px; left: 45px; }
.protocolsButtonText {
padding-top: 10px;
}
.protocolsButtonText span {
font-family: "LatoReg", sans-serif;
}
.protocolsButtonCell:hover span {
font-weight: bold;
}
/*--------------------- CSS DU FOOTER ---------------------------------------------*/
- footer
{ padding-top: 15px; background-color: #285459; margin-bottom: -50px; height: 200px; }
- footer p{
color:#fff; font-family: "Roboto", sans-serif; font-size: 0.9em; overflow:hidden; }
- footer a:visited {
color:#ffffff; }
- footer a {
color:#ffffff; }
- contact{
display: inline-block; background-color: #285459; padding-left: 30px; margin-left: 50px; }
- footer1{
float: left; width: 250px; margin-right: 50px; display: inline-block; }
- footer2{
float: left; width: 250px; }
- footer3{
width: 250px; margin-left: 50px; display: inline-block; }
- copyright {
font-size: 0.8em !important; background-color: #285459; padding-bottom: 2px; padding-top: 16px; }
- fb {
float: right; margin-right: 10px;
margin-left: -70px;
}
- twitter {
float: right; margin-right: 50px; margin-left: -60px;
}