Skip to content

Josh bravo/frontend #142

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Josh bravo/frontend #142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c373c97
Implementin Landing Page
Josh13-glitch Nov 3, 2025
8b4dd16
Implementing landing page
Josh13-glitch Nov 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
215 changes: 215 additions & 0 deletions Landing page/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome - Modern Landing Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="container">
<a href="#" class="nav-brand" onclick="location.reload(); return false;">Brand</a>

<!-- Hamburger Icon -->
<div class="menu-toggle" id="menu-toggle">
<span></span>
<span></span>
<span></span>
</div>

<ul class="nav-links" id="nav-links">
<li><a href="#hero">Shop</a></li>
<li><a href="#brands">Winter Holiday Sale</a></li>
<li><a href="#features">How it Works</a></li>
<li><a href="#contact">Refer and Earn</a></li>
<li><a href="#contact">Merchant Solutions</a></li>
</ul>

<button onclick="window.location.href='https://www.moola.com/'" class="btn btn-primary">
Download Now
</button>
</div>
</nav>

<!-- Search Bar -->
<div class="search-bar-container">
<div class="container">
<div class="search-bar">
<input type="text" class="search-input" placeholder="Search over 250 gift card brands">
<button type="button" class="search-btn">🔍</button>
</div>
</div>
</div>

<!-- Hero Section -->
<section class="hero" id="hero">
<div class="container">
<!-- Card Above -->
<div class="hero-card hero-card-top">
<!-- Slide 1 -->
<div class="hero-slide hero-slide-active" data-slide="0">
<div class="hero-card-content">
<p class="hero-card-subtitle">GIFTING MADE EASIER</p>
<h2 class="hero-card-title">Buy A Gift Card, Get Cash Back Rewards</h2>
<p class="hero-card-description">Shop from over 250 brands and earn cashback on every purchase. Get instant digital delivery!</p>
<button class="btn btn-shop-deals">SHOP WEEKLY DEALS</button>
</div>
<div class="hero-card-image">
<div class="gift-cards">🎁</div>
</div>
</div>

<!-- Slide 2 -->
<div class="hero-slide" data-slide="1">
<div class="hero-card-content">
<p class="hero-card-subtitle">EXCLUSIVE DEALS</p>
<h2 class="hero-card-title">Save More With Premium Membership</h2>
<p class="hero-card-description">Get up to 10% extra cashback, exclusive deals, and priority customer support. Join today!</p>
<button class="btn btn-shop-deals">JOIN NOW</button>
</div>
<div class="hero-card-image">
<div class="gift-cards">⭐</div>
</div>
</div>

<!-- Slide Indicators -->
<div class="hero-slide-indicators">
<span class="slide-dot active" data-slide="0"></span>
<span class="slide-dot" data-slide="1"></span>
</div>
</div>

<!-- Cards Below -->
<div class="hero-cards-bottom">
<div class="hero-card hero-card-bottom-left">
<div class="card-content-left">
<h3>Send gift cards instantly through text.</h3>
<div class="app-buttons">
<button class="app-btn app-store">🍎 App Store</button>
<button class="app-btn google-play">▶ Google Play</button>
</div>
</div>
<div class="card-image-right">📱</div>
</div>
<div class="hero-card hero-card-bottom-right">
<div class="card-content-left">
<h3>Invite a friend & get 1% Moola cash back on all their purchases.</h3>
</div>
<div class="card-image-right">📱</div>
</div>
</div>
</div>
</section>

<!-- Brands Section -->
<section class="brands-section" id="brands">
<div class="container">
<h2>Send A Gift Card and Collect Rewards</h2>
<p>Moola provides unbeatable deals on the gift cards you love. Buy for a friend or better yet, for yourself and collect rewards. With Moola, giving the perfect gift and saving money on the brands you love has never been easier or more convenient. Shop over 250 brands across Canada.</p>

<div class="brands-grid">
<div class="brand-card">
<div class="brand-logo">🛒</div>
<h4>Walmart Canada</h4>
<p class="brand-offer">Buy Now And Get</p>
<button class="brand-btn">5% More</button>
</div>
<div class="brand-card">
<div class="brand-logo">⛽</div>
<h4>Esso™ and Mobil...</h4>
<p class="brand-offer">Buy Now And Get</p>
<button class="brand-btn">1% More</button>
</div>
<div class="brand-card">
<div class="brand-logo">☕</div>
<h4>Starbucks</h4>
<p class="brand-offer">Buy Now And Get</p>
<button class="brand-btn">5% More</button>
</div>
<div class="brand-card">
<div class="brand-logo">🐾</div>
<h4>Petsmart</h4>
<p class="brand-offer">Buy Now And Get</p>
<button class="brand-btn">1.5% More</button>
</div>
<div class="brand-card">
<div class="brand-logo">🚚</div>
<h4>DoorDash</h4>
<p class="brand-offer">Buy Now And Get</p>
<button class="brand-btn">1.5% More</button>
</div>
<div class="brand-card">
<div class="brand-logo">📦</div>
<h4>Amazon.ca</h4>
<p class="brand-offer">Buy Now And Get</p>
<button class="brand-btn">2% More</button>
</div>
</div>
</div>
</section>

