Hey so WYSIWYG was activated at least once! WYSIWYG adds unnecessary classes which mess up every code. Once that happens, the best option is to restart the code with a new copy/paste.
Unfortunately, this is without the guides but here's the clean up version of the code with a placeholder image inside, please go ahead and replace it ^-^)b
<div class="col-lg-11 mx-auto m-3 m-lg-5 text-justify text-white"> <div class="row no-gutters" style="letter-spacing:.5px;font-size:12px;font-family:avenir; background-image:url(https://images.unsplash.com/photo-1624270903952-347a4c2ade0c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1534&q=80); background-size: cover; background-position: bottom; background-repeat: no-repeat; background-attachment: scroll; box-shadow: 0 0 15px rgba(0,0,0, 0.5);"> <div class="col-lg-7"> <div class="card rounded-0 border-0 p-4" style="max-height:450px;background:rgba(0,0,0,0.5);"> <div class="mx-auto text-center col-12" style="letter-spacing:5px;"><p> <i class="fas fa-seedling fa-xs pb-2"></i> <i class="fas fa-leaf fa-lg mx-3 pb-2"></i> <i class="fas fa-seedling fa-xs pb-2"></i></p> </div> <hr class="w-25 my-2" style="border-color:rgba(255,255,255,0.15);"> <hr class="w-50 my-2" style="border-color:rgba(255,255,255,0.15);"> <div class="d-flex" style="min-height:140px;"> <h1 class="m-auto text-uppercase text-center p-4" style="font-size:2rem;font-weight:200;letter-spacing:8px;border:2px solid;background-color:rgba(0,0,0,0.5);"> Solaris </h1></div> <div class="display-4 text-center text-uppercase pb-1" style="font-size:14px;letter-spacing:5px;"> Wolfdog • He/Him • Asexual </div><hr class="w-100 my-3" style="border-color:rgba(255,255,255,0.15);"> <div class="pb-2" style="min-height:120px;max-height:120px;overflow:auto;"> <div class="text-center" style="letter-spacing:.5px;"> <p>Personality: Loyal, stubborn, sarcastic and not the brightest. He tends to make jokes/laugh in bad situations (mainly because he’s nervous/uncomfortable or doesn’t know what to do). He’s an introvert and hates being the center of attention </p> <p> Solaris is nicknamed Sol (pronounced like Soul) which was given by his brother Apollo.</p> </div> </div> <hr class="w-50 my-2" style="border-color:rgba(255,255,255,0.15);"> <hr class="w-25 my-2" style="border-color:rgba(255,255,255,0.15);"> </div></div> <div class="col-lg-5 w-100" style="max-height:450px;background:rgba(0,0,0,0.8);"> <div class="px-4 p-3 card-block sticky-top" style="background:rgba(0,0,0,0.5);"> <div class="col-8 mx-auto"> <ul class="nav row no-gutters text-center"> <li class="nav-item col"> <a class="text-white" data-toggle="tab" href="#one"> <i class="far fa-user"></i> </a> </li> <li class="nav-item col"> <a class="text-white" data-toggle="tab" href="#two"> <i class="far fa-heart"></i> </a> </li> <li class="nav-item col"> <a class="text-white" data-toggle="tab" href="#four"> <i class="far fa-music"></i> </a> </li> </ul> </div> </div> <div class="tab-content"> <div class="tab-pane fade active show" id="one"> <div class="px-4 p-3" style="min-height:400px;max-height:400px;overflow-y:scroll;letter-spacing:.5px;"> <h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;"> Profile </h1><div class="px-2"> <div class="d-flex justify-content-between p-1"> <span class="w-50 text-uppercase">Name</span> <span class="w-50 text-right">Solaris</span> </div> <div class="d-flex justify-content-between p-1"> <span class="w-50 text-uppercase">Nickname</span> <span class="w-50 text-right">Sol</span> </div> <div class="d-flex justify-content-between p-1"> <span class="w-50 text-uppercase">Gender</span> <span class="w-50 text-right">Male</span> </div> <div class="d-flex justify-content-between p-1"> <span class="w-50 text-uppercase">Pronouns</span> <span class="w-50 text-right">He/Him</span> </div> <div class="d-flex justify-content-between p-1"> <span class="w-50 text-uppercase">Species</span> <span class="w-50 text-right">Wolfdog</span> </div> <div class="d-flex justify-content-between p-1"> <span class="w-50 text-uppercase">Birthday</span> <span class="w-50 text-right">March 3rd</span> </div> <div class="d-flex justify-content-between p-1"> <span class="w-50 text-uppercase">Zodiac</span> <span class="w-50 text-right">Pisces</span> </div> <div class="d-flex justify-content-between p-1"> <span class="w-50 text-uppercase">Orientation</span> <span class="w-50 text-right">Asexual</span> </div> </div> <hr style="border-color:rgba(255,255,255,0.15);"> <div class="row no-gutters"> <div class="col-6"> <h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;"> <i class="fas fa-check"></i> </h1><ul> <li>Hoodies</li> <li>Movies/Shows</li> <li>Music</li> </ul></div> <div class="col-6"> <h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;"> <i class="fas fa-times"></i> </h1><ul> <li>Children</li> <li>Big crowds</li> <li>Clowns</li> </ul> </div> </div> </div> </div> <div class="tab-pane fade" id="two"> <div class="px-3 p-3" style="min-height:400px;max-height:400px;overflow-y:scroll;letter-spacing:.5px;"> <h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;"> Trivia </h1><ul> <li>Not much of a backstory. But I’m in the process of making a zombie apocalypse AU</li> <li>He has a brother named Apollo</li> <li>When others flirt with him, he’s really oblivious and thinks their just being friendly💀</li> <li>He loves to prove people who doubted him wrong</li> <li>He hates bullies</li> </ul><hr style="border-color:rgba(255,255,255,0.15);"> <h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;"> Design Notes </h1><ul> <li>Design is by Wolfdoq</li> </ul> </div> </div> <div class="tab-pane fade" id="three"> <div class="px-4 p-3" style="min-height:400px;max-height:400px;overflow-y:scroll;letter-spacing:.5px;"> <h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;"> Background </h1><div class="p-1" style="text-indent:20px;"> </div> </div> </div> <div class="tab-pane fade" id="four"> <div class="px-4 p-3" style="min-height:400px;max-height:400px;overflow-y:scroll;letter-spacing:.5px;"> <h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;"> Voice Claim </h1><div> <iframe src="https://www.youtube.com/embed/LiDNAJTTdd8" class="flex-fill pb-2" style="width:102%;min-height:300px;" frameborder="0"> </iframe> </div> </div> </div></div></div></div> <div class="text-muted text-right p-2" style="font-size:10px">
Hey so WYSIWYG was activated at least once! WYSIWYG adds unnecessary classes which mess up every code. Once that happens, the best option is to restart the code with a new copy/paste.
Unfortunately, this is without the guides but here's the clean up version of the code with a placeholder image inside, please go ahead and replace it ^-^)b
<div class="col-lg-11 mx-auto m-3 m-lg-5 text-justify text-white">
<div class="row no-gutters" style="letter-spacing:.5px;font-size:12px;font-family:avenir;
background-image:url(https://images.unsplash.com/photo-1624270903952-347a4c2ade0c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1534&q=80);
background-size: cover;
background-position: bottom;
background-repeat: no-repeat;
background-attachment: scroll;
box-shadow: 0 0 15px rgba(0,0,0, 0.5);">
<div class="col-lg-7">
<div class="card rounded-0 border-0 p-4" style="max-height:450px;background:rgba(0,0,0,0.5);">
<div class="mx-auto text-center col-12" style="letter-spacing:5px;"><p>
<i class="fas fa-seedling fa-xs pb-2"></i>
<i class="fas fa-leaf fa-lg mx-3 pb-2"></i>
<i class="fas fa-seedling fa-xs pb-2"></i></p>
</div>
<hr class="w-25 my-2" style="border-color:rgba(255,255,255,0.15);">
<hr class="w-50 my-2" style="border-color:rgba(255,255,255,0.15);">
<div class="d-flex" style="min-height:140px;">
<h1 class="m-auto text-uppercase text-center p-4" style="font-size:2rem;font-weight:200;letter-spacing:8px;border:2px solid;background-color:rgba(0,0,0,0.5);">
Solaris
</h1></div>
<div class="display-4 text-center text-uppercase pb-1" style="font-size:14px;letter-spacing:5px;">
Wolfdog • He/Him • Asexual
</div><hr class="w-100 my-3" style="border-color:rgba(255,255,255,0.15);">
<div class="pb-2" style="min-height:120px;max-height:120px;overflow:auto;">
<div class="text-center" style="letter-spacing:.5px;">
<p>Personality: Loyal, stubborn, sarcastic and not the brightest. He tends to make jokes/laugh in bad situations (mainly because he’s nervous/uncomfortable or doesn’t know what to do). He’s an introvert and hates being the center of attention </p>
<p> Solaris is nicknamed Sol (pronounced like Soul) which was given by his brother Apollo.</p>
</div>
</div>
<hr class="w-50 my-2" style="border-color:rgba(255,255,255,0.15);">
<hr class="w-25 my-2" style="border-color:rgba(255,255,255,0.15);">
</div></div>
<div class="col-lg-5 w-100" style="max-height:450px;background:rgba(0,0,0,0.8);">
<div class="px-4 p-3 card-block sticky-top" style="background:rgba(0,0,0,0.5);">
<div class="col-8 mx-auto">
<ul class="nav row no-gutters text-center">
<li class="nav-item col">
<a class="text-white" data-toggle="tab" href="#one">
<i class="far fa-user"></i>
</a>
</li>
<li class="nav-item col">
<a class="text-white" data-toggle="tab" href="#two">
<i class="far fa-heart"></i>
</a>
</li>
<li class="nav-item col">
<a class="text-white" data-toggle="tab" href="#four">
<i class="far fa-music"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane fade active show" id="one">
<div class="px-4 p-3" style="min-height:400px;max-height:400px;overflow-y:scroll;letter-spacing:.5px;">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
Profile
</h1><div class="px-2">
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Name</span>
<span class="w-50 text-right">Solaris</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Nickname</span>
<span class="w-50 text-right">Sol</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Gender</span>
<span class="w-50 text-right">Male</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Pronouns</span>
<span class="w-50 text-right">He/Him</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Species</span>
<span class="w-50 text-right">Wolfdog</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Birthday</span>
<span class="w-50 text-right">March 3rd</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Zodiac</span>
<span class="w-50 text-right">Pisces</span>
</div>
<div class="d-flex justify-content-between p-1">
<span class="w-50 text-uppercase">Orientation</span>
<span class="w-50 text-right">Asexual</span>
</div>
</div>
<hr style="border-color:rgba(255,255,255,0.15);">
<div class="row no-gutters">
<div class="col-6">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
<i class="fas fa-check"></i>
</h1><ul>
<li>Hoodies</li>
<li>Movies/Shows</li>
<li>Music</li>
</ul></div>
<div class="col-6">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
<i class="fas fa-times"></i>
</h1><ul>
<li>Children</li>
<li>Big crowds</li>
<li>Clowns</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="two">
<div class="px-3 p-3" style="min-height:400px;max-height:400px;overflow-y:scroll;letter-spacing:.5px;">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
Trivia
</h1><ul>
<li>Not much of a backstory. But I’m in the process of making a zombie apocalypse AU</li>
<li>He has a brother named Apollo</li>
<li>When others flirt with him, he’s really oblivious and thinks their just being friendly💀</li>
<li>He loves to prove people who doubted him wrong</li>
<li>He hates bullies</li>
</ul><hr style="border-color:rgba(255,255,255,0.15);">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
Design Notes
</h1><ul>
<li>Design is by Wolfdoq</li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="three">
<div class="px-4 p-3" style="min-height:400px;max-height:400px;overflow-y:scroll;letter-spacing:.5px;">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
Background
</h1><div class="p-1" style="text-indent:20px;">
</div>
</div>
</div>
<div class="tab-pane fade" id="four">
<div class="px-4 p-3" style="min-height:400px;max-height:400px;overflow-y:scroll;letter-spacing:.5px;">
<h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px;letter-spacing:1px;">
Voice Claim
</h1><div>
<iframe src="https://www.youtube.com/embed/LiDNAJTTdd8" class="flex-fill pb-2" style="width:102%;min-height:300px;" frameborder="0">
</iframe>
</div>
</div>
</div></div></div></div>
<div class="text-muted text-right p-2" style="font-size:10px">
code by <a href="https://toyhou.se/7275692.-f2u-sleek" class="text-muted">jiko</a> |
bg photo by Unsplash
</div>
</div>
2 years, 10 months ago
Ahh thank you it works now! And Thank you so much for all the help and the patience <3
2 years, 10 months ago Edited 2:42 am