One-page character [C] HTML (Custom code)

<div class="container-fluid my-1" style="color:#ffffff;width:1100px;">

<!--Background image-->

 <div class="card rounded-0 border-0 p-2" style="background-image:url( BG IMAGE ); background-size:cover; background-position: center; border-top-right-radius:15px; border-top-left-radius:15px;">

  <div class="row">

 <div class="col-4">

<!--Basic info card-->

    <div class="card bg-faded rounded-0 border-0 p-3" style="background-color:#250095; border-top-right-radius:200px; border-top-left-radius:200px;">

<!--PFP, top left-->

     <div class="card mx-auto rounded-circle mb-2" style="background-image:url( image link ); background-size:contain; background-position: center; height:170px; width:170px; border:5px dashed #ff00ff;">

<!--FA icons over PFP, can be deleted or moved-->

     <a style="position:absolute; bottom:100px; left:140px; font-size:25px;"><i class="fad fa-square"></i> </a>

     <a style="position:absolute; bottom:0px; left:0px; font-size:35px;"><i class="fad fa-square"></i> </a>

     </div>

 <!--Age box-->

     <div class="card bg-faded rounded-0 border-0 p-1 ml-2" style="background-color:#0d0049;">

      <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><span style="color:#ff00ff;"><strong>Age</strong></span> <i>info</i></div>

      </div>

 <!--Gender box-->

      <div class="card bg-faded rounded-0 border-0 p-1 mr-2 my-1" style="background-color:#0d0049;">

       <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><span style="color:#ff00ff;"><strong>Gender</strong></span> <i>info</i></div>

       </div>

 <!--Species box-->

       <div class="card bg-faded rounded-0 border-0 p-1 ml-2" style="background-color:#0d0049;">

        <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><span style="color:#ff00ff;"><strong>Species</strong></span> <i>info</i></div>

        </div>

 <!--Race box-->

        <div class="card bg-faded rounded-0 border-0 p-1 mr-2 my-1" style="background-color:#0d0049;">

         <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><span style="color:#ff00ff;"><strong>Race</strong></span> <i>info</i></div>

         </div>

 <!--Orientation box-->

         <div class="card bg-faded rounded-0 border-0 p-1 ml-2" style="background-color:#0d0049;">

          <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><span style="color:#ff00ff;"><strong>Orientation</strong></span> <i>info</i></div>

          </div>

 <!--Role box-->

          <div class="card bg-faded rounded-0 border-0 p-1 mr-2 my-1" style="background-color:#0d0049;">

           <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><span style="color:#ff00ff;"><strong>Role</strong></span> <i>info</i></div>

           </div>

 <!--Height box-->

           <div class="card bg-faded rounded-0 border-0 p-1 ml-2 mb-2" style="background-color:#0d0049;">

            <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><span style="color:#ff00ff;"><strong>Height</strong></span> <i>info</i></div>

           </div>

 <!--Designer box-->

           <div class="card bg-faded rounded-0 border-0 p-1 mr-1" style="background-color:#0d0049;">

            <div class="col-12 justify-content-between" style="text-align: center; font-size: 15px;"><span style="color:#ff00ff;"><strong>Designer</strong></span> <i><a style="color:#9600ff" 

            href=" linktodesigner ">info</a></i></div>

            </div>

           </div>

          </div>

          <div class="col-8">

<!--Character description box-->

           <div class="card bg-faded rounded-0 border-0 p-1 mt-5" style="background-color:#250095; border-top-right-radius:25px; border-top-left-radius:100px;">

 <!--Header-->

           <p style="font-size: 40px; text-align: right; letter-spacing: 2px; color:#ffeefc; text-shadow:5px 0 0 #9600ff, -2px 0 0 #ff00ff;" class="mr-3"><strong>CHARACTER NAME</strong></p>

           </div>

<!--Box seperator-->

           <div class="card bg-faded rounded-0 border-0 p-1" style="background-color:#140154;">

           </div>

<!--Main boxes-->

           <div class="card bg-faded rounded-0 border-0 p-2" style="background-color:#07007c; min-height:357px;">

            <div class="card bg-faded rounded-0 p-2" style="background-color:#07007c; min-height:290px; border:2px dashed #ff00ff; overflow:auto;">

 <!--Descriptions-->

            <p style="font-size: 16px; text-align: justify; color:#ffeefc;" class="ml-1">Basic summary of the character here. Write about what they do and stuff. You can make it as long or as short as you want, because the box scrolls. Also you can change anything about this text if you know how to.</p>

            <a style="font-size: 16px; text-align: justify; color:#ffeefc;" class="ml-1">And yes, another parahraph. I'm just gonna put filler text here cus idk. Diales is a cool guy who's like a demon or something and he like eats souls. idk what he does. I haven't made anything for this character. He'll probably eat souls now just because I mentioned it. Alright so Diales is a guy who eats souls. Thank you for learning about this character.</p>

            </div>

