Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
Binary file added New Screen.jpeg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/socialmediapic.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
63 changes: 60 additions & 3 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,60 @@
test....
<!-- add an image -->
<img src="images/test.png" alt="image" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TrendMiner Landing Page</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>

<header>
<div class="logo"><span>↗</span> TrendMiner</div>
<nav>
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="#contact">Contact</a>
</nav>
</header>

<section class="hero">
<h1>Discover the Latest Trends in Social Media</h1>
<p>Unleash the power of data to stay ahead in the digital world with TrendMiner.</p>
<img src="images/socialmediapic.jpg" alt="analytics graphic" />
</section>

<section id="features" class="features">
<div class="feature-card">
<h3>Real-time Analytics</h3>
<p>Access up-to-the-minute data to monitor emerging trends and capitalize on them instantly.</p>
</div>
<div class="feature-card">
<h3>Comprehensive Reports</h3>
<p>Receive detailed insights with our in-depth reports, tailored to your business.</p>
</div>
<div class="feature-card">
<h3>User-friendly Interface</h3>
<p>Navigate with ease using our intuitive and modern interface designed for all.</p>
</div>
</section>

<div style="text-align:center;">
<a href="#signup" class="cta-btn">Get Started Now</a>
</div>

<section id="signup" class="signup-section">
<input type="email" placeholder="Enter your email" />
<button class="signup-btn">Sign Up</button>
</section>

<footer>
<div class="social">⚪ ⚪ ⚪</div>
<p>© 2025 TrendMiner. All rights reserved.</p>
</footer>

<script src="script.js"></script>
</body>
</html>
3 changes: 3 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
// script.js - add any JS interactions later
console.log("TrendMiner landing page loaded.");

Binary file added socialmediapic.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 29 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -1 +1,30 @@
/* style.css - TrendMiner Landing Page */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Poppins", sans-serif; line-height: 1.6; color: #111; }
header { display: flex; justify-content: space-between; align-items: center; padding: 22px 70px; }
nav a { text-decoration: none; color: #111; margin-left: 30px; font-weight: 500; }
.logo { font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.logo span { color: #6366F1; font-weight: 700; }
.hero { text-align: center; padding: 60px 90px; }
.hero h1 { font-size: 32px; font-weight: 700; margin-bottom: 16px; }
.hero p { font-size: 16px; color: #555; max-width: 650px; margin: 0 auto 40px auto; }
.hero img { max-width: 700px; width: 100%; margin: 0 auto; }
.features { display: flex; justify-content: center; gap: 30px; padding: 40px 90px; }
.feature-card { background: #fff; padding: 24px; border-radius: 12px; width: 300px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.feature-card h3 { font-size: 18px; margin-bottom: 10px; }
.feature-card p { font-size: 14px; color: #666; }
.cta-btn { background: #6366F1; padding: 14px 28px; color: #fff; border-radius: 8px; text-decoration: none; font-weight: 600; display: inline-block; margin: 30px auto; }
.signup-section { background: white; max-width: 550px; margin: 50px auto; padding: 28px; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); text-align: center; }
.signup-section input { width: 100%; padding: 14px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 20px; font-size: 15px; }
.signup-btn { width: 100%; padding: 14px; border: 0; border-radius: 8px; background: #F63CA9; color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; }
footer { margin-top: 80px; background: #F1F5FE; padding: 40px 0; text-align: center; color: #555; font-size: 14px; }
.social { margin-bottom: 12px; }
.social i { margin: 0 8px; cursor: pointer; }
/* Responsiveness */
@media(max-width: 900px) {
.features { flex-direction: column; align-items: center; }
header { padding: 22px 30px; }
nav a { margin-left: 15px; }
}