WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
2727
asimabbasi
Im Editor öffnen
Veröffentlichen Sie Ihren Code
27 September 2024
Herzklopfen
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);
