93 lines
1.5 KiB
CSS
93 lines
1.5 KiB
CSS
|
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
|
||
|
|
*
|
||
|
|
{
|
||
|
|
font-family: Audiowide;
|
||
|
|
}
|
||
|
|
h1
|
||
|
|
{
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
body
|
||
|
|
{
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
min-height: 100vh;
|
||
|
|
background: #434750;
|
||
|
|
}
|
||
|
|
|
||
|
|
ul
|
||
|
|
{
|
||
|
|
position: relative;
|
||
|
|
transform: skewY(-15deg);
|
||
|
|
/* transition: 0.5s; */
|
||
|
|
}
|
||
|
|
|
||
|
|
ul li
|
||
|
|
{
|
||
|
|
position: relative;
|
||
|
|
list-style: none;
|
||
|
|
width: 200px;
|
||
|
|
background: #080809;
|
||
|
|
padding: 15px;
|
||
|
|
z-index: var(--i);
|
||
|
|
transition: 0.5s;
|
||
|
|
}
|
||
|
|
ul li:hover
|
||
|
|
{
|
||
|
|
background: #0e0e0e;
|
||
|
|
transform: translateX(50px);
|
||
|
|
}
|
||
|
|
ul li::before
|
||
|
|
{
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: -40px;
|
||
|
|
width: 40px;
|
||
|
|
height: 100%;
|
||
|
|
background: #18191a;
|
||
|
|
transform-origin: right;
|
||
|
|
transform: skewY(45deg);
|
||
|
|
transition: 0.5s;
|
||
|
|
}
|
||
|
|
ul li:hover::before
|
||
|
|
{
|
||
|
|
background: #1a1a1a;
|
||
|
|
}
|
||
|
|
ul li::after
|
||
|
|
{
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
top: -40px;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 40px;
|
||
|
|
background: #141414;
|
||
|
|
transform-origin: bottom;
|
||
|
|
transform: skewX(45deg);
|
||
|
|
transition: 0.5s;
|
||
|
|
}
|
||
|
|
ul li:hover::after
|
||
|
|
{
|
||
|
|
background: #1a1a1a;
|
||
|
|
}
|
||
|
|
ul li:last-child::after
|
||
|
|
{
|
||
|
|
box-shadow: -100px 100px 20px rgba(0, 0, 0, 0.25);
|
||
|
|
}
|
||
|
|
ul li a
|
||
|
|
{
|
||
|
|
text-decoration: none;
|
||
|
|
color: rgb(73, 73, 73);
|
||
|
|
display: block;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.05cm;
|
||
|
|
transition: 0.5s;
|
||
|
|
}
|
||
|
|
ul li:hover a
|
||
|
|
{
|
||
|
|
color: #00A2FF;
|
||
|
|
}
|
||
|
|
|