[F2U] Pretty In Purple (Code)

CanadianLyynx

Info


Created
4 years, 24 days ago
Creator
CanadianLyynx
Favorites
55

Profile


<!-------------------------- 
Hello and thank you for using Pretty In Purple!

Some quick info you should know: 
- PLEASE DO NOT REMOVE CREDIT
- Turn off WYSIWYG, there is no guarantee it will work with it on
- The main colour is #d3a1ff and the secondary colour is #fff and #a87acc
- The BG here was also made byCanadianLyynx, go here for more BGs!! https://toyhou.se/6259293.-f2u-transparent-patterns 
- Please PM if you have any questions or concerns ----------------->

<div class="container p-0" style="width:600px">
 
 
<!------------------------Beginning------------------------------->
  <div class="row no-gutters justify-content-between mx-auto p-3" style="max-width:600px;background: #d3a1ff url(https://f2.toyhou.se/file/f2-toyhou-se/images/21270881_E5ShgFZ5dNKyS48.png) fixed center;box-shadow: 0px 0px 12px rgba(0,0,0,.25);border-radius:5px">
    <!------------------------name------------------------------->
<div class="col-12 p-1">

  <div class="card border-0 p-0" style="height:50px;center fixed;background-color: #fff">
    <div class="col-12 text-center text-lowercase " style="font-size:30px;letter-spacing:10px;color:#a87acc">

      <div>Name</div>
    </div>
  </div>

</div>
<!------------------------/name------------------------------->
    <!------------------------info------------------------------->
<div class="flex-column col-4 p-1">
  <div class=" card border-0 text-center"style="background: #d3a1ff url(https://f2.toyhou.se/file/f2-toyhou-se/images/21270881_E5ShgFZ5dNKyS48.png) center fixed;">
    
    <div class="card border-0 p-1"style="background-color: rgba(255,255,255,0.7)">
      <div class="p-1 justify-content-between">
        <span class="text-uppercase px-1" style="letter-spacing: 1px;color:#a87acc">
        Nickame</span>
        <span class="text-right text-lowercase"style="color:#d3a1ff">
        info</span>
      </div>
    
      <div class="p-1 justify-content-between">
        <span class="text-uppercase px-1" style="letter-spacing: 1px;color:#a87acc">
        Age</span>
        <span class="text-right text-lowercase"style="color:#d3a1ff">
        info</span>
      </div>
  
      <div class="p-1 justify-content-between">
        <span class="text-uppercase px-1" style="letter-spacing: 1px;color:#a87acc">
        Gender</span>
        <span class="text-right text-lowercase"style="color:#d3a1ff">
        info</span>
      </div>

      <div class="p-1 justify-content-between">
        <span class="text-uppercase px-1" style="letter-spacing: 1px;color:#a87acc">
        Pronouns</span>
        <span class="text-right text-lowercase"style="color:#d3a1ff">
        info</span>
      </div>

      <div class="p-1 justify-content-between">
        <span class="text-uppercase px-1" style="letter-spacing: 1px;color:#a87acc">
        Birthday</span>
        <span class="text-right text-lowercase"style="color:#d3a1ff">
        info</span>
      </div>

      <div class="p-1 justify-content-between">
        <span class="text-uppercase px-1" style="letter-spacing: 1px;color:#a87acc">
        Voice</span>
        <span class="text-right text-lowercase"style="color:#d3a1ff">
        info <a class="melody-embed" style="background:transparent;" href="#"><iframe style="opacity:.00;position:absolute;" src="
        https://www.youtube.com/embed/XXX
        " frameborder="0"></iframe><i class="fas fa-play" style="color:#d3a1ff"></i></a>
      </div>

      <div class="p-1 justify-content-between">
        <span class="text-uppercase px-1" style="letter-spacing: 1px;color:#a87acc">
        Theme</span>
        <span class="text-right text-lowercase"style="color:#d3a1ff">
        info <a class="melody-embed" style="background:transparent;" href="#"><iframe style="opacity:.00;position:absolute;" src="
        https://www.youtube.com/embed/XXX
        " frameborder="0"></iframe><i class="fas fa-play" style="color:#d3a1ff"></i></a>
      </div>

    </div>
  
  </div>
</div>
<!------------------------/info------------------------------->
<!------------------------Image box------------------------------->
<div class="col-4 p-1 flex-column">

    <div class="flex-grow-1 card border-0 p-0" style="background-color: rgba(255,255,255,0.7)">

<!------------------------profile image------------------------------->
      <div class="flex-grow-1 card border-0" style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/6457998?1585771866) top no-repeat;background-size:cover; height:200px">
      </div>
<!------------------------/profile image------------------------------->
    </div>

</div>
    <!------------------------/image box------------------------------->
