Compare commits

...

2 Commits

  1. 4
      Index.html
  2. BIN
      image/casino.png
  3. 8
      loading.js
  4. BIN
      police/casino.TTF
  5. 0
      style.css
  6. 99
      styles.css

4
Index.html

@ -8,10 +8,12 @@
<title></title> <title></title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="styles.css">
</head> </head>
<body> <body>
<img src="logo.jpeg"
<div class="loader"> <div class="loader">
<span class="lettre">7</span> <span class="lettre">7</span>

BIN
image/casino.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

8
loading.js

@ -0,0 +1,8 @@
const loader = document.querySelector('.loader');
window.addEventListener('load', () => {
loader.classList.add('fondu-out');
})

BIN
police/casino.TTF

Binary file not shown.

0
style.css

99
styles.css

@ -0,0 +1,99 @@
.loader {
position: absolute;
width: 100%;
height: 100%;
background: white;
display: flex;
justify-content: center;
align-items: center;
}
.lettre {
color: #9700ff;
font-family: casino;
font-size: 80px;
letter-spacing: 15px;
margin-bottom: 150px;
animation: flash 1.2s linear infinite;
}
@keyframes flash {
0% {
color: #ff2d00;
text-shadow: 0 0 7px #ff2d00;
}
90% {
color: #9700ff;
text-shadow: none;
}
100% {
color: #ff2d00;
text-shadow: 0 0 7px #ff2d00;
}
}
.lettre:nth-child(1){
animation-delay: 0.1s;
}
.lettre:nth-child(2){
animation-delay: 0.2s;
}
.lettre:nth-child(3){
animation-delay: 0.3s;
}
.fondu-out {
opacity: 0;
transition: opacity 0.4s ease-out;
}
@font-face {
font-family: "casino";
src: url("/police/casino.TTF") format("woff2"),
}
Loading…
Cancel
Save