card over the end of a div - css

Question

Hello i searched and found nothing about i would like to put cards on the end of a div like this:
I imagine what would have to do with position absolute and relative but I can't imagine how to put the two divs
code:
export default function App() {
return (
<div className="Container">
<div className="Header" />
<div className="Content">
<div className="Carousel" />
<div className="main" />
</div>
<div className="footer">a</div>
</div>
);
}
css:
body {
margin: 0;
height: 100vh;
}
.App {
font-family: sans-serif;
text-align: center;
}
.Container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
max-width: 100%;
}
.Header {
position: relative;
height: 80px;
flex: none;
background: #000;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}
.Content {
flex: 1;
}
.Carousel {
background: #1976d2;
background-image: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/nottingham-park.png);
flex: none;
height: 280px;
background-repeat: no-repeat;
background-position: top center;
padding-top: 128px !important;
padding-bottom: 128px !important;
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
}
.main {
height: 400px;
background: yellow;
padding: 0 0.625em;
margin-left: auto !important;
margin-right: auto !important;
max-width: 97.2307692rem !important;
}
.footer {
max-height: 40px;
height: 40px;
height: 100%;
background: red;
flex: none;
}
example on codesandbox:
https://codesandbox.io/s/angry-mestorf-6kmmo

Answer 1

Just add inside your code 3 cards:
<div className="Container">
<div className="Header" />
<div className="Content">
<div className="Carousel" />
<div className="cardContainer">
<div className="card">Card 1</div>
<div className="card">Card 2</div>
<div className="card">Card 3</div>
</div>
<div className="main" />
</div>
<div className="footer">a</div>
</div>
And then use css to adjust them:
cardContainer height should be set to 0 to avoid spacing between the other divs
negative margin-top could be applied to cardContainer or single divs to place them "on the end of a div"
z-index could be required to prevent them from going under the div
display flex and justify-content are used to place 3 div equally spaced.
CSS
.cardContainer {
height: 0px;
display: flex;
justify-content: space-around;
margin-top: -150px;
}
.cardContainer div {
background-color: white;
padding: 100px 50px;
z-index: 10;
}

Answer 2

Make a Div with your cards and position it absolutely between the two sections. I put it inside the first section.
main {
display: flex;
flex-direction: column;
}
section {
position: relative;
height: 50vh;
background-color: green;
}
section:last-of-type {
background-color: yellow;
}
.cards {
display: flex;
justify-content: space-between;
width: 300px;
margin: 0px auto;
border: 1px solid red;
position: absolute;
left: 0;
right: 0;
bottom: -30px;
z-index: 10;
}
.card {
width: 60px;
height: 60px;
background-color: #fff;
}
<main>
<section>
<div class="cards">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
</section>
<section>
<p>Hi</p>
</section>
</main>

Answer 3

With the tips from #Jhecht
code:
import React from "react";
import "./styles.css";
export default function App() {
return (
<div className="Container">
<div className="Header" />
<div className="Content">
<div className="Carousel" />
<div className="main">
<div
className="card"
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
background: "transparent",
height: "200px"
}}
>
<div
style={{
height: "400px",
marginRight: "10px",
background: "green",
width: "350px"
}}
/>
<div
style={{
height: "400px",
marginRight: "10px",
background: "black",
width: "350px"
}}
/>
<div
style={{ height: "400px", background: "green", width: "350px" }}
/>
</div>
</div>
</div>
<div className="footer">a</div>
</div>
);
}
css:
body {
margin: 0;
height: 100vh;
}
.App {
font-family: sans-serif;
text-align: center;
}
.Container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
max-width: 100%;
}
.Header {
position: relative;
height: 80px;
flex: none;
background: #000;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}
.Content {
flex: 1;
}
.Carousel {
position: relative;
background: #1976d2;
background-image: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/nottingham-park.png);
flex: none;
height: 280px;
background-repeat: no-repeat;
background-position: top center;
padding-top: 128px !important;
padding-bottom: 128px !important;
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%);
}
.main {
height: 400px;
background: yellow;
padding: 0 0.625em;
margin-left: auto !important;
margin-right: auto !important;
max-width: 97.2307692rem !important;
}
.footer {
max-height: 40px;
height: 40px;
height: 100%;
background: red;
flex: none;
}
.card {
transform: translateY(-100px);
}