<!--Quote box-->

             <div class="card bg-faded rounded-0 border-0 p-2 mt-2" style="background-color:#140154; height:40px;">

 <!--Quote-->

             <p style="font-size: 17px; text-align: left; letter-spacing: 2px; color:#ffeefc; text-shadow:2px 0 0 #9600ff, -1px 0 0 #ff00ff;" class="mr-3">"I want nothing more from you but your essence. Give. rn."</p>

             </div>

            </div>

           </div>

          </div>

<!--Aesthetics box-->

          <div class="card bg-faded rounded-0 border-0 p-1 mt-2" style="background-color:#140154;">

           <div class="row no-gutters">

          <div class="col-3">

 <!--Img 1-->

           <div class="card rounded-0 border-0" style="background-image:url( image link ); background-size:cover; background-position: center;height:150px;">

            </div>

           </div>

           <div class="col-3">

 <!--Img 2-->

            <div class="card rounded-0 border-0" style="background-image:url( image link ); background-size:cover; background-position: center;height:150px;">

             </div>

              </div>

              <div class="col-3">

 <!--Img 3-->

               <div class="card rounded-0 border-0" style="background-image:url( image link ); background-size:cover; background-position: center;height:150px;">

               </div>

              </div>

              <div class="col-3">

 <!--Img 4-->

               <div class="card rounded-0 border-0" style="background-image:url( image link ); background-size:cover; background-position: center;height:150px;">

               </div>

              </div>

             </div>

            </div>

            <div class="row mt-2">

             <div class="col-5">

<!--Design details box-->

              <div class="card bg-faded rounded-0 border-0" style="background-color:#07007c; height:500px;">

               <div class="card bg-faded rounded-0 border-0" style="background-color:#140154; height:50px;">

 <!--Header-->

               <p style="font-size: 35px; text-align: left; letter-spacing: 2px; color:#ffeefc; text-shadow:5px 0 0 #9600ff, -2px 0 0 #ff00ff;" class="ml-3"><strong>DESIGN</strong></p>

               </div>

               <div class="card bg-faded rounded-0 border-0 p-2" style="background-color:#07007c; height:180px; overflow:auto;">

 <!--Description of design-->

               <p style="font-size: 16px; text-align: justify; color:#ffeefc;">Basic description of the character's design, maybe why they chose to wear what they wear, why they look the way they do in general, you get the point. And- get this- the box scrolls. Crazy, ikr</p>

               </div>

               <div class="card bg-faded rounded-0 border-0 p-1" style="background-color:#140154; height:180px; overflow:auto;">

 <!--Smaller design notes-->

               <ul style="list-style-type: circle; font-size: 16px;" class="mt-1">

                  <li>trivia here basically</li>

                  <li>or design notes</li>

                  <li>whatever you think is more important</li>

                  <li>or more fitting ig</li>

                 </ul>

                 </div>

<!--Status box-->

                 <div class="card bg-faded rounded-0 border-0 p-2" style="background-color:#0d0049; height:40px;">

                  <div class="col-12 justify-content-between" style="text-align: center; font-size: 16px;"><span style="color:#ff00ff;"><strong>Status</strong></span> - <i>NFS/UFS</i></div>

                  </div>

