146 lines
4.7 KiB
HTML
146 lines
4.7 KiB
HTML
<!doctype html>
|
|
<html lang="en" data-bs-theme="auto">
|
|
<head><script src="../assets/js/color-modes.js"></script>
|
|
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Portfolio Darius</title>
|
|
<link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/navbar-static/">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
|
|
<script src="https://unpkg.com/htmx.org@1.9.2" integrity="sha384-L6OqL9pRWyyFU3+/bjdSri+iIphTN/bvYyM37tICVyOJkWZLpP2vGn6VUEXgzg6h" crossorigin="anonymous"></script>
|
|
|
|
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
.bd-placeholder-img {
|
|
font-size: 1.125rem;
|
|
text-anchor: middle;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.bd-placeholder-img-lg {
|
|
font-size: 3.5rem;
|
|
}
|
|
}
|
|
|
|
.b-example-divider {
|
|
width: 100%;
|
|
height: 3rem;
|
|
background-color: rgba(0, 0, 0, .1);
|
|
border: solid rgba(0, 0, 0, .15);
|
|
border-width: 1px 0;
|
|
box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
|
|
}
|
|
|
|
.b-example-vr {
|
|
flex-shrink: 0;
|
|
width: 1.5rem;
|
|
height: 100vh;
|
|
}
|
|
|
|
.bi {
|
|
vertical-align: -.125em;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.nav-scroller {
|
|
position: relative;
|
|
z-index: 2;
|
|
height: 2.75rem;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.nav-scroller .nav {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
padding-bottom: 1rem;
|
|
margin-top: -1px;
|
|
overflow-x: auto;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.btn-bd-primary {
|
|
--bd-violet-bg: #712cf9;
|
|
--bd-violet-rgb: 112.520718, 44.062154, 249.437846;
|
|
|
|
--bs-btn-font-weight: 600;
|
|
--bs-btn-color: var(--bs-white);
|
|
--bs-btn-bg: var(--bd-violet-bg);
|
|
--bs-btn-border-color: var(--bd-violet-bg);
|
|
--bs-btn-hover-color: var(--bs-white);
|
|
--bs-btn-hover-bg: #6528e0;
|
|
--bs-btn-hover-border-color: #6528e0;
|
|
--bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
|
|
--bs-btn-active-color: var(--bs-btn-hover-color);
|
|
--bs-btn-active-bg: #5a23c8;
|
|
--bs-btn-active-border-color: #5a23c8;
|
|
}
|
|
|
|
.bd-mode-toggle {
|
|
z-index: 1500;
|
|
}
|
|
|
|
.bd-mode-toggle .dropdown-menu .active .bi {
|
|
display: block !important;
|
|
}
|
|
</style>
|
|
|
|
|
|
</head>
|
|
{{template "navbar"}}
|
|
{{template "themeSelector"}}
|
|
|
|
<body>
|
|
|
|
<main>
|
|
<div class="container py-4">
|
|
<header class="pb-3 mb-4 border-bottom">
|
|
<a href="/" class="d-flex align-items-center text-body-emphasis text-decoration-none">
|
|
<img src="../assets/brand/Darius_pasfoto_2023_Large.png" alt="Italian Trulli" width="65" height="87" class="me-2" role="img">
|
|
<span class="fs-1">Mijn portfolio</span>
|
|
</a>
|
|
</header>
|
|
|
|
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
|
|
<div class="container-fluid py-5">
|
|
<h1 class="display-5 fw-bold">Wie ben ik?</h1>
|
|
<p class="col-md-8 fs-4">
|
|
Mijn naam is Darius Klein. Ik ben een backend developer in opleiding.
|
|
</p>
|
|
<a class="btn btn-primary btn-lg" href="/about">Meer over mij</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row align-items-md-stretch">
|
|
<div class="col-md-6">
|
|
<div class="h-100 p-5 text-bg-dark rounded-3">
|
|
<h2>Change the background</h2>
|
|
<p>Swap the background-color utility and add a `.text-*` color utility to mix up the jumbotron look. Then, mix and match with additional component themes and more.</p>
|
|
<button class="btn btn-outline-light" type="button">Example button</button>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="h-100 p-5 bg-body-tertiary border rounded-3">
|
|
<h2>Add borders</h2>
|
|
<p>Or, keep it light and add a border for some added definition to the boundaries of your content. Be sure to look under the hood at the source HTML here as we've adjusted the alignment and sizing of both column's content for equal-height.</p>
|
|
<button class="btn btn-outline-secondary" type="button">Example button</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="pt-3 mt-4 text-body-secondary border-top">
|
|
© 2024
|
|
</footer>
|
|
</div>
|
|
</main>
|
|
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
</body>
|
|
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
|
|
</html>
|