{"html":"

\n \n \n \n

\n NOT FOUND\n

\n","css":"/* Design Inspired by one of Stefan Devai's Design on Dribble */\n\n.main_wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30em;\n height: 30em;\n}\n\n.main {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n margin-top: 5em;\n}\n\n.antenna {\n width: 5em;\n height: 5em;\n border-radius: 50%;\n border: 2px solid black;\n background-color: #f27405;\n margin-bottom: -6em;\n margin-left: 0em;\n z-index: -1;\n}\n.antenna_shadow {\n position: absolute;\n background-color: transparent;\n width: 50px;\n height: 56px;\n margin-left: 1.68em;\n border-radius: 45%;\n transform: rotate(140deg);\n border: 4px solid transparent;\n box-shadow:\n inset 0px 16px #a85103,\n inset 0px 16px 1px 1px #a85103;\n -moz-box-shadow:\n inset 0px 16px #a85103,\n inset 0px 16px 1px 1px #a85103;\n}\n.antenna::after {\n content: \"\";\n position: absolute;\n margin-top: -9.4em;\n margin-left: 0.4em;\n transform: rotate(-25deg);\n width: 1em;\n height: 0.5em;\n border-radius: 50%;\n background-color: #f69e50;\n}\n.antenna::before {\n content: \"\";\n position: absolute;\n margin-top: 0.2em;\n margin-left: 1.25em;\n transform: rotate(-20deg);\n width: 1.5em;\n height: 0.8em;\n border-radius: 50%;\n background-color: #f69e50;\n}\n.a1 {\n position: relative;\n top: -102%;\n left: -130%;\n width: 12em;\n height: 5.5em;\n border-radius: 50px;\n background-image: linear-gradient(\n #171717,\n #171717,\n #353535,\n #353535,\n #171717\n );\n transform: rotate(-29deg);\n clip-path: polygon(50% 0%, 49% 100%, 52% 100%);\n}\n.a1d {\n position: relative;\n top: -211%;\n left: -35%;\n transform: rotate(45deg);\n width: 0.5em;\n height: 0.5em;\n border-radius: 50%;\n border: 2px solid black;\n background-color: #979797;\n z-index: 99;\n}\n.a2 {\n position: relative;\n top: -210%;\n left: -10%;\n width: 12em;\n height: 4em;\n border-radius: 50px;\n background-color: #171717;\n background-image: linear-gradient(\n #171717,\n #171717,\n #353535,\n #353535,\n #171717\n );\n margin-right: 5em;\n clip-path: polygon(\n 47% 0,\n 47% 0,\n 34% 34%,\n 54% 25%,\n 32% 100%,\n 29% 96%,\n 49% 32%,\n 30% 38%\n );\n transform: rotate(-8deg);\n}\n.a2d {\n position: relative;\n top: -294%;\n left: 94%;\n width: 0.5em;\n height: 0.5em;\n border-radius: 50%;\n border: 2px solid black;\n background-color: #979797;\n z-index: 99;\n}\n\n.notfound_text {\n background-color: black;\n padding-left: 0.3em;\n padding-right: 0.3em;\n font-size: 0.75em;\n color: white;\n letter-spacing: 0;\n border-radius: 5px;\n z-index: 10;\n}\n.tv {\n width: 17em;\n height: 9em;\n margin-top: 3em;\n border-radius: 15px;\n background-color: #d36604;\n display: flex;\n justify-content: center;\n border: 2px solid #1d0e01;\n box-shadow: inset 0.2em 0.2em #e69635;\n}\n.tv::after {\n content: \"\";\n position: absolute;\n width: 17em;\n height: 9em;\n border-radius: 15px;\n background:\n repeating-radial-gradient(#d36604 0 0.0001%, #00000070 0 0.0002%) 50% 0/2500px\n 2500px,\n repeating-conic-gradient(#d36604 0 0.0001%, #00000070 0 0.0002%) 60% 60%/2500px\n 2500px;\n background-blend-mode: difference;\n opacity: 0.09;\n}\n.curve_svg {\n position: absolute;\n margin-top: 0.25em;\n margin-left: -0.25em;\n height: 12px;\n width: 12px;\n}\n.display_div {\n display: flex;\n align-items: center;\n align-self: center;\n justify-content: center;\n border-radius: 15px;\n box-shadow: 3.5px 3.5px 0px #e69635;\n}\n.screen_out {\n width: auto;\n height: auto;\n\n border-radius: 10px;\n}\n.screen_out1 {\n width: 11em;\n height: 7.75em;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 10px;\n}\n.screen {\n width: 13em;\n height: 7.85em;\n font-family: Montserrat;\n border: 2px solid #1d0e01;\n background:\n repeating-radial-gradient(#000 0 0.0001%, #ffffff 0 0.0002%) 50% 0/2500px\n 2500px,\n repeating-conic-gradient(#000 0 0.0001%, #ffffff 0 0.0002%) 60% 60%/2500px\n 2500px;\n background-blend-mode: difference;\n animation: b 0.2s infinite alternate;\n border-radius: 10px;\n z-index: 99;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n color: #252525;\n letter-spacing: 0.15em;\n text-align: center;\n}\n\n.screenM {\n width: 13em;\n height: 7.85em;\n position: relative;\n font-family: Montserrat;\n background: linear-gradient(\n to right,\n #002fc6 0%,\n #002bb2 14.2857142857%,\n #3a3a3a 14.2857142857%,\n #303030 28.5714285714%,\n #ff0afe 28.5714285714%,\n #f500f4 42.8571428571%,\n #6c6c6c 42.8571428571%,\n #626262 57.1428571429%,\n #0affd9 57.1428571429%,\n #00f5ce 71.4285714286%,\n #3a3a3a 71.4285714286%,\n #303030 85.7142857143%,\n white 85.7142857143%,\n #fafafa 100%\n );\n border-radius: 10px;\n border: 2px solid black;\n z-index: 99;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n color: #252525;\n letter-spacing: 0.15em;\n text-align: center;\n overflow: hidden;\n}\n.screenM:before,\n.screenM:after {\n content: \"\";\n position: absolute;\n left: 0;\n z-index: 1;\n width: 100%;\n}\n.screenM:before {\n top: 0;\n height: 68.4782608696%;\n background: linear-gradient(\n to right,\n white 0%,\n #fafafa 14.2857142857%,\n #ffe60a 14.2857142857%,\n #f5dc00 28.5714285714%,\n #0affd9 28.5714285714%,\n #00f5ce 42.8571428571%,\n #10ea00 42.8571428571%,\n #0ed600 57.1428571429%,\n #ff0afe 57.1428571429%,\n #f500f4 71.4285714286%,\n #ed0014 71.4285714286%,\n #d90012 85.7142857143%,\n #002fc6 85.7142857143%,\n #002bb2 100%\n );\n}\n.screenM:after {\n bottom: 0;\n height: 21.7391304348%;\n background: linear-gradient(\n to right,\n #006c6b 0%,\n #005857 16.6666666667%,\n white 16.6666666667%,\n #fafafa 33.3333333333%,\n #001b75 33.3333333333%,\n #001761 50%,\n #6c6c6c 50%,\n #626262 66.6666666667%,\n #929292 66.6666666667%,\n #888888 83.3333333333%,\n #3a3a3a 83.3333333333%,\n #303030 100%\n );\n}\n\n@keyframes b {\n 100% {\n background-position:\n 50% 0,\n 60% 50%;\n }\n}\n\n/* Another Error Screen to Use \n\n.screen {\n width: 13em;\n height: 7.85em;\n position: relative;\n background: linear-gradient(to right, #002fc6 0%, #002bb2 14.2857142857%, #3a3a3a 14.2857142857%, #303030 28.5714285714%, #ff0afe 28.5714285714%, #f500f4 42.8571428571%, #6c6c6c 42.8571428571%, #626262 57.1428571429%, #0affd9 57.1428571429%, #00f5ce 71.4285714286%, #3a3a3a 71.4285714286%, #303030 85.7142857143%, white 85.7142857143%, #fafafa 100%);\n border-radius: 10px;\n border: 2px solid black;\n z-index: 99;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n color: #252525;\n letter-spacing: 0.15em;\n text-align: center;\n overflow: hidden;\n}\n.screen:before, .screen:after {\n content: \"\";\n position: absolute;\n left: 0;\n z-index: 1;\n width: 100%;\n}\n.screen:before {\n top: 0;\n height: 68.4782608696%;\n background: linear-gradient(to right, white 0%, #fafafa 14.2857142857%, #ffe60a 14.2857142857%, #f5dc00 28.5714285714%, #0affd9 28.5714285714%, #00f5ce 42.8571428571%, #10ea00 42.8571428571%, #0ed600 57.1428571429%, #ff0afe 57.1428571429%, #f500f4 71.4285714286%, #ed0014 71.4285714286%, #d90012 85.7142857143%, #002fc6 85.7142857143%, #002bb2 100%);\n}\n.screen:after {\n bottom: 0;\n height: 21.7391304348%;\n background: linear-gradient(to right, #006c6b 0%, #005857 16.6666666667%, white 16.6666666667%, #fafafa 33.3333333333%, #001b75 33.3333333333%, #001761 50%, #6c6c6c 50%, #626262 66.6666666667%, #929292 66.6666666667%, #888888 83.3333333333%, #3a3a3a 83.3333333333%, #303030 100%);\n}\n\n */\n\n.lines {\n display: flex;\n column-gap: 0.1em;\n align-self: flex-end;\n}\n.line1,\n.line3 {\n width: 2px;\n height: 0.5em;\n background-color: black;\n border-radius: 25px 25px 0px 0px;\n margin-top: 0.5em;\n}\n.line2 {\n flex-grow: 1;\n width: 2px;\n height: 1em;\n background-color: black;\n border-radius: 25px 25px 0px 0px;\n}\n\n.buttons_div {\n width: 4.25em;\n align-self: center;\n height: 8em;\n background-color: #e69635;\n border: 2px solid #1d0e01;\n padding: 0.6em;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n row-gap: 0.75em;\n box-shadow: 3px 3px 0px #e69635;\n}\n.b1 {\n width: 1.65em;\n height: 1.65em;\n border-radius: 50%;\n background-color: #7f5934;\n border: 2px solid black;\n box-shadow:\n inset 2px 2px 1px #b49577,\n -2px 0px #513721,\n -2px 0px 0px 1px black;\n}\n.b1::before {\n content: \"\";\n position: absolute;\n margin-top: 1em;\n margin-left: 0.5em;\n transform: rotate(47deg);\n border-radius: 5px;\n width: 0.1em;\n height: 0.4em;\n background-color: #000000;\n}\n.b1::after {\n content: \"\";\n position: absolute;\n margin-top: 0.9em;\n margin-left: 0.8em;\n transform: rotate(47deg);\n border-radius: 5px;\n width: 0.1em;\n height: 0.55em;\n background-color: #000000;\n}\n.b1 div {\n content: \"\";\n position: absolute;\n margin-top: -0.1em;\n margin-left: 0.65em;\n transform: rotate(45deg);\n width: 0.15em;\n height: 1.5em;\n background-color: #000000;\n}\n.b2 {\n width: 1.65em;\n height: 1.65em;\n border-radius: 50%;\n background-color: #7f5934;\n border: 2px solid black;\n box-shadow:\n inset 2px 2px 1px #b49577,\n -2px 0px #513721,\n -2px 0px 0px 1px black;\n}\n.b2::before {\n content: \"\";\n position: absolute;\n margin-top: 1.05em;\n margin-left: 0.8em;\n transform: rotate(-45deg);\n border-radius: 5px;\n width: 0.15em;\n height: 0.4em;\n background-color: #000000;\n}\n.b2::after {\n content: \"\";\n position: absolute;\n margin-top: -0.1em;\n margin-left: 0.65em;\n transform: rotate(-45deg);\n width: 0.15em;\n height: 1.5em;\n background-color: #000000;\n}\n.speakers {\n display: flex;\n flex-direction: column;\n row-gap: 0.5em;\n}\n.speakers .g1 {\n display: flex;\n column-gap: 0.25em;\n}\n.speakers .g1 .g11,\n.g12,\n.g13 {\n width: 0.65em;\n height: 0.65em;\n border-radius: 50%;\n background-color: #7f5934;\n border: 2px solid black;\n box-shadow: inset 1.25px 1.25px 1px #b49577;\n}\n.speakers .g {\n width: auto;\n height: 2px;\n background-color: #171717;\n}\n\n.bottom {\n width: 100%;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n column-gap: 8.7em;\n}\n.base1 {\n height: 1em;\n width: 2em;\n border: 2px solid #171717;\n background-color: #4d4d4d;\n margin-top: -0.15em;\n z-index: -1;\n}\n.base2 {\n height: 1em;\n width: 2em;\n border: 2px solid #171717;\n background-color: #4d4d4d;\n margin-top: -0.15em;\n z-index: -1;\n}\n.base3 {\n position: absolute;\n height: 0.15em;\n width: 17.5em;\n background-color: #171717;\n margin-top: 0.8em;\n}\n\n.text_404 {\n position: absolute;\n display: flex;\n flex-direction: row;\n column-gap: 6em;\n z-index: -5;\n margin-bottom: 2em;\n align-items: center;\n justify-content: center;\n opacity: 0.5;\n font-family: Montserrat;\n}\n.text_4041 {\n transform: scaleY(24.5) scaleX(9);\n}\n.text_4042 {\n transform: scaleY(24.5) scaleX(9);\n}\n.text_4043 {\n transform: scaleY(24.5) scaleX(9);\n}\n\n@media only screen and (max-width: 495px) {\n .text_404 {\n column-gap: 6em;\n }\n}\n@media only screen and (max-width: 395px) {\n .text_404 {\n column-gap: 4em;\n }\n .text_4041 {\n transform: scaleY(25) scaleX(8);\n }\n .text_4042 {\n transform: scaleY(25) scaleX(8);\n }\n .text_4043 {\n transform: scaleY(25) scaleX(8);\n }\n}\n\n@media (max-width: 275px), (max-height: 520px) {\n .main {\n position: relative;\n }\n}\n\n@media only screen and (max-width: 1024px) {\n .screenM {\n display: flex;\n }\n .screen {\n display: none;\n }\n}\n@media only screen and (min-width: 1025px) {\n .screen {\n display: flex;\n }\n .screenM {\n display: none;\n }\n}\n"}

fat-horse-65

👁 实时预览

📝 源代码

🔗 相关联的样式