- 4,687
- 5,166
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:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>MoonLoader</title>
<link rel="stylesheet" type="text/css" href="style/main.css">
</head>
<body>
<div class="container">
<div class="box">
<div class="glass"></div>
<div class="content">
<h2>01</h2>
<h3>Service One</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor nam fugit vitae? Saepe sed voluptatibus inventore dignissimos aliquid</p>
<a href="#">Read More</a>
</div>
</div>
<div class="box">
<div class="glass"></div>
<div class="content">
<h2>02</h2>
<h3>Service Two</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor nam fugit vitae? Saepe sed voluptatibus inventore dignissimos aliquid</p>
<a href="#">Read More</a>
</div>
</div>
<div class="box">
<div class="glass"></div>
<div class="content">
<h2>03</h2>
<h3>Service Three</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor nam fugit vitae? Saepe sed voluptatibus inventore dignissimos aliquid</p>
<a href="#">Read More</a>
</div>
</div>
<div class="box">
<div class="glass"></div>
<div class="content">
<h2>04</h2>
<h3>Service Four</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor nam fugit vitae? Saepe sed voluptatibus inventore dignissimos aliquid</p>
<a href="#">Read More</a>
</div>
</div>
<div class="box">
<div class="glass"></div>
<div class="content">
<h2>05</h2>
<h3>Service Five</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor nam fugit vitae? Saepe sed voluptatibus inventore dignissimos aliquid</p>
<a href="#">Read More</a>
</div>
</div>
</div>
</body>
</html>ссылку на видос давать не буду
UPD: Исправил баг с наведением на ссылку. Добавил блюр при наведении :)
Последнее редактирование:
