Share Full code Website

Sharecode HTML sự kiện lịch sử miễn phí

Đăng vào Tháng 4 17, 2025Tháng 5 15, 2025 bởi admin

17/04/2025

4 Phút đọc

75 Lượt xem

Đánh giá

Bạn đang tìm kiếm sharecode HTML sự kiện lịch sử miễn phí để làm website, blog, hoặc dự án học tập? Bài viết này sẽ chia sẻ cho bạn mã nguồn HTML sự kiện lịch sử hoàn toàn miễn phí, kèm hướng dẫn chi tiết cách sử dụng, chỉnh sửa và tối ưu cho mục đích cá nhân hoặc tổ chức. Hãy cùng khám phá ngay!

Tại sao nên sử dụng sharecode HTML sự kiện lịch sử?

Việc sử dụng sharecode HTML sự kiện lịch sử giúp bạn tiết kiệm thời gian thiết kế, dễ dàng tùy biến giao diện, đồng thời mang lại trải nghiệm chuyên nghiệp cho người xem. Đặc biệt, các mẫu code này thường được tối ưu sẵn cho SEO, giúp website của bạn dễ dàng lên top Google khi tìm kiếm các từ khóa liên quan đến sự kiện lịch sử.

Bài viết liên quan: Sharecode HTML Chào Mừng Ngày 30/04

Hướng dẫn sử dụng sharecode HTML sự kiện lịch sử miễn phí

Bước 1: Tải hoặc copy mã nguồn HTML

