WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
3100
asimabbasi
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
22 March 2025
La mia scuola
23 August 2025
Modello HTML CSS della pagina di accesso della SEAT Leon
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);
