MGTechs/singleblog.html at main · Maxephraim09/MGTechs · 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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Blog Detail | My Portfolio</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="styles.css">
  <style>
    body {
      font-family: 'Poppins', sans-serif;
      background: radial-gradient(circle at top, #1f2937, #020617);
    }

    .glass {
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .gradient-text {
      background: linear-gradient(90deg, #60a5fa, #a78bfa);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .btn-primary {
      background: linear-gradient(90deg, #2563eb, #7c3aed);
      padding: 10px 20px;
      border-radius: 9999px;
      transition: 0.3s ease;
    }

    .btn-primary:hover { opacity: 0.85; }
  </style>
</head>
<body class="text-white">

<!-- Header -->
<header class="glass shadow-lg sticky top-0 z-50">
  <div class="max-w-7xl mx-auto flex justify-between items-center p-4">
    <h1 class="text-2xl font-bold">My Blog</h1>
    <nav class="space-x-6">
      <a href="index.html" class="hover:text-blue-400">Home</a>
      <a href="blog.html" class="hover:text-blue-400">Blog</a>
      <a href="#contact" class="hover:text-blue-400">Contact</a>
    </nav>
  </div>
</header>

<!-- Blog Detail -->
<section class="max-w-5xl mx-auto px-4 py-16">
  <article class="glass rounded-3xl overflow-hidden p-8">

    <img src="ZZZ.png" class="w-full rounded-2xl mb-8 object-cover" alt="Blog Cover">

    <span class="text-sm text-blue-400">Web Development</span>
    <h1 class="text-4xl font-bold mt-2 gradient-text">How to Build a Modern Responsive Website</h1>

    <div class="flex flex-wrap gap-6 text-sm text-gray-400 mt-4">
      <span>✍ By Admin</span>
      <span>📅 Nov 27, 2025</span>
      <span>👁 1,245 Views</span>
      <span>💬 12 Comments</span>
    </div>

    <div class="mt-10 text-gray-300 leading-relaxed space-y-6">
      <p>
        Building a modern responsive website requires a combination of clean design, performance optimization, and mobile-first development approach. Today’s users expect fast-loading, visually appealing, and easy-to-navigate experiences across all devices.
      </p>

      <p>
        Start by using HTML5 semantic elements, Flexbox, and CSS Grid for layout structure. Then implement Tailwind CSS or custom responsive styles to control spacing, scaling, and typography across different screen sizes.
      </p>

      <blockquote class="border-l-4 border-blue-500 pl-4 italic text-gray-400">
        "Responsive design is not just a trend — it’s a necessity in modern web development."
      </blockquote>

      <p>
        Finally, enhance the website with JavaScript interactivity, animations, and SEO best practices to ensure both performance and discoverability. Combine these strategies to achieve a professional web presence.
      </p>
    </div>

  </article>

  <!-- COMMENTS SECTION -->
  <div class="glass rounded-3xl p-8 mt-12">
    <h3 class="text-2xl font-semibold mb-6">Comments (12)</h3>

    <div class="space-y-6">
      <div class="bg-gray-800 p-5 rounded-xl">
        <p class="font-semibold">Jane Doe</p>
        <p class="text-gray-400 text-sm">Nov 28, 2025</p>
        <p class="mt-2 text-gray-300">This article clearly explains the process. Very helpful!</p>
      </div>

      <div class="bg-gray-800 p-5 rounded-xl">
        <p class="font-semibold">Mark Wilson</p>
        <p class="text-gray-400 text-sm">Nov 29, 2025</p>
        <p class="mt-2 text-gray-300">I applied these tips and my website improved massively. Thanks!</p>
      </div>
    </div>

    <!-- Comment Form -->
    <form class="mt-8 space-y-4">
      <h4 class="text-xl font-semibold">Leave a Comment</h4>
      <div class="grid md:grid-cols-2 gap-4">
        <input type="text" placeholder="Your Name" class="p-3 rounded-lg bg-gray-800 text-white focus:ring-2 focus:ring-blue-500 outline-none">
        <input type="email" placeholder="Your Email" class="p-3 rounded-lg bg-gray-800 text-white focus:ring-2 focus:ring-blue-500 outline-none">
      </div>
      <textarea rows="4" placeholder="Your Comment" class="w-full p-3 rounded-lg bg-gray-800 text-white focus:ring-2 focus:ring-blue-500 outline-none"></textarea>
      <button class="btn-primary text-white">Post Comment</button>
    </form>
  </div>

  <!-- RELATED POSTS -->
  <div class="mt-16">
    <h3 class="text-2xl font-semibold mb-6">Related Posts</h3>
    <div class="grid md:grid-cols-3 gap-6">

      <div class="glass p-5 rounded-2xl hover:scale-105 transition">
        <img src="zzz.png" class="rounded-lg mb-3">
        <h4 class="font-semibold">Top UI Trends for 2025</h4>
        <a href="#" class="text-blue-400 text-sm">Read More →</a>
      </div>

      <div class="glass p-5 rounded-2xl hover:scale-105 transition">
        <img src="zzz.png" class="rounded-lg mb-3">
        <h4 class="font-semibold">Boost Website Performance</h4>
        <a href="#" class="text-blue-400 text-sm">Read More →</a>
      </div>

      <div class="glass p-5 rounded-2xl hover:scale-105 transition">
        <img src="zzz.png" class="rounded-lg mb-3">
        <h4 class="font-semibold">Mastering CSS Animations</h4>
        <a href="#" class="text-blue-400 text-sm">Read More →</a>
      </div>

    </div>
  </div>
</section>

<!-- Footer -->
<footer class="bg-gray-800 py-8 text-center mt-20">
  <p class="text-gray-400">© 2025 My Portfolio Blog. All Rights Reserved.</p>
</footer>

</body>
</html>