Bạn có thể copy đoạn code mẫu dưới đây hoặc tải về từ các nguồn chia sẻ uy tín.

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kỷ Niệm 30/4 & 1/5 - Tự Hào Dân Tộc</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <style>
    html {
      scroll-behavior: smooth;
    }
    body {
      margin: 0;
      font-family: 'Roboto', sans-serif;
      background: linear-gradient(135deg, #ff512f 0%, #dd2476 100%);
      color: #fff;
    }
    header {
      background: rgba(0,0,0,0.7);
      padding: 24px 0 12px 0;
      text-align: center;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    }
    .logo {
      font-size: 2.2rem;
      font-weight: 700;
      color: #ffd700;
      letter-spacing: 2px;
      margin-bottom: 4px;
    }
    nav {
      margin-top: 8px;
    }
    nav a {
      color: #ffd700;
      text-decoration: none;
      margin: 0 18px;
      font-weight: 500;
      font-size: 1.1rem;
      transition: color 0.2s;
    }
    nav a:hover {
      color: #fff;
    }
    .hero {
      position: relative;
      min-height: 480px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1200&q=80') center/cover no-repeat;
    }
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.55);
    }
    .hero-content {
      position: relative;
      z-index: 2;
      text-align: center;
      color: #fff;
      padding: 40px 20px;
    }
    .hero-content h1 {
      font-size: 2.8rem;
      margin-bottom: 12px;
      color: #ffd700;
      text-shadow: 2px 2px 8px #000;
    }
    .hero-content p {
      font-size: 1.25rem;
      margin-bottom: 28px;
      text-shadow: 1px 1px 6px #000;
    }
    .cta-btn {
      background: #ffd700;
      color: #dd2476;
      padding: 15px 40px;
      font-size: 1.1rem;
      font-weight: bold;
      border: none;
      border-radius: 30px;
      cursor: pointer;
      transition: background 0.3s;
      box-shadow: 0 4px 24px rgba(0,0,0,0.15);
    }
    .cta-btn:hover {
      background: #ffae00;
      color: #fff;
    }
    .countdown {
      margin: 32px auto 0;
      display: flex;
      justify-content: center;
      gap: 32px;
      font-size: 1.3rem;
      font-weight: 700;
      color: #ffd700;
      background: rgba(0,0,0,0.3);
      border-radius: 16px;
      padding: 16px 32px;
      width: fit-content;
      box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    }
    .countdown span {
      min-width: 60px;
      display: inline-block;
    }
    .section {
      padding: 60px 20px 40px 20px;
      max-width: 1100px;
      margin: 0 auto;
    }
    .section-title {
      font-size: 2rem;
      color: #ffd700;
      margin-bottom: 24px;
      text-align: center;
      letter-spacing: 1px;
    }
    .features {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 32px;
      margin-bottom: 40px;
    }
    .feature {
      background: rgba(255,255,255,0.08);
      border-radius: 16px;
      padding: 28px 20px;
      width: 300px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.18);
      text-align: center;
      transition: transform 0.2s;
    }
    .feature:hover {
      transform: translateY(-8px) scale(1.03);
      background: rgba(255,255,255,0.13);
    }
    .feature h3 {
      color: #ffd700;
      margin-bottom: 10px;
      font-size: 1.2rem;
    }
    .feature p {
      font-size: 1rem;
      color: #f0f0f0;
    }
    /* Slider */
    .slider {
      position: relative;
      max-width: 700px;
      margin: 0 auto 40px auto;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    }
    .slides {
      display: flex;
      transition: transform 0.5s;
    }
    .slide {
      min-width: 100%;
      transition: opacity 0.5s;
      position: relative;
    }
    .slide img {
      width: 100%;
      display: block;
      height: 320px;
      object-fit: cover;
    }
    .slide-caption {
      position: absolute;
      bottom: 18px;
      left: 0;
      width: 100%;
      text-align: center;
      color: #fff;
      background: rgba(0,0,0,0.4);
      padding: 8px 0;
      font-size: 1.1rem;
      letter-spacing: 1px;
    }
    .slider-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.4);
      border: none;
      color: #ffd700;
      font-size: 2rem;
      padding: 8px 16px;
      cursor: pointer;
      z-index: 2;
      border-radius: 50%;
      transition: background 0.2s;
    }
    .slider-btn:hover {
      background: #ffd700;
      color: #dd2476;
    }
    .slider-btn.prev { left: 10px; }
    .slider-btn.next { right: 10px; }
    /* Popup */
    .popup-bg {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.7);
      z-index: 2000;
      align-items: center;
      justify-content: center;
    }
    .popup {
      background: #fff;
      color: #222;
      border-radius: 16px;
      padding: 32px 28px;
      max-width: 400px;
      text-align: center;
      position: relative;
      box-shadow: 0 8px 32px rgba(0,0,0,0.25);
      animation: popupIn 0.3s;
    }
    @keyframes popupIn {
      from { transform: scale(0.8); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
    }
    .popup h2 {
      color: #dd2476;
      margin-bottom: 12px;
    }
    .popup p {
      margin-bottom: 18px;
    }
    .close-popup {
      position: absolute;
      top: 12px;
      right: 18px;
      background: none;
      border: none;
      font-size: 1.5rem;
      color: #dd2476;
      cursor: pointer;
    }
    /* Form */
    .form-section {
      background: rgba(0,0,0,0.25);
      border-radius: 18px;
      max-width: 500px;
      margin: 0 auto;
      padding: 32px 24px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.13);
    }
    .form-section h3 {
      color: #ffd700;
      margin-bottom: 18px;
    }
    .form-group {
      margin-bottom: 18px;
      text-align: left;
    }
    .form-group label {
      display: block;
      margin-bottom: 6px;
      color: #ffd700;
      font-weight: 500;
    }
    .form-group input, .form-group textarea {
      width: 100%;
      padding: 10px 12px;
      border-radius: 8px;
      border: none;
      font-size: 1rem;
      margin-bottom: 4px;
      background: #fff;
      color: #222;
    }
    .form-group textarea {
      resize: vertical;
      min-height: 60px;
    }
    .form-section button {
      background: #dd2476;
      color: #fff;
      padding: 12px 32px;
      border: none;
      border-radius: 24px;
      font-size: 1.1rem;
      font-weight: bold;
      cursor: pointer;
      transition: background 0.2s;
    }
    .form-section button:hover {
      background: #ffd700;
      color: #dd2476;
    }
    .form-success {
      color: #ffd700;
      margin-top: 12px;
      text-align: center;
      font-weight: 500;
    }
    footer {
      background: rgba(0,0,0,0.8);
      padding: 24px 0 12px 0;
      color: #ccc;
      font-size: 0.95rem;
      text-align: center;
      margin-top: 40px;
    }
    footer a {
      color: #ffd700;
      text-decoration: none;
    }
    footer a:hover {
      text-decoration: underline;
    }
    @media (max-width: 900px) {
      .features { flex-direction: column; gap: 18px; }
      .feature { width: 100%; }
      .slider { max-width: 100%; }
    }
    @media (max-width: 600px) {
      .hero-content h1 { font-size: 1.5rem; }
      .section-title { font-size: 1.2rem; }
      .countdown { font-size: 1rem; gap: 12px; padding: 10px 8px; }
      .form-section { padding: 18px 8px; }
    }
  </style>
