49 lines
2.8 KiB
HTML
49 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Hello World - Bootstrap</title>
|
|
<!-- Bootstrap 5.3.0 CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
|
|
<!-- Custom styles -->
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body class="d-flex align-items-center justify-content-center min-vh-100 bg-light">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-md-8 col-lg-6">
|
|
<div class="card shadow-lg">
|
|
<div class="card-body p-4 p-md-5">
|
|
<h1 class="card-title text-center mb-4">Hello, World!</h1>
|
|
<p class="card-text text-center text-muted mb-4">
|
|
Welcome to this Bootstrap-powered page. This is a simple demonstration
|
|
of Bootstrap 5.3.0 components and utilities working together to create
|
|
a beautiful, responsive design.
|
|
</p>
|
|
|
|
<div class="alert alert-info d-flex align-items-center mb-4" role="alert">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-calendar-event flex-shrink-0 me-2" viewBox="0 0 16 16">
|
|
<path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
|
|
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
|
|
</svg>
|
|
<div>
|
|
Today's date: <strong>Wednesday, February 18th, 2026</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
|
|
<button type="button" class="btn btn-primary btn-lg px-4 gap-3">Get Started</button>
|
|
<button type="button" class="btn btn-outline-secondary btn-lg px-4">Learn More</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap 5.3.0 JS Bundle -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
|
|
</body>
|
|
</html>
|