sopheadave.github.io/index.html at main · sopheadave/sopheadave.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
---
layout: default
---
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Hardware Insights - Get the latest insights, reviews, and guides on hardware technology. Stay updated on CPUs, GPUs, motherboards, and more.">
  <meta name="keywords" content="Hardware, Reviews, Guides, CPUs, GPUs, Motherboards, Technology">
  <meta name="author" content="Hardware Insights">
  <title>Hardware Insights | The Latest in Hardware Technology</title>
  <link rel="stylesheet" href="assets/css/style.css">
  <link rel="icon" type="image/png" href="/assets/img/logo.png">
</head>
<body>
  <section id="hero">
    <div class="container">
      <h1>Welcome to Hardware Insights</h1>
      <p>Your go-to source for the latest insights, reviews, and guides in the world of hardware technology. Whether you’re building a new PC or upgrading your setup, we’ve got you covered.</p>
      <a href="#latest-posts" class="cta-btn">Check Latest Posts</a>
    </div>
  </section>

  <!-- Latest Posts Section -->
  <section id="latest-posts" class="posts-section">
    <div class="container">
      <h2>Recent Posts</h2>
      <ul class="post-list">
        {% for post in site.posts limit:5 %}
          <li class="post-item">
            <a href="{{ post.url }}" class="post-link">
              <h3>{{ post.title }}</h3>
              <p>{{ post.excerpt | strip_html | truncate: 150 }}</p>
              <span class="post-date">{{ post.date | date: "%B %d, %Y" }}</span>
            </a>
          </li>
        {% endfor %}
      </ul>
    </div>
  </section>

  <!-- Newsletter Subscription Section -->
  <section id="newsletter" class="newsletter-section">
    <div class="container">
      <h2>Join Our Newsletter</h2>
      <p>Stay updated with the latest hardware news, reviews, and tips. Sign up for our newsletter today!</p>
      <form action="/subscribe" method="POST" class="newsletter-form">
        <input type="email" name="email" placeholder="Enter your email" required>
        <button type="submit" class="subscribe-btn">Subscribe</button>
      </form>
    </div>
  </section>

  <!-- Contact Section -->
  <section id="contact" class="contact-section">
    <div class="container">
      <h2>Contact Us</h2>
      <p>If you have any questions or feedback, feel free to reach out!</p>
      <form action="/contact" method="POST">
        <input type="text" name="name" placeholder="Your Name" required>
        <input type="email" name="email" placeholder="Your Email" required>
        <textarea name="message" rows="4" placeholder="Your Message" required></textarea>
        <button type="submit" class="subscribe-btn">Send Message</button>
      </form>
    </div>
  </section>

  <!-- Scripts -->
  <script src="assets/js/main.js"></script>
</body>
</html>