WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
3102
asimabbasi
Im Editor öffnen
Veröffentlichen Sie Ihren Code
19 March 2025
Zielseite des Computershops
19 September 2025
CSS-Animation: Bewegung der Bürokratiefigur
HTML
Copy
<!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.0" /> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="css/font-awesome.css" /> <link rel="stylesheet" href="css/bootstrap.css" /> <link rel="stylesheet" href="css/lightbox.min.css" /> <link rel="stylesheet" href="css/styles.css" /> <title>Asim Abbasi | Frontend Web Developer</title> </head> <header class="header vh-100 text-center position-relative"> <div class="text-container position-relative d-flex flex-column justify-content-center align-items-center h-100" > <h5 class="text-primary fs-3 fw-bold text-uppercase">Hello, World.</h5> <h1 id="typing-text" class="display-1 fw-bold text-white"></h1> <p class="roles text-white text-uppercase fs-4"> <span>Front-end Web Developer | </span> <span>Ui/Ux Designer</span> </p> <a href="#about" class="btn btn-outline-light btn-lg mt-3"> <div class="d-flex"> <div class="me-3"> <i class="fas fa-chevron-down"></i> </div> <div class="text-start"> <span>More About Me</span> </div> </div> </a> <div class="social d-flex gap-3 position-absolute"> <a href="#"> <i class="fab fa-twitter fa-3x text-white"></i> </a> <a href="#"> <i class="fab fa-instagram fa-3x text-white"></i> </a> <a href="#"> <i class="fab fa-linkedin fa-3x text-white"></i> </a> <a href="#"> <i class="fab fa-facebook fa-3x text-white"></i> </a> <a href="#"> <i class="fab fa-youtube fa-3x text-white"></i> </a> <a href="#"> <i class="fab fa-github fa-3x text-white"></i> </a> </div> </div> </header> <body> <script src="js/bootstrap.bundle.min.js"></script> <script src="js/lightbox-plus-jquery.min.js"></script> <script src="js/script.js"></script> </body> </html> <!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.0" /> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="css/font-awesome.css" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.css" integrity="sha512-Woz+DqWYJ51bpVk5Fv0yES/edIMXjj3Ynda+KWTIkGoynAMHrqTcDUQltbipuiaD5ymEo9520lyoVOo9jCQOCA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="css/styles.css" /> <title>Asim Abbasi | Frontend Web Developer</title> </head> <header class="header vh-100 text-center position-relative"> <div class="text-container position-relative d-flex flex-column justify-content-center align-items-center h-100" > <h5 class="text-primary fs-3 fw-bold text-uppercase">Hello, World.</h5> <h1 id="typing-text" class="display-1 fw-bold text-white"></h1> <p class="roles text-white text-uppercase fs-4"> <span>Front-end Web Developer | </span> <span>Ui/Ux Designer</span> </p> <a href="#about" class="btn btn-outline-light btn-lg mt-3"> <div class="d-flex"> <div class="me-3"> <i class="fas fa-chevron-down"></i> </div> <div class="text-start"> <span>More About Me</span> </div> </div> </a> <div class="social d-flex gap-3 position-absolute"> <a href="#"> <i class="fab fa-twitter fa-3x text-white"></i> </a> <a href="#"> <i class="fab fa-instagram fa-3x text-white"></i> </a> <a href="#"> <i class="fab fa-linkedin fa-3x text-white"></i> </a> <a href="#"> <i class="fab fa-facebook fa-3x text-white"></i> </a> <a href="#"> <i class="fab fa-youtube fa-3x text-white"></i> </a> <a href="#"> <i class="fab fa-github fa-3x text-white"></i> </a> </div> </div> </header> <body> <script src="js/bootstrap.bundle.min.js"></script> <script src="js/lightbox-plus-jquery.min.js"></script> <script src="js/script.js"></script> </body> </html>
CSS
Copy
.header { background: #151515 url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQhvTHrHLFFSOaJ-hb2FgM_rJAh22JShuAzHb28rt4sIeSGpvqH) center center no-repeat; background-size: cover; background-attachment: fixed; } .header::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); } .header .text-container { z-index: 10; } .header .social { bottom: 50px; } @media (max-width: 747px) { .header .social i { font-size: 30px; } .header .roles { font-size: 18px !important; } }
JS
Copy
function runTypingEffect() { const text = "I am Asim Abbasi."; const typingElement = document.getElementById("typing-text"); const typingDelay = 100; typeText(text, typingElement, typingDelay); } function typeText(text, typingElement, delay) { for (let i = 0; i < text.length; i++) { setTimeout(() => { typingElement.textContent += text.charAt(i); }, delay * i); } } document.addEventListener("DOMContentLoaded", runTypingEffect);
