WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Page héros du portfolio
3295
asimabbasi
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
14 January 2025
Exemple de page Web de portfolio
28 December 2024
Un répertoire de page d'accueil alternatif
20 March 2025
Bingles - Page d'accueil d'une entreprise de formation informatique
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);
