* {
margin
:
0
;
padding
:
0
;
box-sizing: border-box;
background-color
:
rgb
(
191
,
240
,
240
);
}
.parent_box {
display
: flex;
justify-
content
:
center
;
align-items:
center
;
height
:
100
vh;
width
:
100
vw;
gap:
20px
;
}
.box-container {
height
:
80
vh;
width
:
55
vw;
}
.text {
width
:
30
vw;
height
:
50
vh;
display
: flex;
justify-
content
:
center
;
align-items:
center
;
padding
:
1
vh;
font-size
:
4
vh;
line-height
:
40px
;
color
:
green
;
}
.text:hover {
transform: scale(
1.3
);
transition:
2
s ease-in-out;
}
.gfg {
font-size
:
30px
;
color
:
green
;
font-weight
:
700
;
text-align
:
center
;
padding-top
:
10px
;
height
:
7
vh;
}
#box
1
{
height
:
55
vh;
width
:
40
vw;
background-image
:
url
(
background-
size
: contain;
border
:
1px
solid
green
;
border-radius:
100%
;
position
:
absolute
;
left
:
50
vw;
top
:
28
vh;
}
#box
1:
hover {
transform: scale(
0.9
);
transition:
1.5
s ease-in-out;
}
#box
2
{
height
:
30
vh;
width
:
18
vw;
background-image
:
url
(
background-
size
: cover;
border
:
10px
solid
rgb
(
157
,
192
,
157
);
border-radius:
100%
;
position
:
absolute
;
left
:
42
vw;
top
:
65
vh;
}
#box
2:
hover {
transform: scale(
1.2
);
transition:
1.5
s ease-in-out;
}
#box
3
{
height
:
20
vh;
width
:
12
vw;
background-color
:
rgb
(
242
,
247
,
245
,
0.0
);
border-radius:
100%
;
position
:
absolute
;
left
:
70
vw;
top
:
17
vh;
border
:
12px
solid
rgb
(
157
,
192
,
157
);
}
#box
3:
hover {
transform: scale(
1.2
);
transition:
0.7
s ease-in-out;
}
#box
4
{
height
:
16
vh;
width
:
8
vw;
background-color
:
rgb
(
215
,
236
,
229
,
0.0
);
border-radius:
100%
;
position
:
absolute
;
left
:
80
vw;
top
:
70
vh;
border
:
10px
solid
rgb
(
157
,
192
,
157
);
}
#box
4:
hover {
transform: scale(
1.2
);
transition:
1
s ease-in-out;
}
#box
5
{
height
:
7
vh;
width
:
5
vw;
background-color
:
rgb
(
205
,
228
,
220
,
0.0
);
border
:
5px
solid
rgb
(
69
,
157
,
69
);
border-radius:
100%
;
border-radius:
100%
;
position
:
absolute
;
left
:
70
vw;
top
:
85
vh;
}
#box
5:
hover {
transform: scale(
1.3
);
transition:
1
s ease-in-out;
}