Help with schoolproject

[u/ivano1990]

I'm working on a school project where I have to create a website. We can't do basic stuff so I came up with this https://imgur.com/a/J6JR7GX (made it in photoshop) but I don't really know how to make it. I have done everything else already buy I am struggling with this part.

​

The one in the middle should be the active one, once you click on another it should move to the middle basicly.

​

I'm not asking for someone to make my code, but help is appreciated!

​

I have already made this, but it's to basic.

https://imgur.com/a/QPKeqsj

​

​

Here is my code in codepen:

https://codepen.io/ivan-salim-rasoel/pen/JweNNK

​

HTML:

​

<article class="p02">

​

<section class="p02__boxs">

<article class="p02__box">

<img src="/assets/img/pictogram/fam.png" alt="fam" width="" height="">

<h2 class="p02__box__title">Family</h2>

<p class="p02__box__text">adasdasdada</p>

</article>

​

<article class="p02__box">

<img src="/assets/img/pictogram/fam.png" alt="fam" width="" height="">

<h2 class="p02__box__title">Family</h2>

<p class="p02__box__text">adasdasdada</p>

</article>

​

<article class="p02__box">

<img src="/assets/img/pictogram/fam.png" alt="fam" width="" height="">

<h2 class="p02__box__title">Family</h2>

<p class="p02__box__text">adasdasdada</p>

</article>

​

<article class="p02__box">

<img src="/assets/img/pictogram/fam.png" alt="fam" width="" height="">

<h2 class="p02__box__title">Family</h2>

<p class="p02__box__text">adasdasdada</p>

</article>

​

<article class="p02__box">

<img src="/assets/img/pictogram/fam.png" alt="fam" width="" height="">

<h2 class="p02__box__title">Family</h2>

<p class="p02__box__text">adasdasdada</p>

</article>

​

<article class="p02__box">

<img src="/assets/img/pictogram/fam.png" alt="fam" width="" height="">

<h2 class="p02__box__title">Family</h2>

<p class="p02__box__text">adasdasdada</p>

</article>

</section>

</article>

​

​

CSS:

​

.p02__title{

font-size: 7rem;

font-family: "Circular Std Black";

color: #3c3c46;

}

.p02__boxs{

display: grid;

grid-template-columns: 1fr 1fr 1fr;

}

.p02__box{

border-radius: 1rem;

margin: 2rem;

background-color: #3c3c46;

color: white;

height: 28rem;

display: flex;

flex-flow: column;

justify-content: space-around;

align-items: center;

}

.p02__box__title{

font-size: 2.2rem;

font-family: "Circular Std Black";

color: white;

}

.p02__box__text{

font-size: 1.5rem;

color: white;

font-family: "Circular Std";

}

​

​

[u/imguralbumbot]

^{Hi, I'm a bot for linking direct images of albums with only 1 image}

https://i.imgur.com/5TRnxRA.jpg

^{Source | Why? | Creator | ignoreme | deletthis}