<div class="flex-column col-4 p-1">
  <div class=" card border-0 text-dark text-center"style="background: #d3a1ff url(https://f2.toyhou.se/file/f2-toyhou-se/images/21270881_E5ShgFZ5dNKyS48.png) center fixed;">
    
    <div class="card border-0 p-1"style="background-color: rgba(255,255,255,0.7)">
      <div class="p-1 justify-content-between">
        <span class="text-uppercase px-1" style="letter-spacing: 1px;color:#a87acc">
        Species</span>
        <span class="text-right text-lowercase"style="color:#d3a1ff">
        info</span>
     </div>

      <div class="p-1 justify-content-between">
        <span class="text-uppercase px-1" style="letter-spacing: 1px;color:#a87acc">
        Height</span>
        <span class="text-right text-lowercase"style="color:#d3a1ff">
        info</span>
      </div>

      <div class="p-1 justify-content-between">
        <span class="text-uppercase px-1" style="letter-spacing: 1px;color:#a87acc">
        Orientation</span>
        <span class="text-right text-lowercase"style="color:#d3a1ff">
        info</span>
      </div>
    
      <div class="p-1 justify-content-between">
        <span class="text-uppercase px-1" style="letter-spacing: 1px;color:#a87acc">
        Occupation</span>
        <span class="text-right text-lowercase"style="color:#d3a1ff">
        info</span>
      </div>
  
      <div class="p-1 justify-content-between">
        <span class="text-uppercase px-1" style="letter-spacing: 1px;color:#a87acc">
        Home</span>
        <span class="text-right text-lowercase"style="color:#d3a1ff">
        info</span>
      </div>

      <div class="p-1 justify-content-between">
        <span class="text-uppercase px-1" style="letter-spacing: 1px;color:#a87acc">
        R.status</span>
        <span class="text-right text-lowercase"style="color:#d3a1ff">
        info</span>
     </div>

      <div class="p-1 justify-content-between">
        <span class="text-uppercase px-1" style="letter-spacing: 1px;color:#a87acc">
        L.status</span>
        <span class="text-right text-lowercase"style="color:#d3a1ff">
        living/dead</span>
      </div>
    </div>
  </div>
</div>
<!------------------------/info------------------------------->
<!---------------------------------------------palette--------------------------------------------------->
      <div class="col-2 p-1">
          <div class="card border-0 p-2" style="background: #a87acc;">
          </div>
      </div>

      <div class="col-2 p-1">
         <div class="card border-0 p-2" style="background: #a87acc;">
         </div>
      </div>

      <div class="col-2 p-1">
          <div class="card border-0 p-2" style="background: #a87acc;">
          </div>
      </div>

      <div class="col-2 p-1">
          <div class="card border-0 p-2" style="background: #a87acc;">
          </div>
      </div>

      <div class="col-2 p-1">
          <div class="card border-0 p-2" style="background: #a87acc;">
          </div>
      </div>

      <div class="col-2 p-1">
         <div class="card border-0 p-2" style="background: #a87acc;">
          </div>
      </div>
<!---------------------------------------------/palette--------------------------------------------------->
<!--------------------------- tabs -------------------------------------->
<div class="flex-column col-12 p-1">
               <ul class="nav nav-tabs card-header-tabs nav-justified text-uppercase" style="letter-spacing:1px">
                  <li class="nav-item border-2 pl-2"><a class="nav-link active"style="color:#d3a1ff;border-color:#fff;background-color: rgba(255,255,255,0.7)" data-toggle="tab" href="#Description">Description</a></li>
                  <li class="nav-item border-2"><a class="nav-link"style="color:#d3a1ff;background: #d3a1ff; border-color:fff;background-color: rgba(255,255,255,0.7)" data-toggle="tab" href="#Facts">Facts</a></li>
                  <li class="nav-item border-2"><a class="nav-link"style="color:#d3a1ff;background: #d3a1ff; border-color:#fff;background-color: rgba(255,255,255,0.7)" data-toggle="tab" href="#Relations">Relations</a></li>
                  <li class="nav-item border-2 pr-2"><a class="nav-link"style="color:#d3a1ff;background: #d3a1ff; border-color:#fff;background-color: rgba(255,255,255,0.7)" data-toggle="tab" href="#MoodBoard">MoodBoard</a></li>
               </ul>
