kforney/kforney.github.io
1
0
Fork 0
mirror of https://github.com/kforney/kforney.github.io.git synced 2024-11-14 19:10:10 -07:00
Code Issues Projects Releases Packages Wiki Activity

Add art carousel.

Browse source
This commit is contained in:
Kaj Forney 2022-12-06 05:31:59 -07:00
parent bccc7914f6
commit fd75763abd
Signed by: kforney
GPG key ID: 3AB4E2E04CEF656F
5 changed files with 99 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
css/main.css
View file

@ -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 { .bg-dark {
--bs-dark-rgb: 40, 48, 68; --bs-dark-rgb: 40, 48, 68;
--bs-light-rgb: 120, 161, 187; --bs-light-rgb: 120, 161, 187;
--bs-body-color: 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 Helper classes

BIN
img/art/cat.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 18 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
img/art/dadKaj.png Executable file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 917 KiB

BIN
img/art/portrait_dad.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

81
index.html
View file

@ -26,7 +26,7 @@
<body> <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"> <div class="container-fluid">
<a class="navbar-brand" href="#"> <a class="navbar-brand" href="#">
<img src="img/branding/LunarPenguin_newPalette_transparency_brightDiamond.png" alt="Logo" style="max-height: 50px;padding-right: 15px;"> <img src="img/branding/LunarPenguin_newPalette_transparency_brightDiamond.png" alt="Logo" style="max-height: 50px;padding-right: 15px;">
@ -35,9 +35,84 @@
</div> </div>
</nav> </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/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script> <script src="js/plugins.js"></script>
<script src="js/main.js"></script> <script src="js/main.js"></script>