mirror of
https://github.com/rvtr/ninjacheetah.github.io.git
synced 2025-06-18 11:05:37 -04:00
Improved gallery for viewing PFP variants
This commit is contained in:
NinjaCheetah
parent
ad5c6c9ddb
commit
a9eed9e3ea
@ -5,10 +5,10 @@
|
||||
{% endif %}
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">NinjaCheetah's Site</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarPrimary" aria-controls="navbarPrimary" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarText">
|
||||
<div class="collapse navbar-collapse" id="navbarPrimary">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/">Home</a>
|
||||
|
||||
@ -16,12 +16,14 @@ layout: default
|
||||
<div class="container pb-5">
|
||||
<nav class="navbar navbar-expand-lg sticky-top bg-light navbar-light">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Back To Top</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarText">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Back to Top</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#icons">Icons</a>
|
||||
</li>
|
||||
@ -106,7 +108,9 @@ layout: default
|
||||
<h6 class="card-subtitle mb-2 text-muted">Personal Profile Picture</h6>
|
||||
<p class="card-text">First non-Minecraft profile picture. Colors are the bisexual flag. This PFP had many variations.</p>
|
||||
<a href="/assets/graphics/ninjacheetah-2020-09-20.png" class="btn btn-primary">Open Original</a>
|
||||
<a href="/graphics/general/ninjacheetah-2020-variations.html" class="btn btn-outline-primary">Browse Variations</a>
|
||||
<button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
|
||||
Browse Variations
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -133,4 +137,61 @@ layout: default
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5" id="staticBackdropLabel">2020 NinjaCheetah PFP Variations</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div id="carouselExampleCaptions" class="carousel slide text-center" 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>
|
||||
</div>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="/assets/graphics/ninjacheetah-2020-09-20-halloween.png" class="d-block h-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Halloween Variant</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/assets/graphics/ninjacheetah-2020-09-20-christmas.png" class="d-block h-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Christmas Variant</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/assets/graphics/ninjacheetah-2020-09-20-pride.png" class="d-block h-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Pride Month Variant</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/assets/graphics/ninjacheetah-2020-09-20-lite.png" class="d-block h-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5 style="color: black">"NinjaCheetah Lite" Variant</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,56 +0,0 @@
|
||||
---
|
||||
title: 2020 NinjaCheetah PFP Variations
|
||||
layout: default
|
||||
---
|
||||
|
||||
<style>
|
||||
.carousel-inner{
|
||||
width:100%;
|
||||
}
|
||||
.carousel-inner img{
|
||||
display:inline-block !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="carouselExampleCaptions" class="carousel slide text-center" 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>
|
||||
</div>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="/assets/graphics/ninjacheetah-2020-09-20-halloween.png" class="d-block h-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Halloween Variant</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/assets/graphics/ninjacheetah-2020-09-20-christmas.png" class="d-block h-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Christmas Variant</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/assets/graphics/ninjacheetah-2020-09-20-pride.png" class="d-block h-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Pride Month Variant</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="/assets/graphics/ninjacheetah-2020-09-20-lite.png" class="d-block h-100" alt="...">
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5 style="color: black">"NinjaCheetah Lite" Variant</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user