<!-- Savings Section -->
<section class="savings-section">
<div class="container">
<h2>Moola Saves Money On Gifts & Everyday Essentials</h2>
<p>When we think about saving money, we often think about cutting back on non-essentials. However, that's usually not possible for special occasions or everyday purchases - gifts and dinners add up. So, making some small tweaks + great deals can make a big impact on your wallet. Through Moola, you can easily buy gift cards to your favourite stores at a lower price. Why not shop smarter, score deals, and savour the savings!</p>

<div class="savings-cards">
<div class="savings-card">
<div class="savings-icon">🎁</div>
<h3>Deals Each Week</h3>
<p>Each week, we feature new deals in the Moola Marketplace where you can save up to 15% on popular brands. Check out this week's feature deal</p>
<button class="savings-btn">SHOP DEALS</button>
</div>
<div class="savings-card">
<div class="savings-icon">🛒</div>
<h3>Everyday Essentials</h3>
<p>Moola has deals on all your everyday essentials such as grocery, fuel, pharmacy, food delivery, and more. It all adds up to great savings!</p>
<button class="savings-btn">SHOP ESSENTIALS</button>
</div>
<div class="savings-card">
<div class="savings-icon">📱</div>
<h3>Download App</h3>
<p>Download the Moola App and start collecting cash back and bonus gift vouchers.</p>
<button class="savings-btn">DOWNLOAD APP</button>
</div>
</div>
</div>
</section>

<!-- Features Section -->
<section id="features" class="features">
<div class="container">
<h2>Why Choose Us</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">⚡</div>
<h3>Fast</h3>
<p>Lightning quick performance optimized for your needs</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎨</div>
<h3>Beautiful</h3>
<p>Stunning design that looks great on all devices</p>
</div>
<div class="feature-card">
<div class="feature-icon">🔒</div>
<h3>Secure</h3>
<p>Enterprise-grade security for your peace of mind</p>
</div>
</div>
</div>
</section>

<!-- Footer -->
<footer class="footer">
<div class="container">
<p>&copy; 2025 Your Brand. All rights reserved.</p>
</div>
</footer>

<script src="script.js"></script>
</body>
</html>
128 changes: 128 additions & 0 deletions Landing page/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();

// Remove active class from all nav links
document.querySelectorAll('.nav-links a').forEach(link => {
link.classList.remove('active');
});

// Add active class to clicked link
this.classList.add('active');

const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});

// Add scroll animation for feature cards
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);

document.querySelectorAll('.feature-card').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(card);
});

// Search bar functionality
const searchInput = document.querySelector('.search-input');
const searchBtn = document.querySelector('.search-btn');

if (searchBtn) {
searchBtn.addEventListener('click', function() {
const query = searchInput.value.trim();
if (query) {
console.log('Searching for:', query);
alert('Searching for: ' + query);
searchInput.value = '';
}
});
}

if (searchInput) {
searchInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
const query = this.value.trim();
if (query) {
console.log('Searching for:', query);
alert('Searching for: ' + query);
this.value = '';
}
}
});
}

// Hero card slide indicators
const slideDots = document.querySelectorAll('.slide-dot');
const heroSlides = document.querySelectorAll('.hero-slide');
let currentSlide = 0;

slideDots.forEach(dot => {
dot.addEventListener('click', function() {
const slideIndex = parseInt(this.getAttribute('data-slide'));
currentSlide = slideIndex;
updateSlides();
});
});

function updateSlides() {
// Update slide visibility
heroSlides.forEach((slide, index) => {
if (index === currentSlide) {
slide.classList.add('hero-slide-active');
} else {
slide.classList.remove('hero-slide-active');
}
});

// Update dot indicators
slideDots.forEach((dot, index) => {
if (index === currentSlide) {
dot.classList.add('active');
} else {
dot.classList.remove('active');
}

});
}

// Auto-advance slides every 5 seconds
setInterval(() => {
currentSlide = (currentSlide + 1) % heroSlides.length;
updateSlides();
}, 5000);


// Hamburger Menu
const menuToggle = document.getElementById('menu-toggle');
const navLinks = document.getElementById('nav-links');

menuToggle.addEventListener('click', () => {
navLinks.classList.toggle('active');
menuToggle.classList.toggle('active');

if (navbar.classList.contains("menu-open")) {
navLinks.appendChild(downloadBtn); // move inside
} else {
navbar.querySelector(".container").appendChild(downloadBtn); // move back outside
}
});
Loading