Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Page Title</title>
- <style>
- body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background-color: #f0f0f0; }
- header { text-align: center; margin-bottom: 10px; width: 100%; }
- nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; }
- nav a { text-decoration: none; color: white; background-color: #007bff; padding: 10px 20px; border-radius: 5px; transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); }
- nav a:hover { background-color: #0056b3; transform: translateY(-3px); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4); }
- nav a:active { transform: translateY(1px); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
- main { max-width: 800px; padding: 20px; background-color: white; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin-top: 20px; text-align: left; }
- footer { margin-top: 20px; text-align: center; }
- .cc-license { display: flex; align-items: center; justify-content: center; margin-top: 20px; }
- .cc-license img { margin-left: 10px; }
- .post { margin-bottom: 20px; margin-top:20px; }
- .post p { margin-bottom: 20px; }
- .video-container { position: relative; width: 100%; max-width: 800px; height: 0; padding-bottom: 56.25%; margin: 0 auto; }
- .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
- </style>
- <script>
- function confirmNavigation(e, name, url){e.preventDefault();if(confirm(`You clicked on the "${name}" link.\nThis will take you to ${url}\nDo you want to proceed?`)){window.location.href=url;}}
- </script>
- </head>
- <body>
- <header>
- <h1>Page Title</h1>
- <p>Company Tagline</p>
- </header>
- <nav>
- <a href="https://www.facebook.com/" onclick="confirmNavigation(event, 'Facebook', this.href)">Facebook</a>
- <a href="https://x.com/" onclick="confirmNavigation(event, 'X', this.href)">X</a>
- <a href="https://www.youtube.com/" onclick="confirmNavigation(event, 'YouTube', this.href)">YouTube</a>
- <a href="https://gab.com/" onclick="confirmNavigation(event, 'Gab', this.href)">Gab</a>
- <a href="mailto:" onclick="confirmNavigation(event, 'E-Mail', this.href)">E-Mail</a>
- <a href="#license">Creative Commons</a>
- </nav>
- <main>
- <p>Welcome to Page Title.</p>
- <h2>Blog</h2>
- <div id='blog-entries'>
- <div class='post'>Tue Mar 18 02:39:40 PDT 2025:<p><h3>Big Buck Bunny 60fps 4K - Official Blender Foundation Short Film</h3></p><p>Channel: Blender</p></div><div class='video-container'><iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/aqz-KE-bpKQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
- </div>
- </main>
- <footer>
- <div class="cc-license">
- <h2 id="license">This work is licensed under:</h2>
- <img src="https://licensebuttons.net/l/by/4.0/88x31.png" alt="Creative Commons License" title="Creative Commons License">
- </div>
- <p><a href="https://creativecommons.org/licenses/by/4.0/" onclick="confirmNavigation(event, 'Creative Commons License', this.href)">Creative Commons Attribution 4.0 International License</a>.</p>
- </footer>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
