feat: add initial static website for Duck.cash

Introduced foundational static pages for the Duck.cash site, including homepage, 404 error page, and access-limited page. Implemented Bootstrap and custom styles for consistency and responsiveness. Added essential images and assets. Enhances user experience by ensuring clear navigation and presenting a professional interface.
This commit is contained in:
Kumi 2024-08-05 19:37:20 +02:00
commit c97eaf26ff
Signed by: kumi
GPG key ID: ECBCC9082395383F
8 changed files with 634 additions and 0 deletions

81
404.html Normal file
View file

@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Duck.cash - Page Not Found</title>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link href="assets/css/style.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img
src="assets/img/duckcash-duck.png"
alt="Duck Logo"
width="60"
height="60"
/>
Duck.cash</a
>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="index.html#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="error-page">
<div>
<h1>404</h1>
<p>Oops! The page you are looking for does not exist.</p>
<a href="index.html" class="btn btn-lg">Go Back Home</a>
</div>
</div>
<footer class="mt-5">
<p>&copy; 2023 Duck.cash. All rights reserved.</p>
<a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a>
</footer>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
</body>
</html>

211
assets/css/style.css Normal file
View file

@ -0,0 +1,211 @@
body {
font-family: 'Roboto', sans-serif;
color: #333;
background-color: #f4f4f9;
}
.navbar {
background-color: #00695c;
padding: 1rem;
}
.navbar-brand,
.nav-link {
color: white !important;
font-weight: bold;
}
.navbar-brand:hover,
.nav-link:hover {
color: #FFEB3B !important;
}
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/header.png') no-repeat center center/cover;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-align: center;
padding: 0 2rem;
}
.hero h1 {
font-size: 4rem;
margin: 0;
animation: fadeInDown 1s;
}
.hero p {
font-size: 1.5rem;
margin: 1rem 0 0;
animation: fadeInUp 1s;
}
.hero .btn {
animation: fadeInUp 1.5s;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.features,
.testimonials,
.contact {
padding: 4rem 2rem;
text-align: center;
}
.features h2,
.testimonials h2,
.contact h2 {
font-size: 2.5rem;
margin-bottom: 2rem;
}
.feature,
.testimonial {
margin: 1rem 0;
}
.feature .icon {
font-size: 3rem;
color: #4CAF50;
margin-bottom: 1rem;
}
.testimonial .icon {
font-size: 3rem;
color: #FFD700;
margin-bottom: 1rem;
}
.contact form {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 500px;
margin: 0 auto;
}
.card {
border: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
background: linear-gradient(135deg, #f4f4f9, #ffffff);
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
footer {
background-color: #00695c;
color: white;
text-align: center;
padding: 2rem 2rem;
}
footer p {
margin: 0;
font-size: 1rem;
}
footer a {
color: #FFEB3B;
text-decoration: none;
font-weight: bold;
}
footer a:hover {
color: #ffffff;
}
.btn-primary {
background-color: #4CAF50;
border: none;
}
.btn-primary:hover {
background-color: #45a049;
}
.cta-section {
background: linear-gradient(135deg, #4CAF50, #81C784);
color: white;
padding: 4rem 2rem;
text-align: center;
}
.cta-section h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.cta-section p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
.cta-section .btn {
background-color: white;
color: #4CAF50;
border: none;
}
.cta-section .btn:hover {
background-color: #f4f4f9;
}
.error-page {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #333;
}
.error-page h1 {
font-size: 6rem;
margin-bottom: 1rem;
color: #00695c;
}
.error-page p {
font-size: 1.5rem;
margin-bottom: 2rem;
}
.error-page .btn {
background-color: #4CAF50;
color: white;
border: none;
}
.error-page .btn:hover {
background-color: #45a049;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 322 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 559 KiB

BIN
assets/img/duckcash.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
assets/img/header.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 MiB

260
index.html Normal file
View file

@ -0,0 +1,260 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Duck.cash - The Preferred Payment Method for Ducks</title>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link href="assets/css/style.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img
src="assets/img/duckcash-duck.png"
alt="Duck Logo"
width="60"
height="60"
/>
Duck.cash</a
>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<section class="hero">
<div>
<h1>Quack Your Way to Easy Payments</h1>
<p>
Join the revolution with Duck.cash, where simplicity meets security.
</p>
<a href="#features" class="btn btn-primary btn-lg mt-3">Learn More</a>
</div>
</section>
<section id="features" class="features">
<div class="container">
<h2>Features</h2>
<div class="row">
<div class="col-md-4">
<div class="feature card p-4">
<div class="card-body">
<div class="icon"><i class="fas fa-user-friends"></i></div>
<h3 class="card-title">Easy to Use</h3>
<p class="card-text">
Our user-friendly interface ensures that even the most
tech-averse ducks can make transactions with ease.
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature card p-4">
<div class="card-body">
<div class="icon"><i class="fas fa-shield-alt"></i></div>
<h3 class="card-title">Secure Transactions</h3>
<p class="card-text">
With advanced encryption and security measures, your nest egg
is always safe.
</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="feature card p-4">
<div class="card-body">
<div class="icon"><i class="fas fa-rocket"></i></div>
<h3 class="card-title">Instant Transfers</h3>
<p class="card-text">
Experience the speed of instant payments, making your life
more convenient.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="testimonials" class="testimonials">
<div class="container">
<h2>What Ducks Are Saying</h2>
<div class="row">
<div class="col-md-6">
<div class="testimonial card p-4">
<div class="card-body">
<div class="icon"><i class="fas fa-quote-left"></i></div>
<h3 class="card-title">Ryan Duckling</h3>
<p class="card-text">
"Duck.cash has made my life so much easier. No more waddling
to the bank!"
</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="testimonial card p-4">
<div class="card-body">
<div class="icon"><i class="fas fa-quote-left"></i></div>
<h3 class="card-title">Reginald O'Quackell</h3>
<p class="card-text">
"I love how secure and fast Duck.cash is. Highly recommend it
to all my feathered friends!"
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="pricing" class="pricing-section">
<div class="container">
<h2>Pricing</h2>
<div class="row">
<div class="col-md-4">
<div class="pricing-card card p-4">
<div class="card-body">
<h3 class="card-title">Basic</h3>
<p class="price"><i class="fas fa-bread-slice" title="Slices of Bread"></i> 0/month</p>
<p class="card-text">Basic features for individual ducks.</p>
<ul class="list-unstyled">
<li>Easy to Use</li>
<li>Secure Transactions</li>
<li>Instant Transfers</li>
</ul>
<a href="unavailable.html" class="btn btn-primary">Get Started</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="pricing-card card p-4">
<div class="card-body">
<h3 class="card-title">Pro</h3>
<p class="price"><i class="fas fa-bread-slice" title="Slices of Bread"></i> 10/month</p>
<p class="card-text">Advanced features for power ducks.</p>
<ul class="list-unstyled">
<li>All Basic Features</li>
<li>Priority Support</li>
<li>Advanced Analytics</li>
</ul>
<a href="unavailable.html" class="btn btn-primary">Get Started</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="pricing-card card p-4">
<div class="card-body">
<h3 class="card-title">Enterprise</h3>
<p class="price"><i class="fas fa-bread-slice" title="Slices of Bread"></i> 50/month</p>
<p class="card-text">
Complete solutions for duck enterprises.
</p>
<ul class="list-unstyled">
<li>All Pro Features</li>
<li>Custom Solutions</li>
<li>Dedicated Support</li>
</ul>
<a href="unavailable.html" class="btn btn-primary">Get Started</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="cta-section">
<div class="container">
<h2>Ready to Join the Revolution?</h2>
<p>
Experience the future of duck payments with Duck.cash. Sign up now and
make your transactions as smooth as a duck's feathers.
</p>
<a href="unavailable.html" class="btn btn-lg btn-primary">Sign Up Now</a>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<h2>Contact Us</h2>
<form action="unavailable.html" method="get">
<div class="form-group mb-3">
<input
type="text"
class="form-control"
name="name"
placeholder="Your Name"
required
/>
</div>
<div class="form-group mb-3">
<input
type="email"
class="form-control"
name="email"
placeholder="Your Email"
required
/>
</div>
<div class="form-group mb-3">
<textarea
class="form-control"
name="message"
rows="5"
placeholder="Your Message"
required
></textarea>
</div>
<button type="submit" class="btn btn-primary">Send Message</button>
</form>
</div>
</section>
<footer class="mt-5">
<p>&copy; 2002 &dash; 2024 Duck.cash Inc. All rights reserved.</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
</body>
</html>

82
unavailable.html Normal file
View file

@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Duck.cash - Access for Ducks only</title>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link href="assets/css/style.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img
src="assets/img/duckcash-duck.png"
alt="Duck Logo"
width="60"
height="60"
/>
Duck.cash</a
>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="index.html#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="error-page">
<div>
<h1>Ducks only!</h1>
<p>Oops! The page you are looking for is only available from duckpond IPs.</p>
<p>Please ensure that you are in a duckpond, and not using a VPN, etc.</p>
<a href="index.html" class="btn btn-lg">Go Back Home</a>
</div>
</div>
<footer class="mt-5">
<p>&copy; 2023 Duck.cash. All rights reserved.</p>
<a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a>
</footer>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
</body>
</html>