mirror of
https://github.com/kforney/kforney.github.io.git
synced 2024-11-13 18:42:03 -07:00
Add art carousel.
This commit is contained in:
parent
bccc7914f6
commit
fd75763abd
GPG key ID:
3AB4E2E04CEF656F
5 changed files with 99 additions and 3 deletions
21
css/main.css
21
css/main.css
|
|
@ -91,13 +91,34 @@ html {
|
|||
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #161A25;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: VT323;
|
||||
font-size: 64px;
|
||||
src: url("/fonts/VT323-Regular.ttf");
|
||||
color: #FFBC42;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
--bs-dark-rgb: 40, 48, 68;
|
||||
--bs-light-rgb: 120, 161, 187;
|
||||
--bs-body-color: 120, 161, 187;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-family: VT323;
|
||||
font-size: 36px;
|
||||
src: url("/fonts/VT323-Regular.ttf");
|
||||
color: #FFBC42;
|
||||
}
|
||||
|
||||
.text-shadow {
|
||||
text-shadow: #ffbc42 1px 1px 2px;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Helper classes
|
||||
|
|
|
|||
BIN
img/art/cat.png
BIN
img/art/cat.png
Binary file not shown.
|
Before Width: | Height: | Size: 18 MiB After Width: | Height: | Size: 1.1 MiB |
BIN
img/art/dadKaj.png
Executable file
BIN
img/art/dadKaj.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 917 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB After Width: | Height: | Size: 1.1 MiB |
81
index.html
81
index.html
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-dark bg-dark shadow-lg">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow-lg">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="img/branding/LunarPenguin_newPalette_transparency_brightDiamond.png" alt="Logo" style="max-height: 50px;padding-right: 15px;">
|
||||
|
|
@ -35,9 +35,84 @@
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="container-lg">
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<h1>ART</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div id="art-carousel" class="carousel slide" data-bs-ride="false">
|
||||
<div class="carousel-indicators">
|
||||
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
|
||||
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
||||
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
|
||||
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
|
||||
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="4" aria-label="Slide 5"></button>
|
||||
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="5" aria-label="Slide 6"></button>
|
||||
</div>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="img/art/rakuenDoor.png" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5 class="text-shadow">RAKUEN ART</h5>
|
||||
<p class="text-shadow">A scene from the game <i>Rakuen</i>, recreated in Blender.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="img/art/airship1.png" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5 class="text-shadow">AIRSHIP MODEL</h5>
|
||||
<p class="text-shadow">Created in Blender</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="img/art/airship2.png" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5 class="text-shadow">AIRSHIP MODEL</h5>
|
||||
<p class="text-shadow">Created in Blender.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="img/art/cat.png" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5 class="text-shadow">DIGITAL PORTRAIT</h5>
|
||||
<p class="text-shadow">A digital painting of my cat, Okapi.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="img/art/portrait_dad.png" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5 class="text-shadow">DIGITAL PORTRAIT</h5>
|
||||
<p class="text-shadow">A picture of my dad.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="img/art/dadKaj.png" class="d-block w-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5 style="color:#283044" class="text-shadow">DIGITAL PORTRAIT</h5>
|
||||
<p style="color:#283044" class="text-shadow">A picture I recreated of my dad and I.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#art-carousel" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#art-carousel" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add your site or application content here -->
|
||||
<h1>Site Under Construction</h1>
|
||||
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
|
||||
<script src="js/plugins.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue