F2U - Navigation V1

<!-- Navigation V1 by Aly -->

<!-- Outer Container -->
<div style="position: relative; display: block; left: 0; top: 0; width: 100%; height: 100%; background-size: 100%; background-image: url('https://d1fs8ljxwyzba6.cloudfront.net/assets/editorial/2020/04/video-game-virtual-zoom-backgrounds-animal-crossing.jpg');">

<!-- Inner Containers -->
<div class="row"><div class="col-lg-4 px-4 pt-4" style="margin: 0 auto;">

<!-- Screen -->
<div class="mb-4" style="position: relative; border-radius: 5rem; padding: 5rem 1.5rem 2rem 1.5rem; background: #f5f2e6; color: #473d38; text-align: center">

<!-- Page Container -->
<div class="tab-content" style="width: 100%; min-height: 15rem; margin: 0 auto 2rem auto;">

		<!-- Default Page -->
		<div class="tab-pane active" id="page-0">

		<!-- LINK 1 -->
		<a href="http://" style="color: #473d38 !important;"><div data-toggle="tooltip" style="display: inline-block; margin: 0 0.5rem 0.5rem 0.5rem; width: 4rem; height: 4rem; line-height: 4rem; font-size: 2rem; border-radius: 1rem; background: #ba90eb;" title="Link 1"><i class="fas fa-camera"></i></div></a>

		<!-- LINK 2 -->
		<a href="http://" style="color: #473d38 !important;"><div data-toggle="tooltip" style="display: inline-block; margin: 0 0.5rem 0.5rem 0.5rem; width: 4rem; height: 4rem; line-height: 4rem; font-size: 2rem; border-radius: 1rem; background: #8d9bed;" title="Link 2"><i class="fas fa-book"></i></div></a>

		<!-- LINK 3 -->
		<a href="http://" style="color: #473d38 !important;"><div data-toggle="tooltip" style="display: inline-block; margin: 0 0.5rem 0.5rem 0.5rem; width: 4rem; height: 4rem; line-height: 4rem; font-size: 2rem; border-radius: 1rem; background: #f1cd75;" title="Link 3"><i class="fas fa-tasks"></i></div></a>

		<div style="height: 1rem;display:block"></div>

		<!-- LINK 4 -->
		<a href="http://" style="color: #473d38 !important;"><div data-toggle="tooltip" style="display: inline-block; margin: 0 0.5rem 0.5rem 0.5rem; width: 4rem; height: 4rem; line-height: 4rem; font-size: 2rem; border-radius: 1rem; background: #d49675;" title="Link 4"><i class="fas fa-hard-hat"></i></div></a>

		<!-- LINK 5 -->
		<a href="http://" style="color: #473d38 !important;"><div data-toggle="tooltip" style="display: inline-block; margin: 0 0.5rem 0.5rem 0.5rem; width: 4rem; height: 4rem; line-height: 4rem; font-size: 2rem; border-radius: 1rem; background: #ecdf6c;" title="Link 5"><i class="fas fa-shopping-cart"></i></div></a>

		<!-- LINK 6 -->
		<a href="http://" style="color: #473d38 !important;"><div data-toggle="tooltip" style="display: inline-block; margin: 0 0.5rem 0.5rem 0.5rem; width: 4rem; height: 4rem; line-height: 4rem; font-size: 2rem; border-radius: 1rem; background: #93835f;" title="Link 6"><i class="fas fa-hammer"></i></div></a>

		<div style="height: 1rem;display:block"></div>

		<!-- LINK 7 -->
		<a href="http://" style="color: #473d38 !important;"><div data-toggle="tooltip" style="display: inline-block; margin: 0 0.5rem 0 0.5rem; width: 4rem; height: 4rem; line-height: 4rem; font-size: 2rem; border-radius: 1rem; background: #ecabb2;" title="Link 7"><i class="fas fa-pencil-alt"></i></div></a>

		<!-- LINK 8-->
		<a href="http://" style="color: #473d38 !important;"><div data-toggle="tooltip" style="display: inline-block; margin: 0 0.5rem 0 0.5rem; width: 4rem; height: 4rem; line-height: 4rem; font-size: 2rem; border-radius: 1rem; background: #92d2bb;" title="Link 8"><i class="fas fa-map-marker-alt"></i></div></a>

		<!-- LINK 9 -->
		<a href="http://" style="color: #473d38 !important;"><div data-toggle="tooltip" style="display: inline-block; margin: 0 0.5rem 0 0.5rem; width: 4rem; height: 4rem; line-height: 4rem; font-size: 2rem; border-radius: 1rem; background: #95c48f;" title="Link 9"><i class="fas fa-comment-dots"></i></div></a>

		<div style="position: absolute; display: inline-block; left: -2.3rem; right: 0; bottom: 2.3rem; margin: 0 auto; border-radius: 1rem; width: 1rem; height: 1rem; background: #d5ccc5; border: 0.25rem solid #58afa8;"></div>

		</div><!-- END Default Page -->

		<!-- Credit Page -->
		<div class="tab-pane fade" id="page-1">

		<a href="https://toyhou.se/Aly" style="color: #473d38 !important;"><div class="mx-2" data-toggle="tooltip" style="width: 4rem; display: inline-block; height: 4rem; line-height: 4rem; font-size: 2rem; border-radius: 1rem; background: #bebeb4;" title="Credit"><i class="fas fa-code"></i></div></a>

		<div style="display: inline-block; margin: 0 auto; border-radius: 1rem; width: 1rem; height: 1rem; background: #d5ccc5; border: .25rem solid #58afa8; position: absolute; left: 2.3rem; right: 0; bottom: 2.3rem;"></div>

		</div><!-- END Credit Page --->

	</div><!-- END Page Container -->

<!-- Pagination -->
<ul class="nav nav-tabs m-0 p-0 border-0 text-center" style="width: 100%; display: block;">
<li class="active" style="display: inline-block;">
<a data-toggle="tab" href="#page-0" style="display: inline-block; margin: 0 0.5rem 0 0.5rem; border-radius: 1rem; width: 1rem; height: 1rem; background: #cfcdc3; border: 0.25rem solid transparent;opacity: 0.5"></a>
</li>
<li class="active" style="display: inline-block;">
<a data-toggle="tab" href="#page-1" style="display: inline-block; margin: 0 0.5rem 0 0.5rem; border-radius: 1rem; width: 1rem; height: 1rem; background: #cfcdc3; border: 0.25rem solid transparent;"></a>
</li>
</ul>

</div><!-- END Screen -->
</div></div><!-- END Inner Containers -->
</div><!-- END Outer Container -->

<!-- Contact Aly with any issues :] -->