<!---
CLASSICAL / by dogboy
NOTES
accent 1 (blacks): #000000
accent 2 (whites): #FFFFFF
accent 3 (text): #6A6A6A
intro box background: #8C8C8C
icon: fa-solid fa-wand-magic-sparkles
(use ctrl+f + replace for accent replacement)
mobile friendly + custom colors! ✔✔✔
RULES & DISCLAIMERS
- fav/comment if using pls!
- feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
- have a nice day!!
--->
<!-- FIRST BOX, HEADER -->
<!-- background, make sure to choose an image where the focus is in the center! if you want to remove the dark overlay, remove "box-shadow:..." all the way to the next semicolon -->
<div class="container-fluid" style="background:url(
https://pbs.twimg.com/media/FQCTmPzWQAE0L0h?format=jpg&name=large
); background-position:center;box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);background-size:cover;padding:20px;padding-top:100px;border-radius:30px 30px 0px 0px;max-width:590px;margin:30px auto 0px;">
<!-- title, name and quote -->
<p class="text-lowercase" style="font-size:10px;color:#FFFFFF;font-weight:100;font-family:arial;">title</p>
<h3 class="text-uppercase" style="font-size:28px;letter-spacing:2px;color:#FFFFFF;font-family:georgia;font-weight:700;"><i>N</i>AME</h3>
<h3 class="text-lowercase text-right" style="font-size:12px;letter-spacing:1px;color:#FFFFFF;font-family:arial;font-style:italic;">" quote! preferably one line! "</h3>
</div>
<!-- SECOND BOX, INFO -->
<div class="container-fluid" style="background:#FFFFFF;padding:20px;border-radius:0px;max-width:590px;">
<div class="row no-gutters">
<!-- left info column -->
<div class="col-md-6">
<h3 class="text-uppercase" style="font-size:20px;color:#000000;font-family:georgia;font-weight:700;letter-spacing:10px;"><i>I</i>NFO • • •</h3>
<div class="card" style="border:0px;height:200px;background:#FFFFFF;overflow:auto;padding:0px;">
<p style="color:#6A6A6A;font-size:13px;">
<span style="font-weight:100;">1. name : </span> content
<br><span style="font-weight:100;">2. gender : </span> content
<br><span style="font-weight:100;">3. age : </span> content
<br><span style="font-weight:100;">4. affiliation : </span> content
</p>
<!-- personality -->
<hr style="width:100%;background-color:#000000;margin-bottom:12px;margin-top:-2px;">
<h3 class="text-uppercase text-right" style="font-size:16px;color:#000000;font-family:georgia;font-weight:700;letter-spacing:2px;margin-bottom:0px;"><i>P</i>ersonality</h3>
<h3 class="text-uppercase text-right" style="font-size:12px;color:#000000;font-family:georgia;font-weight:700;letter-spacing:0px;text-decoration:underline;">trait / trait / trait</h3>
<p class="text-lowercase" style="color:#6A6A6A;font-size:12px;letter-spacing:0.4px;">
lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus et rutrum eros. sed maximus a diam sit amet tincidunt. proin nulla nisi, sodales ut ultricies eu, mollis vitae nulla. nulla facilisi. nam id turpis iaculis, facilisis sem et, tristique turpis. morbi ut varius lorem. proin quis ex id dolor aliquet auctor.
<br>In imperdiet a justo in rutrum. Ut rutrum bibendum dapibus. Phasellus ac sagittis ipsum. Ut sit amet tortor est. Etiam a quam ac dui ornare feugiat. Nulla aliquam lectus maximus nisi efficitur, tempor dignissim libero dictum. Ut consectetur ac diam eu maximus. Sed interdum leo eget eros tristique, sit amet volutpat ligula bibendum. Phasellus neque purus, congue in magna id, posuere condimentum quam. Donec dignissim interdum dolor vitae lacinia. Phasellus ac leo in sapien euismod sollicitudin et ut mauris.
</p>
</div>
<!-- color palette -->
<div class="row p-2" style="height:35px;justify-content:center;">
<div class="col-3 m-1" style="background-color:#D8A3F5;"></div>
<div class="col-3 m-1" style="background-color:#FFF6E7;"></div>
<div class="col-3 m-1" style="background-color:#29FFFB;"></div>
</div>
</div>
<!-- right info column -->
<div class="col-md-6">
<!-- intro box -->
<div class="card p-2" style="border:solid 3px black;height:100px;background:#8C8C8C;overflow:auto;padding:0px;border-radius:0px;">
<p class="text-center" style="color:#000000;font-size:12px;line-height:26px;">
<span class="text-uppercase" style="font-size:14px;font-family:georgia;font-weight:700;">Intro</span> tid bit that gives a basic overview of who they are. Preferably kept to 1-2 lines of writing.</p>
</div>
<!-- background -->
<div class="card p-2" style="border:none;height:160px;background:#FFFFFF;overflow:auto;padding:0px;border-radius:0px;">
<h3 class="text-uppercase text-right" style="font-size:16px;color:#000000;font-family:georgia;font-weight:700;letter-spacing:2px;margin-bottom:3px;"><i>B</i>ackground</h3>
<p class="text-lowercase" style="color:#6A6A6A;font-size:12px;letter-spacing:0.4px;">
lorem ipsum dolor sit amet, consectetur adipiscing elit. phasellus et rutrum eros. sed maximus a diam sit amet tincidunt. proin nulla nisi, sodales ut ultricies eu, mollis vitae nulla. nulla facilisi. nam id turpis iaculis, facilisis sem et, tristique turpis. morbi ut varius lorem. proin quis ex id dolor aliquet auctor.
<br>In imperdiet a justo in rutrum. Ut rutrum bibendum dapibus. Phasellus ac sagittis ipsum. Ut sit amet tortor est. Etiam a quam ac dui ornare feugiat. Nulla aliquam lectus maximus nisi efficitur, tempor dignissim libero dictum. Ut consectetur ac diam eu maximus. Sed interdum leo eget eros tristique, sit amet volutpat ligula bibendum. Phasellus neque purus, congue in magna id, posuere condimentum quam. Donec dignissim interdum dolor vitae lacinia. Phasellus ac leo in sapien euismod sollicitudin et ut mauris.
</p>
</div>
</div>
</div>
<!-- BOTTOM BOXES, RELATION + ICON -->
<div class="row no-gutters">
<div class="col-md-8">
<h3 class="text-uppercase" style="font-size:16px;color:#000000;font-family:georgia;font-weight:700;letter-spacing:2px;margin-bottom:3px;"><i>R</i>elationships • • •</h3>
<!-- relationships, if youd like to add more copy paste char 2 or 3 for the margining! -->
<div class="card" style="border:none;height:160px;background:#FFFFFF;overflow:auto;padding:0px;border-radius:0px;">
<!-- chara 1 -->
<p class="text-lowercase" style="color:#6A6A6A;font-size:12px;letter-spacing:0.4px;">
<span style="color:#000000;font-size:13px;"><a href="CHARALINK" class="text-uppercase" style="font-weight:300;color:#000000;">CHARACTER NAME</a> ♡ <i>relationship</i></span>
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et rutrum eros. Sed maximus a diam sit amet tincidunt. Proin nulla nisi, sodales ut ultricies eu, mollis vitae nulla. Nulla facilisi. Nam id turpis iaculis, facilisis sem et, tristique turpis. Morbi ut varius lorem. Proin quis ex id dolor aliquet auctor.
</p>
<!-- chara 2 -->
<p class="text-lowercase" style="color:#6A6A6A;font-size:12px;letter-spacing:0.4px;margin-top:-10px;">
<span style="color:#000000;font-size:13px;"><a href="CHARALINK" class="text-uppercase" style="font-weight:300;color:#000;">CHARACTER NAME</a> ♡ <i>relationship</i></span>
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et rutrum eros. Sed maximus a diam sit amet tincidunt. Proin nulla nisi, sodales ut ultricies eu, mollis vitae nulla. Nulla facilisi. Nam id turpis iaculis, facilisis sem et, tristique turpis. Morbi ut varius lorem. Proin quis ex id dolor aliquet auctor.
</p>
<!-- chara 3 -->
<p class="text-lowercase" style="color:#6A6A6A;font-size:12px;letter-spacing:0.4px;margin-top:-10px;">
<span style="color:#000000;font-size:13px;"><a href="CHARALINK" class="text-uppercase" style="font-weight:300;color:#000;">CHARACTER NAME</a> ♡ <i>relationship</i></span>
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et rutrum eros. Sed maximus a diam sit amet tincidunt. Proin nulla nisi, sodales ut ultricies eu, mollis vitae nulla. Nulla facilisi. Nam id turpis iaculis, facilisis sem et, tristique turpis. Morbi ut varius lorem. Proin quis ex id dolor aliquet auctor.
</p>
</div>
</div>
<div class="col-md-4">
<!-- icon, make sure it's a square! -->
<center>
<i class="fa mt-3"><img src="
https://i.pinimg.com/474x/b9/d9/b9/b9d9b9531a5f91aba1aa7d504a9073ca.jpg
" class="rounded-circle" style="height:150px;width:150px;box-shadow:5px -2px 4px #000, -5px 2px 4px #6A6A6A;"></i></center>
</div>
</div>
<!-- MUSIC PLAYER -->
<div class="card align-items-center mt-2" style="border:none;flex-direction:row;background:none;">
<i class="fa-solid fa-wand-magic-sparkles" style="font-size:15px;margin:5px;color:#000000;"></i>
<hr style="flex-grow:1;margin:10px;background-color:#000000;">
<!-- music player, paste the end of a yt link after the "youtube.com/embed/" / credit to Strabi + phasmology for music code ! -->
<span><iframe class="flex-fill" style="height:3em;width:3em;opacity:0;position:absolute;z-index:1;" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
src="https://www.youtube.com/embed/2COq3F3-_ws"></iframe><i class="fa-solid fa-play-pause" style="color:#000000;font-size:20px;"></i></span>
<hr style="flex-grow:1;margin:10px;background-color:#000000;">
<i class="fa-solid fa-wand-magic-sparkles" style="font-size:15px;margin:5px;color:#000000;"></i>
</div>
<h3 class="text-uppercase text-center mt-2" style="font-size:15px;color:#000000;font-family:georgia;font-weight:500;letter-spacing:2px;margin-bottom:-2px;"><i>SONG</i> • ARTIST</h3>
</div>
<div class="container-fluid" style="background:none;max-width:590px;">
<h3 class="text-uppercase mt-2" style="font-size:13px;letter-spacing:3px;color:#FFFFFF;" align="right">
<a class="d-block text-muted" href="18426882" style="font-size:0.6em;">code by dogboy <i class="fad fa-rainbow"></i></a>
</h3>
</div>
