|
|
@ -1,4 +1,3 @@ |
|
|
|
<<<<<<< HEAD |
|
|
|
body { |
|
|
|
min-height: 100vh; |
|
|
|
margin: 0; |
|
|
@ -154,160 +153,3 @@ footer { |
|
|
|
color: white; |
|
|
|
} |
|
|
|
} |
|
|
|
======= |
|
|
|
body { |
|
|
|
min-height: 100vh; |
|
|
|
margin: 0; |
|
|
|
box-sizing: border-box; |
|
|
|
position: relative; |
|
|
|
padding-bottom: 20vh; |
|
|
|
} |
|
|
|
header { |
|
|
|
background-color:rgb(36, 37, 42); |
|
|
|
padding: 30px 10%; |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
align-items: center; |
|
|
|
align-content: center; |
|
|
|
text-decoration: none; |
|
|
|
& h1 { |
|
|
|
margin: 0; |
|
|
|
position: relative; |
|
|
|
&::before { |
|
|
|
content: " "; |
|
|
|
position: absolute; |
|
|
|
background-color: rgba(255, 255, 255, 0); |
|
|
|
transition: 1s; |
|
|
|
top: -2px; |
|
|
|
left: -2px; |
|
|
|
width: 0px; |
|
|
|
height: 0px; |
|
|
|
border: 2px solid transparent; |
|
|
|
} |
|
|
|
&:hover::before { |
|
|
|
animation: border_top_right 0.75s linear forwards; |
|
|
|
} |
|
|
|
&::after { |
|
|
|
content: " "; |
|
|
|
position: absolute; |
|
|
|
background-color: rgba(255, 255, 255, 0); |
|
|
|
transition: 1s; |
|
|
|
top: -2px; |
|
|
|
left: -2px; |
|
|
|
width: 0px; |
|
|
|
height: 0px; |
|
|
|
border: 2px solid transparent; |
|
|
|
} |
|
|
|
&:hover::after { |
|
|
|
animation: border_bottom_left 0.75s linear forwards; |
|
|
|
} |
|
|
|
& a { |
|
|
|
color: rgb(237, 240, 241); |
|
|
|
text-decoration: none; |
|
|
|
font-family: sans-serif; |
|
|
|
letter-spacing: 0px; |
|
|
|
padding: 5px; |
|
|
|
& .word1 { |
|
|
|
color: rgb(146,147,149); |
|
|
|
} |
|
|
|
& .word2 { |
|
|
|
color: rgb(192, 192, 192); |
|
|
|
} |
|
|
|
& .word3 { |
|
|
|
color:rgb(237, 240, 241); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
& ul { |
|
|
|
list-style-type: none; |
|
|
|
display: flex; |
|
|
|
justify-content: space-around; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
& a:not(._title) { |
|
|
|
padding: 1em 2em; |
|
|
|
text-decoration: none; |
|
|
|
color: rgb(237, 240, 241); |
|
|
|
font-family: "Montserrat", sans-serif; |
|
|
|
font-weight: 500; |
|
|
|
&:hover { |
|
|
|
color: rgb(36, 37, 42); |
|
|
|
background-color: rgb(237, 240, 241); |
|
|
|
font-weight: 800; |
|
|
|
transition: 0.2s; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@keyframes border_top_right { |
|
|
|
0% { |
|
|
|
width: 0; |
|
|
|
height: 0; |
|
|
|
border-top-color: rgb(255, 255, 255); |
|
|
|
border-right-color: transparent; |
|
|
|
border-bottom-color: transparent; |
|
|
|
border-left-color: transparent; |
|
|
|
} |
|
|
|
|
|
|
|
25% { |
|
|
|
width: 100%; |
|
|
|
height: 0; |
|
|
|
border-top-color: rgb(255, 255, 255); |
|
|
|
border-right-color: rgb(255, 255, 255); |
|
|
|
border-bottom-color: transparent; |
|
|
|
border-left-color: transparent; |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
border-top-color: rgb(255, 255, 255); |
|
|
|
border-right-color: rgb(255, 255, 255); |
|
|
|
border-bottom-color: transparent; |
|
|
|
border-left-color: transparent; |
|
|
|
} |
|
|
|
} |
|
|
|
@keyframes border_bottom_left { |
|
|
|
0% { |
|
|
|
width: 0; |
|
|
|
height: 0; |
|
|
|
border-top-color: transparent; |
|
|
|
border-right-color: transparent; |
|
|
|
border-bottom-color: transparent; |
|
|
|
border-left-color: rgb(255, 255, 255); |
|
|
|
} |
|
|
|
|
|
|
|
75% { |
|
|
|
width: 0; |
|
|
|
height: 100%; |
|
|
|
border-top-color: transparent; |
|
|
|
border-right-color: transparent; |
|
|
|
border-bottom-color: rgb(255, 255, 255); |
|
|
|
border-left-color: rgb(255, 255, 255); |
|
|
|
} |
|
|
|
|
|
|
|
100% { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
border-top-color: transparent; |
|
|
|
border-right-color: transparent; |
|
|
|
border-bottom-color: rgb(255, 255, 255); |
|
|
|
border-left-color: rgb(255, 255, 255); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
footer { |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
right: 0; |
|
|
|
left: 0; |
|
|
|
text-align: center; |
|
|
|
background-color:rgb(36, 37, 42); |
|
|
|
color: rgb(237, 240, 241); |
|
|
|
font-family: "Montserrat", sans-serif; |
|
|
|
font-weight: 500; |
|
|
|
padding: 3vh 0; |
|
|
|
& a { |
|
|
|
color: white; |
|
|
|
} |
|
|
|
} |
|
|
|
>>>>>>> d120872e658c0bb2df803f19a903096b4a6a7928 |
|
|
|