search

CatsInTech / GitHub-ReadMe

This is a React Project where you can customise your GitHub ReadMe with all the available cool things.
http://githubreadme.co/
MIT License
52 stars 89 forks source link

[Feature Landing Page] Add 404 Error Page #10

Closed PatilHarshh closed 1 year ago

PatilHarshh commented 1 year ago

this seems that you website not contain 404 error page . while entering any url it is showing home page which is not good @praveenscience

PatilHarshh commented 1 year ago

please assign it to me @praveenscience

praveenscience commented 1 year ago

There's an Error page but not added... Lemme check... Thanks for raising this! 💪🏻

praveenscience commented 1 year ago

Hey this is a quick one for you. Make a 404.html on the root of the website branch with the following code. This should work:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <base href="https://githubreadme.co" />

    <!-- SEO Meta description -->
    <meta name="description" content="GitHub ReadMe: Elevating Your Projects & Profile to New Heights!" />
    <meta name="author" content="Cats in Tech" />

    <!-- OG Meta Tags to improve the way the post looks when you share the page on LinkedIn, Facebook, Google+ -->
    <meta property="og:site_name" content="GitHub ReadMe: Elevating Your Projects & Profile to New Heights!" />
    <!-- website name -->
    <meta property="og:site" content="GitHub ReadMe: Elevating Your Projects & Profile to New Heights!" />
    <!-- website link -->
    <meta property="og:title" content="GitHub ReadMe: Elevating Your Projects & Profile to New Heights!" />
    <!-- title shown in the actual shared post -->
    <meta property="og:description" content="GitHub ReadMe: Elevating Your Projects & Profile to New Heights!" />
    <!-- description shown in the actual shared post -->
    <meta property="og:image" content="https://i.imgur.com/axJ4xmal.png" />
    <!-- image link, make sure it's jpg -->
    <meta property="og:url" content="https://GitHubReadMe.co/" />
    <!-- where do you want your post to link to -->
    <meta property="og:type" content="article" />

    <!--title-->
    <title>GitHub ReadMe: Elevating Your Projects & Profile to New Heights!</title>

    <!--favicon icon-->
    <link rel="icon" href="/img/favicon.png" type="image/png" sizes="16x16" />

    <!--google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700%7COpen+Sans&display=swap" rel="stylesheet" />

    <!--Bootstrap css-->
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <!--Magnific popup css-->
    <link rel="stylesheet" href="/css/magnific-popup.css" />
    <!--Themify icon css-->
    <link rel="stylesheet" href="/css/themify-icons.css" />
    <!--animated css-->
    <link rel="stylesheet" href="/css/animate.min.css" />
    <!--Owl carousel css-->
    <link rel="stylesheet" href="/css/owl.carousel.min.css" />
    <link rel="stylesheet" href="/css/owl.theme.default.min.css" />
    <!--custom css-->
    <link rel="stylesheet" href="/css/style.css" />
    <!--responsive css-->
    <link rel="stylesheet" href="/css/responsive.css" />
  </head>
  <body>
    <!--loader start-->
    <div id="preloader">
      <div class="loader1">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <!--loader end-->

    <!--body content wrap start-->
    <div class="main">
      <!--hero section start-->
      <section class="hero-section ptb-100 gradient-overlay full-screen" style="background: url('https://i.imgur.com/RSghzyt.jpg') no-repeat center center / cover">
        <div class="container">
          <div class="row align-items-center justify-content-center">
            <div class="col-md-9 col-lg-7">
              <div class="error-content text-center text-white">
                <div class="notfound-404"><h1 class="text-white">404</h1></div>
                <h3 class="text-white">Sorry, something went wrong</h3>
                <p>The page you are looking for might have been removed had its name changed or is temporarily unavailable.</p>
                <a class="btn outline-white-btn" href="/">Go to Homepage</a>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!--hero section end-->
    </div>
    <!--body content wrap end-->

    <!--jQuery-->
    <script src="/js/jquery-3.4.1.min.js"></script>
    <!--Popper js-->
    <script src="/js/popper.min.js"></script>
    <!--Bootstrap js-->
    <script src="/js/bootstrap.min.js"></script>
    <!--Magnific popup js-->
    <script src="/js/jquery.magnific-popup.min.js"></script>
    <!--jquery easing js-->
    <script src="/js/jquery.easing.min.js"></script>
    <!--wow js-->
    <script src="/js/wow.min.js"></script>
    <!--owl carousel js-->
    <script src="/js/owl.carousel.min.js"></script>
    <!--countdown js-->
    <script src="/js/jquery.countdown.min.js"></script>
    <!--validator js-->
    <script src="/js/validator.min.js"></script>
    <!--custom js-->
    <script src="/js/scripts.js"></script>
  </body>
</html>

You can see a preview here: JSBin.

praveenscience commented 1 year ago

I'll wait for your first ever pull request! 💪

PatilHarshh commented 1 year ago

sure i will grind for it @praveenscience

PatilHarshh commented 1 year ago

@praveenscience how routing is possible then , are you expecting by done through javascript or its alternative by making component and route through app.jsx

praveenscience commented 1 year ago

Are you talking about the App or Landing Page?

PatilHarshh commented 1 year ago

see as you said make 404.html this must require routing right ! In this how you expect me routing through javacript or another alternative idea i have to make 404.jsx component and route in through app.jsx . whats your opinion? @praveenscience

praveenscience commented 1 year ago

I am currently talking about the Landing Page 404. Adding this as a 404.html will fix. But if you're talking about App 404 page, yea, it has to be a JSX (with .js file extension).

truptiwagh13 commented 1 year ago

Since this issue is no longer actively discussed, I can proceed with

praveenscience commented 1 year ago

Sure it's yours! 😊

PatilHarshh commented 1 year ago

@praveenscience i was about to PR or please assign in collaboration

praveenscience commented 1 year ago

@praveenscience i was about to PR or please assign in collaboration

You didn't say anything for almost three days just for copy pasting! 😞

praveenscience commented 1 year ago

I'll add something for you as well @PatilHarshh...

PatilHarshh commented 1 year ago

please re-assign this if not done in 3 days @praveenscience

praveenscience commented 1 year ago

Will reassign this to you @PatilHarshh if this is not completed in 3 hours! 💪

praveenscience commented 1 year ago

@truptiwagh13 Oh wow, that was super quick! 👍 It was not even 30 mins! 🤯