<!DOCTYPE html>
<!--
Welcome to Summer Night!
======================================
Here are the colors for find and
replace <3
Text: #FFFFFF
Icon1: #FF8484
Icon2: #F7B05A
Icon3: #FFEE99
Icon4: #06D6A0
Icon5: #8999D2
Backgrounds & Icon6:#6A5ACD
======================================
The stars' colors are based on a hue
rotate filter!! Think of it like moving
the color around on the color wheel!
Trial and error numbers between
0-360deg, with the 0 being yellow and
180 being the default you see now.
Please use this to find & replace: 180deg
Adding the deg is important so that you
don't accidentally replace a margin or
other values!
======================================
Remember to search for "LINKHERE" and
"IMGHERE" to get everything going!
======================================
If you need help with editing, I'm more
than happy to help! Fastest way would be
via discord, Noki#9533
-->
<!--page-->
<div class="mt-5 mx-auto" style="max-width:900px;">
<!--header-->
<div class="d-flex justify-content-center justify-content-md-end mx-auto p-4 p-md-3 pr-md-4 pr-lg-5 mb-md-n5" style="min-height: 300px; background-size: cover; background-position: center; border-radius:10px;
background-image: url(IMGHERE);">
<!--Invisible box to help keep formatting neat-->
<div class="d-lg-none d-md-inline d-none" style="width:500px;"></div>
<!--title & icons-->
<div class="float-md-right mt-lg-5 mt-md-4 mt-4 mr-md-5 p-1" style="height:100%; border-radius:15px">
<!--title-->
<div style="min-height:65px; min-width: 200px; max-width:430px; background-color:#6A5ACD; border-radius: 15px; ">
<h1 style="text-align:center; font-size:50px; color:#FFFFFF">
Summer Night
</h1>
</div>
<!--icons-->
<div class="d-flex flex-wrap justify-content-center mt-3" sytle="position:absolute">
<!--first 3. this will become the first line of icons on smaller screens-->
<div class="d-flex">
<h1>
<i class="far fa-kite fa-fw" style="color:#FF8484; font-size:50px"></i>
<i class="far fa-glass-citrus fa-fw" style="color:#F7B05A; font-size:50px"></i>
<i class="far fa-sun fa-fw" style="color:#FFEE99; font-size:50px"></i>
</h1>
</div>
<!--second 3. this will become the second line of icons on smaller screens-->
<div class="d-flex">
<h1>
<i class="far fa-tree-palm fa-fw" style="color:#06D6A0; font-size:50px"></i>
<i class="far fa-water fa-fw" style="color:#8999D2; font-size:50px"></i>
<i class="far fa-ice-cream fa-fw" style="color:#6A5ACD; font-size:50px"></i>
</h1>
</div>
</div>
</div>
</div>
<!--content-->
<div class="d-flex flex-wrap flex-md-nowrap mx-2 justify-content-center">
<!--left bit // icon, basics, links-->
<div class="mx-2 mb-n4" style="margin-top:-180px">
<!--Invisible box to help keep formatting neat-->
<div class="d-md-none" style="height: 150px"></div>
<!--photo-->
<div style="z-index: 2; position:relative; height:210px; width:210px; border-radius:105px; background-repeat: no-repeat; background-size: 210px; background-position:center; border: 5px #6A5ACD double;
background-image: url(IMGHERE);">
</div>
<!--text box-->
<div style="z-index: 1; position:relative; background-color:#6A5ACD; height:433px; width:210px; border-radius:15px; margin-top: -50px">
<!--Basics-->
<h1 style="text-align: center; padding-top: 60px; padding-bottom:20px; color: #FFFFFF">
Name <br> (Prn/Prn) // Age
</h1>
<!--Links-->
<h3 class="pl-3 align-middle" style="color:#FFFFFF">
<a href="LINKHERE" target="_blank" style="color:#ffffff">
<i class="fab fa-twitter fa-fw"></i> @TwitterUser
</a>
<br><br>
<a href="LINKHERE" target="_blank" style="color:#ffffff">
<i class="fab fa-deviantart fa-fw"></i> DA User
</a>
<br><br>
<a href="LINKHERE" target="_blank" style="color:#ffffff">
<i class="fas fa-pencil-paintbrush fa-fw"></i> ~Art Fight User
</a>
<br><br>
<a href="LINKHERE" target="_blank" style="color:#ffffff">
<i class="fas fa-user fa-fw"></i> Abt/Comms Carrd
</a>
<br><br>
<a href="LINKHERE" target="_blank" style="color:#ffffff">
<i class="fab fa-tumblr fa-fw"></i> Tumblr Url
</a>
<br><br>
<!--theres not a way to link a discord profile, so no link here-->
<i class="fab fa-discord fa-fw"></i> Discord#xxxx
<br><br>
<a href="https://toyhou.se/HyacinthCodes" target="_blank" style="color:#ffffff">
<i class="fas fa-code fa-fw"></i> HyacinthCodes
</a>
</h3>
</div>
</div>
<!--right bit // about blurb, image-->
<div class="mt-5 mx-2 float-right position-fixed" style="z-index: 2; position:relative; height:100%; margin-top: 100px">
<div class="mt-n3 p-3" style="background-color:#6A5ACD; height:380px; ;max-width: 800px; border-radius: 15px; overflow:auto">
<!--img here-->
<img class="float-right float-xs-clear ml-2" style="max-height: 250px; width:;"
src="IMGHERE">
<!--blurb-->
<p style="text-align:center; color:#FFFFFF">
This box will scroll, mainly to accomodate smaller widths
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div>
</div>
<!--stars :] read the top note for how to adjust their colors!!-->
<div class="d-flex justify-content-between mt-n3 ml-2 " style="width:95%">
<div>
<div class="ml-4" style="height:176px; width: 2px; border: 2px dashed #6A5ACD"></div>
<img src="https://cdn.discordapp.com/attachments/385569489082646539/916531515691773952/star.gif" style="filter: hue-rotate(180deg); height:50px">
</div>
<div>
<div class="ml-4" style="height:123px; width: 2px; border: 2px dashed #6A5ACD"></div>
<img src="https://cdn.discordapp.com/attachments/385569489082646539/916531515691773952/star.gif" style="filter: hue-rotate(180deg); height:50px">
</div>
<div>
<div class="ml-4" style="height:194px; width: 2px; border: 2px dashed #6A5ACD"></div>
<img src="https://cdn.discordapp.com/attachments/385569489082646539/916531515691773952/star.gif" style="filter: hue-rotate(180deg); height:50px">
</div>
<div>
<div class="ml-4" style="height:139px; width: 2px; border: 2px dashed #6A5ACD"></div>
<img src="https://cdn.discordapp.com/attachments/385569489082646539/916531515691773952/star.gif" style="filter: hue-rotate(180deg); height:50px">
</div>
<div>
<div class="ml-4" style="height:145px; width: 2px; border: 2px dashed #6A5ACD"></div>
<img src="https://cdn.discordapp.com/attachments/385569489082646539/916531515691773952/star.gif" style="filter: hue-rotate(180deg); height:50px">
</div>
<div>
<div class="ml-4" style="height:181px; width: 2px; border: 2px dashed #6A5ACD"></div>
<img src="https://cdn.discordapp.com/attachments/385569489082646539/916531515691773952/star.gif" style="filter: hue-rotate(180deg); height:50px">
</div>
</div>
</div>
