Untitled

<!DOCTYPE html>
<html lang="fr">
<head>

<style>
@font-face { font-family: basic; src: url("src/fonts/basic.otf") format("opentype"); }
body{
		background: url('src/backgrounds/mobile_space.jpg');
		margin: 0;
}
a{
		text-decoration: none;
}
#white-bar{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55px;
  line-height: 55px;
  background: #fff;
  box-shadow: 0 0 3px #fff;
  display: table;
}
#landing{
  position: absolute;
  top: 25%;
  left: 0;
  width: 100%;
  animation: cssAnimation 3s forwards;
}
#register{
		position: absolute;
		font-size: 13px;
		top: 15px;
		right: 20px;
		color: #fff;
		background: #0076F4;
		font-family: basic;
		padding: 5px 15px 7px 15px;
		border-radius: 15px;
}
#login{
		position: absolute;
		font-size: 13px;
		top: 15px;
		right: 105px;
		color: #0076F4;
		font-family: basic;
		padding: 5px 15px 7px 15px;
}
#message{
		position: relative;
		left: 37%;
		padding-right: 8px;
		vertical-align: middle;
		border-right: 1px solid #ccc;
}
#search{
		position: relative;
		left: 17%;
		width: 20px;
		padding-top: 2px;
		vertical-align: middle;
}
#welcome{
		width: 100%;
		text-align: center;
		font-family: basic;
		position: absolute;
		top: 10%;
		color: #fff;
		font-size: 26px;
		font-weight: bold;
		letter-spacing: 1px;
		animation: cssAnimation 2s forwards;
}
#desc{
		width: 100%;
		text-align: center;
		font-family: basic;
		position: absolute;
		top: 17%;
		color: #fff;
		font-size: 15px;
		letter-spacing: 1px;
  animation: cssAnimation 3s forwards;
}

@keyframes cssAnimation {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
#members{
		width: 100%;
		text-align: center;
		font-family: basic;
		position: absolute;
		bottom: 12%;
		color: #fff;
		font-size: 35px;
}
#members p {
		display: inline-block;
		vertical-align: top;
		animation: cssAnimation 3s forwards;
}
#pricing{
		text-align: center;
		font-family: basic;
		position: absolute;
		bottom: 26%;
		color: #fff;
		font-size: 18px;
		background: #0076F4;
		padding: 5px 15px 7px 15px;
		border-radius: 25px;
		right: 28%;
		left : 28%;
		box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.6);
		animation: cssAnimation 3s forwards;
}
#counter{
		font-weight: bold;
}
#m-info{
		width: 100%;
		text-align: center;
		font-family: basic;
		position: absolute;
		bottom: 8%;
		font-size: 30px;
		color: #fff;
		font-weight: normal;
		animation: cssAnimation 3s forwards;
}
#more{
  width: 100%;
		text-align: center;
		font-family: basic;
		position: absolute;
		bottom: 5%;
		font-size: 13px;
		color: #0076F4;
		font-weight: normal;
		animation: cssAnimation 3s forwards;
		text-decoration: underline;
}
#ship{
		vertical-align: middle;
		position: relative;
		left: 24px;
		width: 48px;
}
</style>
<script>
function wait(time) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve();
        }, time);
    });
}

window.onload = async function start(){
  for (i = 0; i < 100; i++) {
    await wait(10);
     document.getElementById("counter").innerHTML = i;
  }
}
</script>
</head>
<body>
<div id="white-bar">
  <img id="ship" src="src/icons/ship.png">
  <img id="message" src="src/icons/message.svg">
  <img id="search" src="src/icons/search.png">
</div>
<p id="welcome">Welcome on Instarise. 🚀</p>
<p id="desc">Make your Instagram Account rise! 💬</p>
<a id="login" href="login">Login</a>
<a id="register" href="register">Sign Up</a>
<div id="members"><p id="counter">0</p><p> Customers</p></div>
<p id="m-info">Are using our services.<br></p>
<a id="pricing" href="pricing">Start Rising! 👨‍🚀</a>
<a id="more" href="more">Learn More ➙</a>
<img id="landing" src="src/backgrounds/mobile_landing.png">
</body>
</html>