</head>
<body>
  <header>
    <div class="logo">KỶ NIỆM 30/4 & 1/5</div>
    <nav>
      <a href="#ynghia">Ý Nghĩa</a>
      <a href="#slider">Hình Ảnh</a>
      <a href="#dangky">Đăng Ký</a>
      <a href="#lienhe">Liên Hệ</a>
    </nav>
  </header>

  <section class="hero" id="top">
    <div class="hero-content">
      <h1>Tự Hào Dân Tộc - Vững Bước Tương Lai</h1>
      <p>Chào mừng ngày Giải phóng miền Nam (30/4) & Quốc tế Lao động (1/5). Hãy cùng nhau nhìn lại lịch sử hào hùng và hướng tới tương lai phát triển!</p>
      <button class="cta-btn" onclick="openPopup()">Tìm Hiểu Ý Nghĩa</button>
      <div class="countdown" id="countdown">
        <span id="days">00</span> ngày
        <span id="hours">00</span> giờ
        <span id="minutes">00</span> phút
        <span id="seconds">00</span> giây
      </div>
    </div>
  </section>

  <!-- Popup Ý Nghĩa -->
  <div class="popup-bg" id="popup-bg">
    <div class="popup">
      <button class="close-popup" onclick="closePopup()">&times;</button>
      <h2>Ý Nghĩa 30/4 & 1/5</h2>
      <p><strong>30/4/1975</strong> là ngày giải phóng miền Nam, thống nhất đất nước, mở ra kỷ nguyên mới cho dân tộc Việt Nam.</p>
      <p><strong>1/5</strong> là ngày Quốc tế Lao động, tôn vinh người lao động và khẳng định vai trò của lao động trong sự phát triển xã hội.</p>
    </div>
  </div>

  <section class="section" id="ynghia">
    <div class="section-title">Ý Nghĩa Lịch Sử & Hoạt Động Kỷ Niệm</div>
    <div class="features">
      <div class="feature">
        <h3>Giải Phóng Miền Nam</h3>
        <p>Ngày 30/4/1975 là mốc son chói lọi, kết thúc chiến tranh, thống nhất đất nước, mang lại hòa bình và tự do cho dân tộc Việt Nam.</p>
      </div>
      <div class="feature">
        <h3>Quốc Tế Lao Động</h3>
        <p>Ngày 1/5 là dịp để tôn vinh người lao động, khẳng định giá trị và đóng góp to lớn của họ cho sự phát triển của xã hội.</p>
      </div>
      <div class="feature">
        <h3>Hoạt Động Kỷ Niệm</h3>
        <p>Tham gia các sự kiện, hội thảo, chương trình nghệ thuật, diễu hành và hoạt động cộng đồng để cùng nhau kỷ niệm những ngày ý nghĩa này.</p>
      </div>
    </div>
  </section>

  <!-- Slider Hình Ảnh -->
  <section class="section" id="slider">
    <div class="section-title">Hình Ảnh Kỷ Niệm</div>
    <div class="slider" id="slider">
      <button class="slider-btn prev" onclick="prevSlide()">&#10094;</button>
      <div class="slides" id="slides">
        <div class="slide">
          <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=800&q=80" alt="Lễ hội 30/4">
          <div class="slide-caption">Lễ hội kỷ niệm 30/4 tại TP.HCM</div>
        </div>
        <div class="slide">
          <img src="https://images.unsplash.com/photo-1464983953574-0892a716854b?auto=format&fit=crop&w=800&q=80" alt="Diễu hành 1/5">
          <div class="slide-caption">Diễu hành Quốc tế Lao động 1/5</div>
        </div>
        <div class="slide">
          <img src="https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=800&q=80" alt="Cờ đỏ sao vàng">
          <div class="slide-caption">Cờ đỏ sao vàng tung bay ngày đại thắng</div>
        </div>
      </div>
      <button class="slider-btn next" onclick="nextSlide()">&#10095;</button>
    </div>
  </section>

  <!-- Form Đăng Ký -->
  <section class="section" id="dangky">
    <div class="section-title">Đăng Ký Tham Gia Sự Kiện</div>
    <div class="form-section">
      <h3>Hãy để lại thông tin để nhận vé mời & cập nhật sự kiện!</h3>
      <form id="registerForm" autocomplete="off">
        <div class="form-group">
          <label for="name">Họ và tên *</label>
          <input type="text" id="name" name="name" required placeholder="Nhập họ và tên">
        </div>
        <div class="form-group">
          <label for="email">Email *</label>
          <input type="email" id="email" name="email" required placeholder="Nhập email">
        </div>
        <div class="form-group">
          <label for="message">Lời nhắn (tuỳ chọn)</label>
          <textarea id="message" name="message" placeholder="Bạn muốn nhắn gì?"></textarea>
        </div>
        <button type="submit">Gửi Đăng Ký</button>
        <div class="form-success" id="formSuccess"></div>
      </form>
    </div>
  </section>

  <!-- Liên hệ -->
  <section class="section" id="lienhe">
    <div class="section-title">Liên Hệ</div>
    <div style="text-align:center;">
      <p>Email: <a href="mailto:info@kyniem30415.vn">info@kyniem30415.vn</a></p>
      <p>Hotline: <a href="tel:0123456789">0123 456 789</a></p>
      <p>Địa chỉ: 123 Đường Lịch Sử, Quận 1, TP.HCM</p>
    </div>
  </section>

  <footer>
    <p>&copy; 2025 Kỷ Niệm 30/4 & 1/5. Thiết kế bởi <a href="#">Đội Ngũ Sáng Tạo</a>.</p>
  </footer>

  <script>
    // Countdown
    function updateCountdown() {
      // Đếm ngược đến 30/4 năm nay hoặc năm sau nếu đã qua
      const now = new Date();
      let year = now.getFullYear();
      const target = new Date(year, 3, 30, 0, 0, 0); // 30/4
      if (now > target) target.setFullYear(year + 1);
      const diff = target - now;
      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
      const minutes = Math.floor((diff / (1000 * 60)) % 60);
      const seconds = Math.floor((diff / 1000) % 60);
      document.getElementById('days').textContent = days.toString().padStart(2, '0');
      document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
      document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
      document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
    }
    setInterval(updateCountdown, 1000);
    updateCountdown();

    // Popup
    function openPopup() {
      document.getElementById('popup-bg').style.display = 'flex';
    }
    function closePopup() {
      document.getElementById('popup-bg').style.display = 'none';
    }
    window.onclick = function(e) {
      if (e.target === document.getElementById('popup-bg')) closePopup();
    }

    // Slider
    let currentSlide = 0;
    const slides = document.querySelectorAll('.slide');
    function showSlide(idx) {
      const slidesEl = document.getElementById('slides');
      if (idx < 0) currentSlide = slides.length - 1;
      else if (idx >= slides.length) currentSlide = 0;
      else currentSlide = idx;
      slidesEl.style.transform = `translateX(-${currentSlide * 100}%)`;
    }
    function nextSlide() { showSlide(currentSlide + 1); }
    function prevSlide() { showSlide(currentSlide - 1); }
    // Auto slide
    setInterval(() => { nextSlide(); }, 5000);
    showSlide(0);

    // Form
    document.getElementById('registerForm').onsubmit = function(e) {
      e.preventDefault();
      document.getElementById('formSuccess').textContent = "Đăng ký thành công! Cảm ơn bạn đã tham gia.";
      this.reset();
      setTimeout(() => { document.getElementById('formSuccess').textContent = ""; }, 5000);
    };
  </script>
