|
|
| (81 intermediate revisions by 3 users not shown) |
| Line 8: |
Line 8: |
| | | | |
| | /* Background of the page */ | | /* Background of the page */ |
| − | .contentContainer#home {
| + | #home .contentContainer { |
| | /*background-image: url('../images/idli7_medium.jpg');*/ | | /*background-image: url('../images/idli7_medium.jpg');*/ |
| − | background-image: url('https://static.igem.org/mediawiki/2015/d/df/ParisBettencourt_homeBanner.jpg'); | + | background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0.65) 100%), url('https://static.igem.org/mediawiki/2015/d/df/ParisBettencourt_homeBanner.jpg'); |
| − | height: 100%;
| + | background-repeat: no-repeat; |
| | + | background-size: cover; |
| | + | background-attachment: fixed; |
| | } | | } |
| | | | |
| | /* Banner (FIY logo and name of the team) */ | | /* Banner (FIY logo and name of the team) */ |
| − | #banner h3.home { | + | |
| | + | #main-logo { |
| | + | width: 65vh; |
| | + | height: 50vh; |
| | + | margin: auto; |
| | + | display: block; |
| | + | position: relative; |
| | + | background-size: 65vh 50vh; |
| | + | margin-top: -50vh; |
| | + | top: -25vh; |
| | + | } |
| | + | |
| | + | #banner h3 { |
| | display: block; | | display: block; |
| | position: absolute; | | position: absolute; |
| Line 30: |
Line 44: |
| | | | |
| | /* Text content */ /* Tweak here */ | | /* Text content */ /* Tweak here */ |
| − | #textContent { | + | #home .textWrapper { |
| − | width: 100%;
| + | |
| − | margin-bottom: 5px;
| + | |
| − | background-color: white;
| + | |
| − | }
| + | |
| − | .textWrapperHome { | + | |
| | background-color: black; | | background-color: black; |
| | + | color: white; |
| | width: 100%; | | width: 100%; |
| − | border-top: 10px solid white; | + | border-top: 5px solid whitesmoke; |
| | + | border-bottom: 5px solid whitesmoke; |
| | } | | } |
| | | | |
| − | .reduceWidth { | + | .separate { |
| − | width: 100%;
| + | border-bottom: 5px solid whitesmoke; |
| − | max-width: 1800px;
| + | |
| − | margin: auto;
| + | |
| − | background-color: black;
| + | |
| | } | | } |
| − | .smallLine {
| |
| − | width: 100%;
| |
| − | height: 5px;
| |
| − | background-color: white;
| |
| − | }
| |
| − | .blockTitle {
| |
| − | width: 100%;
| |
| − | height: 55px;
| |
| − | color:white;
| |
| − | padding: 5px;
| |
| − | }
| |
| − | .blockTitle h2 {
| |
| − | color:white;
| |
| − | font-family: 'Generica';
| |
| − | font-size: 50px;
| |
| − | margin-left: 5%;
| |
| − | }
| |
| − | .blockTextLeft, .blockTextRight {
| |
| − | width: 50%;
| |
| − | background-color: black;
| |
| − | position: relative;
| |
| − | background-position: center;
| |
| − | background-repeat: no-repeat;
| |
| − | height: 350px;
| |
| − | }
| |
| − | .blockTextLeft {
| |
| − | float: left;
| |
| − | }
| |
| − | .blockTextRight {
| |
| − | float: right;
| |
| − | }
| |
| − | .blockTextLeft p, .blockTextRight p {
| |
| − | color: white;
| |
| − | margin: 0px;
| |
| − | padding: 20px;
| |
| − | text-align: justify;
| |
| − | }
| |
| − | .blockBoxesRight, .blockBoxesLeft {
| |
| − | width:46%;
| |
| − | width: calc(50% - 6px);
| |
| − | float: left;
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | text-align: center;
| |
| − | color: white;
| |
| − | height: 350px;
| |
| − | }
| |
| − | .blockBoxesRight {
| |
| − | border-left: 1px solid white;
| |
| − | }
| |
| − | .blockBoxesLeft {
| |
| − | border-right: 1px solid white;
| |
| − | }
| |
| − | .blockBoxesRight table,
| |
| − | .blockBoxesLeft table {
| |
| − | width: 100%;
| |
| − | background-color: black;
| |
| − | margin: 0;
| |
| − | border-collapse: collapse;
| |
| − | padding: 0;
| |
| − | }
| |
| − | .blockBoxesRight table td, .blockBoxesRight table th,
| |
| − | .blockBoxesLeft table td, .blockBoxesLeft table th {
| |
| − | border: 1px solid white;
| |
| − | display: table-cell;
| |
| − | vertical-align: middle;
| |
| | | | |
| | + | #home .textContent { |
| | + | background-color: inherit; |
| | } | | } |
| − | .blockBoxesRight table tr:first-child th,
| |
| − | .blockBoxesLeft table tr:first-child th {
| |
| − | border-top: 0;
| |
| − | }
| |
| − | .blockBoxesRight table tr:last-child td,
| |
| − | .blockBoxesLeft table tr:last-child td {
| |
| − | border-bottom: 0;
| |
| − | }
| |
| − | .blockBoxesRight table tr td:first-child, .blockBoxesRight table tr th:first-child,
| |
| − | .blockBoxesLeft table tr td:first-child, .blockBoxesLeft table tr th:first-child {
| |
| − | border-left: 0;
| |
| − | }
| |
| − | .blockBoxesRight table tr td:last-child, .blockBoxesRight table tr th:last-child,
| |
| − | .blockBoxesLeft table tr td:last-child, .blockBoxesLeft table tr th:last-child{
| |
| − | border-right: 0;
| |
| − | }
| |
| − |
| |
| − |
| |
| | | | |
| − | .blockTextLeft#homeProject { | + | .textContent .nav a, .textContent .nav a:visited { |
| − | background-image: url('https://static.igem.org/mediawiki/2015/b/be/Parisbettencourt_homeproject.jpeg');
| + | text-decoration: none; |
| − | }
| + | cursor: pointer; |
| − | .blockTextLeft#homeSustainability {
| + | color: inherit; |
| − | background-image: url('https://static.igem.org/mediawiki/2015/b/be/Parisbettencourt_homeproject.jpeg');
| + | font-size: 1.4em; |
| | } | | } |
| | | | |
| | | | |
| − | | + | .textContent .nav a:hover, .textContent .nav a:active { |
| − | .boxHome { | + | text-decoration: none; |
| − | font-family: 'Generica';
| + | color: inherit; |
| − | font-size: 35px;
| + | |
| − | width: 32%;
| + | |
| − | width: calc(33% - 10px);
| + | |
| − | height: 173px;
| + | |
| − | float: left;
| + | |
| − | }
| + | |
| − | .boxHome.big {
| + | |
| − | width: 45%;
| + | |
| − | }
| + | |
| − | .yellow h3 a, .yellow h3 a:hover { | + | |
| − | color: #FFF200;
| + | |
| − | text-decoration: none;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | .cyan h3 a, .cyan h3 a:hover {
| + | |
| − | color: #00ADEF;
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | .magenta h3 a, .magenta h3 a:hover{
| + | |
| − | color: #EC008C;
| + | |
| − | text-decoration: none;
| + | |
| | } | | } |
| | | | |
| − | | + | .textContent .nav { |
| − | | + | text-align: justify; |
| − | | + | text-transform: uppercase; |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | /* Motivation block */
| + | |
| − | #motivation {
| + | |
| − | width: 100%;
| + | |
| − | max-width: 1800px;
| + | |
| − | margin: auto;
| + | |
| − | background-color: black;
| + | |
| − | background-size: 100%;
| + | |
| − | position: relative;
| + | |
| − | margin-bottom: 0;
| + | |
| | } | | } |
| − | #motivation h2 {
| |
| − | color: white;
| |
| − | font-family: 'Generica';
| |
| − | font-size: 60px;
| |
| − | margin-left: 5%;
| |
| − | float: left;
| |
| − | }
| |
| − | #motivation p {
| |
| − | color: white;
| |
| − | margin-left: 360px;
| |
| − | margin-left: calc(5% + 300px);
| |
| − | text-align: justify;
| |
| − | padding-right: 10px;
| |
| − | margin-top: 10px;
| |
| − | padding-bottom: 20px;
| |
| − | }
| |
| − | /* Responsive design! */
| |
| − | @media only screen and (max-width: 810px) {
| |
| − | #motivation p {
| |
| − | margin-left: 0;
| |
| − | margin-top: 20px;
| |
| − | padding: 5px;
| |
| − | }
| |
| − | #motivation h2 {
| |
| − | float: none;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* Description and sustainability blocks */
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* Overview block */
| |
| − |
| |
| − |
| |
| | | | |
| − | /* Responsive design! */
| + | .textContent .nav a { |
| − | @media only screen and (max-width: 810px) {
| + | cursor: pointer; |
| − | .blockBoxesRight {
| + | |
| − | width: 95%;
| + | |
| − | width: calc(100% - 40px);
| + | |
| − | float: none;
| + | |
| − | margin-top: 20px;
| + | |
| − | }
| + | |
| − | .boxHome {
| + | |
| − | width: 45%;
| + | |
| − | margin: auto;
| + | |
| − | }
| + | |
| − | .textBlockLeft {
| + | |
| − | width: 100%;
| + | |
| − | background-color: black;
| + | |
| − | position: relative;
| + | |
| − | float: left;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @media only screen and (max-width : 1100px) and (min-width : 811px) {
| + | |
| − | .boxHome {
| + | |
| − | width: 45%;
| + | |
| − | margin: auto;
| + | |
| − | }
| + | |
| | } | | } |
| | | | |
| − | | + | .textContent .nav div a span:after { |
| − | | + | content: ''; |
| − | /* Sustainability */
| + | width: 100%; |
| − | #sustainabilityBanner {
| + | height: 100%; |
| − | height: 400px;
| + | bottom: 0; |
| − | width: 100%;
| + | left: 0; |
| − | max-width: 100%;
| + | border-bottom: 1px solid rgba(255,255,255,0.7); |
| − | background-position: top;
| + | transition: border-color 0.3s; |
| − | background-attachment: fixed;
| + | position: absolute; |
| − | background-repeat: no-repeat;
| + | |
| − | -webkit-background-size: cover;
| + | |
| − | -moz-background-size: cover;
| + | |
| − | -o-background-size: cover;
| + | |
| − | background-size: cover;
| + | |
| − | border-bottom: 5px solid white;
| + | |
| − | background-image: url('https://static.igem.org/mediawiki/2015/0/0b/ParisBettencourt_homeSustainabilityBanner.png');
| + | |
| − | position: absolute;
| + | |
| − | left: 0;
| + | |
| − | right: 0;
| + | |
| | } | | } |
| − |
| + | .textContent .nav div a:hover span:after { |
| − | | + | border-bottom-color: initial; |
| − | | + | |
| − | /* Responsive design! */
| + | |
| − | @media only screen and (max-width: 810px) {
| + | |
| − | .blockBoxesRight {
| + | |
| − | width: 95%;
| + | |
| − | width: calc(100% - 40px);
| + | |
| − | float: none;
| + | |
| − | margin-top: 20px;
| + | |
| − | }
| + | |
| − | .textBlockRight {
| + | |
| − | width: 100%;
| + | |
| − | background-color: black;
| + | |
| − | position: relative;
| + | |
| − | float: right;
| + | |
| − | }
| + | |
| | } | | } |
| | | | |
| − | | + | .stretch { |
| − | /* Team */
| + | padding: 0 7%; |
| − | #homeTeamBanner {
| + | text-align: center; |
| − | height: 400px;
| + | font-size: 1.1em; |
| − | width: 100%;
| + | font-family: Generica; |
| − | max-width: 100%;
| + | line-height: 3em; |
| − | background-position: top;
| + | position: relative; |
| − | background-attachment: fixed;
| + | display: inline-block; |
| − | background-repeat: no-repeat;
| + | width: 100%; |
| − | -webkit-background-size: cover;
| + | |
| − | -moz-background-size: cover;
| + | |
| − | -o-background-size: cover;
| + | |
| − | background-size: cover;
| + | |
| − | border-bottom: 5px solid white;
| + | |
| − | background-image: url('https://static.igem.org/mediawiki/2015/e/e4/ParisBettencourt_teamBanner.JPG');
| + | |
| − | position: absolute;
| + | |
| − | left: 0;
| + | |
| − | right: 0;
| + | |
| | } | | } |
| | | | |
| − | | + | .yellow { |
| − | | + | color: #ffed00; |
| − | | + | |
| − | | + | |
| − | /* "Read more" button */
| + | |
| − | a.readMore {
| + | |
| − | margin-top: 0px
| + | |
| − | margin-right: 0px;
| + | |
| − | padding: 6px 10px;
| + | |
| − | font-size: 16px;
| + | |
| − | font-family: 'Generica', 'Arial', 'sans-serif';
| + | |
| − | line-height: 100%;
| + | |
| − | text-shadow: 0 1px rgba(0,0,0,0.4);
| + | |
| − | color: white; | + | |
| − | display: inline-block;
| + | |
| − | vertical-align: middle;
| + | |
| − | text-align: center;
| + | |
| − | cursor: pointer;
| + | |
| − | font-weight: bold;
| + | |
| − | -webkit-transition: background 0.1s ease-in-out;
| + | |
| − | -moz-transition: background 0.1s ease-in-out;
| + | |
| − | -ms-transition: background 0.1s ease-in-out;
| + | |
| − | -o-transition: background 0.1s ease-in-out;
| + | |
| − | transition: background 0.1s ease-in-out;
| + | |
| − | -webkit-border-radius: 1px;
| + | |
| − | -moz-border-radius: 1px;
| + | |
| | } | | } |
| − | a.readMore:active {
| + | .cyan { |
| − | padding-top: 9px; | + | color: #009ee3; |
| − | margin-bottom: -1px;
| + | |
| | } | | } |
| − | a.readMore, a.readMore:hover, a.readMore:active {
| + | .magenta { |
| − | outline: 0 none;
| + | color: #e5007d; |
| − | text-decoration: none;
| + | |
| − | color: white; | + | |
| | } | | } |
| − | a.buttonCyan {
| + | .black { |
| − | background-color: #black; | + | color: black; |
| − | border: 1px solid white;
| + | |
| − |
| + | |
| | } | | } |
| − | a.buttonCyan:hover, a.buttonCyan:active {
| + | .yellow.black a, |
| − | background-color: #black; | + | .yellow.black { |
| | + | color: black; |
| | } | | } |
| − | a.buttonCyan:active { | + | .cyan.black a, |
| − | box-shadow: 0px 1px 0px 0px #1C7BBD; | + | .cyan.black { |
| | + | color: black; |
| | } | | } |
| − | a.buttonYellow { | + | .magenta.black a, |
| − | background-color: #FCEF01; | + | .magenta.black { |
| − | box-shadow: 0px 2px 0px 0px #B2A900;
| + | color: black; |
| | } | | } |
| − | a.buttonYellow:hover, a.buttonYellow:active {
| + | |
| − | background-color: #DCD100;
| + | .textContent .nav div a.yellow span:after { |
| | + | content: ''; |
| | + | width: 100%; |
| | + | height: 100%; |
| | + | bottom: 0; |
| | + | left: 0; |
| | + | border-bottom: 1px solid #ffed00; |
| | + | transition: border-width 0.3s; |
| | + | position: absolute; |
| | + | color: black; |
| | } | | } |
| − | a.buttonYellow:active { | + | .textContent .nav div a.cyan span:after { |
| − | box-shadow: 0px 1px 0px 0px #B2A900;
| + | content: ''; |
| | + | width: 100%; |
| | + | height: 100%; |
| | + | bottom: 0; |
| | + | left: 0; |
| | + | border-bottom: 1px solid #009ee3; |
| | + | transition: border-width 0.3s; |
| | + | position: absolute; |
| | + | color: black; |
| | } | | } |
| − | a.buttonMagenta { | + | .textContent .nav div a.magenta span:after { |
| − | background-color: #F80187;
| + | content: ''; |
| − | box-shadow: 0px 2px 0px 0px #BB0066;
| + | width: 100%; |
| | + | height: 100%; |
| | + | bottom: 0; |
| | + | left: 0; |
| | + | border-bottom: 1px solid #e5007d; |
| | + | transition: border-width 0.3s; |
| | + | position: absolute; |
| | + | color: black; |
| | } | | } |
| − | a.buttonMagenta:hover, a.buttonMagenta:active { | + | .textContent .nav div a.yellow:hover span:after, |
| − | background-color: #D90076;
| + | .textContent .nav div a.cyan:hover span:after, |
| − | }
| + | .textContent .nav div a.magenta:hover span:after { |
| − | a.buttonMagena:active { | + | border-bottom-width: 3px; |
| − | box-shadow: 0px 1px 0px 0px #BB0066;
| + | |
| | } | | } |
| | | | |
| − | | + | p.white { |
| − | /*#block4 {
| + | color: white; |
| − | background-color: #00AEEF;
| + | |
| | } | | } |
| − | #block5 {
| |
| − | background-color: #ED028C;
| |
| − | }
| |
| − | #block6 {
| |
| − | background-color: #FFF101;
| |
| − | }*/
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* Very small screens: only one row */
| |
| − | @media all and (max-width: 480px) {
| |
| − |
| |
| − | #blockDescription {
| |
| − | display: table;
| |
| − | border: 1px solid red;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* Smartphones and screens < 768px */
| |
| − | @media only screen and (max-width: 640px),
| |
| − | only screen and (max-device-width: 640px) {
| |
| − | /* Banner is smaller */
| |
| − | #homeBanner {
| |
| − | height: 300px;
| |
| − | }
| |
| − | #homeBanner h1 {
| |
| − | font-size: 25px;
| |
| − | top: 40px;
| |
| − | letter-spacing: 5px;
| |
| − | }
| |
| − | #homeBanner h3 {
| |
| − | font-size: 20px;
| |
| − | top: 70px;
| |
| − | letter-spacing: 5px;
| |
| − | }
| |
| − | #projDescription p {
| |
| − | padding: 10px;
| |
| − | font-size: 18px;
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| | | | |
| | </style> | | </style> |
| | </html> | | </html> |