10nis Posted May 22, 2021 Posted May 22, 2021 Hello everyone ! I'm 10nis, a french student. I'm starting on spacesquare and i didn't succeed to create a loading page on my own. I already have my code but I don't manage to insert it on spacesquare. Please someone help me ! I passed all the day navigating on YT trying to find something helpful but I didn't. Here is the HTML and CSS file i'm going to use. HTML : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Baffle JS Text Reveal</title> <link rel="stylesheet" href="style.css"> <!-- use cdn for the library / link the library file --> <script src="https://cdn.jsdelivr.net/npm/baffle@0.3.6/dist/baffle.min.js"></script> <body> <div class="container"> <div class="data">Welcome</div> </div> <script type="text/javascript"> const text = baffle(".data"); text.set({ characters : '█▓█ ▒░/▒░ █░▒▓/ █▒▒ ▓▒▓/█ ░█▒/ ▒▓░ █<░▒ ▓/░>', speed: 120 }); text.start(); text.reveal(4000); </script> </body> </html> CSS : html, body { margin: 0; padding: 0; width: 100%; height: 100vh; background: #101010; } @font-face { font-family:'Komoda'; src: url('Komoda.otf'); } .data { font-family:'Kamoda'; color: #fff; font-size: 70px; letter-spacing: 12px; font-weight: 600; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
tuanphan Posted May 24, 2021 Posted May 24, 2021 Hi. Can you share link to your site? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Archived
This topic is now archived and is closed to further replies.