</div>
 <!---------------------------------------------text--------------------------------------------------->
     <div class="flex-column col-12 p-1">
        <div class=" card border-0 text-center"style="background: #fff">
    
            <div class="tab-content">
               <!--------------------------- Description -------------------------------------->
          
              <div class="tab-pane active show mt-1 card-block" style="height: 250px; overflow:auto;" id="Description">
                  <div class="card border-0 p-1"style="background-color: rgba(255,255,255,0.7)">
                  
                    <span class="text-uppercase px-1" style="letter-spacing: 1px;color:#d3a1ff">
                    Header</span>
                    <span class="text-muted">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Aliquam quis fringilla erat. Morbi sollicitudin id lorem eu efficitur. Mauris varius id magna vitae ullamcorper. In gravida libero consectetur, lobortis nisl sit amet, pellentesque ligula. Suspendisse tincidunt feugiat posuere. Duis dui erat, accumsan a aliquam eu, efficitur a tortor. Nunc molestie, leo in commodo aliquam, tellus augue tempor velit, non placerat ex sem non nisi.</span>
                    <hr class="border-1 w-100"style="border-color:#d3a1ff">
                    <span class="px-1 text-muted" style="letter-spacing: 1px;color:#d3a1ff">
                    "Quote."</span>
                    <hr class="border-1 w-100"style="border-color:#d3a1ff">
                    <span class="text-uppercase px-1" style="letter-spacing: 1px;color:#d3a1ff">
                    Header</span>
                    <span class="text-muted">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa Suspendisse blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante.</span>
                  </div>
              </div>
               <!--------------------------- Likes/dislikes/trivia -------------------------------------->
               <div class="tab-pane card-block col-12 text-muted mt-1" style="height:250px; overflow:auto;" id="Facts">

                  <div class="row no-gutters justify-content-between">
                   <div class="flex-column col-6 p-1">
                    <span class="text-uppercase px-1" style="letter-spacing: 1px;color:#d3a1ff">
                    Likes</span>
                     <div class="flex-grow-1 text-left table-responsive text-muted">
                      <ul>
                      <li>Lorem ipsum dolor sit amet</li>
                      <li>Consectetur adipiscing</li>
                      <li>Adipiscing elit</li>
                      </ul>
                    </div>
                  </div>
                    <div class="flex-column col-6 p-1">
                      <span class="text-uppercase px-1" style="letter-spacing: 1px;color:#d3a1ff">
                      Dislikes</span>
                        <div class="flex-grow-1 text-left table-responsive text-muted">
                          <ul>
                          <li>Suspendisse sit amet massa</li>
                          <li>Blandit</li>
                         <li>Fermentum enim a</li>
                          </ul>
                        </div>
                    </div>
                       <hr class="border-1 w-100"style="border-color:#a87acc">
                        <div class="flex-column col-12 p-1">
                          <span class="text-uppercase px-1" style="letter-spacing: 1px;color:#d3a1ff">
                          Trivia</span>
                          <div class="flex-grow-1 text-left table-responsive text-muted">
                          <ul>
                          <li>Integer interdum urna ac dui sollicitudin sollicitudin</li>
                          <li>In feugiat posuere nulla, eget lobortis ante</li>
                          <li>Aliquam magna libero, dictum sit amet</li>
                          </ul>
                          </div>
                        </div>
                       <hr class="border-1 w-100"style="border-color:#a87acc">
                        <div class="flex-column col-12 p-1">
                          <span class="text-uppercase px-1" style="letter-spacing: 1px;color:#d3a1ff">
                          Design Notes</span>
                          <div class="flex-grow-1 text-left table-responsive text-muted">
                          <ul>
                          <li>Mauris varius id magna vitae ullamcorper</li>
                          <li>Suspendisse tincidunt feugiat posuere</li>
                          <li>Nunc molestie, leo in commodo aliquam tellus augue tempor velit, non placerat ex sem non nisi</li>
                          </ul>
                          </div>
                        </div>
                    </div>
                  </div>
                <!--------------------------- /Likes/dislikes/trivia -------------------------------------->
               <!--------------------------- relations -------------------------------------->
              <div class="tab-pane card-block text-muted mt-1" style="height:250px; overflow:auto;" id="Relations">
                  <div class="row no-gutters justify-content-between">
                  <!---------------------------relationship 1-------------------->
                <div class="flex-column col-8 p-1">
                    <div class="p-1 justify-content-between">
                    <span><a href="LINK"class=" px-1 text-uppercase"style="color:#a87acc">
                    name</span>
                    <span class="text-lowercase text-right"style="color:#d3a1ff">
                    r.ship</span>
                    </div>
                    <div class="flex-grow-1 text-left text-muted table-responsive p-1" style="height:150px;">

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet. </div>
                </div>
                      <!---------------------------image-------------------->
              <div class="flex-column col-4 p-1">
                <div class="flex-grow-1 card border-0" style="background:#a87acc url(https://f2.toyhou.se/file/f2-toyhou-se/characters/6457998?1585771866) top no-repeat;background-size:cover; height:150px; width:150px">
                </div>
                <!---------------------------/image-------------------->
                <!---------------------------hearts-------------------->
                  <div class="flex-column pt-2">
                <span class="text-center text-uppercase pl-1 pr-1"style="color:#a87acc">
                <span><i class="fal fa-heart fa-fw"></i><i class="fas fa-heart fa-fw"></i><i class="fas fa-heart fa-fw"></i><i class="fas fa-heart fa-fw"></i><i class="fas fa-heart fa-fw"></i></span>
                  </div>
                </div>
                <!---------------------------/relationship 1-------------------->
                <hr class="border-1 w-100"style="border-color:#a87acc">
                 <!---------------------------relationship 2-------------------->
                <!---------------------------image-------------------->
              <div class="flex-column col-4 p-1">
                <div class="flex-grow-1 card border-0" style="background:#d3a1ff url(https://f2.toyhou.se/file/f2-toyhou-se/characters/6457998?1585771866) top no-repeat;background-size:cover; height:150px; width:150px">
                </div>
                <!---------------------------/image-------------------->
                <!---------------------------hearts-------------------->
                  <div class="flex-column pt-2">
                <span class="text-center text-uppercase pl-1 pr-1"style="color:#a87acc">
                <span><i class="fal fa-heart fa-fw"></i><i class="fal fa-heart fa-fw"></i><i class="fal fa-heart fa-fw"></i><i class="fas fa-heart fa-fw"></i><i class="fas fa-heart fa-fw"></i></span>
                  </div>
                </div>
                <!---------------------------/image-------------------->
                <!---------------------------text-------------------->
                <div class="flex-column col-8 p-1">
                    <div class="p-1 justify-content-between">
                    <span><a href="LINK"class=" px-1 text-uppercase"style="color:#a87acc">
                    name</span>
                    <span class="text-lowercase text-right"style="color:#d3a1ff">
                    r.ship</span>
                    </div>
                    <div class="flex-grow-1 text-left text-muted table-responsive p-1" style="height:150px;">

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet. </div>
                </div>
                 <!---------------------------/text-------------------->
                <!---------------------------/relationship 2-------------------->
                </div>
              </div>
               <!--------------------------- /relations -------------------------------------->
               <!--------------------------- moodboard -------------------------------------->
               <div class="tab-pane card-block text-muted mt-1" style="height:250px; overflow:auto;" id="MoodBoard">
                  <div class="row no-gutters justify-content-between">
                    <!------------------------image 1------------------------------->
                    <div class="col-4 p-1 flex-column">
                        <div class="flex-grow-1 card border-0" style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/6457998?1585771866) top no-repeat;background-size:cover; height:150px; width:150px">
                        </div>
                    </div>
                    <!------------------------/image 1------------------------------->
                   <!------------------------image 2------------------------------->
                    <div class="col-4 p-1 flex-column">
                        <div class="flex-grow-1 card border-0" style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/6457998?1585771866) bottom no-repeat;background-size:cover; height:150px; width:150px">
                        </div>
                    </div>
                    <!------------------------/image 2------------------------------->
                    <!------------------------image 3------------------------------->
                    <div class="col-4 p-1 flex-column">
                        <div class="flex-grow-1 card border-0" style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/6457998?1585771866) top no-repeat;background-size:cover; height:150px; width:150px">
                        </div>
                    </div>
                    <!------------------------/image 3------------------------------->
                     <!------------------------image 4------------------------------->
                    <div class="col-4 p-1 flex-column">
                        <div class="flex-grow-1 card border-0" style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/6457998?1585771866) bottom no-repeat;background-size:cover; height:150px; width:150px">
                        </div>
                    </div>
                    <!------------------------/image 4------------------------------->
                   <!------------------------image 5------------------------------->
                    <div class="col-4 p-1 flex-column">
                        <div class="flex-grow-1 card border-0" style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/6457998?1585771866) top no-repeat;background-size:cover; height:150px; width:150px">
                        </div>
                    </div>
                    <!------------------------/image 5------------------------------->
                    <!------------------------image 6------------------------------->
                    <div class="col-4 p-1 flex-column">
                      <div class="flex-grow-1 card border-0" style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/6457998?1585771866) bottom no-repeat;background-size:cover; height:150px; width:150px">
                      </div>
                    </div>
                    <!------------------------/image 6------------------------------->
                </div>
              </div>
    <!--------------------------- /moodboards -------------------------------------->
           </div>
        </div>
    </div>
  <!---------------------------/text--------------------------------->
    <!--------------------------- End-------------------------------------->
  </div>
</div>
    <!------------------------CREDITS DO NOT REMOVE------------------------------->
<div class="col-12 text-primary text-right " style="font-size:10px;width:890px">
<a href="/canadianlyynx">
<i class="far fa-paw" style="color:#d3a1ff">
</i>
</a>
</div>