<div class="container">
<div class="content">
<div class="box logo">Logo</div>
<div class="unrundUndText">
<div class="box unrund">Unrund</div>
<div class="box text">Text</div>
</div>
<div class="buttonContainer">
<div class="box buttonA">Los geht's</div>
<div class="box buttonB">Mehr Info</div>
</div>
</div>
</div>
.container {
display: flex;
flex-direction: column;
align-items: center;
min-width: 100%;
min-height: 100%;
background-color: lightblue;
margin-bottom: 100px;
}
.content {
display: flex;
flex-direction: column;
}
.box {
display: flex;
justify-content: center;
align-items: center;
}
.logo {
width: 300px;
height: 100px;
background-color: red;
}
.unrundUndText {
position: relative;
display: flex;
flex-direction: column;
background: salmon;
}
.text {
width: 300px;
height: 250px;
background-color: blue;
color: white;
}
.unrund {
width: 300px;
height: 450px;
background-color: green;
}
.buttonContainer {
position: fixed;
left: 0;
bottom: 0;
padding-top: 5px;
padding-bottom: 30px;
background-color: white;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.buttonA {
width: 100px;
height: 50px;
background-color: yellow;
}
.buttonB {
width: 100px;
height: 50px;
background-color: pink;
}
@media screen and (max-width: 800px) and (orientation:landscape) {
.buttonContainer {
justify-content: center;
width: 300px;
transform: translateX(-50%);
margin-left: 50%;
}
}
@media screen and (min-width: 800px) {
.content {
height: 600px;
}
.unrundUndText {
width: 600px;
}
.unrund {
position: absolute;
left: 0;
top: 0;
background-color: gray;
transform: translateX(100%);
}
.buttonContainer {
position: initial;
width: auto;
flex-direction: column;
background-color: violet;
padding: 0;
height: auto;
flex: 2;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.