<!--Attachment box-->

                  <div class="card bg-faded rounded-0 border-0 p-2" style="background-color:#0d0049; height:50px;">

                   <div class="col-12 justify-content-between" style="text-align: center; font-size: 16px;"><span style="color:#ff00ff;"><strong>Attachment</strong></span> - 

 <!--Star rating (5 = very emotionally attached 0 = want nothing to do with

 [change to "far" for a hollowed star, change to "fas" for a filled in star]-->

                   <i class="far fa-star"><i class="far fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></div>

                    </div>

                   </div>

                  </div>

                  <div class="col-6">

<!--Reference image-->

                   <div class="mx-auto mb-2" style="background-image:url( image link ); background-size:contain; background-position: center; height:500px;">

                   </div>

                  </div>

                  <div class="col-1">

<!--Color palette-->

                   <div class="card bg-faded rounded-0 border-0 mt-1" style="background-color:#07007c; height:492px;">

 <!--Clr 1-->

                    <div class="card bg-faded rounded-0 border-0" style="background-color:#ECECEC; height:82px;">

                    </div>

 <!--Clr 2-->

                    <div class="card bg-faded rounded-0 border-0" style="background-color:#CBCBCB; height:82px;">

                    </div>

 <!--Clr 3-->

                    <div class="card bg-faded rounded-0 border-0" style="background-color:#A5A5A5; height:82px;">

                    </div>

 <!--Clr 4-->

                    <div class="card bg-faded rounded-0 border-0" style="background-color:#767676; height:82px;">

                    </div>

 <!--Clr 5-->

                    <div class="card bg-faded rounded-0 border-0" style="background-color:#505050; height:82px;">

                    </div>

 <!--Clr 6-->

                    <div class="card bg-faded rounded-0 border-0" style="background-color:#303030; height:82px;">

                    </div>

                   </div>

                  </div>

                 </div>

                 <div class="row mt-2">

                <div class="col-6">

<!--Personality stats box-->

                 <div class="card bg-faded rounded-0 border-0" style="background-color:#250095; height:350px;">

                  <div class="card bg-faded rounded-0 border-0" style="background-color:#0d0049; height:50px;">

 <!--Header-->

                  <p style="font-size: 35px; text-align: left; letter-spacing: 2px; color:#ffeefc; text-shadow:5px 0 0 #9600ff, -2px 0 0 #ff00ff;" class="ml-3"><strong>STATS</strong></p>

                  </div>

                  <div class="card bg-faded rounded-0 border-0 p-2" style="background-color:#250095; height:300px;">

                   <div class="row">

                    <div class="col-9">

<!--Kindness level-->

                    <a style="font-size: 18px; text-align: left; color:#ffeefc;" class="mt-1">Uncaring</p>

                    </div>

                    <div class="col-3">

                    <a style="font-size: 18px; text-align: right; color:#ffeefc;" class="mt-1">Considerate</p>

                    </div>

                   </div>

                   <div class="progress bg-dark rounded mb-1">

 <!--Percentage-->

                      <div class="progress-bar" style="width: 50%;height: 15px; background-color: #ff00ff"></div>

                      </div>

                      <div class="row">

                     <div class="col-9">

<!--Charm level-->

                     <a style="font-size: 18px; text-align: left; color:#ffeefc;" class="mt-1">Unalluring</p>

                     </div>

                     <div class="col-3">

                     <a style="font-size: 18px; text-align: right; color:#ffeefc;" class="mt-1">Charismatic</p>

                     </div>

                    </div>

                    <div class="progress bg-dark rounded mb-1">

 <!--Percentage-->

                       <div class="progress-bar" style="width: 50%;height: 15px; background-color: #ff00ff"></div>

                       </div>

                       <div class="row">

                      <div class="col-9">

<!--Bravery level-->

                      <a style="font-size: 18px; text-align: left; color:#ffeefc;" class="mt-1">Cowardly</p>

                      </div>

                      <div class="col-3">

                      <a style="font-size: 18px; text-align: right; color:#ffeefc;" class="mt-1">Courageous</p>

                      </div>

                     </div>

                     <div class="progress bg-dark rounded mb-1">

 <!--Percentage-->

                        <div class="progress-bar" style="width: 50%;height: 15px; background-color: #ff00ff"></div>

                        </div>

                        <div class="row">

                       <div class="col-9">

<!--Intelligence level-->

                       <a style="font-size: 18px; text-align: left; color:#ffeefc;" class="mt-1">Unwise</p>

                       </div>

                       <div class="col-3">

                       <a style="font-size: 18px; text-align: right; color:#ffeefc;" class="mt-1">Intelligent</p>

                       </div>

                      </div>

                      <div class="progress bg-dark rounded mb-1">

 <!--Percentage-->

                         <div class="progress-bar" style="width: 50%;height: 15px; background-color: #ff00ff"></div>

                         </div>

                         <div class="row">

                        <div class="col-9">

<!--Creativity level-->

                        <a style="font-size: 18px; text-align: left; color:#ffeefc;" class="mt-1">Uninspired</p>

                        </div>

                        <div class="col-3">

                        <a style="font-size: 18px; text-align: right; color:#ffeefc;" class="mt-1">Creative</p>

                        </div>

                       </div>

                       <div class="progress bg-dark rounded mb-1">

 <!--Percentage-->

                          <div class="progress-bar" style="width: 50%;height: 15px; background-color: #ff00ff"></div>

                          </div>

                          <div class="row">

                         <div class="col-9">

<!--Empathy level-->

                         <a style="font-size: 18px; text-align: left; color:#ffeefc;" class="mt-1">Apathetic</p>

                         </div>

                         <div class="col-3">

                         <a style="font-size: 18px; text-align: right; color:#ffeefc;" class="mt-1">Empathetic</p>

                         </div>

                        </div>

                        <div class="progress bg-dark rounded mb-1">

 <!--Percentage-->

                           <div class="progress-bar" style="width: 50%;height: 15px; background-color: #ff00ff"></div>

                           </div>

                          </div>

                         </div>

                        </div>

                        <div class="col-6">

<!--Interests box (can be changed to relationships, but note there won't be any pfps. If you know how to link text, go ahead and do that for the character's names)-->

                       <div class="card bg-faded rounded-0 border-0" style="background-color:#250095; height:350px;">

                        <div class="card bg-faded rounded-0 border-0" style="background-color:#0d0049; height:50px;">

 <!--Header-->

                        <p style="font-size: 35px; text-align: left; letter-spacing: 2px; color:#ffeefc; text-shadow:5px 0 0 #9600ff, -2px 0 0 #ff00ff;" class="ml-3"><strong>INTERESTS</strong></p>

                        </div>

<!--Interest 1-->

                        <div class="card bg-faded rounded-0 border-0 p-2" style="background-color:#250095; height:300px; overflow:auto;">

                        <a style="font-size: 18px; text-align: left; color:#ffeefc;"><strong>Interest 1</strong></p>

 <!--Star rating-->

                        <a style="font-size: 15px; text-align: left; color:#ffeefc;" class="ml-3"><i class="far fa-star"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></p></a>

 <!--Description-->

                        <p style="font-size: 16px; text-align: left; color:#ffeefc;">Small description of interest. Put as much as you want but I would reccomend keeping it vague</p>

<!--Interest 2-->

                        <a style="font-size: 18px; text-align: left; color:#ffeefc;"><strong>Interest 2</strong></p>

 <!--Star rating-->

                        <a style="font-size: 15px; text-align: left; color:#ffeefc;" class="ml-3"><i class="far fa-star"><i class="far fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></p></a>

 <!--Description-->

                        <p style="font-size: 16px; text-align: left; color:#ffeefc;">Another description for this interest</p>

<!--Interest 3-->

                        <a style="font-size: 18px; text-align: left; color:#ffeefc;"><strong>Interest 3</strong></p>

 <!--Star rating-->

                        <a style="font-size: 15px; text-align: left; color:#ffeefc;" class="ml-3"><i class="far fa-star"><i class="far fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i><i class="fas fa-star"></i></p></a>

 <!--Description-->

                        <p style="font-size: 16px; text-align: left; color:#ffeefc;">Oh and btw the box scrolls so that's why you can pretty much write as much as you want</p>

                        </div>

                       </div>

                      </div>

                     </div>

<!--History/involvement/personality/etc box-->

                     <div class="card bg-faded rounded-0 border-0 mt-2 mx-auto" style="background-color:#250095; height:375px; width:800px; border-bottom-right-radius:25px; border-bottom-left-radius:25px;">

                      <div class="card bg-faded rounded-0 border-0" style="background-color:#140154; height:50px;">

 <!--Header-->

                      <p style="font-size: 35px; text-align: left; letter-spacing: 2px; color:#ffeefc; text-shadow:5px 0 0 #9600ff, -2px 0 0 #ff00ff;" class="ml-3"><strong>HISTORY</strong></p>

                      </div>

                      <div class="card bg-faded rounded-0 border-0 p-1" style="background-color:#250095; height:325px; overflow:auto; border-bottom-right-radius:25px; border-bottom-left-radius:25px;">

 <!--Description-->

                      <p style="font-size: 16px; text-align: justify; color:#ffeefc;" class="ml-1">Big writing part. Put a WHOLE bunch of text in here. Basically history about the character and stuff. Their story, what they do in the story they're in or basically their backstory. You can change the header to anything you need to write about.</p>

                        <a style="font-size: 16px; text-align: justify; color:#ffeefc;" class="ml-1">Another paragraph just to let you know that the box scrolls.</p>

                        </div>

                       </div>

<!--Code credit (do NOT remove/alter)-->

                       <p style="text-align: right;"><span style="font-size: 9px;">Code by <a href="https://toyhou.se/MCDogResource" id="">MCDogWarrior</a></span></p>

                      </div>

                     </div>