Starting to add some content.

This commit is contained in:
2025-05-18 22:00:05 +10:00
parent 825a058bef
commit c57ab6f147
6 changed files with 72 additions and 13 deletions

5
.vscode/extensions.json vendored Normal file
View File

@@ -0,0 +1,5 @@
{
"recommendations": [
"dreamcatcher45.podmanager"
]
}

BIN
image/icon/chat.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

BIN
image/icon/email.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

BIN
image/icon/handshake.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 106 KiB

BIN
image/icon/webcam.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

View File

@@ -1,27 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Homelab Brisbane</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
crossorigin="anonymous" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous" />
<style>
.card img {
max-height: 120px;
height: auto;
width: auto;
}
#about { float: right; font-size: 8pt; font-style: italic; }
</style>
</head>
<body>
<div class="container mt-5">
<h1 class="text-center">Hello, Bootstrap & jQuery!</h1>
<p class="text-center">This is a simple one-page HTML template.</p>
<div class="container">
<div class="p-5 mt-4 mb-4 bg-body-secondary rounded-3">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">Homelab Brisbane</h1>
<p class="col-md-12 fs-4">Using a series of utilities, you can create this jumbotron, just like the one in previous versions of Bootstrap. Check out the examples below for how you can remix and restyle it to your liking.</p>
<a id="about" href="about.html">Learn more...</a>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<img src="image/icon/handshake.png" class="card-img-top" alt="...">
<h5 class="card-title">Meet In Person</h5>
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<img src="image/icon/webcam.png" class="card-img-top" alt="...">
<h5 class="card-title">Meet Online</h5>
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<img src="image/icon/chat.png" class="card-img-top" alt="...">
<h5 class="card-title">Online Forum</h5>
This is some text within a card body.
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<img src="image/icon/email.png" class="card-img-top" alt="...">
<h5 class="card-title">Contact Up</h5>
This is some text within a card body.
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col">
<iframe src="https://calendar.google.com/calendar/embed?src=5c588a442ef8884195b84068cd7e4d51717723ff65938e02417e39e69f29d0b8%40group.calendar.google.com&ctz=Australia%2FBrisbane" style="border: 0" width="100%" height="600" frameborder="0" scrolling="no"></iframe>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous">
</script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
});
</script>
</body>
</html>
</html>