WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Portfolio hero page
3101
asimabbasi
Open In Editor
Publish Your Code
Recommended
28 June 2025
404 Error Page HTML Template
5 May 2025
Futuristic Login Page Design with Glassmorphism
6 December 2024
Landing Page - Galaxy S24 Ultra 5G
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);
