Need help with assignment HTML5 CSS

Hello,
I’m struggling with the following assignment. I have to build an element with 6 squares with rounded edges in which there’s a smaller coloured circle with a letter in it. The cubicles with the circles and letters have to adjust to the screen size and keep the squared shape. Also they have to be lined up 2 by two (2 columns, 3 rows). The letters in the cubicles have to spell the word TOP from top to bottom (so two times). When the screen size becomes larger then 1024 pixels the cubicles should line up in 2 rows of three cubicles also spelling the word TOP but now from left to right. I’m not suppose to use grid but I can use flex. Could you give me some hints so I can complete this task? That would be so great!

My code this far:

HTML:

    <div class="container">
        <div class="square">
        <div>
            <p>T</p>
        </div>
       </div>
       <div class="square">
        <div>
            <p>T</p>
        </div>
       </div>
       <div class="square">
        <div>
            <p>O</p>
        </div>
       </div>
       <div class="square">
        <div>
            <p>O</p>
        </div>
       </div>
       <div class="square">
        <div>
            <p>P</p>
        </div>
       </div>
       <div class="square">
        <div>
            <p>P</p>
        </div>
       </div>
    </div>

CSS:

.container {
    display: flex;
    flex-wrap: wrap;
}

.container > * {
    flex: 1 1 40%;
}
.square {
    display: flex;
    flex-direction: row ;
    justify-content: space-around;
    align-items: center;
    margin: 10px;
    min-width: 400px;
    min-height:400px;;
    border: 0.062rem solid #f00;
    Margin-top: 0;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 20px;
 }

.vierkant div{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    height: 70%;
    border: 0.062em solid #000;
    box-sizing: border-box;
    border-radius: 50%;
    background-color: #fed;
    box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.3 );
 }

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.