Line 4: | Line 4: | ||
<style> | <style> | ||
− | body { | + | body, html { |
− | + | height: 100%; | |
− | + | ||
} | } | ||
− | + | /* The hero image */ | |
− | + | .hero-image { | |
− | + | /* The image used */ | |
− | + | background-image: url("photographer.jpg"); | |
− | + | ||
− | + | /* Set a specific height */ | |
− | + | height: 50%; | |
+ | |||
+ | /* Position and center the image to scale nicely on all screens */ | ||
+ | background-position: center; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | position: relative; | ||
} | } | ||
− | + | /* 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> | ||
− | + | <div class="hero-image"> | |
− | < | + | <div class="hero-text"> |
− | < | + | <h1>Lab Notebook</h1> |
− | </ | + | <p>And I'm a Photographer</p> |
+ | <button>Hire me</button> | ||
+ | </div> | ||
+ | </div> | ||
<body class="body1"> | <body class="body1"> |
Revision as of 02:04, 21 August 2017