File manager

File manager - Edit - /home/autoph/public_html/vCard/index.html

Back
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Calling Cards</title> <style> /* Body setup to center the calling card on the page / body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-image: url('LUX_a.jpg'); / Background image for the entire page / background-size: cover; background-position: center; background-attachment: fixed; / Keeps the background fixed when scrolling / display: flex; justify-content: center; align-items: center; height: auto; / Ensure the body takes up the full height / text-align: center; flex-direction: column; / Ensure only one card per line / } / Container for the calling cards with flexbox layout / .calling-card-container { display: flex; flex-direction: column; / One card per line / gap: 30px; / Space between the cards / align-items: center; / Center the cards / } / Style for each calling card / .calling-cardA { width: 800px; height: 450px; display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.6); border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; background-image: url('images/Slide1.png'); / Background image for each calling card / background-size: cover; background-position: center; } / Style for each calling card / .calling-cardB { width: 800px; height: 450px; display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.6); border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; background-image: url('images/Slide2.png'); / Background image for each calling card / background-size: cover; background-position: center; } / Style for each calling card / .calling-cardC { width: 800px; height: 450px; display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.6); border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; background-image: url('images/Slide4.png'); / Background image for each calling card / background-size: cover; background-position: center; } / Style for each calling card / .calling-cardD { width: 800px; height: 450px; display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.6); border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; background-image: url('images/Slide3.png'); / Background image for each calling card / background-size: cover; background-position: center; } / Style for each calling card / .calling-cardE { width: 800px; height: 450px; display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.6); border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; background-image: url('images/Slide5.png'); / Background image for each calling card / background-size: cover; background-position: center; } / Style for each calling card / .calling-cardF { width: 800px; height: 450px; display: flex; flex-direction: column; background: rgba(0, 0, 0, 0.6); border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; background-image: url('images/LUX_f.jpg'); / Background image for each calling card / background-size: cover; background-position: center; } / Title at the upper right / .title { position: absolute; top: 20px; right: 20px; color: white; font-size: 26px; font-weight: bold; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); line-height: 1.2; } / The content area for the name, position, and contact details at the lower right */ .info { position: absolute; bottom: 20px; right: 20px; color: white; text-align: right; } .info h1 { font-size: 22px; margin: 5px 0; } .info p { font-size: 16px; margin: 5px 0; } .info .title { font-weight: bold; } .contact-info p { margin: 5px 0; font-size: 14px; } .social-links a { text-decoration: none; color: #0077b5; margin-right: 10px; font-size: 14px; } </style> </head> <body> <div class="calling-card-container"> <!-- 1st Calling Card --> <div class="calling-cardA"> <div class="title"></div> <div class="info"> </div> </div> <!-- 2nd Calling Card --> <div class="calling-cardB"> <div class="title"></div> <div class="info"> </div> </div> <!-- 3rd Calling Card --> <div class="calling-cardC"> <div class="title"></div> <div class="info"> </div> </div> <!-- 4th Calling Card --> <div class="calling-cardD"> <div class="title"></div> <div class="info"> </div> </div> <!-- 5th Calling Card --> <div class="calling-cardE"> <div class="title"> </div> <div class="info"> </div> </div> </div> </body> </html>

| ver. 1.4 | . | PHP 7.3.33 | Generation time: 0 | proxy | phpinfo | Settings