</body>
</html>

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

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

395

396

397

398

399

400

401

402

403

404

405

406

407

408

409

410

411

412

413

414

415

416

417

418

419

420

421

422

423

424

425

426

427

428

429

430

431

432

433

434

435

436

437

438

439

440

441

442

443

444

445

446

447

448

449

450

451

452

453

454

455

456

457

458

459

460

461

462

463

464

465

466

467

468

469

470

471

472

473

474

475

476

477

478

479

480

481

482

483

484

485

486

487

488

489

490

491

492

493

494

495

496

497

498

499

500

501

502

503

504

505

506

507

508

509

510

<!DOCTYPE html>

<head>

<style>

html {

scroll-behavior: smooth;

}

body {

margin: 0;

font-family: 'Roboto', sans-serif;

background: linear-gradient(135deg, #ff512f 0%, #dd2476 100%);

color: #fff;

}

header {

background: rgba(0,0,0,0.7);

padding: 24px 0 12px 0;

text-align: center;

position: sticky;

top: 0;

z-index: 100;

box-shadow: 0 2px 12px rgba(0,0,0,0.2);

}

.logo {

font-size: 2.2rem;

font-weight: 700;

color: #ffd700;

letter-spacing: 2px;

margin-bottom: 4px;

}

nav {

margin-top: 8px;

}

nav a {

color: #ffd700;

text-decoration: none;

margin: 0 18px;

font-weight: 500;

font-size: 1.1rem;

transition: color 0.2s;

}

nav a:hover {

color: #fff;

}

.hero {

position: relative;

min-height: 480px;

display: flex;

align-items: center;

justify-content: center;

background: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1200&q=80') center/cover no-repeat;

}

.hero::after {

content: '';

position: absolute;

inset: 0;

background: rgba(0,0,0,0.55);

}

.hero-content {

position: relative;

z-index: 2;

text-align: center;

color: #fff;

padding: 40px 20px;

}

.hero-content h1 {

font-size: 2.8rem;

margin-bottom: 12px;

color: #ffd700;

text-shadow: 2px 2px 8px #000;

}

.hero-content p {

font-size: 1.25rem;

margin-bottom: 28px;

text-shadow: 1px 1px 6px #000;

}

.cta-btn {

background: #ffd700;

color: #dd2476;

padding: 15px 40px;

font-size: 1.1rem;

font-weight: bold;

border: none;

border-radius: 30px;

cursor: pointer;

transition: background 0.3s;

box-shadow: 0 4px 24px rgba(0,0,0,0.15);

}

.cta-btn:hover {

background: #ffae00;

color: #fff;

}

.countdown {

margin: 32px auto 0;

display: flex;

justify-content: center;

gap: 32px;

font-size: 1.3rem;

font-weight: 700;

color: #ffd700;

background: rgba(0,0,0,0.3);

border-radius: 16px;

padding: 16px 32px;

width: fit-content;

box-shadow: 0 2px 12px rgba(0,0,0,0.15);

}

.countdown span {

min-width: 60px;

display: inline-block;

}

.section {

padding: 60px 20px 40px 20px;

max-width: 1100px;

margin: 0 auto;

}

.section-title {

font-size: 2rem;

color: #ffd700;

margin-bottom: 24px;

text-align: center;

letter-spacing: 1px;

}

.features {

display: flex;

flex-wrap: wrap;

justify-content: center;

gap: 32px;

margin-bottom: 40px;

}

.feature {

background: rgba(255,255,255,0.08);

border-radius: 16px;

padding: 28px 20px;

width: 300px;

box-shadow: 0 4px 20px rgba(0,0,0,0.18);

text-align: center;

transition: transform 0.2s;

}

.feature:hover {

transform: translateY(-8px) scale(1.03);

background: rgba(255,255,255,0.13);

}

.feature h3 {

color: #ffd700;

margin-bottom: 10px;

font-size: 1.2rem;

}

.feature p {

font-size: 1rem;

color: #f0f0f0;

}

/* Slider */

.slider {

position: relative;

max-width: 700px;

margin: 0 auto 40px auto;

border-radius: 18px;

overflow: hidden;

box-shadow: 0 4px 24px rgba(0,0,0,0.18);

}

.slides {

display: flex;

transition: transform 0.5s;

}

.slide {

min-width: 100%;

transition: opacity 0.5s;

position: relative;

}

.slide img {

width: 100%;

display: block;

height: 320px;

object-fit: cover;

}

.slide-caption {

position: absolute;

bottom: 18px;

left: 0;

width: 100%;

text-align: center;

color: #fff;

background: rgba(0,0,0,0.4);

padding: 8px 0;

font-size: 1.1rem;

letter-spacing: 1px;

}

.slider-btn {

position: absolute;

top: 50%;

transform: translateY(-50%);

background: rgba(0,0,0,0.4);

border: none;

color: #ffd700;

font-size: 2rem;

padding: 8px 16px;

cursor: pointer;

z-index: 2;

border-radius: 50%;

transition: background 0.2s;

}

.slider-btn:hover {

background: #ffd700;

color: #dd2476;

}

.slider-btn.prev { left: 10px; }

.slider-btn.next { right: 10px; }

/* Popup */

.popup-bg {

display: none;

position: fixed;

inset: 0;

background: rgba(0,0,0,0.7);

z-index: 2000;

align-items: center;

justify-content: center;

}

.popup {

background: #fff;

color: #222;

border-radius: 16px;

padding: 32px 28px;

max-width: 400px;

text-align: center;

position: relative;

box-shadow: 0 8px 32px rgba(0,0,0,0.25);

animation: popupIn 0.3s;

}

@keyframes popupIn {

from { transform: scale(0.8); opacity: 0; }

to { transform: scale(1); opacity: 1; }

}

.popup h2 {

color: #dd2476;

margin-bottom: 12px;

}

.popup p {

margin-bottom: 18px;

}

.close-popup {

position: absolute;

top: 12px;

right: 18px;

background: none;

border: none;

font-size: 1.5rem;

color: #dd2476;

cursor: pointer;

}

/* Form */

.form-section {

background: rgba(0,0,0,0.25);

border-radius: 18px;

max-width: 500px;

margin: 0 auto;

padding: 32px 24px;

box-shadow: 0 4px 24px rgba(0,0,0,0.13);

}

.form-section h3 {

color: #ffd700;

margin-bottom: 18px;

}

.form-group {

margin-bottom: 18px;

text-align: left;

}

.form-group label {

display: block;

margin-bottom: 6px;

color: #ffd700;

font-weight: 500;

}

.form-group input, .form-group textarea {

width: 100%;

padding: 10px 12px;

border-radius: 8px;

border: none;

font-size: 1rem;

margin-bottom: 4px;

background: #fff;

color: #222;

}

.form-group textarea {

resize: vertical;

min-height: 60px;

}

.form-section button {

background: #dd2476;

color: #fff;

padding: 12px 32px;

border: none;

border-radius: 24px;

font-size: 1.1rem;

font-weight: bold;

cursor: pointer;

transition: background 0.2s;

}

.form-section button:hover {

background: #ffd700;

color: #dd2476;

}

.form-success {

color: #ffd700;

margin-top: 12px;

text-align: center;

font-weight: 500;

}

footer {

background: rgba(0,0,0,0.8);

padding: 24px 0 12px 0;

color: #ccc;

font-size: 0.95rem;

text-align: center;

margin-top: 40px;

}

footer a {

color: #ffd700;

text-decoration: none;

}

footer a:hover {

text-decoration: underline;

}

@media (max-width: 900px) {

.features { flex-direction: column; gap: 18px; }

.feature { width: 100%; }

.slider { max-width: 100%; }

}

@media (max-width: 600px) {

.hero-content h1 { font-size: 1.5rem; }

.section-title { font-size: 1.2rem; }

.countdown { font-size: 1rem; gap: 12px; padding: 10px 8px; }

.form-section { padding: 18px 8px; }

}

</style>

</head>

<body>

<nav>

<a href="#ynghia">Ý Nghĩa</a>

</nav>

</header>

<h1>Tự Hào Dân Tộc - Vững Bước Tương Lai</h1>

<p>Chào mừng ngày Giải phóng miền Nam (30/4) & Quốc tế Lao động (1/5). Hãy cùng nhau nhìn lại lịch sử hào hùng và hướng tới tương lai phát triển!</p>

<button class="cta-btn" onclick="openPopup()">Tìm Hiểu Ý Nghĩa</button>

<span id="days">00</span> ngày

<span id="hours">00</span> giờ

<span id="minutes">00</span> phút

<span id="seconds">00</span> giây

</div>

</section>

<h2>Ý Nghĩa 30/4 & 1/5</h2>

<p><strong>30/4/1975</strong> là ngày giải phóng miền Nam, thống nhất đất nước, mở ra kỷ nguyên mới cho dân tộc Việt Nam.</p>

<p><strong>1/5</strong> là ngày Quốc tế Lao động, tôn vinh người lao động và khẳng định vai trò của lao động trong sự phát triển xã hội.</p>

</div>

<div class="section-title">Ý Nghĩa Lịch Sử & Hoạt Động Kỷ Niệm</div>

<h3>Giải Phóng Miền Nam</h3>

<p>Ngày 30/4/1975 là mốc son chói lọi, kết thúc chiến tranh, thống nhất đất nước, mang lại hòa bình và tự do cho dân tộc Việt Nam.</p>

</div>

<p>Ngày 1/5 là dịp để tôn vinh người lao động, khẳng định giá trị và đóng góp to lớn của họ cho sự phát triển của xã hội.</p>

</div>

<p>Tham gia các sự kiện, hội thảo, chương trình nghệ thuật, diễu hành và hoạt động cộng đồng để cùng nhau kỷ niệm những ngày ý nghĩa này.</p>

</div>

</section>

</div>

</div>

<div class="slide-caption">Cờ đỏ sao vàng tung bay ngày đại thắng</div>

</div>

</div>

</section>

<h3>Hãy để lại thông tin để nhận vé mời & cập nhật sự kiện!</h3>

</div>

<label for="email">Email *</label>

</div>

</div>

</form>

</div>

</section>

<p>Email: <a href="mailto:info@kyniem30415.vn">info@kyniem30415.vn</a></p>

<p>Hotline: <a href="tel:0123456789">0123 456 789</a></p>

<p>Địa chỉ: 123 Đường Lịch Sử, Quận 1, TP.HCM</p>

</div>

</section>

</footer>

// Countdown

function updateCountdown() {

// Đếm ngược đến 30/4 năm nay hoặc năm sau nếu đã qua

const now = new Date();

let year = now.getFullYear();

const target = new Date(year, 3, 30, 0, 0, 0); // 30/4

if (now > target) target.setFullYear(year + 1);

const diff = target - now;

const days = Math.floor(diff / (1000 * 60 * 60 * 24));

const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);

const minutes = Math.floor((diff / (1000 * 60)) % 60);

const seconds = Math.floor((diff / 1000) % 60);

document.getElementById('days').textContent = days.toString().padStart(2, '0');

document.getElementById('hours').textContent = hours.toString().padStart(2, '0');

document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');

document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');

}

