From f619550c738f177a3caa783cd44aebddeb6d69cd Mon Sep 17 00:00:00 2001 From: FazCodeFR <30906528+FazCodeFR@users.noreply.github.com> Date: Tue, 4 Jun 2024 15:52:16 +0200 Subject: [PATCH] Add 404 page --- .../components/erreur/erreur.component.html | 171 +- .../components/erreur/erreur.component.scss | 1570 ++++++++++++----- 2 files changed, 1241 insertions(+), 500 deletions(-) diff --git a/src/app/components/erreur/erreur.component.html b/src/app/components/erreur/erreur.component.html index 0918be9..831ac6d 100644 --- a/src/app/components/erreur/erreur.component.html +++ b/src/app/components/erreur/erreur.component.html @@ -1,35 +1,142 @@ - -
-
-
-
-
-
- + +
+
+

404

+

OOPS... PAGE NON TROUVÉE

+ + + Retour à l'accueil + - -
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
- -
- -
-
-

404

-

Page non trouvée...

-
-
- -
-
- - -
\ No newline at end of file +
\ No newline at end of file diff --git a/src/app/components/erreur/erreur.component.scss b/src/app/components/erreur/erreur.component.scss index 76648bf..36c7a95 100644 --- a/src/app/components/erreur/erreur.component.scss +++ b/src/app/components/erreur/erreur.component.scss @@ -1,507 +1,1141 @@ - -label { - cursor: pointer; -} - -a { - margin: 0; - padding: 0; - vertical-align: baseline; - background: transparent; - text-decoration: none; - color: #000; -} - -input, select, button, textarea { - margin: 0; - font-size: 100%; -} - -html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input { - border: 0; - outline: 0; - font-size: 100%; - vertical-align: baseline; - background: transparent; -} - - -.top-header:before { - background-image: url(https://1.bp.blogspot.com/-gxsOcYWghHA/Xp_izTh4sFI/AAAAAAAAU8s/y637Fwg99qAuzW9na_NT_uApny8Vce95gCEwYBhgL/s1600/header-footer-gradient-bg.png); -} -.top-header:before { - content: ''; + .btn { + font-size:14px; + color:#fff; + letter-spacing:1px; + overflow:hidden; + position:relative; + text-transform:uppercase; + border-color:#fff; + border: 2px solid; + border-radius:0; + padding: 12px 4vw; + background:transparent; + box-shadow:none; + position: relative; + z-index: 2; + } + + .btn:hover, + .btn:focus, + .btn:active { + background:transparent; + color:#000; + border-color:#222; + border: 2px solid #fff; + outline:none; + box-shadow:none; + } + + .btn .mask { + background: #fff none repeat scroll 0 0; display: block; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 0; + z-index: -1; + -moz-transition: all 0.9s cubic-bezier(0.2, 1, 0.25, 1) 0s; + -o-transition: all 0.9s cubic-bezier(0.2, 1, 0.25, 1) 0s; + -webkit-transition: all 0.9s cubic-bezier(0.2, 1, 0.25, 1) 0s; + transition: all 0.9s cubic-bezier(0.2, 1, 0.25, 1) 0s; + } + + .btn:hover .mask { width: 100%; - height: 4px; - background-repeat: repeat-x; - background-size: contain; + } + + .huge-section { + min-height: 100vh + } + + .huge-side { + min-height: 100vh + } + + .left-side { + background: #242424; + } + .left-side > .row { + margin-left: 20px; + } + + .left-side .huge-content { + color: #fff; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: auto; + } + + .left-side .huge-content .logo { + height: 32px; + margin: 60px 0 100px; + } + + .left-side .huge-content h1 { + font-size: 42px; + } + + .left-side .huge-content h2 { + font-size: 22px; + line-height: 1.5; + margin-bottom: 50px; + } + + .left-side .btn { + margin-bottom: 80px; + } + + .left-side .social-icons { + position: absolute; + bottom: 30px; + padding: 0; + } + + .left-side .social-icons li { + display: inline-block; + float: left; + margin-right: 20px; + } + + .left-side .social-icons li:last-child { + margin-right: 0; + } + + .left-side .social-icons li a { + color: #fff; + } + + .left-side .social-icons li a:hover { + opacity: .8; + } + + .right-side { + margin: 0; + padding: 0; + overflow: hidden; + } + + .right-side .huge-background-img { + height: 100vh; + } + + /**********************************/ + /******** 3.0 Cat Swinging ********/ + /**********************************/ + .all-wrap { + -webkit-animation: bob 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; + animation: bob 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; + } + + .all { + top: 15rem; + left: calc(50% - 2.5rem); + position: absolute; + width: 5rem; + height: 5rem; + -webkit-transform-origin: center -20rem; + transform-origin: center -20rem; + -webkit-animation: swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; + animation: swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; + } + .all:before { + height: 20rem; + width: 2px; + background-color: #DB242A; + left: calc(50% - 1px); + bottom: 20rem; + } + + .yarn { + position: absolute; + top: 0; + left: -16px; + width: 80px; + height: 80px; + border-radius: 50%; + background-image: -webkit-radial-gradient(top left, circle, #e97c7f, #db242a 50%, #af1d22); + background-image: radial-gradient(circle at top left, #e97c7f, #db242a 50%, #af1d22); + z-index: 1; + } + .yarn:before, .yarn:after { + position: absolute; + width: 20px; + height: 20px; + border-radius: 50%; + background-color: white; + top: -1px; + } + .yarn:before { + left: calc(50% + 7px); + background-color: #b1bce6; + } + .yarn:after { + right: calc(50% + 7px); + background-color: #D5E8F8; + } + + .cat-wrap { + position: absolute; + top: 0; + left: calc(50% - 45px); + width: 90px; + height: 130px; + -webkit-animation: reverse-swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; + animation: reverse-swing 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; + -webkit-transform-origin: top center; + transform-origin: top center; + } + + .cat { position: absolute; top: 0; left: 0; - opacity:0.5; -} - - -.starsec{ - content: " "; + width: 100%; + height: 100%; + -webkit-animation: swing 7s 0.2s infinite both; + animation: swing 7s 0.2s infinite both; + -webkit-transform-origin: top center; + transform-origin: top center; + } + + .cat-upper { position: absolute; - width: 3px; - height: 3px; - background: transparent; - box-shadow: 571px 173px #00BCD4, 1732px 143px #00BCD4, 1745px 454px #FF5722, 234px 784px #00BCD4, 1793px 1123px #FF9800, 1076px 504px #03A9F4, 633px 601px #FF5722, 350px 630px #FFEB3B, 1164px 782px #00BCD4, 76px 690px #3F51B5, 1825px 701px #CDDC39, 1646px 578px #FFEB3B, 544px 293px #2196F3, 445px 1061px #673AB7, 928px 47px #00BCD4, 168px 1410px #8BC34A, 777px 782px #9C27B0, 1235px 1941px #9C27B0, 104px 1690px #8BC34A, 1167px 1338px #E91E63, 345px 1652px #009688, 1682px 1196px #F44336, 1995px 494px #8BC34A, 428px 798px #FF5722, 340px 1623px #F44336, 605px 349px #9C27B0, 1339px 1344px #673AB7, 1102px 1745px #3F51B5, 1592px 1676px #2196F3, 419px 1024px #FF9800, 630px 1033px #4CAF50, 1995px 1644px #00BCD4, 1092px 712px #9C27B0, 1355px 606px #F44336, 622px 1881px #CDDC39, 1481px 621px #9E9E9E, 19px 1348px #8BC34A, 864px 1780px #E91E63, 442px 1136px #2196F3, 67px 712px #FF5722, 89px 1406px #F44336, 275px 321px #009688, 592px 630px #E91E63, 1012px 1690px #9C27B0, 1749px 23px #673AB7, 94px 1542px #FFEB3B, 1201px 1657px #3F51B5, 1505px 692px #2196F3, 1799px 601px #03A9F4, 656px 811px #00BCD4, 701px 597px #00BCD4, 1202px 46px #FF5722, 890px 569px #FF5722, 1613px 813px #2196F3, 223px 252px #FF9800, 983px 1093px #F44336, 726px 1029px #FFC107, 1764px 778px #CDDC39, 622px 1643px #F44336, 174px 1559px #673AB7, 212px 517px #00BCD4, 340px 505px #FFF, 1700px 39px #FFF, 1768px 516px #F44336, 849px 391px #FF9800, 228px 1824px #FFF, 1119px 1680px #FFC107, 812px 1480px #3F51B5, 1438px 1585px #CDDC39, 137px 1397px #FFF, 1080px 456px #673AB7, 1208px 1437px #03A9F4, 857px 281px #F44336, 1254px 1306px #CDDC39, 987px 990px #4CAF50, 1655px 911px #00BCD4, 1102px 1216px #FF5722, 1807px 1044px #FFF, 660px 435px #03A9F4, 299px 678px #4CAF50, 1193px 115px #FF9800, 918px 290px #CDDC39, 1447px 1422px #FFEB3B, 91px 1273px #9C27B0, 108px 223px #FFEB3B, 146px 754px #00BCD4, 461px 1446px #FF5722, 1004px 391px #673AB7, 1529px 516px #F44336, 1206px 845px #CDDC39, 347px 583px #009688, 1102px 1332px #F44336, 709px 1756px #00BCD4, 1972px 248px #FFF, 1669px 1344px #FF5722, 1132px 406px #F44336, 320px 1076px #CDDC39, 126px 943px #FFEB3B, 263px 604px #FF5722, 1546px 692px #F44336; - animation: animStar 150s linear infinite; -} - -.starthird -{ - content: " "; + top: 0; + left: 0; + width: 100%; + height: 100%; + -webkit-transform-origin: top center; + transform-origin: top center; + z-index: 1; + } + .cat-upper .cat-leg { position: absolute; - width: 3px; - height: 3px; - background: transparent; - box-shadow: 571px 173px #00BCD4, 1732px 143px #00BCD4, 1745px 454px #FF5722, 234px 784px #00BCD4, 1793px 1123px #FF9800, 1076px 504px #03A9F4, 633px 601px #FF5722, 350px 630px #FFEB3B, 1164px 782px #00BCD4, 76px 690px #3F51B5, 1825px 701px #CDDC39, 1646px 578px #FFEB3B, 544px 293px #2196F3, 445px 1061px #673AB7, 928px 47px #00BCD4, 168px 1410px #8BC34A, 777px 782px #9C27B0, 1235px 1941px #9C27B0, 104px 1690px #8BC34A, 1167px 1338px #E91E63, 345px 1652px #009688, 1682px 1196px #F44336, 1995px 494px #8BC34A, 428px 798px #FF5722, 340px 1623px #F44336, 605px 349px #9C27B0, 1339px 1344px #673AB7, 1102px 1745px #3F51B5, 1592px 1676px #2196F3, 419px 1024px #FF9800, 630px 1033px #4CAF50, 1995px 1644px #00BCD4, 1092px 712px #9C27B0, 1355px 606px #F44336, 622px 1881px #CDDC39, 1481px 621px #9E9E9E, 19px 1348px #8BC34A, 864px 1780px #E91E63, 442px 1136px #2196F3, 67px 712px #FF5722, 89px 1406px #F44336, 275px 321px #009688, 592px 630px #E91E63, 1012px 1690px #9C27B0, 1749px 23px #673AB7, 94px 1542px #FFEB3B, 1201px 1657px #3F51B5, 1505px 692px #2196F3, 1799px 601px #03A9F4, 656px 811px #00BCD4, 701px 597px #00BCD4, 1202px 46px #FF5722, 890px 569px #FF5722, 1613px 813px #2196F3, 223px 252px #FF9800, 983px 1093px #F44336, 726px 1029px #FFC107, 1764px 778px #CDDC39, 622px 1643px #F44336, 174px 1559px #673AB7, 212px 517px #00BCD4, 340px 505px #FFF, 1700px 39px #FFF, 1768px 516px #F44336, 849px 391px #FF9800, 228px 1824px #FFF, 1119px 1680px #FFC107, 812px 1480px #3F51B5, 1438px 1585px #CDDC39, 137px 1397px #FFF, 1080px 456px #673AB7, 1208px 1437px #03A9F4, 857px 281px #F44336, 1254px 1306px #CDDC39, 987px 990px #4CAF50, 1655px 911px #00BCD4, 1102px 1216px #FF5722, 1807px 1044px #FFF, 660px 435px #03A9F4, 299px 678px #4CAF50, 1193px 115px #FF9800, 918px 290px #CDDC39, 1447px 1422px #FFEB3B, 91px 1273px #9C27B0, 108px 223px #FFEB3B, 146px 754px #00BCD4, 461px 1446px #FF5722, 1004px 391px #673AB7, 1529px 516px #F44336, 1206px 845px #CDDC39, 347px 583px #009688, 1102px 1332px #F44336, 709px 1756px #00BCD4, 1972px 248px #FFF, 1669px 1344px #FF5722, 1132px 406px #F44336, 320px 1076px #CDDC39, 126px 943px #FFEB3B, 263px 604px #FF5722, 1546px 692px #F44336; - animation: animStar 10s linear infinite; -} - -.starfourth -{ - content: " "; + width: 20px; + height: 100%; + background-color: white; + z-index: -1; + background-image: -webkit-linear-gradient(left, #D5E8F8, #D5E8F8 20%, #8B9BD9); + background-image: linear-gradient(to right, #D5E8F8, #D5E8F8 20%, #8B9BD9); + } + .cat-upper .cat-leg:nth-child(1) { + border-top-left-radius: 100px; + left: 10px; + } + .cat-upper .cat-leg:nth-child(1):after { + left: 50%; + } + .cat-upper .cat-leg:nth-child(2) { + border-top-left-radius: 0; + border-top-right-radius: 100px; + right: 17px; + } + .cat-upper .cat-leg:nth-child(2):after { + right: 50%; + } + + .cat-lower-wrap { + height: 90%; + width: 100%; position: absolute; - width: 2px; - height: 2px; - background: transparent; - box-shadow: 571px 173px #00BCD4, 1732px 143px #00BCD4, 1745px 454px #FF5722, 234px 784px #00BCD4, 1793px 1123px #FF9800, 1076px 504px #03A9F4, 633px 601px #FF5722, 350px 630px #FFEB3B, 1164px 782px #00BCD4, 76px 690px #3F51B5, 1825px 701px #CDDC39, 1646px 578px #FFEB3B, 544px 293px #2196F3, 445px 1061px #673AB7, 928px 47px #00BCD4, 168px 1410px #8BC34A, 777px 782px #9C27B0, 1235px 1941px #9C27B0, 104px 1690px #8BC34A, 1167px 1338px #E91E63, 345px 1652px #009688, 1682px 1196px #F44336, 1995px 494px #8BC34A, 428px 798px #FF5722, 340px 1623px #F44336, 605px 349px #9C27B0, 1339px 1344px #673AB7, 1102px 1745px #3F51B5, 1592px 1676px #2196F3, 419px 1024px #FF9800, 630px 1033px #4CAF50, 1995px 1644px #00BCD4, 1092px 712px #9C27B0, 1355px 606px #F44336, 622px 1881px #CDDC39, 1481px 621px #9E9E9E, 19px 1348px #8BC34A, 864px 1780px #E91E63, 442px 1136px #2196F3, 67px 712px #FF5722, 89px 1406px #F44336, 275px 321px #009688, 592px 630px #E91E63, 1012px 1690px #9C27B0, 1749px 23px #673AB7, 94px 1542px #FFEB3B, 1201px 1657px #3F51B5, 1505px 692px #2196F3, 1799px 601px #03A9F4, 656px 811px #00BCD4, 701px 597px #00BCD4, 1202px 46px #FF5722, 890px 569px #FF5722, 1613px 813px #2196F3, 223px 252px #FF9800, 983px 1093px #F44336, 726px 1029px #FFC107, 1764px 778px #CDDC39, 622px 1643px #F44336, 174px 1559px #673AB7, 212px 517px #00BCD4, 340px 505px #FFF, 1700px 39px #FFF, 1768px 516px #F44336, 849px 391px #FF9800, 228px 1824px #FFF, 1119px 1680px #FFC107, 812px 1480px #3F51B5, 1438px 1585px #CDDC39, 137px 1397px #FFF, 1080px 456px #673AB7, 1208px 1437px #03A9F4, 857px 281px #F44336, 1254px 1306px #CDDC39, 987px 990px #4CAF50, 1655px 911px #00BCD4, 1102px 1216px #FF5722, 1807px 1044px #FFF, 660px 435px #03A9F4, 299px 678px #4CAF50, 1193px 115px #FF9800, 918px 290px #CDDC39, 1447px 1422px #FFEB3B, 91px 1273px #9C27B0, 108px 223px #FFEB3B, 146px 754px #00BCD4, 461px 1446px #FF5722, 1004px 391px #673AB7, 1529px 516px #F44336, 1206px 845px #CDDC39, 347px 583px #009688, 1102px 1332px #F44336, 709px 1756px #00BCD4, 1972px 248px #FFF, 1669px 1344px #FF5722, 1132px 406px #F44336, 320px 1076px #CDDC39, 126px 943px #FFEB3B, 263px 604px #FF5722, 1546px 692px #F44336; - animation: animStar 50s linear infinite; -} - -.starfifth -{ - content: " "; + top: 100%; + width: 75px; + left: calc(50% - 37.5px); + -webkit-animation: reverse-swing 7s 0.2s infinite both; + animation: reverse-swing 7s 0.2s infinite both; + -webkit-transform-origin: top center; + transform-origin: top center; + } + + .cat-lower { position: absolute; - width: 1px; - height: 1px; - background: transparent; - box-shadow: 571px 173px #00BCD4, 1732px 143px #00BCD4, 1745px 454px #FF5722, 234px 784px #00BCD4, 1793px 1123px #FF9800, 1076px 504px #03A9F4, 633px 601px #FF5722, 350px 630px #FFEB3B, 1164px 782px #00BCD4, 76px 690px #3F51B5, 1825px 701px #CDDC39, 1646px 578px #FFEB3B, 544px 293px #2196F3, 445px 1061px #673AB7, 928px 47px #00BCD4, 168px 1410px #8BC34A, 777px 782px #9C27B0, 1235px 1941px #9C27B0, 104px 1690px #8BC34A, 1167px 1338px #E91E63, 345px 1652px #009688, 1682px 1196px #F44336, 1995px 494px #8BC34A, 428px 798px #FF5722, 340px 1623px #F44336, 605px 349px #9C27B0, 1339px 1344px #673AB7, 1102px 1745px #3F51B5, 1592px 1676px #2196F3, 419px 1024px #FF9800, 630px 1033px #4CAF50, 1995px 1644px #00BCD4, 1092px 712px #9C27B0, 1355px 606px #F44336, 622px 1881px #CDDC39, 1481px 621px #9E9E9E, 19px 1348px #8BC34A, 864px 1780px #E91E63, 442px 1136px #2196F3, 67px 712px #FF5722, 89px 1406px #F44336, 275px 321px #009688, 592px 630px #E91E63, 1012px 1690px #9C27B0, 1749px 23px #673AB7, 94px 1542px #FFEB3B, 1201px 1657px #3F51B5, 1505px 692px #2196F3, 1799px 601px #03A9F4, 656px 811px #00BCD4, 701px 597px #00BCD4, 1202px 46px #FF5722, 890px 569px #FF5722, 1613px 813px #2196F3, 223px 252px #FF9800, 983px 1093px #F44336, 726px 1029px #FFC107, 1764px 778px #CDDC39, 622px 1643px #F44336, 174px 1559px #673AB7, 212px 517px #00BCD4, 340px 505px #FFF, 1700px 39px #FFF, 1768px 516px #F44336, 849px 391px #FF9800, 228px 1824px #FFF, 1119px 1680px #FFC107, 812px 1480px #3F51B5, 1438px 1585px #CDDC39, 137px 1397px #FFF, 1080px 456px #673AB7, 1208px 1437px #03A9F4, 857px 281px #F44336, 1254px 1306px #CDDC39, 987px 990px #4CAF50, 1655px 911px #00BCD4, 1102px 1216px #FF5722, 1807px 1044px #FFF, 660px 435px #03A9F4, 299px 678px #4CAF50, 1193px 115px #FF9800, 918px 290px #CDDC39, 1447px 1422px #FFEB3B, 91px 1273px #9C27B0, 108px 223px #FFEB3B, 146px 754px #00BCD4, 461px 1446px #FF5722, 1004px 391px #673AB7, 1529px 516px #F44336, 1206px 845px #CDDC39, 347px 583px #009688, 1102px 1332px #F44336, 709px 1756px #00BCD4, 1972px 248px #FFF, 1669px 1344px #FF5722, 1132px 406px #F44336, 320px 1076px #CDDC39, 126px 943px #FFEB3B, 263px 604px #FF5722, 1546px 692px #F44336; - animation: animStar 80s linear infinite; -} - -@keyframes animStar -{ - 0% { - transform: translateY(0px); - } - 100% { - transform: translateY(-2000px); - } -} - - - -button { - border: none; - padding: 0; - font-size: 0; - line-height: 0; - background: none; - cursor: pointer; -} - -:focus { - outline: 0; -} - -.clearfix:before, .clearfix:after { - content: "\0020"; - display: block; - height: 0; - visibility: hidden; -} - -.clearfix:after { - clear: both; -} - -.clearfix { - zoom: 1; -} - -/* 1. END BODY */ -/***********************************/ - -/*********************************** - /* 2. CONTENT */ -/***********************************/ -/* 2.1. Section error */ -.error { - min-height: 100vh; - position: relative; - padding: 240px 0; - box-sizing: border-box; + top: 0; + left: 0; width: 100%; height: 100%; - text-align: center; - margin-top: 70px; -} - -.error__overlay { + -webkit-animation: swing 7s 0.5s infinite both; + animation: swing 7s 0.5s infinite both; + -webkit-transform-origin: top center; + transform-origin: top center; + } + .cat-lower:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; - overflow: hidden; -} - -.error__content { + border-radius: 100px; + background-image: -webkit-radial-gradient(10px 50px, circle, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9); + background-image: radial-gradient(circle at 10px 50px, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9); + z-index: 1; + } + .cat-lower .cat-leg, .cat-lower .cat-paw { + z-index: -1; position: absolute; + height: 20px; + width: 20px; + -webkit-animation: swing-leg 7s 0.3s infinite both; + animation: swing-leg 7s 0.3s infinite both; + z-index: 1; + -webkit-transform-origin: top center; + transform-origin: top center; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + background-image: -webkit-linear-gradient(left, white, #D5E8F8, #8B9BD9); + background-image: linear-gradient(to right, white, #D5E8F8, #8B9BD9); + } + .cat-lower > .cat-leg { + bottom: 20px; + } + .cat-lower > .cat-leg .cat-leg { + top: 25%; + } + .cat-lower > .cat-leg + .cat-leg { + right: 0; + } + .cat-lower .cat-paw { top: 50%; - left: 50%; - width: 100%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); -} - -.error__message { - text-align: center; - color: #181828; -} - -.message__title { - font-family: 'Montserrat', sans-serif; - font-weight: 900; - text-transform: uppercase; - letter-spacing: 5px; - font-size: 5.6rem; - padding-bottom: 40px; - max-width: 960px; - margin: 0 auto; -} - -.message__text { - font-family: 'Montserrat', sans-serif; - line-height: 42px; - font-size: 18px; - padding: 0 60px; - max-width: 680px; - margin: auto; -} - -.error__nav { - max-width: 600px; - margin: 40px auto 0; - text-align: center; -} - -.e-nav__form { - position: relative; - height: 45px; - overflow: hidden; - width: 170px; - display: inline-block; - vertical-align: top; - border: 1px solid #212121; - padding-left: 10px; - padding-right: 46px; -} - -.e-nav__icon { + border-radius: 50%; + background-color: #fff; + } + .cat-lower .cat-tail { position: absolute; - right: 15px; + height: 15px; + width: 10px; + -webkit-animation: swing-tail 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; + animation: swing-tail 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; + -webkit-transform-origin: top center; + transform-origin: top center; + z-index: 0; + background-image: -webkit-linear-gradient(left, white, #D5E8F8, #8B9BD9); + background-image: linear-gradient(to right, white, #D5E8F8, #8B9BD9); + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + } + .cat-lower .cat-tail > .cat-tail { top: 50%; - -webkit-transform: translateY(-50%); - transform: translateY(-50%); - color: #212121; - -webkit-transition: color .25s ease; - transition: color .25s ease; -} - -.e-nav__link { - height: 45px; - line-height: 45px; - width: 170px; - display: inline-block; - vertical-align: top; - margin: 0 15px; - border: 1px solid #181828; - color: #181828; - text-decoration: none; - font-family: 'Montserrat', sans-serif; - text-transform: uppercase; - font-size: 11px; - letter-spacing: .1rem; - position: relative; - overflow: hidden; -} - -.e-nav__link:before { - content: ''; - height: 200px; - background: #212121; + } + .cat-lower > .cat-tail { + left: calc(50% - 5px); + top: 95%; + } + + .cat-head { + width: 90px; + height: 90px; + background-image: -webkit-radial-gradient(10px 10px, circle, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9); + background-image: radial-gradient(circle at 10px 10px, #ffffff, #ffffff 40%, #d5e8f8 65%, #8b9bd9); + border-radius: 50%; + top: calc(100% - 45px); + } + + .cat-face { position: absolute; - top: 70px; - right: 70px; - width: 260px; - -webkit-transition: all .3s; - transition: all .3s; - -webkit-transform: rotate(50deg); - transform: rotate(50deg); -} - -.e-nav__link:after { - -webkit-transition: all .3s; - transition: all .3s; - z-index: 999; - position: relative; -} - -.e-nav__link:after { - content: "Retour à l'accueil"; -} - -.e-nav__link:hover:before { - top: -60px; - right: -50px; -} - -.e-nav__link:hover { - color: #fff; -} - -.e-nav__link:nth-child(2):hover:after { - color: #fff; -} -/* 2.1. END Section Error */ - -/* 2.2. Social style */ -.error__social { + top: 0; + left: 0; + height: 100%; + width: 100%; + -webkit-animation: face 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; + animation: face 7s cubic-bezier(0.5, 0, 0.5, 1) infinite both; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-perspective: 100px; + perspective: 100px; + } + + .cat-ears { + position: absolute; + top: 0; + left: 0; + height: 50%; + width: 100%; + z-index: -1; + } + + .cat-ear { + width: 20px; + height: 100%; + position: absolute; + border-radius: 5px; + top: -10px; + } + .cat-ear:first-child { + left: 0; + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-transform: skewY(40deg); + transform: skewY(40deg); + background-color: white; + } + .cat-ear:first-child:before { + left: 0; + border-top-right-radius: 50%; + border-bottom-right-radius: 50%; + background-color: #D7EBFB; + } + .cat-ear:last-child { + right: 0; + -webkit-transform-origin: top right; + transform-origin: top right; + -webkit-transform: skewY(-40deg); + transform: skewY(-40deg); + background-color: #d1e6f7; + } + .cat-ear:last-child:before { + right: 0; + border-top-left-radius: 50%; + border-bottom-left-radius: 50%; + background-color: #e0f0fc; + } + .cat-ear:before { + width: 60%; + height: 100%; + top: 10px; + position: absolute; + background-color: #fff; + } + + .cat-eyes { position: absolute; top: 50%; - -webkit-transform: translateY(-50%); - transform: translateY(-50%); + width: 100%; + height: 6px; + -webkit-animation: blink 7s step-end infinite both; + animation: blink 7s step-end infinite both; + } + .cat-eyes:before, .cat-eyes:after { + position: absolute; + height: 6px; + width: 6px; + border-radius: 50%; + background-color: #4B4D75; + } + .cat-eyes:before { left: 20px; - z-index: 10; -} - -.e-social__list { - margin: 0; - padding: 0; - list-style-type: none; -} - -.e-social__icon { - padding-bottom: 30px; -} - -.e-social__icon:last-child { - padding-bottom: 0; -} - -.e-social__link { - color: #fff; - -webkit-transition: all .25s ease; - transition: all .25s ease; - display: block; -} - -.e-social__link:hover { - opacity: .7; -} -/* 2.2. END Social style */ - -/* 2.3. Lamp */ -.lamp { + } + .cat-eyes:after { + right: 20px; + } + + .cat-mouth { position: absolute; - left: 0px; - right: 0px; - top: 0px; - margin: 0px auto; - width: 300px; - display: flex; - flex-direction: column; - align-items: center; - transform-origin: center top; - animation-timing-function: cubic-bezier(0.6, 0, 0.38, 1); - animation: move 5.1s infinite; -} - -@keyframes move { + width: 12px; + height: 8px; + background-color: #4B4D75; + top: 60%; + left: calc(50% - 6px); + border-top-left-radius: 50% 30%; + border-top-right-radius: 50% 30%; + border-bottom-left-radius: 50% 70%; + border-bottom-right-radius: 50% 70%; + -webkit-transform: translateZ(10px); + transform: translateZ(10px); + } + .cat-mouth:before, .cat-mouth:after { + position: absolute; + width: 90%; + height: 100%; + border: 2px solid #9FA2CB; + top: 80%; + border-radius: 100px; + border-top-color: transparent; + z-index: -1; + } + .cat-mouth:before { + border-left-color: transparent; + right: calc(50% - 1px); + -webkit-transform-origin: top right; + transform-origin: top right; + -webkit-transform: rotate(10deg); + transform: rotate(10deg); + } + .cat-mouth:after { + border-right-color: transparent; + left: calc(50% - 1px); + -webkit-transform-origin: top left; + transform-origin: top left; + -webkit-transform: rotate(-10deg); + transform: rotate(-10deg); + } + + .cat-whiskers { + width: 50%; + height: 8px; + position: absolute; + bottom: 25%; + left: 25%; + -webkit-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-perspective: 60px; + perspective: 60px; + } + .cat-whiskers:before, .cat-whiskers:after { + position: absolute; + height: 100%; + width: 30%; + border: 2px solid #9FA2CB; + border-left: none; + border-right: none; + } + .cat-whiskers:before { + right: 100%; + -webkit-transform-origin: right center; + transform-origin: right center; + -webkit-transform: rotateY(70deg) rotateZ(-10deg); + transform: rotateY(70deg) rotateZ(-10deg); + } + .cat-whiskers:after { + left: 100%; + -webkit-transform-origin: left center; + transform-origin: left center; + -webkit-transform: rotateY(-70deg) rotateZ(10deg); + transform: rotateY(-70deg) rotateZ(10deg); + } + + @-webkit-keyframes bob { 0% { - transform: rotate(40deg); + -webkit-transform: translateY(0.4rem); + transform: translateY(0.4rem); + } + 6.25% { + -webkit-transform: translateY(-0.4rem); + transform: translateY(-0.4rem); + } + 12.5% { + -webkit-transform: translateY(0.4rem); + transform: translateY(0.4rem); + } + 18.75% { + -webkit-transform: translateY(-0.4rem); + transform: translateY(-0.4rem); + } + 25% { + -webkit-transform: translateY(0.4rem); + transform: translateY(0.4rem); + } + 31.25% { + -webkit-transform: translateY(-0.4rem); + transform: translateY(-0.4rem); + } + 37.5% { + -webkit-transform: translateY(0.4rem); + transform: translateY(0.4rem); + } + 43.75% { + -webkit-transform: translateY(-0.4rem); + transform: translateY(-0.4rem); } 50% { - transform: rotate(-40deg); + -webkit-transform: translateY(0.4rem); + transform: translateY(0.4rem); + } + 56.25% { + -webkit-transform: translateY(-0.4rem); + transform: translateY(-0.4rem); + } + 62.5% { + -webkit-transform: translateY(0.4rem); + transform: translateY(0.4rem); + } + 68.75% { + -webkit-transform: translateY(-0.4rem); + transform: translateY(-0.4rem); + } + 75% { + -webkit-transform: translateY(0.4rem); + transform: translateY(0.4rem); + } + 81.25% { + -webkit-transform: translateY(-0.4rem); + transform: translateY(-0.4rem); + } + 87.5% { + -webkit-transform: translateY(0.4rem); + transform: translateY(0.4rem); + } + 93.75% { + -webkit-transform: translateY(-0.4rem); + transform: translateY(-0.4rem); } 100% { - transform: rotate(40deg); + -webkit-transform: translateY(0.4rem); + transform: translateY(0.4rem); } -} - -.cable { - width: 8px; - height: 150px; - background-image: linear-gradient(rgb(32 148 218 / 70%), rgb(193 65 25)), linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)); -} - -.cover { - width: 300px; - height: 100px; - background: #0bd5e8; - border-top-left-radius: 50%; - border-top-right-radius: 50%; - position: relative; - z-index: 200; -} - -.in-cover { - width: 100%; - max-width: 300px; - height: 20px; - border-radius: 100%; - background: #08ffff; - position: absolute; - left: 0px; - right: 0px; - margin: 0px auto; - bottom: -9px; - z-index: 100; -} -.in-cover .bulb { - width: 90px; - height: 90px; - background-color: #08fffa; - border-radius: 50%; - position: absolute; - left: 0px; - right: 0px; - bottom: -20px; - margin: 0px auto; - -webkit-box-shadow: 0 0 15px 7px rgba(0,255,255,0.8), 0 0 40px 25px rgba(0,255,255,0.5), -75px 0 30px 15px rgba(0,255,255,0.2); - box-shadow: 0 0 25px 7px rgb(127 255 255 / 80%), 0 0 64px 47px rgba(0,255,255,0.5), 0px 0 30px 15px rgba(0,255,255,0.2); -} - - -.light { - width: 300px; - height: 0px; - border-bottom: 1500px solid rgb(44 255 255 / 24%); - border-left: 50px solid transparent; - border-right: 50px solid transparent; - position: absolute; - left: -50px; - right: 0px; - top: 240px; - margin: 0px auto; - z-index: 1; - border-radius: 90px 90px 0px 0px; -} -/* 2.3. END Lamp */ -/*********************************** - /* 2. END CONTENT */ -/***********************************/ - -/*********************************** - /* 3. RESPONSIVE */ -/***********************************/ -.error { - overflow: hidden; - max-height: 100vh; -} -@media (max-width: 1400px) { - .lamp { - zoom: .5; + } + + @keyframes bob { + 0% { + -webkit-transform: translateY(0.4rem); + transform: translateY(0.4rem); } - .error__content { - top: 55%; + 6.25% { + -webkit-transform: translateY(-0.4rem); + transform: translateY(-0.4rem); } - .message__title { - font-size: 3.5rem; + 12.5% { + -webkit-transform: translateY(0.4rem); + transform: translateY(0.4rem); } -} -@media (max-width: 900px) { - - .message__title { - font-size: 34px; - + 18.75% { + -webkit-transform: translateY(-0.4rem); + transform: translateY(-0.4rem); } - .error__content { - top: 55%; - } -} -@media (max-width: 950px) { - .lamp__wrap { - max-height: 100vh; - overflow: hidden; - max-width: 100vw; - } - .error__social { - bottom: 30px; - top: auto; - transform: none; - width: 100%; - position: fixed; - left: 0; - } - .e-social__icon { - display: inline-block; - padding-right: 30px; - } - .e-social__icon:last-child { - padding-right: 0; - } - .e-social__icon { - padding-bottom: 0; - } -} -@media (max-width: 750px) { - body, html { - max-height: 100vh; - } - .error__content { - position: static; - margin: 0 auto; - transform: none; - padding-top: 300px; - } - .error { - padding-top: 0; - padding-bottom: 100px; - height: 100vh; - } -} -@media (max-width: 650px) { - .message__title { - font-size: 36px; - padding-bottom: 20px; - } - .message__text { - font-size: 16px; - line-height: 2; - padding-right: 20px; - padding-left: 20px; - } - .lamp { - zoom: .6; - } - .error__content { - padding-top: 180px; - } -} -@media (max-width: 480px) { - - .message__title { - font-size: 30px; + 25% { + -webkit-transform: translateY(0.4rem); + transform: translateY(0.4rem); + } + 31.25% { + -webkit-transform: translateY(-0.4rem); + transform: translateY(-0.4rem); + } + 37.5% { + -webkit-transform: translateY(0.4rem); + transform: translateY(0.4rem); + } + 43.75% { + -webkit-transform: translateY(-0.4rem); + transform: translateY(-0.4rem); + } + 50% { + -webkit-transform: translateY(0.4rem); + transform: translateY(0.4rem); + } + 56.25% { + -webkit-transform: translateY(-0.4rem); + transform: translateY(-0.4rem); + } + 62.5% { + -webkit-transform: translateY(0.4rem); + transform: translateY(0.4rem); + } + 68.75% { + -webkit-transform: translateY(-0.4rem); + transform: translateY(-0.4rem); + } + 75% { + -webkit-transform: translateY(0.4rem); + transform: translateY(0.4rem); + } + 81.25% { + -webkit-transform: translateY(-0.4rem); + transform: translateY(-0.4rem); + } + 87.5% { + -webkit-transform: translateY(0.4rem); + transform: translateY(0.4rem); + } + 93.75% { + -webkit-transform: translateY(-0.4rem); + transform: translateY(-0.4rem); + } + 100% { + -webkit-transform: translateY(0.4rem); + transform: translateY(0.4rem); + } + } + @-webkit-keyframes swing { + 0% { + -webkit-transform: rotate(5deg); + transform: rotate(5deg); + } + 12.5% { + -webkit-transform: rotate(-10deg); + transform: rotate(-10deg); + } + 25% { + -webkit-transform: rotate(10deg); + transform: rotate(10deg); + } + 37.5% { + -webkit-transform: rotate(-15deg); + transform: rotate(-15deg); + } + 50% { + -webkit-transform: rotate(23deg); + transform: rotate(23deg); + } + 62.5% { + -webkit-transform: rotate(-23deg); + transform: rotate(-23deg); + } + 75% { + -webkit-transform: rotate(15deg); + transform: rotate(15deg); + } + 87.5% { + -webkit-transform: rotate(-10deg); + transform: rotate(-10deg); + } + 100% { + -webkit-transform: rotate(5deg); + transform: rotate(5deg); + } + } + @keyframes swing { + 0% { + -webkit-transform: rotate(5deg); + transform: rotate(5deg); + } + 12.5% { + -webkit-transform: rotate(-10deg); + transform: rotate(-10deg); + } + 25% { + -webkit-transform: rotate(10deg); + transform: rotate(10deg); + } + 37.5% { + -webkit-transform: rotate(-15deg); + transform: rotate(-15deg); + } + 50% { + -webkit-transform: rotate(23deg); + transform: rotate(23deg); + } + 62.5% { + -webkit-transform: rotate(-23deg); + transform: rotate(-23deg); + } + 75% { + -webkit-transform: rotate(15deg); + transform: rotate(15deg); + } + 87.5% { + -webkit-transform: rotate(-10deg); + transform: rotate(-10deg); + } + 100% { + -webkit-transform: rotate(5deg); + transform: rotate(5deg); + } + } + @-webkit-keyframes swing-leg { + 0% { + -webkit-transform: rotate(0.5deg); + transform: rotate(0.5deg); + } + 12.5% { + -webkit-transform: rotate(-1deg); + transform: rotate(-1deg); + } + 25% { + -webkit-transform: rotate(1deg); + transform: rotate(1deg); + } + 37.5% { + -webkit-transform: rotate(-1.5deg); + transform: rotate(-1.5deg); + } + 50% { + -webkit-transform: rotate(2.3deg); + transform: rotate(2.3deg); + } + 62.5% { + -webkit-transform: rotate(-2.3deg); + transform: rotate(-2.3deg); + } + 75% { + -webkit-transform: rotate(1.5deg); + transform: rotate(1.5deg); + } + 87.5% { + -webkit-transform: rotate(-1deg); + transform: rotate(-1deg); + } + 100% { + -webkit-transform: rotate(0.5deg); + transform: rotate(0.5deg); + } + } + @keyframes swing-leg { + 0% { + -webkit-transform: rotate(0.5deg); + transform: rotate(0.5deg); + } + 12.5% { + -webkit-transform: rotate(-1deg); + transform: rotate(-1deg); + } + 25% { + -webkit-transform: rotate(1deg); + transform: rotate(1deg); + } + 37.5% { + -webkit-transform: rotate(-1.5deg); + transform: rotate(-1.5deg); + } + 50% { + -webkit-transform: rotate(2.3deg); + transform: rotate(2.3deg); + } + 62.5% { + -webkit-transform: rotate(-2.3deg); + transform: rotate(-2.3deg); + } + 75% { + -webkit-transform: rotate(1.5deg); + transform: rotate(1.5deg); + } + 87.5% { + -webkit-transform: rotate(-1deg); + transform: rotate(-1deg); + } + 100% { + -webkit-transform: rotate(0.5deg); + transform: rotate(0.5deg); + } + } + @-webkit-keyframes swing-tail { + 0% { + -webkit-transform: rotate(-2deg); + transform: rotate(-2deg); + } + 12.5% { + -webkit-transform: rotate(4deg); + transform: rotate(4deg); + } + 25% { + -webkit-transform: rotate(-4deg); + transform: rotate(-4deg); + } + 37.5% { + -webkit-transform: rotate(6deg); + transform: rotate(6deg); + } + 50% { + -webkit-transform: rotate(-9.2deg); + transform: rotate(-9.2deg); + } + 62.5% { + -webkit-transform: rotate(9.2deg); + transform: rotate(9.2deg); + } + 75% { + -webkit-transform: rotate(-6deg); + transform: rotate(-6deg); + } + 87.5% { + -webkit-transform: rotate(4deg); + transform: rotate(4deg); + } + 100% { + -webkit-transform: rotate(-2deg); + transform: rotate(-2deg); + } + } + @keyframes swing-tail { + 0% { + -webkit-transform: rotate(-2deg); + transform: rotate(-2deg); + } + 12.5% { + -webkit-transform: rotate(4deg); + transform: rotate(4deg); + } + 25% { + -webkit-transform: rotate(-4deg); + transform: rotate(-4deg); + } + 37.5% { + -webkit-transform: rotate(6deg); + transform: rotate(6deg); + } + 50% { + -webkit-transform: rotate(-9.2deg); + transform: rotate(-9.2deg); + } + 62.5% { + -webkit-transform: rotate(9.2deg); + transform: rotate(9.2deg); + } + 75% { + -webkit-transform: rotate(-6deg); + transform: rotate(-6deg); + } + 87.5% { + -webkit-transform: rotate(4deg); + transform: rotate(4deg); + } + 100% { + -webkit-transform: rotate(-2deg); + transform: rotate(-2deg); + } + } + @-webkit-keyframes reverse-swing { + 0% { + -webkit-transform: rotate(-5deg); + transform: rotate(-5deg); + } + 12.5% { + -webkit-transform: rotate(10deg); + transform: rotate(10deg); + } + 25% { + -webkit-transform: rotate(-10deg); + transform: rotate(-10deg); + } + 37.5% { + -webkit-transform: rotate(15deg); + transform: rotate(15deg); + } + 50% { + -webkit-transform: rotate(-23deg); + transform: rotate(-23deg); + } + 62.5% { + -webkit-transform: rotate(23deg); + transform: rotate(23deg); + } + 75% { + -webkit-transform: rotate(-15deg); + transform: rotate(-15deg); + } + 87.5% { + -webkit-transform: rotate(10deg); + transform: rotate(10deg); + } + 100% { + -webkit-transform: rotate(-5deg); + transform: rotate(-5deg); + } + } + @keyframes reverse-swing { + 0% { + -webkit-transform: rotate(-5deg); + transform: rotate(-5deg); + } + 12.5% { + -webkit-transform: rotate(10deg); + transform: rotate(10deg); + } + 25% { + -webkit-transform: rotate(-10deg); + transform: rotate(-10deg); + } + 37.5% { + -webkit-transform: rotate(15deg); + transform: rotate(15deg); + } + 50% { + -webkit-transform: rotate(-23deg); + transform: rotate(-23deg); + } + 62.5% { + -webkit-transform: rotate(23deg); + transform: rotate(23deg); + } + 75% { + -webkit-transform: rotate(-15deg); + transform: rotate(-15deg); + } + 87.5% { + -webkit-transform: rotate(10deg); + transform: rotate(10deg); + } + 100% { + -webkit-transform: rotate(-5deg); + transform: rotate(-5deg); + } + } + @-webkit-keyframes face { + 0% { + -webkit-transform: translateX(-2.5px); + transform: translateX(-2.5px); + } + 12.5% { + -webkit-transform: translateX(5px); + transform: translateX(5px); + } + 25% { + -webkit-transform: translateX(-5px); + transform: translateX(-5px); + } + 37.5% { + -webkit-transform: translateX(7.5px); + transform: translateX(7.5px); + } + 50% { + -webkit-transform: translateX(-11.5px); + transform: translateX(-11.5px); + } + 62.5% { + -webkit-transform: translateX(11.5px); + transform: translateX(11.5px); + } + 75% { + -webkit-transform: translateX(-7.5px); + transform: translateX(-7.5px); + } + 87.5% { + -webkit-transform: translateX(5px); + transform: translateX(5px); + } + 100% { + -webkit-transform: translateX(-2.5px); + transform: translateX(-2.5px); + } + } + @keyframes face { + 0% { + -webkit-transform: translateX(-2.5px); + transform: translateX(-2.5px); + } + 12.5% { + -webkit-transform: translateX(5px); + transform: translateX(5px); } - .message__text { - padding-left: 10px; - padding-right: 10px; - font-size: 15px; + 25% { + -webkit-transform: translateX(-5px); + transform: translateX(-5px); } - .error__nav { - margin-top: 20px; + 37.5% { + -webkit-transform: translateX(7.5px); + transform: translateX(7.5px); } -} \ No newline at end of file + 50% { + -webkit-transform: translateX(-11.5px); + transform: translateX(-11.5px); + } + 62.5% { + -webkit-transform: translateX(11.5px); + transform: translateX(11.5px); + } + 75% { + -webkit-transform: translateX(-7.5px); + transform: translateX(-7.5px); + } + 87.5% { + -webkit-transform: translateX(5px); + transform: translateX(5px); + } + 100% { + -webkit-transform: translateX(-2.5px); + transform: translateX(-2.5px); + } + } + @-webkit-keyframes fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + @keyframes fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + @-webkit-keyframes blink { + from, to, 10%, 25%, 80% { + -webkit-transform: scaleY(1); + transform: scaleY(1); + } + 8%, 23%, 78% { + -webkit-transform: scaleY(0.1); + transform: scaleY(0.1); + } + } + @keyframes blink { + from, to, 10%, 25%, 80% { + -webkit-transform: scaleY(1); + transform: scaleY(1); + } + 8%, 23%, 78% { + -webkit-transform: scaleY(0.1); + transform: scaleY(0.1); + } + } + + *, + *:before, + *:after { + box-sizing: border-box; + position: relative; + -webkit-animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); + animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + } + + *:before, + *:after { + content: ''; + display: block; + } + + *, + *::after, + *::before { + box-sizing: border-box; + } + + html, body { + width: 100%; + overflow-x: hidden; + } + + header { + position: relative; + width: 100%; + padding: 3vw; + pointer-events: none; + } + + .btn-menu, .btn-close { + position: absolute; + z-index: 13; + top: 3vw; + right: 3vw; + height: 24px; + width: 24px; + cursor: pointer; + } + .btn-menu img, + .btn-close img { + width: 100%; + } + .btn-menu img:hover, + .btn-close img:hover { + opacity: .8 + } + + .btn-menu { + pointer-events: visible; + } + + .btn-close { + z-index: 100; + } + + .revealer-animation { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #000; + pointer-events: none; + opacity: 0; + } + .block-revealer { + display: none; + } + .block-revealer.menu-open { + display: block; + } + + .revealer-content { + min-height: 100%; + position: relative; + opacity: 0; + overflow: auto; + } + \ No newline at end of file