I'm wondering if it's possible to have the 4 colored divs around the black svg, to fill in the extra width or height of the blank space (the pink) when the screen is resized. There's a pink div behind the logo, to give you and example of the space that needs to be filled by the 4 colored divs. Is something like this possible in pure CSS and HTML or is JS needed? Any info on this helps, thanks.
<style>
ul {
margin:0;
display: flex;
align-items: stretch;
justify-content: space-between;
width: 77%;
}
li {
display: block;
font-size:17px;
text-decoration:none;
}
.navtext{
background-color:orange;
width: 35%;
height:20%;
right:0px;
position:absolute;
display: flex;
align-items: center;
}
body {
margin: 0;
}
.header{
background-color:yellow;
width:100%;
height:20%;
}
.logo{
position:absolute;
left:5%;
background-color:lightblue;
height:20%;
display: flex;
align-items: center;
}
.logotext{
font-size:27px;
font-weight:bold;
}
.front {
background-color:blue;
height: 81vh;
position: relative;
z-index: 2;
width:100%;
}
.video {
background: url(https://picsum.photos/id/107/800/800) center/cover;
height: 100vh;
margin-top: -100vh;
position: sticky;
width:100%;
top: 0;
}
.container {
height:200vh;
}
.right{
right:0px;
width:50%;
Height:91%;
position:absolute;
background-color:pink;
/*display: flex;*/
justify-content: center;
align-items: center;
}
.logoanimecont{
text-align:center;
width:75%;
margin:auto;
}
.left{
width:50%;
Height:91%;
background-color:green;
display: flex;
justify-content: center;
align-items: center;
}
.titlebox {
text-align:center;
width:75%;
background-color:purple;
margin:auto;
}
.title {
font-size:30px;
text-align:center;
}
.hide{ display:none }
.rightbordertop{
width:100%;
height:25%;
background-color:red;
}
.rightborderbottom{
width:100%;
height:25%;
bottom:0px;
position:absolute;
background-color:darkgrey;
}
.rightborderleft{
width:25%;
height:75%;
background-color:brown;
}
.rightborderright{
right:0px;
height:75%;
width:25%;
background-color:blue;
position:absolute;
}
svg { position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 50%;
height: 50%;}
</style>
<div class="container">
<div class="front">
<div class="header">
<div class="logo">
<span class="logotext">f-e</span>
</div>
<div class="nav">
<div class="navtext">
<ul>
<li>About</li>
<li>Services</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="left">
<div class="titlebox">
<span class="title">Random text, centered v and h.</span>
</div>
<div class="right">
<div class="rightbordertop"></div>
<div class="rightborderright"></div>
<div class="rightborderleft"></div>
<div class="rightborderbottom"></div>
<div class="logoanimacont">
<div class="logoanime">
<svg viewBox="0 0 70 70">
<path id="metabolism" d="M0,0v72h72V0H0z M45.38,12.19l-1.21,1.66c-0.16,0.23-0.35,0.26-0.57,0.09c-1.47-1-2.85-1.18-4.13-0.53
c-1.41,0.75-2.11,2.19-2.11,4.31v9.47h4.62c0.28,0,0.42,0.15,0.42,0.44v2.06c0,0.29-0.14,0.44-0.42,0.44h-4.62v23.85
c0,0.29-0.14,0.44-0.42,0.44h-2.02c-0.26,0-0.39-0.15-0.39-0.44V30.14H31.8c-0.28,0-0.42-0.15-0.42-0.44v-2.06
c0-0.29,0.14-0.44,0.42-0.44h2.72v-9.47c0-1.58,0.32-2.98,0.97-4.19c0.64-1.23,1.55-2.15,2.72-2.75c1.09-0.56,2.25-0.77,3.5-0.63
c1.25,0.12,2.44,0.59,3.59,1.41C45.53,11.73,45.56,11.94,45.38,12.19z"/>
<path id="technique" class="hide" d="M0,0v72h72V0H0z M40.05,36.57c0,0.22-0.11,0.33-0.33,0.33h-8.62c-0.22,0-0.33-0.11-0.33-0.33V35
c0-0.2,0.11-0.3,0.33-0.3h8.62c0.22,0,0.33,0.1,0.33,0.3V36.57z"/>
<path id="digital" class="hide" d="M0,0v72h72V0H0z M45.89,36.15c0,0.19-0.09,0.29-0.28,0.3l-16.83,1.48c0.47,1.7,1.41,3.1,2.81,4.2
c1.44,1.11,3.06,1.66,4.88,1.66c1.38,0,2.66-0.34,3.87-1.01c1.19-0.66,2.15-1.56,2.88-2.72c0.11-0.19,0.26-0.23,0.45-0.12
l1.36,0.77c0.19,0.12,0.23,0.28,0.12,0.47c-0.94,1.48-2.18,2.66-3.73,3.52c-1.53,0.86-3.18,1.29-4.95,1.29
c-2.81,0-5.21-0.99-7.2-2.98c-2-2-3-4.41-3-7.22c0-2.86,0.96-5.27,2.88-7.24c1.91-1.97,4.24-2.95,7.01-2.93
c2.69,0.02,4.98,1.01,6.89,2.98c1.89,1.95,2.84,4.3,2.84,7.03V36.15z"/>
</svg>
</div>
</div>
</div>
</div>
</div>
<div class="video"></div>
</div>
<div style="height:150vh"> more content later </div>
There are many ways to do it, but without information what do blue and red containers contain content wise, we can only guess. One suggestion though, don't use position: absolute that much, master flex layout A complete guide to flexbox. This solution requires grouping of central three sections into one (maroon, pink and blue containers are now wrapped in div with inline style):
body {
margin: 0;
}
.right {
right: 0px;
width: 50%;
height: 91%;
position: absolute;
background-color: pink;
justify-content: center;
align-items: center;
}
.hide { display: none }
.rightbordertop {
width: 100%;
height: 25%;
background-color: red;
}
.rightborderbottom{
width: 100%;
height: 25%;
bottom: 0px;
position: absolute;
background-color: darkgrey;
}
.rightborderleft{
height: 100%;
flex-grow: 1;
background-color: brown;
}
.rightborderright{
height: 100%;
flex-grow: 1;
background-color: blue;
}
svg {
height: 100%;
}
<div class="right">
<div class="rightbordertop"></div>
<div style="height: 50%; display: flex;">
<div class="rightborderleft"></div>
<svg viewBox="0 0 70 70">
<path id="metabolism" d="M0,0v72h72V0H0z M45.38,12.19l-1.21,1.66c-0.16,0.23-0.35,0.26-0.57,0.09c-1.47-1-2.85-1.18-4.13-0.53
c-1.41,0.75-2.11,2.19-2.11,4.31v9.47h4.62c0.28,0,0.42,0.15,0.42,0.44v2.06c0,0.29-0.14,0.44-0.42,0.44h-4.62v23.85
c0,0.29-0.14,0.44-0.42,0.44h-2.02c-0.26,0-0.39-0.15-0.39-0.44V30.14H31.8c-0.28,0-0.42-0.15-0.42-0.44v-2.06
c0-0.29,0.14-0.44,0.42-0.44h2.72v-9.47c0-1.58,0.32-2.98,0.97-4.19c0.64-1.23,1.55-2.15,2.72-2.75c1.09-0.56,2.25-0.77,3.5-0.63
c1.25,0.12,2.44,0.59,3.59,1.41C45.53,11.73,45.56,11.94,45.38,12.19z"/>
</svg>
<div class="rightborderright"></div>
</div>
<div class="rightborderbottom"></div>
<div class="logoanimacont"></div>
</div>
For simplicity stake, I focused only on the right side of you page, where the svg is surrounded by the four div. Also be aware that I used new class names to make the code easier to understand.
I used flexbox one level at a time to achieve this effect. You can use the new .container div and place it wherever you wish on your page (just be aware of the possible conflicting class names with your current project).
NOTE: Run the code snippet on full screen so you can test the effect.
* {
margin: 0;
padding: 0;
}
.container {
width: 100vw;
height: 100vh;
background: pink;
display: flex;
flex-direction: column;
}
.top {
background: red;
flex: 1;
}
.middle {
display: flex;
align-items: center;
justify-content: center;
}
.bottom {
background-color: dimgray;
flex: 1;
}
.left {
height: 100%;
background: brown;
flex: 1;
}
.center {
width: 40%;
height: auto;
}
.right {
height: 100%;
background: blue;
flex: 1;
}
svg {
display: flex;
align-items: center;
}
<div class="container">
<div class="top"></div>
<div class="middle">
<div class="left"></div>
<div class="center">
<svg viewBox="0 0 70 70">
<rect width="100" height="100" /></svg>
</div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</div>
I just want to add this new example to show that the my last answer can and will achieve the desired effect. One just need to add the specifics of the project (which are unknown to us).
* {
margin: 0;
padding: 0;
}
.header {
background: yellow;
width: 100%;
height: 15vh;
}
.nav {
background: orange;
width: 35%;
height: 15%;
position: absolute;
right: 0;
}
.content {
display: flex;
align-items: center;
font-family: sans-serif;
background: purple;
}
.left-column {
position: absolute;
left: 0;
width: 50%;
height: 70%;
background: green;
display: flex;
align-items: center;
justify-content: center;
}
.right-column {
position: absolute;
right: 0;
width: 50%;
height: 70%;
background: pink;
display: flex;
flex-direction: column;
}
.top {
background: red;
flex: 1;
}
.middle {
display: flex;
align-items: center;
justify-content: center;
}
.bottom {
background-color: dimgray;
flex: 1;
}
.left {
height: 100%;
background: brown;
flex: 1;
}
.center {
width: 30%;
/* size of the svg */
height: auto;
}
.right {
height: 100%;
background: blue;
flex: 1;
}
svg {
display: flex;
align-items: center;
}
<body>
<div class="header">
<div class="nav"></div>
</div>
<div class="left-column">
<div class="content">Center and Middle Content</div>
</div>
<div class="right-column">
<div class="top"></div>
<div class="middle">
<div class="left"></div>
<div class="center">
<svg viewBox="0 0 70 70">
<rect width="100" height="100" />
</svg>
</div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</div>
</body>
Had to re-write using flexbox to obtain what I wanted. Incase anyone comes across a problem similar, im posting my answer because it achieved what I needed after re-writing the code.
html, body{
margin:0;
height:100%;
width:100%;
}
#container{
background-color:pink;
height:91%;
width:100%;
display:flex;
}
#left{
width:50%;
background-color:lightblue;
display:flex;
position:relative;
}
#right{
width:50%;
background-color:lightgreen;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
#right>* {
flex: 1 1;
}
#logo {
width: 100%;
margin:auto;
max-width:calc(80vh - 25px);
background-color:purple;
left:0;
}
#logo:before {
content:"";
display:flex;
padding-top: 100%;
}
#rightsidetop{
background-color:orange;
}
#rightsidebottom{
background-color:pink;
}
<div id="container">
<div id="left"></div>
<div id="right">
<div id="rightsidetop"></div>
<div id="logo"></div>
<div id="rightsidebottom"></div>
</div>
</div>
Related
I have tried drawing 4 vertical equidistant lines as shown in the image. The lines come out of the container when the browser is resized. How can I make it stay within the container irrespective of the browser size? I am new to CSS.
Please let me know if more details are needed on this.
.container {
width: 100%;
position: relative;
display: flex;
padding-right: 100px;
box-sizing: border-box;
}
.inner-container {
display: flex;
flex: 1;
position: relative;
}
.bar {
flex-grow: .8;
display: flex;
height: 20px;
background-color: lightblue;
}
.blackline {
width: 10px;
height: 20px;
background-color: black;
position: absolute;
z-index: 1;
margin-left: 100%;
}
.line {
width: 1px;
height: 100%;
position: absolute;
background-color: #000000;
margin-top: 2%;
}
.line1 {
left: 0%;
}
.line2 {
left: 30%;
}
.line3 {
left: 60%;
}
.line4 {
left: 89%;
}
<div class="container">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="inner-container">
<div class="bar"></div>
<div class="blackline"></div>
</div>
</div>
The expected result is to have the 1st line drawn at the container's start point, the last line at the end of the container and the two lines in between be equidistant from each other.
The desired result
Try to add parent div for lines and use Flex property for that. So, you get equal distance in all the responsive windows. Below is the sample code for your image.
<!DOCTYPE html>
<html>
<head>
<style>
.container{
width: 100%;
position: relative;
display: flex;
box-sizing: border-box;
}
.inner-container {
display: flex;
flex:1;
position: relative;
}
.bar {
flex-grow: .8;
display: flex;
height: 20px;
background-color: lightblue;
}
.blackline {
width: 10px;
height: 20px;
background-color: black;
position: absolute;
z-index: 1;
right: 0;
}
.line-container {
display: flex;
justify-content: space-between;
width: 100%;
position: absolute;
height: 100%;
top: 100%;
}
.line {
width: 1px;
height: 100%;
background-color: #000000;
}
</style>
</head>
<body>
<div class="container">
<div class="inner-container">
<div class="line-container">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
</div>
<div class="bar"></div>
<div class="blackline"></div>
</div>
</div>
</body>
</html>
Here my attempt which utilizing the advantage of flex without position. The usage of position:absolute is actually breaking the flex position. So I restructure your container and css to have as minimal as it can for the syntax to achieve your desired result.
The magic for the equal sizing of each .line is the following:
flex-grow: 1;
Here a very good reference for understanding flex better: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Not sure is it what you want but hope it helps~
.container {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.inner-container {
display: flex;
justify-content: space-between;
width: 100%;
}
.bar {
flex-grow: .8;
background-color: lightblue;
}
.blackline {
width: 10px;
height: 20px;
background-color: black;
}
.line {
height: 20px;
border-left: 1px solid black;
flex-grow: 1;
}
.line:last-child {
border-right: 1px solid black;
}
<div class="container">
<div class="inner-container">
<div class="bar"></div>
<div class="blackline"></div>
</div>
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
</div>
I would use margin on your container instead of padding and use space between on your inner container flex (instead of absolute positioning), then you can absolutely position your lines 1/3rd apart and use right 0 for your last line
.container {
width: calc(100% - 100px);
position: relative;
display: flex;
margin-right: 100px;
box-sizing: border-box;
}
.inner-container {
display: flex;
flex-grow: 1;
position: relative;
justify-content: space-between;
}
.bar {
flex-grow: 0.8;
display: flex;
height: 20px;
background-color: lightblue;
}
.blackline {
width: 10px;
height: 20px;
background-color: black;
}
.line {
width: 1px;
height: 100%;
position: absolute;
background-color: #000000;
margin-top: 2%;
}
.line1 {
left: 0;
}
.line2 {
left: 33.3333%;
}
.line3 {
left: 66.6667%;
}
.line4 {
right: 0;
}
<div class="container">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="inner-container">
<div class="bar"></div>
<div class="blackline"></div>
</div>
</div>
I want exactly like this website: https://www.petzl.com/INT/en
I want to show the text that is the center having 3 divs "Services" "Training" and "Shop" to have in one line or row.
I tried inline-block, padding, margins, float etc. but maybe I am doing something wrong.
If I dont use this line "place-content:center;" it places it to left with a lot of spaces.
My website link: beta.edgerope.com
Please find code below:
<style>
.image{
height: 800px;
width: 100%;
display: grid;
place-content:center;
justify-content:middle;
color: white;
font-size:30px;
background-color: #;
background-position: center;
background-size: cover;
}
.training{
display:inline-block;
padding-top: 50px;
padding-right: 1500px;
padding-bottom: 50px;
padding-left: 1px;
}
.image>div {
display: inline-block;
width: 100px;
}
.image>div img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: 0;
display: inline-block;
}
.image>div span {
position: relative;
z-index: 1;
cursor: pointer;
display: inline-block;
}
.image>div span:hover+img {
opacity: 1;
display: inline-block;
}
.div{
dipslay
}
</style>
<div class="image">
<div class="services">
<span class="services" onclick="window.location=''">Services</span>
<img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ">
</div>
<div class="Training">
<span class="training" onclick="window.location='beta.edgerope.com/courses'">Training</span>
<img src="https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg"> </div>
<div class="shop">
<span class="shop" onclick="window.location='beta.edgerope.com/shop'">Shop</span>
<img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> </div>
</div>
:
You can use CSS flex property something like this
.image {
display: flex;
justify-content: space-evenly;
align-items: center;
}
The aim is to code the design below with 3 boxes appearing on top of a straight vertical line (Horizontal on desktop).
I have tried creating this using :: before pseudo selector.
Here is the code:
HTML
<div className={clsx(styles.container__box, styles['container__box--1'])}>
Box 1
</div>
<div className={clsx(styles.container__box, styles['container__box--2'])}>
Box 2
</div>
<div className={clsx(styles.container__box, styles['container__box--3'])}>
Box 3
</div>
CSS
&__box {
width: 25rem;
height: 25rem;
&:not(:last-child) {
margin-bottom: 5rem;
}
&--1 {
background-color: red;
z-index: 100;
}
&--2 {
background-color: green;
position: relative;
&::before {
content: "";
background-color: black;
color: red;
font-weight: bold;
height: 85rem;
width: 1rem;
display: block;
position: absolute;
top: -120%;
left: 50%;
}
}
&--3 {
background-color: yellow;
z-index: 100;
}
}
I'm unable to hide the pseudo selector behind the parent div.
*{
margin:0px;
padding:0px;
box-sizing: border-box;
}
body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
flex-direction: column;
}
.container{
position:relative;
}
.container span{
background:black;
height:300px;
display:block;
width:10px;
position: absolute;
left:47%;
top:20px;
}
.box1,
.box2,
.box3{
background:greenyellow;
width:100px;
height:100px;
border:1px solid blue;
margin:10px 0px;
position: relative;
}
<body>
<div class="container">
<span></span>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
try setting the parent divs position to relative then setting the before pseudo element's z-index to -1
.parent-div {
position: relative;
}
.parent-div::after {
content: "";
position: absolute;
z-index: -1;
}
How can I make the picture change with each different button clicked and make the picture shown to be the default?
From the code snippet, please notice how each button should change the image.
Thank you!
* {
box-sizing: border-box;
}
.imagebox {
width: 50%;
float: left;
height: 300px;
position: relative;
}
.imagebox img {
position: relative;
top: 40%;
transform: translateY(-50%);
overflow: hidden;
width: 100%;
}
.textbox-cont {
width: 50%;
height: 300px;
float: right;
position: relative;
overflow: hidden;
}
.textbox {
color: #000000;
position: absolute;
text-align: center;
width: 100%;
padding: 20px;
top: 53%;
transform: translateY(-50%);
}
#media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont {
width: 100%;
display: flex;
flex-direction: column;
}
<div class="imagebox"></div>
<img src="https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687" alt="">
<div class="textbox-cont">
<div class="textbox">
Pick a color to see how it will look<br>
<button style="margin: 8px;">Cobalt Blue</button><br>
<button style="margin: 8px">Cobaltt Blue</button><br>
<button style="margin: 8px">Cardinal Red</button><br>
<button style="margin: 8px">Coral Orange</button><br>
</div>
</div>
You can addEventListener to each button and change the image src attribute depending on the button id:
const img = document.getElementById('img');
for (let button of document.getElementsByTagName('button')) {
button.addEventListener('click', () => {
switch (button.id) {
case 'but1':
img.src = "https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687";
break;
case 'but2':
img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTgfERcK1BcdgSekipirrCw6zpQJ9l40h48Musvp7-dfy8Ym3Yl&usqp=CAU";
break;
case 'but3':
img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS9wvzviWw6ag6p_aZgw6kRs267_3jpiI_gGCxvLh7U9QIVAmQa&usqp=CAU";
break;
case 'but4':
img.src = "https://xzdl43v0mdf2m45tz2aj7kkv35-wpengine.netdna-ssl.com/wp-content/uploads/2010/10/orange-780x400.jpg";
break;
}
});
}
*{
box-sizing:border-box;
}
.imagebox {
width: 50%;
float: left;
height:300px;
position:relative;
}
.imagebox img{
position:relative;
top:40%;
transform:translateY(-50%);
overflow:hidden;
width: 100%;
}
.textbox-cont {
width: 50%;
height:300px;
float: right;
position:relative;
overflow:hidden;
}
.textbox{
color: #000000;
position:absolute;
text-align: center;
width:100%;
padding:20px;
top:53%;
transform:translateY(-50%);
}
#media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont {
width: 100%;
display: flex;
flex-direction: column;
}
<div class="imagebox">
<img id="img" src="https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687"
alt="">
</div>
<div class="textbox-cont">
<div class="textbox">
Pick a color to see how it will look<br>
<button style="margin: 8px" id="but1">Cobalt Blue</button><br>
<button style="margin: 8px" id="but2">Cobaltt Blue</button><br>
<button style="margin: 8px" id="but3">Cardinal Red</button><br>
<button style="margin: 8px" id="but4">Coral Orange</button><br>
</div>
</div>
I want 3 section one cover half part of the screen to show image slider and in half part, there is two section right now that part I'm done but now I want to add half part of the screen on top but it does not show image slider section, please help me.
right now my code:
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Arial;
color: white;
}
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #ff6a00;
}
.right {
right: 0;
background-color: #ffd800;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.centered img {
width: 150px;
border-radius: 50%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="split left">
<div class="centered">
<h2>Blood Donor</h2>
<p>Go To Registration</p>
</div>
</div>
<div class="split right">
<div class="centered">
<h2>Blood Seeker</h2>
<p>Go To Registration</p>
</div>
</div>
</form>
</body>
please help me,
Thank You for your time.
He's a simple layout using CSS Grid (the 2D version of Flexbox):
.main {
display: inline-grid;
height: 200px;
width: 400px;
grid-template-rows: 50% 50%;
border: green solid 2px;
}
.main .level1 {
border: blue solid 2px;
display: flex;
}
.main .level1 .level2 {
border: red solid 2px;
flex-basis: 50%;
}
<div class="main">
<div class="level1"></div>
<div class="level1">
<div class="level2"></div>
<div class="level2"></div>
</div>
</div>
If you are happy using grid then is quite easy. You just need to setup a grid which with two columns and two rows.
Here is a link to a codepen, there are some other styles to make it a little easier to see what is going on but you only need to pay attention to the grid css attributes.
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
height: 50vh;
}
.container>div {
display: flex;
justify-content: center;
align-items: center;
}
.image-slider {
background: magenta;
grid-column: span 2;
}
.page-link-1 {
background: red;
}
.page-link-2 {
background: green
}
<div class="container">
<div class="image-slider">Image Slider</div>
<div class="page-link-1">Page Link 1</div>
<div class="page-link-2">Page Link 2</div>
</div>
https://codepen.io/tmcnicol/pen/PdoLpm/
My implementation with flex:
body,
html {
height: 100%;
}
.wrap {
display: flex;
height: 100%;
flex-direction: column;
}
.slider {
border: 2px solid red;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.bottom-wrap {
display: flex;
flex: 1;
}
.link {
border: 2px solid red;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
<div class="wrap">
<div class="slider">Image slider</div>
<div class="bottom-wrap">
<div class="link">Page Link</div>
<div class="link">Page Link</div>
</div>
</div>
Working codepen