-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
188 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,62 @@ | ||
| <h1>Spam Slaya</h1> | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Spam Slaya - Protect Your Email Identity</title> | ||
|
|
||
| <!-- Bootstrap CSS --> | ||
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | ||
| <!-- Font Awesome --> | ||
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"> | ||
| <!-- Google Fonts --> | ||
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> | ||
| <!-- Custom CSS --> | ||
| <link href="/static/css/style.css" rel="stylesheet"> | ||
| </head> | ||
| <body> | ||
| <nav class="navbar navbar-expand-lg"> | ||
| <div class="container"> | ||
| <a class="navbar-brand fw-bold" href="#"> | ||
| <i class="fas fa-shield-alt"></i> Spam Slaya | ||
| </a> | ||
| </div> | ||
| </nav> | ||
|
|
||
| <main> | ||
| <section class="hero"> | ||
| <div class="container"> | ||
| <div class="row align-items-center min-vh-100"> | ||
| <div class="col-lg-6 hero-content"> | ||
| <h1 class="display-4 fw-bold mb-4 animate-up"> | ||
| Protect Your Email Identity from Spam | ||
| </h1> | ||
| <p class="lead mb-4 animate-up delay-1"> | ||
| Tired of your inbox being flooded with unwanted messages? | ||
| Let's solve that together with Spam Slaya. | ||
| </p> | ||
| <div class="cta-wrapper animate-up delay-2"> | ||
| <a href="https://github.com/yourusername/spam-slaya" | ||
| class="btn btn-primary btn-lg"> | ||
| <i class="fab fa-github me-2"></i> | ||
| View on GitHub | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <div class="col-lg-6 text-center animate-up delay-3"> | ||
| <img src="/static/img/shield.svg" | ||
| alt="Security Shield" | ||
| class="hero-image"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </main> | ||
|
|
||
| <footer class="footer mt-auto py-3"> | ||
| <div class="container text-center"> | ||
| <span class="text-muted">© 2024 Spam Slaya. All rights reserved.</span> | ||
| </div> | ||
| </footer> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,122 @@ | ||
| :root { | ||
| --animation-duration: 0.6s; | ||
| } | ||
|
|
||
| body { | ||
| font-family: 'Inter', sans-serif; | ||
| overflow-x: hidden; | ||
| background-color: #ffffff; | ||
| color: #212529; | ||
| } | ||
|
|
||
| /* Navigation */ | ||
| .navbar { | ||
| padding: 1rem 0; | ||
| position: fixed; | ||
| width: 100%; | ||
| z-index: 1000; | ||
| background: #f8f9fa; | ||
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | ||
| } | ||
|
|
||
| .navbar-brand i { | ||
| margin-right: 0.5rem; | ||
| color: var(--bs-primary); | ||
| } | ||
|
|
||
| /* Hero Section */ | ||
| .hero { | ||
| position: relative; | ||
| min-height: 100vh; | ||
| display: flex; | ||
| align-items: center; | ||
| background: linear-gradient(45deg, #f8f9fa 0%, #e9ecef 100%); | ||
| } | ||
|
|
||
| .hero-content { | ||
| padding: 4rem 0; | ||
| } | ||
|
|
||
| .hero-image { | ||
| max-width: 80%; | ||
| height: auto; | ||
| filter: drop-shadow(0 0 2rem rgba(13, 110, 253, 0.2)); | ||
| } | ||
|
|
||
| /* Animations */ | ||
| .animate-up { | ||
| opacity: 0; | ||
| transform: translateY(30px); | ||
| animation: fadeInUp var(--animation-duration) ease forwards; | ||
| } | ||
|
|
||
| .delay-1 { | ||
| animation-delay: 0.2s; | ||
| } | ||
|
|
||
| .delay-2 { | ||
| animation-delay: 0.4s; | ||
| } | ||
|
|
||
| .delay-3 { | ||
| animation-delay: 0.6s; | ||
| } | ||
|
|
||
| @keyframes fadeInUp { | ||
| from { | ||
| opacity: 0; | ||
| transform: translateY(30px); | ||
| } | ||
| to { | ||
| opacity: 1; | ||
| transform: translateY(0); | ||
| } | ||
| } | ||
|
|
||
| /* CTA Button */ | ||
| .btn-primary { | ||
| padding: 0.8rem 2rem; | ||
| font-weight: 600; | ||
| transition: transform 0.3s ease; | ||
| } | ||
|
|
||
| .btn-primary:hover { | ||
| transform: translateY(-2px); | ||
| } | ||
|
|
||
| /* Responsive Design */ | ||
| @media (max-width: 991.98px) { | ||
| .hero-content { | ||
| text-align: center; | ||
| padding: 6rem 0 2rem; | ||
| } | ||
|
|
||
| .hero-image { | ||
| margin-top: 2rem; | ||
| max-width: 60%; | ||
| } | ||
|
|
||
| .navbar { | ||
| padding: 0.75rem 0; | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 767.98px) { | ||
| .hero h1 { | ||
| font-size: 2.25rem; | ||
| margin-top: 2rem; | ||
| } | ||
|
|
||
| .hero-image { | ||
| max-width: 80%; | ||
| } | ||
|
|
||
| .hero-content { | ||
| padding-top: 8rem; | ||
| } | ||
|
|
||
| .navbar { | ||
| padding: 0.5rem 0; | ||
| height: auto; | ||
| } | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.