|
|
| Line 44: |
Line 44: |
| | width: 100%; | | width: 100%; |
| | margin-bottom: 5px; | | margin-bottom: 5px; |
| − | background-color: black; | + | background: black; |
| | + | border-bottom: 2px solid white; |
| | } | | } |
| | .textWrapperHome { | | .textWrapperHome { |
| Line 78: |
Line 79: |
| | color: #e5007d; | | color: #e5007d; |
| | } | | } |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* 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: 10px;
| |
| − | }
| |
| − | /* Responsive design! */
| |
| − | @media only screen and (max-width: 810px) {
| |
| − | #motivation p {
| |
| − | margin-left: 0;
| |
| − | margin-top: 10px;
| |
| − | padding: 5px;
| |
| − | }
| |
| − | #motivation h2 {
| |
| − | float: none;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* Description and sustainability blocks */
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* Overview block */
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* Responsive design! */
| |
| − | @media only screen and (max-width: 810px) {
| |
| − | .blockBoxesRight {
| |
| − | width: 95%;
| |
| − | width: calc(100% - 40px);
| |
| − | float: none;
| |
| − | margin-top: 10px;
| |
| − | }
| |
| − | .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;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* Sustainability */
| |
| − | #sustainabilityBanner {
| |
| − | height: 400px;
| |
| − | width: 100%;
| |
| − | max-width: 100%;
| |
| − | background-position: top;
| |
| − | background-attachment: fixed;
| |
| − | 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;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* 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;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* Team */
| |
| − | #homeTeamBanner {
| |
| − | height: 400px;
| |
| − | width: 100%;
| |
| − | max-width: 100%;
| |
| − | background-position: top;
| |
| − | background-attachment: fixed;
| |
| − | 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/e/e4/ParisBettencourt_teamBanner.JPG');
| |
| − | position: absolute;
| |
| − | left: 0;
| |
| − | right: 0;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* "Read more" button */
| |
| − | a.readMore {
| |
| − | margin-top: 0px
| |
| − | margin-right: 0px;
| |
| − | padding: 4px 8px;
| |
| − | font-size: 20px;
| |
| − | font-family: 'Generica', 'Arial', 'sans-serif';
| |
| − | line-height: 100%;
| |
| − | text-shadow: 0 1px rgba(0,0,0,0.4);
| |
| − | color: white;
| |
| − |
| |
| − | vertical-align: middle;
| |
| − | text-align: center;
| |
| − | cursor: pointer;
| |
| − | font-weight: regular;
| |
| − | -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 {
| |
| − | padding-top: 9px;
| |
| − | margin-bottom: -1px;
| |
| − | }
| |
| − | a.readMore, a.readMore:hover, a.readMore:active {
| |
| − | outline: 0 none;
| |
| − | text-decoration: none;
| |
| − | color: white;
| |
| − | }
| |
| − | a.buttonCyan {
| |
| − | background-color: #black;
| |
| − | border: 1px solid rgba(255,255,255,0.5);
| |
| − |
| |
| − | }
| |
| − | a.buttonCyan:hover, a.buttonCyan:active {
| |
| − | background-color: #black;
| |
| − | }
| |
| − | a.buttonCyan:active {
| |
| − |
| |
| − | }
| |
| − | a.buttonYellow {
| |
| − | background-color: #black;
| |
| − | border: 1px solid white;
| |
| − | }
| |
| − | a.buttonYellow:hover, a.buttonYellow:active {
| |
| − | background-color: #black;
| |
| − | border: 1px solid white;
| |
| − | }
| |
| − | a.buttonYellow:active {
| |
| − | box-shadow: 0px 1px 0px 0px #B2A900;
| |
| − | }
| |
| − | a.buttonMagenta {
| |
| − | background-color: #black;
| |
| − | border: 1px solid white;
| |
| − | }
| |
| − | a.buttonMagenta:hover, a.buttonMagenta:active {
| |
| − | background-color: #black;
| |
| − | }
| |
| − | a.buttonMagena:active {
| |
| − | box-shadow: 0px 1px 0px 0px #black;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*#block4 {
| |
| − | 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> |