setInterval(updateCountdown, 1000);

updateCountdown();

// Popup

function openPopup() {

document.getElementById('popup-bg').style.display = 'flex';

}

function closePopup() {

document.getElementById('popup-bg').style.display = 'none';

}

window.onclick = function(e) {

if (e.target === document.getElementById('popup-bg')) closePopup();

}

// Slider

let currentSlide = 0;

const slides = document.querySelectorAll('.slide');

function showSlide(idx) {

const slidesEl = document.getElementById('slides');

if (idx < 0) currentSlide = slides.length - 1;

else if (idx >= slides.length) currentSlide = 0;

else currentSlide = idx;

slidesEl.style.transform = `translateX(-${currentSlide * 100}%)`;

}

function nextSlide() { showSlide(currentSlide + 1); }

function prevSlide() { showSlide(currentSlide - 1); }

// Auto slide

setInterval(() => { nextSlide(); }, 5000);

showSlide(0);

// Form

document.getElementById('registerForm').onsubmit = function(e) {

e.preventDefault();

document.getElementById('formSuccess').textContent = "Đăng ký thành công! Cảm ơn bạn đã tham gia.";

this.reset();

setTimeout(() => { document.getElementById('formSuccess').textContent = ""; }, 5000);

};

</script>

</body>

</html>

