|
|
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> |