Line 3: | Line 3: | ||
<style> | <style> | ||
.as_hero { | .as_hero { | ||
− | position:relative; | + | position: relative; |
− | background-color:#333; | + | background-color: #333; |
background-image: url('https://source.unsplash.com/random'); | background-image: url('https://source.unsplash.com/random'); | ||
-webkit-background-size: cover; | -webkit-background-size: cover; | ||
Line 13: | Line 13: | ||
background-attachment: fixed; | background-attachment: fixed; | ||
background-position: top; | background-position: top; | ||
− | height:100vh; | + | height: 100vh; |
} | } | ||
.as_hero::before { | .as_hero::before { | ||
− | content:''; | + | content: ''; |
− | width:100%; | + | width: 100%; |
− | position:absolute; | + | position: absolute; |
− | height:100%; | + | height: 100%; |
− | background:rgba(2,2,2,.5); | + | background: rgba(2, 2, 2, .5); |
+ | } | ||
+ | |||
+ | .as_hero .as_hero_content { | ||
+ | position: relative; | ||
+ | z-index: 99; | ||
+ | padding: 170px 0; | ||
+ | background: transparent; | ||
+ | border-radius: 0; | ||
} | } | ||
</style> | </style> | ||
<div class="as_hero"> | <div class="as_hero"> | ||
− | <div class="columns"> | + | <div class="columns" style="width: 100%;"> |
<div class="column"></div> | <div class="column"></div> | ||
− | <div class="column"> | + | <div class="column as_hero_content"> |
Foo | Foo | ||
</div> | </div> | ||
Line 40: | Line 48: | ||
<div style="width: 100%; padding: 2rem; display: flex; align-items: center; justify-content: center;"> | <div style="width: 100%; padding: 2rem; display: flex; align-items: center; justify-content: center;"> | ||
<p> | <p> | ||
− | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, | + | 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. | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | ||
</p> | </p> | ||
</div> | </div> | ||
+ | |||
</html> | </html> | ||
{{Marburg/footer}} | {{Marburg/footer}} |
Revision as of 13:11, 17 August 2019
Foo
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.