Bước 2: Chỉnh sửa nội dung theo ý muốn

Bạn có thể thay đổi tiêu đề, hình ảnh, nội dung sự kiện, màu sắc hoặc thêm các tính năng như form đăng ký, đếm ngược, popup,… để phù hợp với mục đích sử dụng.

Bước 3: Đưa lên hosting hoặc chia sẻ

Sau khi chỉnh sửa, bạn chỉ cần upload file HTML lên hosting hoặc chia sẻ cho bạn bè, đồng nghiệp cùng sử dụng.

Lưu ý khi sử dụng sharecode HTML sự kiện lịch sử

Nên kiểm tra lại bản quyền hình ảnh trước khi sử dụng cho mục đích thương mại.
Tối ưu thêm các thẻ meta, heading, alt ảnh để tăng hiệu quả SEO.
Có thể kết hợp với CSS framework như Bootstrap để giao diện đẹp hơn.

Kết luận

Với sharecode HTML sự kiện lịch sử miễn phí trên, bạn hoàn toàn có thể tạo ra một trang web kỷ niệm các ngày lễ lớn một cách nhanh chóng, chuyên nghiệp và chuẩn SEO. Đừng quên chia sẻ bài viết này nếu bạn thấy hữu ích nhé!

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Dojek – Share Fullcode Mẫu landing page Laravel 11 hiện đại, linh hoạt và dễ tùy chỉnh

