|
|
| Line 9: |
Line 9: |
| | body, html { | | body, html { |
| | height: 100%; | | height: 100%; |
| − | font-family: "Inconsolata", sans-serif;
| |
| | } | | } |
| − | .bgimg { | + | |
| | + | /* The cover image */ |
| | + | .cover-image { |
| | + | /* The image used */ |
| | + | background-image: url("https://static.igem.org/mediawiki/2017/b/be/Cover_Photo_NTU.jpeg"); |
| | + | |
| | + | /* Set a specific height */ |
| | + | height: 50%; |
| | + | |
| | + | /* Position and center the image to scale nicely on all screens */ |
| | background-position: center; | | background-position: center; |
| | + | background-repeat: no-repeat; |
| | background-size: cover; | | background-size: cover; |
| − | background-image: url("https://static.igem.org/mediawiki/2017/b/be/Cover_Photo_NTU.jpeg"); | + | position: relative; |
| − | min-height: 75%;
| + | |
| | } | | } |
| − | .menu { | + | |
| − | display: none; | + | /* Place text in the middle of the image */ |
| | + | .hero-text { |
| | + | text-align: center; |
| | + | position: absolute; |
| | + | top: 50%; |
| | + | left: 50%; |
| | + | transform: translate(-50%, -50%); |
| | + | color: white; |
| | } | | } |
| | </style> | | </style> |
| | <body> | | <body> |
| − |
| |
| − |
| |
| − | <!-- Header with image -->
| |
| − | <header class="bgimg w3-display-container w3-grayscale-min" id="home">
| |
| − | <div class="w3-display-bottomleft w3-center w3-padding-large w3-hide-small">
| |
| − |
| |
| − | </div>
| |
| − | <div class="w3-display-middle w3-center">
| |
| − | <span class="w3-text-black" style="font-size:90px">the<br>Cafe</span>
| |
| − | </div>
| |
| − | <div class="w3-display-bottomright w3-center w3-padding-large">
| |
| − |
| |
| − | </div>
| |
| − | </header>
| |
| − |
| |
| − | <!-- Add a background color and large text to the whole page -->
| |
| − | <div class="w3-sand w3-grayscale w3-large">
| |
| − |
| |
| − | </br>
| |
| − | </br>
| |
| − | </br>
| |
| − | <!-- About Container -->
| |
| − | <div class="w3-container" id="about">
| |
| − | <div class="w3-content" style="max-width:700px">
| |
| − | <h5 class="w3-center w3-padding-64"><span class="w3-tag w3-wide">ABOUT THE CAFE</span></h5>
| |
| − | <p>The Cafe was founded in blabla by Mr. Smith in lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
| |
| − | <p>In addition to our full espresso and brew bar menu, we serve fresh made-to-order breakfast and lunch sandwiches, as well as a selection of sides and salads and other good stuff.</p>
| |
| − |
| |
| | | | |
| | </body> | | </body> |
| | </html> | | </html> |
