mjnewman · lollipopstar456 · Nov 4, 2025 · Nov 4, 2025 · Nov 4, 2025 · Nov 4, 2025
diff --git a/New Screen.jpeg b/New Screen.jpeg
diff --git a/images/analysis (2).png b/images/analysis (2).png
diff --git a/images/analysis.png b/images/analysis.png
diff --git a/images/rocket.png b/images/rocket.png
diff --git a/images/search-interface-symbol.png b/images/search-interface-symbol.png
diff --git a/images/socialmediapic.jpg b/images/socialmediapic.jpg
diff --git a/index.html b/index.html
@@ -1,3 +1,92 @@
-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>
+
+  <!-- Google Fonts -->
+  <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">
+    <div class="icon">
+      <img src="images/search-interface-symbol.png" alt="Trend Discovery Icon" />
+    </div>
+    <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">
+    <div class="icon">
+      <img src="images/analysis.png" alt="Analytics Icon" />
+    </div>
+    <h3>Comprehensive Reports</h3>
+    <p>Receive detailed insights with our in-depth reports, tailored to your business.</p>
+  </div>
+
+  <div class="feature-card">
+    <div class="icon">
+      <img src="images/rocket.png" alt="Growth Icon" />
+    </div>
+    <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; margin: 30px 0;">
+  <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="footer-container">
+    <div class="footer-info">
+      <h4>Contact Us</h4>
+      <p>Email: support@trendminer.com</p>
+      <p>Phone: +1 (555) 123-4567</p>
+      <p>Address: 123 Trend St, San Francisco, CA</p>
+    </div>
+
+    <div class="footer-links">
+      <h4>Quick Links</h4>
+      <a href="#features">Features</a>
+      <a href="#pricing">Pricing</a>
+      <a href="#signup">Sign Up</a>
+      <a href="#contact">Contact</a>
+    </div>
+  </div>
+
+  <p>© 2025 TrendMiner. All rights reserved.</p>
+</footer>
+
+<script src="script.js"></script>
+</body>
+</html>
+
+
diff --git a/script.js b/script.js
@@ -0,0 +1,3 @@
+// script.js - add any JS interactions later
+console.log("TrendMiner landing page loaded.");
+
diff --git a/style.css b/style.css
@@ -1 +1,282 @@
+/* Reset & Global Styles */
+body {
+  font-family: 'Poppins', sans-serif;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 50px;
+  background-color: #fff;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+  flex-wrap: wrap;
+}
+
+.logo {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+header nav {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+header nav a {
+  text-decoration: none;
+  color: #333;
+  font-weight: 500;
+  transition: color 0.3s;
+}
+
+header nav a:hover {
+  color: #1e90ff;
+}
+
+/* Buttons */
+.cta-btn, .signup-btn {
+  background-color: #ff3cac; /* Pink */
+  color: white;
+  padding: 12px 25px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-weight: 500;
+  text-decoration: none; /* No underline */
+  transition: background-color 0.3s, transform 0.2s;
+  display: inline-block;
+}
+
+.cta-btn:hover, .signup-btn:hover,
+.cta-btn:active, .signup-btn:active { /* Hover/active for mobile */
+  background-color: #e02ea0; 
+  transform: translateY(-2px);
+}
+
+/* Hero Section */
+.hero {
+  text-align: center;
+  padding: 50px 20px;
+}
+
+.hero img {
+  max-width: 100%;
+  height: auto;
+  margin-top: 20px;
+}
+
+/* Features */
+.features {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  gap: 20px;
+  padding: 50px 20px;
+}
+
+.feature-card {
+  background: #ffffff; /* White cards */
+  padding: 20px;
+  border-radius: 10px;
+  width: 300px;
+  text-align: center;
+  transition: transform 0.3s, box-shadow 0.3s;
+  flex: 1 1 250px;
+  max-width: 350px;
+  border: 2px solid #e0e0e0;
+}
+
+.feature-card:hover,
+.feature-card:active { /* Hover/active for mobile */
+  transform: translateY(-5px);
+  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+}
+
+/* Feature Icons */
+.feature-card .icon img {
+  width: 60px;  
+  height: 60px;
+  object-fit: contain;
+  margin-bottom: 15px;
+}
+
+/* Signup Section */
+.signup-section {
+  text-align: center;
+  margin: 40px 20px;
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.signup-section input {
+  padding: 10px 15px;
+  width: 250px;
+  border-radius: 5px;
+  border: 2px solid #e0e0e0;
+  outline: none;
+  transition: border-color 0.3s;
+}
+
+.signup-section input:focus {
+  border-color: #ff3cac;
+}
+
+.signup-section button.signup-btn {
+  border: 2px solid #ff3cac;
+}
+
+/* Footer */
+footer {
+  background-color: #87CEFA; 
+  color: #ffffff;
+  padding: 40px 20px 20px 20px;
+}
+
+.footer-container {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  max-width: 1000px;
+  margin: 0 auto;
+  gap: 20px;
+}
+
+/* Contact row stacked and left-aligned on larger screens */
+.footer-info .contact-row {
+  display: flex;
+  flex-direction: column; /* Stack the heading and the contact items so they align vertically */
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.footer-info,
+.footer-links {
+  flex: 1 1 200px; /* ensure both columns take the same base width */
+  padding: 0; /* remove any inner padding so left edges line up */
+}
+
+.footer-info {
+  text-align: left; /* Heading & text aligned together on desktop */
+}
+
+/* make both columns behave as columns so their children align at the same left edge */
+.footer-info,
+.footer-links {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.footer-info .contact-items {
+  display: flex;
+  gap: 18px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+/* reset heading and item margins so left edges align exactly */
+.footer-info h4,
+.footer-links h4 {
+  margin: 0 0 10px 0;
+}
+
+.footer-info .contact-item {
+  margin: 0;
+}
+
+.footer-info h4, .footer-links h4 {
+  margin-bottom: 10px;
+  color: #ffffff;
+}
+
+.footer-links a {
+  color: #ffffff;
+  text-decoration: none;
+  display: block;
+  margin-bottom: 5px;
+  transition: color 0.3s, padding-left 0.2s;
+}
+
+.footer-links a:hover,
+.footer-links a:active {
+  color: #ff3cac;
+  padding-left: 5px;
+}
+
+footer p {
+  text-align: center;
+  margin-top: 20px;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+  header {
+    justify-content: center;
+    text-align: center;
+  }
+
+  .features {
+    flex-direction: column;
+    align-items: center;
+    padding: 30px 10px;
+  }
+
+  .feature-card {
+    width: 90%;
+    max-width: 350px;
+  }
+
+  .feature-card .icon img {
+    width: 50px;  
+    height: 50px;
+  }
+
+  .signup-section input {
+    width: 80%;
+  }
+
+  .cta-btn {
+    margin-bottom: 20px;
+  }
+
+  .footer-container {
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+  }
+
+  /* On small screens keep contact heading centered and items stacked/centered */
+  .footer-info {
+    text-align: center;
+  }
+
+  .footer-info .contact-row {
+    align-items: center;
+  }
+
+  .footer-info .contact-items {
+    justify-content: center;
+  }
+
+  .footer-container {
+    flex-direction: column;
+    text-align: center;
+    align-items: center;
+  }
+
+  /* also center the column children on mobile */
+  .footer-info,
+  .footer-links {
+    align-items: center;
+  }
+}
+
+
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.");