From 7c85166c4cbdd862fc4252007d2df5befcbc2a58 Mon Sep 17 00:00:00 2001 From: littleblack111 Date: Sun, 5 Nov 2023 16:43:21 +0800 Subject: added two color underlining PAGE NOT FOUND and made 404 text-shadow 1px -> 2px --- dest/css/404.css | 2 +- src/css/404.css | 136 +++++++++++++++++++++++++++---------------------------- 2 files changed, 69 insertions(+), 69 deletions(-) diff --git a/dest/css/404.css b/dest/css/404.css index 78a4f913..c677f0a6 100644 --- a/dest/css/404.css +++ b/dest/css/404.css @@ -1 +1 @@ -*{box-sizing:border-box}body{margin:0;padding:0}#notfound{background:#030005;height:100vh;position:relative}#notfound .notfound{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.notfound{line-height:1.4;max-width:767px;text-align:center;width:100%}.notfound .notfound-404{height:180px;margin-bottom:20px;position:relative;z-index:-1}.notfound .notfound-404 h1{color:#030005;font-size:224px;font-weight:900;left:50%;letter-spacing:-20px;margin-bottom:0;margin-left:-12px;margin-top:0;text-shadow:-1px -1px 0 #8400ff,1px 1px 0 #ff005a;top:50%;transform:translate(-50%,-50%)}.notfound .notfound-404 h1,.notfound .notfound-404 h2{font-family:Montserrat,sans-serif;position:absolute;text-transform:uppercase}.notfound .notfound-404 h2{color:#fff;font-size:42px;font-weight:700;left:0;letter-spacing:13px;margin:0;right:0;text-shadow:0 2px 0 #8400ff;top:110px}.notfound a{background:transparent;border:2px solid;color:#ff005a;display:inline-block;font-family:Montserrat,sans-serif;font-size:14px;font-weight:700;padding:10px 40px;-webkit-text-decoration:none;text-decoration:none;text-transform:uppercase;transition:all .2s}.notfound a:hover{color:#8400ff}@media only screen and (max-width:767px){.notfound .notfound-404 h2{font-size:24px}}@media only screen and (max-width:480px){.notfound .notfound-404 h1{font-size:182px}} \ No newline at end of file +*{box-sizing:border-box}body{margin:0;padding:0}#notfound{background:#030005;height:100vh;position:relative}#notfound .notfound{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.notfound{line-height:1.4;max-width:767px;text-align:center;width:100%}.notfound .notfound-404{height:180px;margin-bottom:20px;position:relative;z-index:-1}.notfound .notfound-404 h1{color:#030005;font-size:224px;font-weight:900;left:50%;letter-spacing:-20px;margin-bottom:0;margin-left:-12px;margin-top:0;text-shadow:-2px -2px 0 #8400ff,2px 2px 0 #ff005a;top:50%;transform:translate(-50%,-50%)}.notfound .notfound-404 h1,.notfound .notfound-404 h2{font-family:Montserrat,sans-serif;position:absolute;text-transform:uppercase}.notfound .notfound-404 h2{color:#fff;font-size:42px;font-weight:700;left:0;letter-spacing:13px;margin:0;right:0;text-shadow:0 .5px 0 #ff005a,0 2px 0 #8400ff;top:110px}.notfound a{background:transparent;border:2px solid;color:#ff005a;display:inline-block;font-family:Montserrat,sans-serif;font-size:14px;font-weight:700;padding:10px 40px;-webkit-text-decoration:none;text-decoration:none;text-transform:uppercase;transition:all .2s}.notfound a:hover{color:#8400ff}@media only screen and (max-width:767px){.notfound .notfound-404 h2{font-size:24px}}@media only screen and (max-width:480px){.notfound .notfound-404 h1{font-size:182px}} \ No newline at end of file diff --git a/src/css/404.css b/src/css/404.css index 0de41abb..d7a69316 100644 --- a/src/css/404.css +++ b/src/css/404.css @@ -1,104 +1,104 @@ * { - -webkit-box-sizing: border-box; - box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } body { - padding: 0; - margin: 0; + padding: 0; + margin: 0; } #notfound { - position: relative; - height: 100vh; - background: #030005; + position: relative; + height: 100vh; + background: #030005; } #notfound .notfound { - position: absolute; - left: 50%; - top: 50%; - -webkit-transform: translate(-50%, -50%); - -ms-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); + position: absolute; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } .notfound { - max-width: 767px; - width: 100%; - line-height: 1.4; - text-align: center; + max-width: 767px; + width: 100%; + line-height: 1.4; + text-align: center; } .notfound .notfound-404 { - position: relative; - height: 180px; - margin-bottom: 20px; - z-index: -1; + position: relative; + height: 180px; + margin-bottom: 20px; + z-index: -1; } .notfound .notfound-404 h1 { - font-family: 'Montserrat', sans-serif; - position: absolute; - left: 50%; - top: 50%; - -webkit-transform: translate(-50% , -50%); - -ms-transform: translate(-50% , -50%); - transform: translate(-50% , -50%); - font-size: 224px; - font-weight: 900; - margin-top: 0px; - margin-bottom: 0px; - margin-left: -12px; - color: #030005; - text-transform: uppercase; - text-shadow: -1px -1px 0px #8400ff, 1px 1px 0px #ff005a; - letter-spacing: -20px; + font-family: 'Montserrat', sans-serif; + position: absolute; + left: 50%; + top: 50%; + -webkit-transform: translate(-50% , -50%); + -ms-transform: translate(-50% , -50%); + transform: translate(-50% , -50%); + font-size: 224px; + font-weight: 900; + margin-top: 0px; + margin-bottom: 0px; + margin-left: -12px; + color: #030005; + text-transform: uppercase; + text-shadow: -2px -2px 0px #8400ff, 2px 2px 0px #ff005a; + letter-spacing: -20px; } .notfound .notfound-404 h2 { - font-family: 'Montserrat', sans-serif; - position: absolute; - left: 0; - right: 0; - top: 110px; - font-size: 42px; - font-weight: 700; - color: #fff; - text-transform: uppercase; - text-shadow: 0px 2px 0px #8400ff; - letter-spacing: 13px; - margin: 0; + font-family: 'Montserrat', sans-serif; + position: absolute; + left: 0; + right: 0; + top: 110px; + font-size: 42px; + font-weight: 700; + color: #fff; + text-transform: uppercase; + text-shadow: 0px .5px 0px #ff005a, 0px 2px 0px #8400ff; + letter-spacing: 13px; + margin: 0; } .notfound a { - font-family: 'Montserrat', sans-serif; - display: inline-block; - text-transform: uppercase; - color: #ff005a; - text-decoration: none; - border: 2px solid; - background: transparent; - padding: 10px 40px; - font-size: 14px; - font-weight: 700; - -webkit-transition: 0.2s all; - transition: 0.2s all; + font-family: 'Montserrat', sans-serif; + display: inline-block; + text-transform: uppercase; + color: #ff005a; + text-decoration: none; + border: 2px solid; + background: transparent; + padding: 10px 40px; + font-size: 14px; + font-weight: 700; + -webkit-transition: 0.2s all; + transition: 0.2s all; } .notfound a:hover { - color: #8400ff; + color: #8400ff; } @media only screen and (max-width: 767px) { - .notfound .notfound-404 h2 { - font-size: 24px; - } + .notfound .notfound-404 h2 { + font-size: 24px; + } } @media only screen and (max-width: 480px) { - .notfound .notfound-404 h1 { - font-size: 182px; - } + .notfound .notfound-404 h1 { + font-size: 182px; + } } -- cgit v1.2.3