\n
\n <!DOCTYPE html>\n<html lang="en">\n <head>\n <meta charset="UTF-8" />\n <meta http-equiv="X-UA-Compatible" content="IE=edge" />\n <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n <title>RA3D Platform</title>\n <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"\n rel="stylesheet"\n integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"\n crossorigin="anonymous" />\n <link rel="stylesheet"\n href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />\n </head>\n <body>\n <div class="number">404</div>\n <div class="text">\n <span>Ooops...</span>\n <br />\n page not found\n </div>\n <a class="me"\n href="https://codepen.io/uzcho_/pens/popular/?grid_type=list"\n target="_blank"></a>\n <div class="footer">\n <ul class="social-network social-circle">\n <li>\n <a class="icoLinkedin"\n href="https://www.linkedin.com/in/faresemad"\n title="Linkedin"\n target="_blank"><i class="fa-brands fa-linkedin"></i></a>\n </li>\n <li>\n <a class="icoTwitter"\n href="https://twitter.com/faresemadx"\n title="Twitter"\n target="_blank"><i class="fa-brands fa-twitter"></i></a>\n </li>\n <li>\n <a class="icoFacebook"\n href="https://www.facebook.com/faresemadx"\n title="Facebook"\n target="_blank"><i class="fa-brands fa-facebook"></i></a>\n </li>\n <li>\n <a class="icoInstagram"\n href="https://www.instagram.com/faresemadx/"\n title="Instagram"\n target="_blank"><i class="fa-brands fa-instagram"></i></a>\n </li>\n <li>\n <a class="icoGithub"\n href="https://www.github.com/faresemad/"\n title="GitHub"\n target="_blank"><i class="fa-brands fa-github"></i></a>\n </li>\n </ul>\n </div>\n <div class="footer">Created By Fares Emad</div>\n <style>\n /*=========================\n Icons\n ================= */\n * {\n margin: 0;\n padding: 0;\n }\n\n /* footer social icons */\n .footer {\n background-color: #fafcff;\n padding: 20px 0;\n text-align: center;\n }\n\n ul.social-network {\n list-style: none;\n display: inline;\n margin: auto;\n }\n\n ul.social-network li {\n display: inline;\n margin: 0 10px;\n }\n\n /* footer social icons */\n .social-network a.icoFacebook:hover {\n background-color: #3b5998;\n }\n\n .social-network a.icoTwitter:hover {\n background-color: #33ccff;\n }\n\n .social-network a.icoLinkedin:hover {\n background-color: #007bb7;\n }\n\n .social-network a.icoGithub:hover {\n background-color: #1a1f22;\n }\n\n .social-network a.icoInstagram:hover {\n background: #f09433;\n background: -moz-linear-gradient(45deg,\n #f09433 0%,\n #e6683c 25%,\n #dc2743 50%,\n #cc2366 75%,\n #bc1888 100%);\n background: -webkit-linear-gradient(45deg,\n #f09433 0%,\n #e6683c 25%,\n #dc2743 50%,\n #cc2366 75%,\n #bc1888 100%);\n background: linear-gradient(45deg,\n #f09433 0%,\n #e6683c 25%,\n #dc2743 50%,\n #cc2366 75%,\n #bc1888 100%);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f09433", endColorstr="#bc1888", GradientType=1);\n }\n\n .social-network a.icoRss:hover i,\n .social-network a.icoFacebook:hover i,\n .social-network a.icoTwitter:hover i,\n .social-network a.icoGithub:hover i,\n .social-network a.icoLinkedin:hover i {\n color: #fff;\n }\n\n .social-circle li a {\n display: inline-block;\n position: relative;\n margin: 0 auto 0 auto;\n -moz-border-radius: 50%;\n -webkit-border-radius: 50%;\n border-radius: 50%;\n text-align: center;\n width: 60px;\n height: 60px;\n font-size: 22px;\n }\n\n .social-circle li i {\n margin: 0;\n line-height: 60px;\n text-align: center;\n }\n\n .social-circle li a:hover i,\n .triggeredHover {\n -moz-transform: rotate(360deg);\n -webkit-transform: rotate(360deg);\n -ms--transform: rotate(360deg);\n transform: rotate(360deg);\n -webkit-transition: all 0.2s;\n -moz-transition: all 0.2s;\n -o-transition: all 0.2s;\n -ms-transition: all 0.2s;\n transition: all 0.2s;\n }\n\n .social-circle i {\n color: #fff;\n -webkit-transition: all 0.8s;\n -moz-transition: all 0.8s;\n -o-transition: all 0.8s;\n -ms-transition: all 0.8s;\n transition: all 0.8s;\n }\n\n .social-circle a {\n background-color: #ccd8ea;\n }\n\n @media screen and (max-width: 500px) {\n ul.social-network li {\n display: inline;\n margin: 0 5px;\n }\n }\n\n @media screen and (max-width: 450px) {\n ul.social-network li {\n display: inline;\n margin: 0 5px;\n }\n\n .social-circle li a {\n display: inline-block;\n position: relative;\n margin: 0 auto 0 auto;\n -moz-border-radius: 50%;\n -webkit-border-radius: 50%;\n border-radius: 50%;\n text-align: center;\n width: 40px;\n height: 40px;\n font-size: 16px;\n }\n\n .social-circle li i {\n margin: 0;\n line-height: 40px;\n text-align: center;\n }\n }\n\n @media screen and (max-width: 350px) {\n ul.social-network li {\n display: inline;\n margin: 0 2px;\n }\n\n .social-circle li a {\n display: inline-block;\n position: relative;\n margin: 0 auto 0 auto;\n -moz-border-radius: 50%;\n -webkit-border-radius: 50%;\n border-radius: 50%;\n text-align: center;\n width: 40px;\n height: 40px;\n font-size: 16px;\n }\n\n .social-circle li i {\n margin: 0;\n line-height: 40px;\n text-align: center;\n }\n }\n\n body {\n display: flex;\n flex-flow: row wrap;\n align-content: center;\n justify-content: center;\n }\n\n div {\n width: 100%;\n text-align: center;\n }\n\n .number {\n background: #fff;\n position: relative;\n font: 900 30vmin 'Consolas';\n letter-spacing: 5vmin;\n text-shadow:\n 2px -1px 0 #000,\n 4px -2px 0 #0a0a0a,\n 6px -3px 0 #0f0f0f,\n 8px -4px 0 #141414,\n 10px -5px 0 #1a1a1a,\n 12px -6px 0 #1f1f1f,\n 14px -7px 0 #242424,\n 16px -8px 0 #292929;\n }\n\n .number::before {\n background-color: #673ab7;\n background-image: radial-gradient(closest-side at 50% 50%,\n #ffc107 100%,\n rgba(0, 0, 0, 0)),\n radial-gradient(closest-side at 50% 50%,\n #e91e63 100%,\n rgba(0, 0, 0, 0));\n background-repeat: repeat-x;\n background-size: 40vmin 40vmin;\n background-position:\n -100vmin 20vmin,\n 100vmin -25vmin;\n width: 100%;\n height: 100%;\n mix-blend-mode: screen;\n -webkit-animation: moving 10s linear infinite both;\n animation: moving 10s linear infinite both;\n display: block;\n position: absolute;\n content: '';\n }\n\n @-webkit-keyframes moving {\n to {\n background-position:\n 100vmin 20vmin,\n -100vmin -25vmin;\n }\n }\n\n @keyframes moving {\n to {\n background-position:\n 100vmin 20vmin,\n -100vmin -25vmin;\n }\n }\n\n .text {\n font: 400 5vmin 'Courgette';\n }\n\n .text span {\n font-size: 10vmin;\n }\n </style>\n <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"\n integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"\n crossorigin="anonymous"></script>\n <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"\n integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz"\n crossorigin="anonymous"></script>\n </body>\n</html>\n\n
\n