html
<div class="container">
<div class="top-bar-header">
<div>
<i class="fa-solid fa-battery-full"></i> 100%
</div>
<div>10:10 <i>م</i></div>
<div>
<i class="fa-solid fa-wifi"></i>
stc ksa
<i class="fa-solid fa-tower-broadcast"></i>
</div>
</div>
<i class="fa-solid fa-chevron-right"></i>
<span>...</span>
<span>تحديد</span>
<h2>الحديثة</h2>
<label>
<input type="checkbox">
<div class="box">
<img src="1.jpg" alt="">
<i class="fa-solid fa-check"></i>
</div>
</label>
<label>
<input type="checkbox">
<div class="box">
<img src="3.jpg" alt="">
<i class="fa-solid fa-check"></i>
</div>
</label>
<label>
<input type="checkbox">
<div class="box">
<img src="2.jpg" alt="">
<i class="fa-solid fa-check"></i>
</div>
</label>
<label>
<input type="checkbox">
<div class="box">
<img src="4.jpg" alt="">
<i class="fa-solid fa-check"></i>
</div>
</label>
<label>
<input type="checkbox">
<div class="box">
<img src="5.jpg" alt="">
<i class="fa-solid fa-check"></i>
</div>
</label>
<label>
<input type="checkbox">
<div class="box">
<img src="6.jpg" alt="">
<i class="fa-solid fa-check"></i>
</div>
</label>
<label>
<input type="checkbox">
<div class="box">
<img src="1.jpg" alt="">
<i class="fa-solid fa-check"></i>
</div>
</label>
<label>
<input type="checkbox">
<div class="box">
<img src="3.jpg" alt="">
<i class="fa-solid fa-check"></i>
</div>
</label>
<label>
<input type="checkbox">
<div class="box">
<img src="2.jpg" alt="">
<i class="fa-solid fa-check"></i>
</div>
</label>
<label>
<input type="checkbox">
<div class="box">
<img src="4.jpg" alt="">
<i class="fa-solid fa-check"></i>
</div>
</label>
<label>
<input type="checkbox">
<div class="box">
<img src="5.jpg" alt="">
<i class="fa-solid fa-check"></i>
</div>
</label>
<label>
<input type="checkbox">
<div class="box">
<img src="6.jpg" alt="">
<i class="fa-solid fa-check"></i>
</div>
</label>
<p>500 صورة و 120فديو</p>
</div>
css
body {
min-height: 100vh;
display: grid;
place-items: center;
box-sizing: border-box;
background-color: #fff;
font-family: Tahoma;
}
.container {
width: 310px;
height: 510px;
background-color: #fff;
border: 1px solid #555;
user-select: none;
position: relative;
}
.container .top-bar-header {
width: 100%;
position: absolute;
font-size: 0.8rem;
top: 0;
left: 0;
z-index: 10;
display: flex;
align-items: flex-start;
justify-content: space-around;
color: #fff;
}
.container i.fa-chevron-right {
color: #fff;
position: absolute;
right: 10px;
top: 25px;
z-index: 10;
font-weight: 900;
}
.container span {
color: #fff;
position: absolute;
top: 25px;
z-index: 10;
background-color: rgb(192, 163, 163);
display: flex;
align-items: flex-start;
justify-content:center
}
.container span:first-of-type {
left: 10px;
height: 25px;
width: 25px;
border-radius: 50%;
}
.container span:last-of-type {
left: 50px;
height: 25px;
width: 50px;
border-radius: 10px;
}
.container h2 {
color: #fff;
position: absolute;
right: 20px;
top: 30px;
z-index: 10;
}
.container label {
position: relative;
overflow: hidden;
}
.container label input {
display: none;
}
.container label .box {
position: relative;
width: 100px;
height: 120px;
cursor: pointer;
display: inline-block;
}
.container label .box img {
width: 100%;
height: 100%;
transition: all 0.5s
}
.container label .box i.fa-check {
font-size: 10px;
position: absolute;
bottom: 5px;
left: 5px;
background-color: #2980b9;
border: 1.5px solid #fff;
padding: 3px;
border-radius: 50%;
color: #fff;
display: none;
box-shadow: 0.5px -0.5px 0 0 #2980b9;
transition: all 0.5s
}
.container label input:checked ~ .box i.fa-check {
display: block
}
.container p {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
margin: 0;
font-size:0.8rem
}
