Untitled

<html>
  <head>
   <!-- Meta + Favicon -->
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width" />
   <link rel="shortcut icon" type="image/png" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcOKthGUVnhgfnnvMt9uNWerc2_Aizm6Y6CuJTXD5EXPSeQTIa"/>
   <link rel="shortcut icon" type="image/png" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTcOKthGUVnhgfnnvMt9uNWerc2_Aizm6Y6CuJTXD5EXPSeQTIa"/>
    <!-- Contenu de la page + Meta-->

<html>
        <title>Accueil - MyBot</title>
        <meta charset="UTF-8">
        <link href="https://fonts.googleapis.com/css?family=Chakra+Petch" rel="stylesheet">
	</head>
    <style>
    @font-face {
      font-family: 'Chakra Petch', sans-serif; format('truetype');
    }

    html, body {
        margin: 0;
        font-family: 'Chakra Petch';
        height: 100%;
		margin: 0;
        padding: 0;
        overflow: hidden;
    }

	p{
		color: #fff
	}

    a:link    {color:#fff;}
    a:visited {color:#fff;}
    a:hover   {color:#000;}
    a:active  {color:#fff;}

    #main {
        background-image: url(https://i.imgur.com/IKiegTO.jpg);
        background-size: cover;
        height: 100%;
		margin: 0;
        padding: 0;

    }


    #title {
        color: white;
        font-size: 4em;
        margin: 0;
        position: absolute;
        top: 50%;
        width: 100%;
        transform: translate(0, -50%);
        text-align: center;
        animation: overlapcolor 2s ease-out;
        z-index: 99;
        opacity: 1;
    }

    @keyframes overlapcolor {
        0% {
            color: black;
            opacity: 0;
        }

        25% {
            opacity: 0;
        }

        50% {
            color: black;
            opacity: 1;
        }

        100% {
            color: white;
        }
    }

    #title::after {
        animation: cursoranim 1s infinite, hideAtStart 2.5s linear;
        animation-timing-function: step-end;
        content: "|";
        margin-left: 5px;
    }

    @keyframes hideAtStart {
        0% {
            opacity: 0;
        }

        99.99% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes cursoranim {
        0% {
            color: transparent;
        }


        50% {
            color: white;

        }
    }

    #menu {
        text-align: center;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 0;
        position: absolute;
        bottom: 0;
    }

    #menu li {
        display: inline;
        margin: 0px 25px 0px 25px;
        font-size: 1.8em;
        transition: all 0.2s;
        text-decoration: underline;
    }

    #menu li:hover {
        font-size: 2.6em;
        cursor: pointer;
    }

    #transition-placeholder {
        position: absolute;
        top: 100%;
        width: 100%;
        height: 100%;
        background-color: #212121;
        animation: overlap 2s cubic-bezier(0, 0, 0.08, 1.02);
    }

    @keyframes overlap {
        0% {
            top: 0%;
        }

        50% {
            top: 0%;
        }

        100% {
            top: 100%;
        }

    }
  </style>
    <body onscroll="bodyScroll()">
        <div id="main">
            <p id="title">MyBot 🤖</p>

            <ul id="menu">
                <a href= "https://google.com"><li>Liste des plugins</li></a>
                <a href= "https://discord.gg/C6MwMrE"><li>Notre discord</li></a>
                <a href= "https://jupiter226.1mb.site/contact"><li>Page de contact</li></a>
				<p>Fait avec ❤️ par <a href= "https://discord.gg/C6MwMrE">Archange226</a>
            </ul>
        </div>

        <div id="transition-placeholder"></div>

        <script type="text/javascript">
            var scrollTimer;
            function bodyScroll() {
                if (scrollTimer != -1)
                    clearTimeout(scrollTimer);

                scrollTimer = window.setTimeout("scrollFinished()", 500);
            }

            function scrollFinished() {
                window.location = toUrl;
            }
        </script>
	    </body>
	    <!-- Made with ❤️ by Archange226 -->
</html>