Dojek là mẫu landing page được xây dựng bằng Laravel 11 và Bootstrap 5.3, tối ưu cho việc giới thiệu sản phẩm, dịch vụ hoặc...
Silva – Sharecode giao diện quản trị Bootstrap 5 hiện đại, linh hoạt

Silva là mẫu dashboard quản trị được xây dựng bằng Bootstrap 5.3.0, hỗ trợ đầy đủ responsive, thích hợp cho mọi loại hình dự án...
Sharecode Giao diện quản trị Laravel 12

Clivax – Giao diện quản trị Laravel 12 hiện đại, chuẩn responsive Clivax là mẫu bảng điều khiển quản trị mạnh mẽ được phát triển...
Sharecode Renev – Mẫu Website Flask Cho Agency Sáng Tạo & Doanh Nghiệp Công Nghệ

Bạn đang tìm kiếm một giao diện website hiện đại, chuyên nghiệp và dễ tùy biến cho agency sáng tạo, công ty marketing hoặc doanh...
WowTube – Theme Chia Sẻ Phim Miễn Phí Đẹp, Mượt, Chuẩn SEO

Bạn đang ấp ủ ước mơ tạo một trang web chia sẻ phim, video hay media giống như YouTube, Dailymotion nhưng không biết bắt đầu...
Sharecode MYKD – Giao diện Tailwind dành cho Esports & Gaming

