<body>
    <div class="flexbox">
        <div class="flex flexbottom">
            <h1 class="stepNumber">01</h1>
            <div class="textbox">
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure, illo.</p>
            </div>
            <div class="imgbox">
                <img src="https://cdn.pixabay.com/photo/2017/01/10/23/01/seo-1970475_960_720.png" alt="">
            </div>
        </div>
        <div class="flex flextop">
            <div class="imgbox">
                <img src="https://cdn.pixabay.com/photo/2017/03/08/14/20/flat-2126876_960_720.png" />
            </div>
            <h1 class="stepNumber">02</h1>
            <div class="textbox">
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure, illo.</p>
            </div>

        </div>
        <div class="flex flexbottom">
            <h1 class="stepNumber">03</h1>
            <div class="textbox">
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure, illo.</p>
            </div>
            <div class="imgbox">
                <img src="https://cdn.pixabay.com/photo/2017/03/08/14/20/flat-2126878_960_720.png" alt="">
            </div>
        </div>
        <div class="flex flextop">
            <div class="imgbox">
                <img src="https://cdn.pixabay.com/photo/2017/01/10/23/01/vector-1970471_960_720.png" alt="">
            </div>
            <h1 class="stepNumber">04</h1>
            <div class="textbox">
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure, illo.</p>
            </div>

        </div>
        <div class="flex flexbottom">
            <h1 class="stepNumber">05</h1>
            <div class="textbox">
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure, illo.</p>
            </div>
            <div class="imgbox">
                <img src="https://cdn.pixabay.com/photo/2017/03/08/14/20/flat-2126884_960_720.png" alt="">
            </div>
        </div>

    </div>


    <footer> &copy;Ceren Kurucu | 2020</footer>

</body>

body {
    font-family: helvetica;
}
img {
    width: 100%;
}

.flexbox {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
}

.flex {
    width: 16%;
    display: flex;
    flex-direction: column;
    padding: 4%;
    justify-content: center;
}

.flexbottom {
    border-bottom: 6px solid #009688;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
}

.flextop {
    border-top: 5px solid #009688;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    position: relative;
}

.flextop:before {content: '';width: 1px;height: 250px;background: #009688;position: absolute;left: 0;/* border-radius: 64px; */}

.flextop:after {
    content: '';
    width: 1px;
    height: 250px;
    background: #009688;
    position: absolute;
    right: 0;
}

.flexbottom {
    box-shadow: inset 0px -20px 0px #03a999;
}

.flex.flextop {
    box-shadow: inset 0px 20px 0px #03a999;
}

.stepNumber {
    width: 100%;
    text-align: center;
    border: 1px solid orange;
    border-radius: 50px 0px 50px 0px;
    background: orange;
    color: white;
}

p {
    text-align: center;
}
footer {
    display: flex;
    justify-content: center;
    margin: 50px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.