
06.01.2020, 14:00
|
|
Флудер
Регистрация: 08.11.2017
Сообщений: 4,787
С нами:
4480376
Репутация:
183
|
|
CSS:
Код:
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
body
{
margin
:
0
;
padding
:
0
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
min-height
:
100vh
;
background
:
#060c21
;
font-family
:
'Poppins'
,
sans-serif
;
}
.container
{
position
:
relative
;
width
:
90%
;
display
:
grid
;
grid-template-columns
:
repeat
(
auto-fill
,
minmax
(
260px
,
1fr
)
)
;
grid-template-rows
:
auto
;
grid-gap
:
0 40px
;
}
.container .box
{
margin-bottom
:
20px
;
position
:
relative
;
height
:
400px
;
background
:
#060c21
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
border
:
1px solid #000
;
}
.container .box:before
{
content
:
''
;
position
:
absolute
;
top
:
-2px
;
left
:
-2px
;
right
:
-2px
;
bottom
:
-2px
;
background
:
#fff
;
transform
:
skew
(
2deg
,
2deg
)
;
z-index
:
-1
;
}
.container .box:hover:before
{
transform
:
skew
(
2deg
,
2deg
)
;
filter
:
blur
(
20px
)
;
transition
:
0.5s
;
z-index
:
-2
;
}
.glass
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
50%
;
height
:
100%
;
background
:
rgba
(
255
,
255
,
255
,
.05
)
;
}
.container .box:nth-child(1):before
{
background
:
linear-gradient
(
315deg
,
#ff0057
,
#e64a19
)
;
}
.container .box:nth-child(2):before
{
background
:
linear-gradient
(
315deg
,
#89ff00
,
#00bcd4
)
;
}
.container .box:nth-child(3):before
{
background
:
linear-gradient
(
315deg
,
#e91e63
,
#5d02ff
)
;
}
.container .box:nth-child(4):before
{
background
:
linear-gradient
(
315deg
,
#ff0000
,
#ffc107
)
;
}
.container .box:nth-child(5):before
{
background
:
linear-gradient
(
315deg
,
#00ccff
,
#ff07de
)
;
}
.container .box:nth-child(6):before
{
background
:
linear-gradient
(
315deg
,
#d0e60b
,
#07ff13
)
;
}
.container .box-line
{
content
:
''
;
position
:
absolute
;
top
:
-40px
;
left
:
0
;
width
:
40%
;
height
:
100%
;
background
:
rgba
(
255
,
255
,
255
,
.05
)
;
}
.content
{
position
:
relative
;
padding
:
20px
;
transform
:
translateY
(
40px
)
;
}
.box .content h2
{
position
:
absolute
;
top
:
-60px
;
right
:
20px
;
margin
:
0
;
padding
:
0
;
font-size
:
10em
;
color
:
rgba
(
255
,
255
,
255
,
.05
)
;
transition
:
0.5s
;
}
.box:hover .content h2
{
top
:
-140px
;
}
.box .content h3
{
margin
:
0 0 10px
;
padding
:
0
;
font-size
:
24px
;
font-weight
:
500
;
color
:
#fff
;
}
.box .content p
{
margin
:
0
;
padding
:
0
;
color
:
#fff
;
font-size
:
16px
;
}
.box .content a
{
position
:
relative
;
margin
:
20px 0 0
;
padding
:
10px 20px
;
text-decoration
:
none
;
border
:
1px solid #fff
;
display
:
inline-block
;
color
:
#fff
;
transition
:
0.5s
;
transform
:
translateY
(
-40px
)
;
opacity
:
0
;
visibility
:
hidden
;
}
.box:hover .content a
{
transform
:
translateY
(
0
)
;
opacity
:
1
;
visibility
:
visible
;
}
.box .content a:hover
{
color
:
#000
;
background
:
#fff
;
}
HTML:
Код:
MoonLoader
01
Service One
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor nam fugit vitae? Saepe sed voluptatibus inventore dignissimos aliquid
Read More
02
Service Two
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor nam fugit vitae? Saepe sed voluptatibus inventore dignissimos aliquid
Read More
03
Service Three
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor nam fugit vitae? Saepe sed voluptatibus inventore dignissimos aliquid
Read More
04
Service Four
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor nam fugit vitae? Saepe sed voluptatibus inventore dignissimos aliquid
Read More
05
Service Five
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor nam fugit vitae? Saepe sed voluptatibus inventore dignissimos aliquid
Read More
ссылку на видос давать не буду
UPD: Исправил баг с наведением на ссылку. Добавил блюр при наведении 
|
|
|
|
|
Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
|
|
|
|