Robert Nedela
89 lines
3.4 KiB
HTML
89 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="./public/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Website CSS -->
|
|
<link rel="stylesheet" type="text/css" href="./public/style.css">
|
|
|
|
<title>Lab 02 - Web Basics</title>
|
|
</head>
|
|
<body>
|
|
<!-- Note: <header> tag is a layout standard in HTML5! use CSS to customize it! -->
|
|
<header class="site-header">
|
|
<div class="container">
|
|
<div id="header-image"></div>
|
|
</div>
|
|
|
|
<!-- This is a navigation bar (i.e., menu) -->
|
|
<nav class="navbar navbar-expand-md navbar-dark">
|
|
<div class="container">
|
|
<a class="navbar-brand mr-4" href="#todo">Menu</a>
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarToggle">
|
|
<!-- Left side buttons: -->
|
|
<div class="navbar-nav mr-auto">
|
|
<a class="nav-item nav-link" href="/">Home</a>
|
|
<a class="nav-item nav-link" href="second">Second</a>
|
|
<a class="nav-item nav-link" href="#"
|
|
onclick="alert('Hello to you, too!')">Contact</a>
|
|
</div>
|
|
<!-- Right side: -->
|
|
<div class="navbar-nav">
|
|
<a class="nav-item nav-link" href="#not-yet">Login</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Main page content element (with main content + right sidebar) -->
|
|
<main role="main" class="container">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<!-- Left-side content: page title + actual page text -->
|
|
<div class="content-box main-content">
|
|
<!-- Big page title -->
|
|
<h1 class="main-title">Homepage</h1>
|
|
<!-- TODO_task01: Add some lorem ipsum paragraphs here (remove the TODO class, please!) -->
|
|
<p class="todo">Lorem ipsum dolor sit amet consectetur adipiscing elit. Adipiscing elit quisque faucibus ex sapien vitae pellentesque. Vitae pellentesque sem placerat in id cursus mi. Cursus mi pretium tellus duis convallis tempus leo. Tempus leo eu aenean sed diam urna tempor. Urna tempor pulvinar vivamus fringilla lacus nec metus.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right side bar -->
|
|
<div class="col-md-4">
|
|
<div class="content-box" id="account">
|
|
<h4>Your Account</h4>
|
|
<!-- Don't worry, you'll get to make this update dynamically at the next lab! -->
|
|
<p class="logged-out">Not authenticated!</p>
|
|
<p>Click <a href="#not-today">here to login</a></p>
|
|
</div>
|
|
|
|
<div class="content-box">
|
|
<h4>Changelog</h4>
|
|
<p>
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item list-group-item-light">
|
|
<div class="d-flex w-100 justify-content-between">
|
|
<div class="news-item mb-1">First version of the website</div>
|
|
<small class="text-muted">📅 2024-03-18</small>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Include Bootstrap script (should be here, at the bottom, as per Bootstrap docs) -->
|
|
<script src="./public/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|
|
|
</body>
|
|
</html>
|