Bạn đang làm một trang web game mà lại trông thiếu lửa? MYKD sẽ cứu cánh cho bạn ngay từ cái nhìn đầu tiên. Đây...
NFTMAX — Sharecode Mẫu giao diện quản trị NFT

Chúng tôi hiểu rằng làm admin không phải là công việc nhẹ nhàng – đặc biệt là trong thế giới NFT, nơi mỗi pixel cũng...
AINext – Sharecode Mẫu Giao Diện React Cho Startup AI, Công Nghệ và Ứng Dụng Tương Lai

Mở khóa tương lai công nghệ với AINext – Giao diện React chuyên biệt cho trí tuệ nhân tạo và startup AI Trong kỷ nguyên...
Frox – Sharecode Mẫu Dashboard TailwindCSS Đa Năng, Tối Ưu Cho Nhà Phát Triển Web

Tăng tốc phát triển giao diện quản trị với Frox Bạn đang tìm kiếm một template dashboard hiện đại, sạch sẽ và mạnh mẽ để...
Open9 – Mẫu Giao Diện HTML Cho NFT Marketplace Chuyên Nghiệp và Hiện Đại

Tạo nền tảng giao dịch NFT nhanh chóng, linh hoạt với Open9 Thế giới NFT đang bùng nổ, và nếu bạn đang tìm kiếm một...
Sharecode Maxton – Mẫu Bảng Điều Khiển Quản Trị Bootstrap 5 Đa Năng và Chuyên Nghiệp

Giới thiệu Admin Template Maxton Maxton là một mẫu bảng điều khiển quản trị mạnh mẽ, hiện đại được xây dựng trên nền tảng Bootstrap...
Sharecode Theme WordPress Miễn Phí: Integro – Giao Diện Đỉnh Cao Cho Studio & Agency Sáng Tạo

Tải ngay Integro – Theme WordPress Miễn Phí, Hiện Đại, Chuẩn SEO, Siêu Đẹp! Bạn đang tìm một giao diện WordPress chuyên nghiệp, hiện đại...
Tặng Miễn Phí Template NFT “NFTku” – Dựng Web Chuẩn Vũ Trụ Metaverse, Không Cần Biết Code!

Bạn có một bộ sưu tập NFT chất như nước cất? Muốn khoe cho thế giới biết bạn là ai trong Web3? Nhưng lại không...
Share Code Theme WordPress Công Ty Miễn Phí – Doob Business & Consulting 0đ

Bạn đang tìm một theme WordPress công ty chuyên nghiệp, hiện đại, dễ tùy biến và hoàn toàn miễn phí? Chúng tôi chia sẻ ngay...
🎁 Tặng Theme WordPress Marketing Miễn Phí 0đ – Marko Template Kit Elementor 🎉

Bạn đang tìm kiếm một giao diện đẹp, chuyên nghiệp để xây dựng website cho công ty marketing, dịch vụ SEO, hoặc agency truyền thông...
Sharecode Theme Marketing Chuẩn SEO: BrandBuzz – Cực Đỉnh Cho Dân Làm Digital!

💬 “Đẹp trai không bằng chai mặt, nhưng website đẹp thì khách tự tìm đến!”Và nếu bạn đang loay hoay tìm một giao diện xịn...