Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- [ SPLATTACK ]
- turn OFF WYSIWYG
- turn ON code editor
- do NOT remove credit
- RESOURCES :
- - free live code editor : https://th.circlejourney.net/
- - coding help forum : https://toyhou.se/~forums/16.htmlcss-graphics/48845.-help-thread-ask-your-questions-here-
- - how to edit icons : https://toyhou.se/3536712.
- - coding resources : https://toyhou.se/Elithian/characters/folder:881832
- COLORS :
- - background
- - top : #0c1069
- - bottom : #995e00
- - content background
- - lighter : #242424
- - darker : #1a1a1a
- - point card : #dde34b
- - accents
- - primary : #eded3d
- - secondary : #5c35de
- - grizzco : #fd5132
- - fonts
- - body : #ccc
- - meta : #4bfc2e
- use ctrl+f to quickly change colors
- -->
- <!--
- background
- - if you want the top info and gallery to be visible, change [z-index: 1] to [z-index: -1]
- - if you dont want the background at all, delete this little section
- -->
- <div style="z-index: -1; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(180deg, #0c1069 0%, #995e00 100%);"></div>
- <!-- end background -->
- <!-- credit // DO NOT REMOVE -->
- <div class="p-1" style="position: fixed; bottom: 0; right: 0; z-index: 999; background: #5c35de;">
- <a href="https://toyhou.se/20689418.20-splattack" target="_blank" class="p-2 text-white tooltipster" title="code by venus">
- <i class="fa-solid fa-bookmark"></i>
- </a>
- </div>
- <!-- start content -->
- <div class="container mx-auto p-0 splatscroll" style="max-width: 800px; color: #ccc; font-family: 'Arial Black'; z-index: 10; line-height: 1.2rem;">
- <div class="row no-gutters">
- <!-- left side -->
- <div class="col-lg-4 mb-3 mb-lg-0">
- <div class="flex-column h-100">
- <!-- image
- - replace url with your own
- - if you dont want the background image, delete the first url
- -->
- <div
- class="h-100 align-items-center justify-content-center"
- style="background: url(
- https://images.alphacoders.com/111/1112260.jpg
- ) center no-repeat; background-size: cover; border-radius: 20px; box-shadow: 0 0 10px #000; min-height: 200px;"
- >
- <!-- image inside
- - replace url with your own
- - if you dont want this, delete it
- -->
- <img
- src="
- https://cdn.discordapp.com/attachments/700436369570267229/1085873555255861340/latest.png
- "
- />
- <!-- end image inside -->
- </div>
- <!-- end image -->
- </div>
- </div>
- <!-- end left side -->
- <!-- right side -->
- <div class="col ml-lg-4 ml-0 my-auto">
- <!-- splashtag
- - use this website: https://seymourschlong.github.io/splashtags/
- -->
- <img
- src="
- https://cdn.discordapp.com/attachments/700436369570267229/1086882448538865694/splashtag2.png
- "
- class="h-100 w-100"
- style="border-radius: 10px; box-shadow: 0 0 10px #000;"
- />
- <!-- end splashtag -->
- <!-- currency & level -->
- <div class="row no-gutters my-3 p-3" style="background: #1a1a1a; font-size: 1rem; border-radius: 10px; box-shadow: 0 0 10px #000;">
- <!-- sea snails -->
- <div class="col-lg-auto col-6 row no-gutters">
- <div class="col-auto mr-1">
- <!-- icon -->
- <img
- src="
- https://cdn.wikimg.net/en/splatoonwiki/images/9/98/S3_Icon_Super_Sea_Snail.png
- "
- style="height: 25px;"
- />
- </div>
- <div class="col my-auto">
- 999
- </div>
- </div>
- <!-- cash -->
- <div class="col-lg-auto col-6 mx-lg-3 row no-gutters">
- <div class="col-auto mr-1">
- <!-- icon -->
- <img
- src="
- https://cdn.wikimg.net/en/splatoonwiki/images/1/1e/S3_Icon_Cash.png?20220922182217
- "
- style="height: 25px;"
- />
- </div>
- <div class="col my-auto">
- 9,999,999
- </div>
- </div>
- <!-- level -->
- <div class="col-lg row no-gutters mt-3 mt-lg-0">
- <div class="col-auto" style="color: #4bfc2e;">
- Level
- </div>
- <div class="col-auto mx-2">
- 99
- </div>
- <div class="col my-auto">
- <div class="progress" style="background: #242424; border-radius: 0;">
- <!-- change percentage to fill bar -->
- <div class="progress-bar" style="background: #4bfc2e; width: 50%;"></div>
- </div>
- </div>
- </div>
- </div>
- <!-- end currency & level -->
- <!-- bottom box -->
- <div class="py-3" style="background: #1a1a1a; border-radius: 30px; box-shadow: 0 0 10px #000;">
- <!-- nav -->
- <ul class="col-12 nav nav-pills justify-content-between splatnav px-3">
- <li class="nav-item">
- <a href="#intro" class="nav-link active btn p-3 align-items-center" data-toggle="tab" style="border-radius: 50%; background: #242424; color: #ccc;">
- <i class="fa-solid fa-user fa-fw"></i>
- </a>
- </li>
- <li class="nav-item">
- <a href="#info" class="nav-link btn p-3 align-items-center" data-toggle="tab" style="border-radius: 50%; background: #242424; color: #ccc;">
- <i class="fa-solid fa-book-open fa-fw"></i>
- </a>
- </li>
- <li class="nav-item">
- <a href="#gear" class="nav-link btn p-3 align-items-center" data-toggle="tab" style="border-radius: 50%; background: #242424; color: #ccc;">
- <i class="fa-solid fa-shirt fa-fw"></i>
- </a>
- </li>
- <li class="nav-item">
- <a href="#battle" class="nav-link btn p-3 align-items-center" data-toggle="tab" style="border-radius: 50%; background: #242424; color: #ccc;">
- <i class="fa-solid fa-swords fa-fw"></i>
- </a>
- </li>
- <li class="nav-item">
- <a href="#friends" class="nav-link btn p-3 align-items-center" data-toggle="tab" style="border-radius: 50%; background: #242424; color: #ccc;">
- <i class="fa-solid fa-users fa-fw"></i>
- </a>
- </li>
- </ul>
- <!-- end nav -->
- <!-- content -->
- <div class="tab-content splattab my-3 p-lg-3 p-1" style="background: #242424; overflow: auto; height: 300px; border: 5px solid #242424;">
- <!-- intro page -->
- <div id="intro" class="tab-pane fade h-100 active show">
- <div class="h-100 flex-column">
- <!-- item -->
- <div class="row no-gutters my-auto" style="background: #1a1a1a; border-radius: 20px;">
- <div class="col-auto p-2" style="background: #eded3d; color: #1a1a1a; border-radius: 25px; border: 5px solid #242424;">
- Name
- </div>
- <div class="col p-2 my-auto">
- Content
- </div>
- </div>
- <!-- end item -->
- <!-- item -->
- <div class="row no-gutters my-auto" style="background: #1a1a1a; border-radius: 20px;">
- <div class="col-auto p-2" style="background: #eded3d; color: #1a1a1a; border-radius: 25px; border: 5px solid #242424;">
- Age
- </div>
- <div class="col p-2 my-auto">
- Content
- </div>
- </div>
- <!-- end item -->
- <!-- item -->
- <div class="row no-gutters my-auto" style="background: #1a1a1a; border-radius: 20px;">
- <div class="col-auto p-2" style="background: #eded3d; color: #1a1a1a; border-radius: 25px; border: 5px solid #242424;">
- Gender
- </div>
- <div class="col p-2 my-auto">
- Content
- <span class="faded small">
- pro/nouns
- </span>
- </div>
- </div>
- <!-- end item -->
- <!-- item -->
- <div class="row no-gutters my-auto" style="background: #1a1a1a; border-radius: 20px;">
- <div class="col-auto p-2" style="background: #eded3d; color: #1a1a1a; border-radius: 25px; border: 5px solid #242424;">
- Species
- </div>
- <div class="col p-2 my-auto">
- Content
- </div>
- </div>
- <!-- end item -->
- <!-- item -->
- <div class="row no-gutters my-auto" style="background: #1a1a1a; border-radius: 20px;">
- <div class="col-auto p-2" style="background: #eded3d; color: #1a1a1a; border-radius: 25px; border: 5px solid #242424;">
- Occupation
- </div>
- <div class="col p-2 my-auto">
- Content
- </div>
- </div>
- <!-- end item -->
- <!-- add more above here -->
- </div>
- </div>
- <!-- end intro page -->
- <!-- info page -->
- <div id="info" class="tab-pane fade">
- <div class="row no-gutters">
- <!-- likes & dislikes header -->
- <div class="p-1 col-auto ml-2 mb-n3" style="background: #eded3d; transform: rotate(-2deg); z-index: 1;">
- <div class="h-100 w-100 py-1 px-2" style="border: 2px solid #1a1a1a; color: #1a1a1a;">
- Likes & Dislikes
- </div>
- </div>
- <div class="col-12"></div>
- <!-- likes -->
- <div class="col p-3 mr-3" style="background: #1a1a1a; border-radius: 20px;">
- <p class="m-0">
- <i class="fa-solid fa-check" style="color: #5c35de;"></i>
- Item
- </p>
- <p class="m-0">
- <i class="fa-solid fa-check" style="color: #5c35de;"></i>
- Item
- </p>
- <p class="m-0">
- <i class="fa-solid fa-check" style="color: #5c35de;"></i>
- Item
- </p>
- <p class="m-0">
- <i class="fa-solid fa-check" style="color: #5c35de;"></i>
- Item
- </p>
- <!-- add more above here -->
- </div>
- <!-- end likes -->
- <!-- dislikes -->
- <div class="col p-3" style="background: #1a1a1a; border-radius: 20px;">
- <p class="m-0">
- <i class="fa-solid fa-times" style="color: #5c35de;"></i>
- Item
- </p>
- <p class="m-0">
- <i class="fa-solid fa-times" style="color: #5c35de;"></i>
- Item
- </p>
- <p class="m-0">
- <i class="fa-solid fa-times" style="color: #5c35de;"></i>
- Item
- </p>
- <p class="m-0">
- <i class="fa-solid fa-times" style="color: #5c35de;"></i>
- Item
- </p>
- <!-- add more above here -->
- </div>
- <!-- end dislikes -->
- <!-- divider -->
- <div class="col-12">
- <hr class="my-2" style="opacity: 0;" />
- </div>
- <!-- background header -->
- <div class="p-1 col-auto ml-2 mb-n3" style="background: #eded3d; transform: rotate(-2deg); z-index: 1;">
- <div class="h-100 w-100 py-1 px-2" style="border: 2px solid #1a1a1a; color: #1a1a1a;">
- Background
- </div>
- </div>
- <!-- background content -->
- <div class="col-12 p-3 text-justify" style="background: #1a1a1a; border-radius: 20px;">
- <p>
- 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>
- <!-- end background content -->
- </div>
- </div>
- <!-- end info page -->
- <!-- gear page -->
- <div id="gear" class="tab-pane fade h-100">
- <div class="h-100 flex-column">
- <!-- weapons -->
- <div class="p-20 h-100 mb-2 splatweapon" style="background: #1a1a1a; border-radius: 20px;">
- <div class="flex-row w-100 h-100 justify-content-between" style="overflow-x: auto;">
- <!-- weapons
- - adding more than 4 images will make it scroll, HOWEVER i dont recomend you do this if youre using the html only version, cuz the scrollbar can be too fat for some browsers
- - use images from the official wiki, since theyre perfect squares
- - link to wiki: https://splatoonwiki.org/wiki/Main_Page
- - replace urls with your own
- -->
- <!-- weapon 1 // main weapon -->
- <img
- src="
- https://cdn.wikimg.net/en/splatoonwiki/images/thumb/e/ed/S3_Weapon_Main_.52_Gal.png/256px-S3_Weapon_Main_.52_Gal.png
- "
- class="w-25"
- style="filter: drop-shadow(0 0 5px #5c35de);"
- />
- <!-- weapon 2 -->
- <img
- src="
- https://cdn.wikimg.net/en/splatoonwiki/images/thumb/1/10/S3_Weapon_Main_E-liter_4K.png/256px-S3_Weapon_Main_E-liter_4K.png
- "
- class="w-25"
- />
- <!-- weapon 3 -->
- <img
- src="
- https://cdn.wikimg.net/en/splatoonwiki/images/thumb/4/49/S3_Weapon_Main_Tri-Stringer.png/256px-S3_Weapon_Main_Tri-Stringer.png
- "
- class="w-25"
- />
- <!-- weapon 4 -->
- <img
- src="
- https://cdn.wikimg.net/en/splatoonwiki/images/thumb/d/d1/S3_Weapon_Main_Hydra_Splatling.png/256px-S3_Weapon_Main_Hydra_Splatling.png
- "
- class="w-25"
- />
- <!-- add more above here -->
- </div>
- </div>
- <!-- end weapons -->
- <!-- gear -->
- <div class="h-100">
- <div class="row no-gutters">
- <!-- all images used from the splatoon wiki // link above -->
- <!-- hat -->
- <div class="col-4 text-center">
- <!-- replace url with your own -->
- <img
- src="
- https://cdn.wikimg.net/en/splatoonwiki/images/a/a2/S3_Gear_Headgear_Knitted_Hat.png
- "
- style="height: 140px; width: 140px;"
- />
- <div class="mx-auto card border-0" style="background: #1a1a1a; margin-top: -45px; height: 50px; width: 50px; border-radius: 50%;">
- <!-- main gear ability -->
- <img
- src="
- https://cdn.wikimg.net/en/splatoonwiki/images/0/09/S3_Ability_Comeback.png
- "
- />
- </div>
- </div>
- <!-- end hat -->
- <!-- clothes -->
- <div class="col-4 text-center">
- <!-- replace url with your own -->
- <img
- src="
- https://cdn.wikimg.net/en/splatoonwiki/images/3/3d/S3_Gear_Clothing_Berry_BlobMob_Tee.png
- "
- style="height: 140px; width: 140px;"
- />
- <div class="mx-auto card border-0" style="background: #1a1a1a; margin-top: -45px; height: 50px; width: 50px; border-radius: 50%;">
- <!-- main gear ability -->
- <img
- src="
- https://cdn.wikimg.net/en/splatoonwiki/images/6/68/S3_Ability_Respawn_Punisher.png
- "
- />
- </div>
- </div>
- <!-- end clothes -->
- <!-- shoes -->
- <div class="col-4 text-center">
- <!-- replace url with your own -->
- <img
- src="
- https://cdn.wikimg.net/en/splatoonwiki/images/0/0d/S3_Gear_Shoes_Pink_Dadfoot_Sandals.png
- "
- style="height: 140px; width: 140px;"
- />
- <div class="mx-auto card border-0" style="background: #1a1a1a; margin-top: -45px; height: 50px; width: 50px; border-radius: 50%;">
- <!-- main gear ability -->
- <img
- src="
- https://cdn.wikimg.net/en/splatoonwiki/images/0/05/S3_Ability_Drop_Roller.png
- "
- />
- </div>
- </div>
- <!-- end shoes -->
- </div>
- </div>
- </div>
- </div>
- <!-- end gear page -->
- <!-- battle page -->
- <div id="battle" class="tab-pane fade h-100">
- <div class="flex-column h-100">
- <!-- battle ratios -->
- <div class="row no-gutters h-100">
- <!-- turf -->
- <div class="col-lg my-auto">
- <!-- header -->
- <div class="row no-gutters">
- <div class="col-auto">
- <!-- turf icon -->
- <img
- src="
- https://cdn.wikimg.net/en/splatoonwiki/images/thumb/2/22/Symbol_TWF.svg/768px-Symbol_TWF.svg.png?20160418204138
- "
- style="height: 30px;"
- class="mr-2"
- />
- </div>
- <div class="col my-auto text-uppercase">
- Regular
- </div>
- <div class="col-12">
- <hr class="my-1" style="border-top: 4px dotted #1a1a1a;" />
- </div>
- </div>
- <!-- victory / defeat ratio -->
- <div class="row no-gutters">
- <div class="col text-right text-uppercase" style="font-size: 0.5rem;">
- Victory
- </div>
- <!-- victory number -->
- <div class="col-auto mx-1" style="font-size: 1rem;">
- 23
- </div>
- <!-- divider -->
- <div class="col-auto mx-1">
- <div class="h-100" style="background: #ccc; width: 0.5px;"></div>
- </div>
- <!-- defeat number -->
- <div class="col-auto mx-1" style="font-size: 1rem;">
- 22
- </div>
- <div class="col text-left text-uppercase" style="font-size: 0.5rem;">
- Defeat
- </div>
- </div>
- <!-- end v/d -->
- </div>
- <!-- end turf -->
- <!-- anarchy -->
- <div class="col-lg mx-lg-3 my-auto">
- <!-- header -->
- <div class="row no-gutters">
- <div class="col-auto">
- <!-- anarchy icon -->
- <img
- src="
- https://cdn.wikimg.net/en/splatoonwiki/images/thumb/c/c5/S2_Icon_Ranked_Battle.svg/60px-S2_Icon_Ranked_Battle.svg.png?20221015151548
- "
- style="height: 30px;"
- class="mr-2"
- />
- </div>
- <div class="col my-auto text-uppercase">
- Anarchy
- </div>
- <div class="col-12">
- <hr class="my-1" style="border-top: 4px dotted #1a1a1a;" />
- </div>
- </div>
- <!-- victory / defeat ratio -->
- <div class="row no-gutters">
- <div class="col text-right text-uppercase" style="font-size: 0.5rem;">
- Victory
- </div>
- <!-- victory number -->
- <div class="col-auto mx-1" style="font-size: 1rem;">
- 23
- </div>
- <!-- divider -->
- <div class="col-auto mx-1">
- <div class="h-100" style="background: #ccc; width: 0.5px;"></div>
- </div>
- <!-- defeat number -->
- <div class="col-auto mx-1" style="font-size: 1rem;">
- 22
- </div>
- <div class="col text-left text-uppercase" style="font-size: 0.5rem;">
- Defeat
- </div>
- </div>
- <!-- end v/d -->
- </div>
- <!-- end anarchy -->
- <!-- x -->
- <div class="col-lg my-auto">
- <!-- header -->
- <div class="row no-gutters">
- <div class="col-auto">
- <!-- x icon -->
- <img
- src="
- https://cdn.wikimg.net/en/splatoonwiki/images/thumb/3/3e/S3_Icon_X_Battle.svg/60px-S3_Icon_X_Battle.svg.png?20221207065136
- "
- style="height: 30px;"
- class="mr-2"
- />
- </div>
- <div class="col my-auto text-uppercase">
- X
- </div>
- <div class="col-12">
- <hr class="my-1" style="border-top: 4px dotted #1a1a1a;" />
- </div>
- </div>
- <!-- victory / defeat ratio -->
- <div class="row no-gutters">
- <div class="col text-right text-uppercase" style="font-size: 0.5rem;">
- Victory
- </div>
- <!-- victory number -->
- <div class="col-auto mx-1" style="font-size: 1rem;">
- 23
- </div>
- <!-- divider -->
- <div class="col-auto mx-1">
- <div class="h-100" style="background: #ccc; width: 0.5px;"></div>
- </div>
- <!-- defeat number -->
- <div class="col-auto mx-1" style="font-size: 1rem;">
- 22
- </div>
- <div class="col text-left text-uppercase" style="font-size: 0.5rem;">
- Defeat
- </div>
- </div>
- <!-- end v/d -->
- </div>
- <!-- end x -->
- </div>
- <!-- end battle ratios -->
- <!-- divider -->
- <div>
- <hr class="my-2" style="border-top: 4px dotted #1a1a1a;" />
- </div>
- <!-- end divider -->
- <!-- salmon run -->
- <div class="row no-gutters">
- <!-- rank & scales -->
- <div class="col mr-3 h-100 flex-column" style="color: #4bfc2e;">
- <!-- rank -->
- <div class="p-2 h-100 mb-2" style="background: #1a1a1a; border-radius: 20px;">
- Eggsecutive VP
- <!-- bar -->
- <div class="progress my-1" style="background: #242424; border-radius: 10px;">
- <!-- change percentage to fill bar -->
- <div class="progress-bar" style="background: #fd5132;
- width: 50%
- ; height: 10px;"></div>
- </div>
- <small>
- Average Waves Cleared
- </small>
- <div class="text-right" style="color: #dde34b; font-size: 1.2rem;">
- 3.0
- </div>
- </div>
- <!-- end rank -->
- <!-- scales -->
- <div class="p-2 h-100" style="background: #1a1a1a; border-radius: 20px;">
- <div class="row no-gutters">
- <div class="col-12">
- Scales
- </div>
- <!-- bronze scales -->
- <div class="col-4 text-center">
- <img
- src="
- https://cdn.wikimg.net/en/splatoonwiki/images/thumb/7/77/S3_Icon_Bronze_Fish_Scale.png/36px-S3_Icon_Bronze_Fish_Scale.png
- "
- style="height: 30px;"
- />
- <p style="color: #dde34b;">
- x99
- </p>
- </div>
- <!-- silver scales -->
- <div class="col-4 text-center">
- <img
- src="
- https://cdn.wikimg.net/en/splatoonwiki/images/thumb/7/74/S3_Icon_Silver_Fish_Scale.png/36px-S3_Icon_Silver_Fish_Scale.png
- "
- style="height: 30px;"
- />
- <p style="color: #dde34b;">
- x99
- </p>
- </div>
- <!-- gold scales -->
- <div class="col-4 text-center">
- <img
- src="
- https://cdn.wikimg.net/en/splatoonwiki/images/thumb/a/a9/S3_Icon_Gold_Fish_Scale.png/36px-S3_Icon_Gold_Fish_Scale.png
- "
- style="height: 30px;"
- />
- <p style="color: #dde34b;">
- x99
- </p>
- </div>
- </div>
- </div>
- <!-- end scales -->
- </div>
- <!-- end rank & scales -->
- <!-- point card -->
- <div class="col-6">
- <div style="background: #dde34b; overflow: hidden; border-radius: 10px; color: #1a1a1a;">
- <div class="text-center" style="background: #1a1a1a; color: #fd5132;">
- Grizzco Point Card
- </div>
- <div class="p-1">
- <!-- current points -->
- <div class="px-2 py-1 mb-1" style="background: rgba(0, 0, 0, 0.85); color: #dde34b; border-radius: 10px;">
- <div class="small">Current Points</div>
- <div class="text-right">9,999,999p</div>
- </div>
- <!-- item -->
- <div class="justify-content-between">
- <span class="faded">Shifts Worked</span>
- <span>
- 999
- </span>
- </div>
- <!-- end item -->
- <hr class="my-1 faded" style="border-top: 2px dashed;" />
- <!-- item -->
- <div class="justify-content-between">
- <span class="faded">Golden Eggs Col.</span>
- <span>
- 999
- </span>
- </div>
- <!-- end item -->
- <hr class="my-1 faded" style="border-top: 2px dashed;" />
- <!-- item -->
- <div class="justify-content-between">
- <span class="faded">Power Eggs Col.</span>
- <span>
- 999
- </span>
- </div>
- <!-- end item -->
- <hr class="my-1 faded" style="border-top: 2px dashed;" />
- <!-- item -->
- <div class="justify-content-between">
- <span class="faded">K. Salmonids Def.</span>
- <span>
- 999
- </span>
- </div>
- <!-- end item -->
- </div>
- </div>
- </div>
- <!-- end point card -->
- </div>
- <!-- end salmon run -->
- </div>
- </div>
- <!-- end battle page -->
- <!-- friends page -->
- <div id="friends" class="tab-pane fade">
- <!-- friend 1 -->
- <div class="row no-gutters p-3" style="background: #1a1a1a; border-radius: 20px;">
- <div class="col-auto mr-2">
- <!-- character image // replace url with your own -->
- <img
- src="
- https://cdn.discordapp.com/attachments/700436369570267229/1085890614899527700/S_Icon_Callie_alt.png
- "
- style="height: 50px; width: 50px; border-radius: 50%; object-fit: cover;"
- />
- </div>
- <div class="col my-auto">
- <!-- link -->
- <a href="CHAR_URL" style="color: #fff;">
- Name Surname
- </a>
- <!-- relationship -->
- <span class="faded small">
- relationship
- </span>
- </div>
- <div class="col-12 text-justify">
- <!-- divider -->
- <hr class="my-2" style="border-top: 4px dotted #242424;" />
- <p>
- <i class="fa-solid fa-quote-left" style="color: #5c35de;"></i>
- Character's thoughts on this character. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit.
- <i class="fa-solid fa-quote-right" style="color: #5c35de;"></i>
- </p>
- </div>
- </div>
- <!-- end friend 1 -->
- <!-- divider -->
- <hr class="my-2" style="opacity: 0;" />
- <!-- friend 2 -->
- <div class="row no-gutters p-3" style="background: #1a1a1a; border-radius: 20px;">
- <div class="col-auto mr-2">
- <!-- character image // replace url with your own -->
- <img
- src="
- https://cdn.discordapp.com/attachments/700436369570267229/1085890614899527700/S_Icon_Callie_alt.png
- "
- style="height: 50px; width: 50px; border-radius: 50%; object-fit: cover;"
- />
- </div>
- <div class="col my-auto">
- <!-- link -->
- <a href="CHAR_URL" style="color: #fff;">
- Name Surname
- </a>
- <!-- relationship -->
- <span class="faded small">
- relationship
- </span>
- </div>
- <div class="col-12 text-justify">
- <!-- divider -->
- <hr class="my-2" style="border-top: 4px dotted #242424;" />
- <p>
- <i class="fa-solid fa-quote-left" style="color: #5c35de;"></i>
- Character's thoughts on this character. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit.
- <i class="fa-solid fa-quote-right" style="color: #5c35de;"></i>
- </p>
- </div>
- </div>
- <!-- end friend 2 -->
- <!-- divider -->
- <hr class="my-2" style="opacity: 0;" />
- <!-- friend 3 -->
- <div class="row no-gutters p-3" style="background: #1a1a1a; border-radius: 20px;">
- <div class="col-auto mr-2">
- <!-- character image // replace url with your own -->
- <img
- src="
- https://cdn.discordapp.com/attachments/700436369570267229/1085890614899527700/S_Icon_Callie_alt.png
- "
- style="height: 50px; width: 50px; border-radius: 50%; object-fit: cover;"
- />
- </div>
- <div class="col my-auto">
- <!-- link -->
- <a href="CHAR_URL" style="color: #fff;">
- Name Surname
- </a>
- <!-- relationship -->
- <span class="faded small">
- relationship
- </span>
- </div>
- <div class="col-12 text-justify">
- <!-- divider -->
- <hr class="my-2" style="border-top: 4px dotted #242424;" />
- <p>
- <i class="fa-solid fa-quote-left" style="color: #5c35de;"></i>
- Character's thoughts on this character. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit.
- <i class="fa-solid fa-quote-right" style="color: #5c35de;"></i>
- </p>
- </div>
- </div>
- <!-- end friend 3 -->
- <!-- add more above here // dont forget the dividers! -->
- </div>
- <!-- end friends page -->
- </div>
- <!-- end content-->
- <!-- music player -->
- <div class="row no-gutters px-3">
- <!-- button -->
- <div class="col-auto">
- <!-- music player
- - dont remove /embed/
- - replace [4h1VQ3ozUBs] with the ending code of your desired video
- -->
- <iframe src="https://www.youtube.com/embed/4h1VQ3ozUBs?controls=0" style="position: absolute; top: 0; left: 0; opacity: 0.0001;" frameborder="0" class="w-100 h-100"></iframe>
- <!-- icon -->
- <i class="fa-light fa-play-circle" style="color: #eded3d;"></i>
- </div>
- <!-- line -->
- <div class="col mx-3 my-auto">
- <hr class="my-0" style="border-top: 4px dotted #242424;" />
- </div>
- <!-- song info -->
- <div class="col-auto">
- Song Name - Artist
- </div>
- </div>
- <!-- end music player -->
- </div>
- </div>
- <!-- end right side -->
- </div>
- </div>
- <!-- end content -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement