03. Your move (USER) (CODE)

Codesrollss

Profile



                
 <div class="card p-3 mb-2 bg-faded mx-auto" style="border-top-right-radius:15px;border-top-left-radius:15px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;">
                    <!-------[ BACKGROUND ]------------>
       <div class="card p-2"> 
       <div class="p-3 rounded text-center" style="height:300px; background-size:cover; background-repeat:no-repeat; background-position:center; 
 
        background-image:url(https://images.unsplash.com/photo-1471624257787-362e0c864ab2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);">
 
                    <!-------[ USER PROFILE IMG :) ]------------>
          <div class="card border-0 mx-auto" style="width:250px;height:285px;border-radius:200px 200px 10px 10px;background-size:cover;background-position:center;
              
              background-image:url(URL HERE);
              
            "></div> 
          </div>

    <div class="row no-gutters align-items-center">
        <div class="col"><hr style="border-width:1px;background:#60594e"></div>  
          <div><span class="fa-stack fa-2x">
                           <!-------[ the little tiny banner icon :D ]------------>
                <i class="fa-duotone fa-bookmark fa-stack-2x" style="color:#c2ac83"></i>
                             <!-------[ you can change the icon using fa-awesome font :)) ]------------>
                <i class="fa-light fa-swords text-white fa-stack-1x" ></i>
            </span> 
        </div>  
            <div class="col"><hr style="border-width:1px;background:#60594e"></div>
        </div> 
                         <!-------[ MUSIC PLAYER  ]------------>
        <p align="center" style="font-size:16px;font-weight:600;color:#c2ac83"> 
        
            MUSIC TITLE - ARTIST NAME 
            
            <!-------[ replace [ # ] with youtube video id (found after https://www.youtube.com/watch?v=) ]------------>
             <iframe src="https://www.youtube.com/embed/#"
            frameborder="0" style="height:1rem;width:1rem;opacity:.001;position:absolute;"></iframe>
            
           <!-------[ you can change the icon to fa-play / fa-compact-disc if you want ]------------>             
            <i class="fas fa-gramophone fa-lg"></i>  
            
           </p>
                        <!-------[ QUOTES ;D ]------------>
         <p align="center" class="text-uppercase mb-3" style="font-size:15px;font-weight:700">
            <i class="fa-solid fa-quote-left"></i>
            
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
               
            <i class="fa-solid fa-quote-right"></i></p>
         
             <div><hr style="border-width:1px;background:#60594e"></div>
          </div>
    </div>  
                           <!-------[ the first part of chess board ]------------>
       <div align="center" class="row no-gutters"> 
  <div class="card rounded-0  col p-2 mx-auto"><i class="fa-solid fa-chess-rook-piece fa-2x"></i> </div>
  <div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-knight-piece fa-2x"></i></div>
  <div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-bishop-piece fa-2x"></i></div>
  <div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-queen-piece fa-2x"></i></div>
  <div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-king-piece fa-2x"></i></div>
  <div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-bishop-piece fa-2x"></i></div>
  <div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-knight-piece fa-2x"></i></div>
  <div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-rook-piece fa-2x"></i></div> 
</div>
             <!-------[ second row,, ]------------>
<div align="center" class="row no-gutters"> 
  <div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i> </div>
  <div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
  <div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
  <div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
  <div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
  <div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
  <div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
  <div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div> 
</div>

               <!-------[ LEFT COLUMN ]------------>
<div class="row no-gutters">
  <div class="col-md-6 row no-gutters">
    <div class="card bg-faded rounded-0 col-12 p-2">
      <div class="card col-12 p-3 h-100">
          
        <p align="center" class="text-uppercase" style="font-size:16px;font-weight:700"><br>
        
             <!-------[ little icon, use fa-awesome font to change icon! ]------------>
         <i class="fa-solid fa-pen-nib" style="color:#c2ac83"></i><i class="fa-solid fa-signature"></i>
                     
            NAME <span style="color:#c2ac83">|</span> 
            AGE <span style="color:#c2ac83">|</span> 
            PRONOUNS <span style="color:#c2ac83">|</span> 
            TITLE
        
        </p>
                    
        <div><hr style="border-width:1px;background:#60594e"></div>
        
             <!-------[ INTRODUCTION :DD btw this box does not scroll! ]------------>
             
        <p>  <i class="fa-solid fa-envelope-open fa-rotate-90" style="color:#fffff"></i>  
        
        <span style="font-size:16px;font-weight:700;color:#c2ac83"> Say hi here </span>
        
       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.</p>
        
        <p> Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
        </p>
        
         <div><hr style="border-width:1px;background:#60594e"></div>
                         <!-------[ SOCIAL MEDIA LINKS ]------------> 
           <p align="center"><b> 
            
            <a style="color:#c2ac83" href="LINK CARRD">
            <i class="fa-regular fa-address-card fa-lg"></i></a> | 
             
            <a style="color:#c2ac83" href="LINK IG">
            <i class="fa-brands fa-instagram fa-lg"></i></a> |
             
            
            <a style="color:#c2ac83" href="LINK TWT">
            <i class="fa-brands fa-twitter fa-lg"></i></a> |
             
             
            <a style="color:#c2ac83" href="LINK YT">
            <i class="fa-brands fa-youtube fa-lg"></i></a> |
             
            
            <a style="color:#c2ac83" href="LINK DC">
            <i class="fa-brands fa-discord fa-lg"></i></a> 
             
            </b></p>
             
             <div> 
                 <hr> 
                     </div>
                         <!-------[ FEATURED you can feature friends or ur oc!! ]------------>
            <div class="row no-gutters">
             <!-------[ featured one ]------------>
                <div class="col-lg-3 col-3 p-1 mb-2">
                  <a href="LINK_HERE"><img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?7">
             </a>
                </div>
                
             <!-------[ featured two ]------------>
                <div class="col-lg-3 col-3 p-1 mb-2">
                  <a href="LINK_HERE"><img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?7"></a></div>
                  
             <!-------[ featured three ]------------>
                  <div class="col-lg-3 col-3 p-1 mb-2">
                  <a href="LINK_HERE"><img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?7"></a>
                </div>
                  
             <!-------[ featured four ]------------>
                  <div class="col-lg-3 col-3 p-1 mb-2">
                  <a href="LINK_HERE"><img src="https://f2.toyhou.se/file/f2-toyhou-se/users/admin?7"></a>
                </div>
                  
             </div> 
         </div> 
     </div> 
</div> 
             <!-------[ RIGHT COLUMN ]------------>
  <div class="col-md-6 row no-gutters">
    <div class="card bg-faded rounded-0 col-12 p-2">
      <div class="card col-12 p-3">
         <div class="row no-gutters"> 
         
                <!-------[ LINKS ]------------>
     <div align="center" class="card rounded-0 p-3 col-4 mb-3">
         <p class="text-uppercase" style="font-weight:700"> 
         
         <a href="LINK_ADOPTFOLDER">
         <i class="fa-solid fa-shop fa-lg" style="color:#c2ac83"></i></a>
         
         <br> adopts </p>
     </div>
     
     <div align="center" class="card rounded-0 p-3 col-4 mb-3">
         <p class="text-uppercase" style="font-weight:700">
              
         <a href="LINK_COMMISSIONPAGE">
         <i class="fa-solid fa-money-bills fa-lg" style="color:#c2ac83"></i></a>
         
         <br> comms </p>
     </div>
     
     <div align="center" class="card rounded-0 p-3 col-4 mb-3">
         <p class="text-uppercase" style="font-weight:700">
             
         <a href="LINK_TOS">
         <i class="fa-solid fa-list fa-lg" style="color:#c2ac83"></i></a>
             
         <br> t.o.s </p>
     </div>
   </div>   
   
<div class="row no-gutters">
  <div class="col-6 row no-gutters">
    <div class="col-12">
      <div class=" card p-3 rounded-0">
        <div class="d-flex justify-content-between">
             
        <!-------[ ART STATUS ]------------>
        
  <span>  COMMISSION  </span>
               <!-------[ fa-check (open) fa-xmark (closed) ]------------>
  <span> <i class="fa-solid fa-check"></i> </span> 
  
         </div> 
     </div>
</div>
    <div class="col-12">
      <div class="card p-3 rounded-0">
       <div class="d-flex justify-content-between">
           
  <span>  ART TRADE </span> 
               <!-------[ fa-check (open) fa-xmark (closed) ]------------>
  <span> <i class="fa-solid fa-xmark"></i> </span>
  
         </div> 
     </div>
</div>
    <div class="col-12">
      <div class="card p-3 rounded-0 mb-3">
        <div class="d-flex justify-content-between">
            
  <span>  REQUEST </span>
               <!-------[ fa-check (open) fa-xmark (closed) ]------------>
  <span> <i class="fa-solid fa-xmark"></i> </span> 
  
             </div> 
         </div>
     </div>
</div>
  <div class="col-6 row no-gutters">
    <div class="col-12">
      <div class="card p-2 rounded-0 mb-3"> 
               <!-------[ smol MOODBOARD ]------------>
        <div style="height:149px;background-size:cover; background-repeat:no-repeat; background-position:center;
        
        background-image:url(https://images.unsplash.com/photo-1553434320-e9f5757140b1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=327&q=80);">
            
            
            </div>
         </div> 
      </div>
   </div>
</div> 
       
               <!-------[ FOLDER LINKS ]------------>
     <div align="center" class="card rounded-0 p-3">
         
         <p class="text-uppercase"> 
         
         <a href="LINK_here">
         <i class="fa-brands fa-pagelines fa-lg fa-flip-horizontal" style="color:#c2ac83"></i></a>
         
          I. FOLDER name Lorem ipsum dolor sit amet 
           
          </p>
     </div>
     
    <div align="center" class="card rounded-0 p-3">
        
         <p class="text-uppercase"> 
         
         <a href="LINK_here">
         <i class="fa-brands fa-pagelines fa-lg fa-flip-horizontal" style="color:#c2ac83"></i></a>
         
           II. FOLDER name Lorem ipsum dolor sit amet 
            
           </p>
     </div>
     
    <div align="center" class="card rounded-0 p-3 mb-2">
        
         <p class="text-uppercase">
             
         <a href="LINK_here">  
          <i class="fa-brands fa-pagelines fa-lg fa-flip-horizontal" style="color:#c2ac83"></i></a>
          
          III. FOLDER name Lorem ipsum dolor sit amet
           
            </p> 
         </div>
       </div>
     </div>
   </div> 
</div> 

               <!-------[ second part of the chess board ]------------>
<div align="center" class="row no-gutters"> 
  <div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i> </div>
  <div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
  <div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
  <div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
  <div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
  <div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
  <div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div>
  <div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-pawn-piece fa-2x"></i></div> 
</div>
               <!-------[ second row ]------------>
 <div align="center" class="row no-gutters"> 
  <div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-rook-piece fa-2x"></i> </div>
  <div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-knight-piece fa-2x"></i></div>
  <div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-bishop-piece fa-2x"></i></div>
  <div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-queen-piece fa-2x"></i></div>
  <div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-king-piece fa-2x"></i></div>
  <div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-bishop-piece fa-2x"></i></div>
  <div class="bg-faded rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-knight-piece fa-2x"></i></div>
  <div class="card rounded-0 col p-2 mx-auto"><i class="fa-solid fa-chess-rook-piece fa-2x"></i></div> 
</div>
 <div class="mb-2"></div>
 
               <!-------[ bottom thingy BACKGROUND ]------------>
<div class="card p-2 mb-3" style="border-top-right-radius:0px;border-top-left-radius:0px;border-bottom-right-radius:15px;border-bottom-left-radius:15px;">
     <div class="p-3 rounded text-center" style="height:100px;background-size:cover;background-repeat:no-repeat; background-position:center;
     
     background-image:url(https://images.unsplash.com/photo-1471624257787-362e0c864ab2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80);">
        
        <div class="p-4 card  col mx-auto" style="font-weight:700"> 
        <p> 
        
        <i class="fa-solid fa-quote-left"></i> 
               <!-------[ final quote :) or use it to say goodbye or smth ]------------>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        
        <i class="fa-solid fa-quote-right"></i>
        
             </p>
         </div> 
     </div>
</div> 
               <!-------[ CREDIT!! dont delete :D ]------------>
<p align="center">
    <a style="color:#FFFFFF" href="https://toyhou.se/Codesrollss">
    <i class="fas fa-cat-space fa-lg faded"></i><i class="fas fa-apple-whole fa-lg fa-spin faded"></i>
         </a>
     </p>
<hr>
               <!-------[ FIN ]------------>