[ F2U ] Sleek (CODE (Custom Coloured))

jiko

Profile


 <!-------------------------------------------------
 
 
        Sleek — Custom Coloured version.
        (code by jiko)
        
        ------------------------------
        
        RULES
        → Read this thoroughly please, and maybe drop a small comment saying that you've read it? :'3
        thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]
        
        → turn OFF WYSIWYG (in display settings)
        → turn ON Code Editor
        
        ------------------------------
        
        TIPPY TIPS
        → insert your img links INSIDE or quotation marks!!
        → looking for a good online code editor?  try [ https://th.circlejourney.net/# ] !
        
        ------------------------------
        
        ACCENTS
        → bg-1 ----------- rgba(0, 0, 0, 0.5)
        → hr ------------- #ffffff
        → text ----------- #ffffff
        
        NOTE
        → work with RGBA when doing the background
        
        use control/command + f to quickly change the colours!
 
 
 ------------------------------------------------->
 <div class="mx-auto" style="max-width:95%; font-size:95%; letter-spacing:0.5px;">
 <!-------------------------------------------------
 
 
                 IMAGE BACKGROUND
 

 ------------------------------------------------->
 <div class="row no-gutters" style="color:#ffffff;

  
  /* IMAGE HERE
    ---------------------------------------- */;
    
    background-image:url(IMG_PNG_HERE);
    
  
  /* IMAGE SETTINGS
    ---------------------------------------- */;
    
    background-size:cover;
    background-position:bottom;
    background-repeat:no-repeat;
    background-attachment:scroll;
    box-shadow: 0 0 15px rgba(0,0,0, 0.5);">
 <!-------------------------------------------------
 
 
                 LEFT SIDE
 

 ------------------------------------------------->
 <!--
 → this rgba below controls the colour and opacity on the background!
 → the LAST VALUE (0.5) controls the opacity – adjust if needed
 -->
 <div class="col-lg-7 p-2">
 <div class="d-block p-4" style="height:500px; background: rgba(0, 0, 0, 0.5);">
    
    
    <!--------------------------------------------

                 BASIC INFO

    --------------------------------------------->
    <!--
    → view [fontawesome.com] for more icons!
    -->
    <div class="mx-auto text-center col-12 pb-2">
        
        
        <i class="fas fa-seedling fa-xs"></i> 
        <i class="fas fa-leaf fa-2x mx-4"></i>
        <i class="fas fa-seedling fa-xs fa-flip-horizontal"></i>
        
        
    </div>
    
    <hr class="w-25 my-2" style="border-color:#ffffff; opacity:0.15">
    <hr class="w-50 my-2" style="border-color:#ffffff; opacity:0.15">
    
    
    <!--------------------------------------------

                 NAME HEADER

    --------------------------------------------->
    <!--
    → best if super short but if long (and/or it breaks on smaller screens) you can change [p-4] to [p-3] AND/OR adjust [font-size:27px] and [letter-spacing:8px]
    -->
    <div class="d-flex" style="min-height:140px;">
    <h1 class="m-auto text-uppercase text-center p-4" style="font-size:27px; font-weight:200; letter-spacing:8px; border:2px solid; background-color:rgba(0, 0, 0, 0.5);">
        
            
            Name
            
        
    </h1></div> 
    <div class="display-4 text-center text-uppercase pb-1" style="font-size:15px; letter-spacing:3px">
    
    
        "Fancy quote here."
        
        
    </div>
    <hr class="w-100 mt-3 mb-2" style="border-color:#ffffff; opacity:0.15">
    
    
    <!--------------------------------------------

                 QUICK SUMMARY

    --------------------------------------------->
    <div style="height:180px; overflow:auto; letter-spacing:.5px">
        
        
        <p>One paragraph is ideal but you could do more because this box scrolls!</p>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae ultricies augue. Donec sagittis erat vel quam porta faucibus. Ut lobortis ornare fermentum. Vivamus eros magna, euismod quis augue non, tempor ultricies massa. Curabitur ligula orci, aliquet nec luctus cursus, pellentesque aliquam nunc.</p>
        
    
    </div>
    <hr class="w-50 my-2" style="border-color:#ffffff; opacity:0.15">
    <hr class="w-25 my-2" style="border-color:#ffffff; opacity:0.15">
    
 </div>
 </div>
 <!-------------------------------------------------
 
 
                 RIGHT SIDE
 

 ------------------------------------------------->
 <div class="col-lg-5" style="min-height:500px; background: rgba(0, 0, 0, 0.8);">
    
    
    <!--------------------------------------------

                 TAB BUTTONS

    --------------------------------------------->
    <div class="px-4 p-3 card-block sticky-top" style="background: rgba(0, 0, 0, 0.6);">
    <div class="mx-auto" style="max-width:180px">
    <ul class="nav row no-gutters text-center">
        
        
        <li class="nav-item col">
            <a class="text-white" data-toggle="tab" href="#sleekone">
                <i class="far fa-user fa-fw"></i>
            </a>
        </li>
        
        
        <li class="nav-item col">
            <a class="text-white" data-toggle="tab" href="#sleektwo">
                <i class="far fa-heart"></i>
            </a>
        </li>
        
        
        <li class="nav-item col">
            <a class="text-white" data-toggle="tab" href="#sleekthree">
                <i class="far fa-book"></i>
            </a>
        </li>
        
        
        <li class="nav-item col">
            <a class="text-white" data-toggle="tab" href="#sleekfour">
                <i class="far fa-music"></i>
            </a>
        </li>
        
        
    </ul>
    </div>
    </div>
    <div class="tab-content">
    
    
    
    <!--------------------------------------------

                 PROFILE

    --------------------------------------------->
    <div class="tab-pane fade active show" id="sleekone">
    <div class="px-4 p-3" style="height:450px; overflow-y: scroll; letter-spacing:0.5px">
        
        
        <h1 class="display-4 text-uppercase text-center mb-3" style="font-size:16px; letter-spacing:3px;">
            
            Profile
        
        </h1>
        
        <!--------  BASIC INFO  --------------------->
        <div class="px-2">
        
            <div class="d-flex justify-content-between p-1">
                <span class="text-uppercase">Name</span>
                <span>content</span>
            </div>
            
            <div class="d-flex justify-content-between p-1">
                <span class="text-uppercase">Age</span>
                <span>content</span>
            </div>
            
            <div class="d-flex justify-content-between p-1">
                <span class="text-uppercase">Gender</span>
                <span>content (prn/prns)</span>
            </div>
            
            <div class="d-flex justify-content-between p-1">
                <span class="text-uppercase">Species</span>
                <span>or race</span>
            </div>
            
            <div class="d-flex justify-content-between p-1">
                <span class="text-uppercase">Birthday</span>
                <span>content</span>
            </div>
            
            <div class="d-flex justify-content-between p-1">
                <span class="text-uppercase">Height</span>
                <span>content</span>
            </div>
            
            <div class="d-flex justify-content-between p-1">
                <span class="text-uppercase">Orientation</span>
                <span>content</span>
            </div>
            
            <div class="d-flex justify-content-between p-1">
                <span class="text-uppercase">Occupation</span>
                <span>content</span>
            </div>
            
            
        </div>
    <hr style="border-color: rgba(255, 255, 255, 0.15);">
    <div class="row no-gutters">
        
        
        <!--------  LIKES  --------------------->
        <div class="col-6">
            <h1 class="text-center" style="font-size:16px; letter-spacing:1px;">
                
                <i class="fas fa-check fa-fw"></i>
                
            </h1><ul class="mt-3 mb-0">
                
                <li>content</li>
                <li>content</li>
                <li>content</li>
                
            </ul>
        </div>
        
        
        <!--------  DISLIKES  --------------------->
        <div class="col-6">
            <h1 class="text-center" style="font-size:16px; letter-spacing:1px;">
                
                <i class="fas fa-times fa-fw"></i>
                
            </h1><ul class="mt-3 mb-0">
                
                <li>content</li>
                <li>content</li>
                <li>content</li>
                
            </ul>
        </div>
        
        
    </div>
    </div>
    </div>
    
    
    <!--------------------------------------------

                 TRIVIA AND DESIGN NOTES

    --------------------------------------------->
    <div class="tab-pane fade" id="sleektwo">
    <div class="px-3 p-3" style="height:450px; overflow-y: scroll; letter-spacing:.5px">
        
        
        <!--------  TRIVIA  --------------------->
        <h1 class="display-4 text-uppercase text-center" style="font-size:16px; letter-spacing:3px;">
            
            Trivia
            
            
        </h1><ul class="mt-3">
            
            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
            <li>Donec sagittis erat vel quam porta faucibu.</li>
            <li>Ut lobortis ornare fermentum</li>
            <li>Vivamus eros magna, euismod quis augue non, tempor ultricies massa</li>
            
        </ul>
        <hr class="my-4" style="border-color: rgba(255, 255, 255, 0.15);">
        
        
        <!--------  DESIGN NOTES  --------------------->
        <h1 class="display-4 text-uppercase text-center" style="font-size:16px; letter-spacing:3px;">
            
            
            Design Notes
            
            
        </h1><ul class="mt-3">
            
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Donec sagittis erat vel.</li>
            <li>Ut lobortis ornare fermentum.</li>
            <li>Vivamus eros magna, euismod quis augue non, tempor ultricies massa.</li>
            
        </ul>
    </div>
    </div>
    
    
    <!--------------------------------------------

                 BACKGROUND

    --------------------------------------------->
    <div class="tab-pane fade" id="sleekthree">
    <div class="px-4 p-3" style="height:450px; overflow-y: scroll; letter-spacing:.5px">
        
        <h1 class="display-4 text-uppercase text-center" style="font-size:16px; letter-spacing:3px;">
            
            
            Background
            
            
        </h1>
        
    <div class="mt-3 p-1" style="text-indent:20px;">
        
        
        <p>You can get rid of this section completely (by getting rid of the tab near the top) or change it to something else, like a moodboard or a pagedoll!  Up to you of course, this is merely a misc. page.</p>
        
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae ultricies augue. Donec sagittis erat vel quam porta faucibus. Ut lobortis ornare fermentum. Vivamus eros magna, euismod quis augue non, tempor ultricies massa.</p>
        
        <p>Orci, aliquet nec luctus cursus, pellentesque aliquam nunc. Nunc sed sagittis lectus. Morbi id sem id augue rutrum consequat sed in ante. Quisque egestas lacus tortor, in aliquam neque aliquam elementum.</p>
        
        
    <!-- add/delete more paragraphs ABOVE this line! -->
    </div>
    </div>
    </div>
    
    
    <!--------------------------------------------

                 MUSIC

    --------------------------------------------->
    <!--
    → NOTE: YouTube video url must be PUBLIC and must NOT be from any playlist.
    
    → to change the music, get the video id of of the video after
    [https://www.youtube.com/watch?v=]
    (for example: https://www.youtube.com/watch?v=    → qIzxqytVr1o ←)
    
    → then below, copy and paste that into where it says "qIzxqytVr1o" below!
    -->
    <div class="tab-pane fade" id="sleekfour">
    <div class="px-4 p-3" style="height:450px; overflow-y: scroll; letter-spacing:.5px">
        
        <h1 class="display-4 text-uppercase text-center" style="font-size:16px; letter-spacing:3px;">
            
            
            Music Box
            
            
        </h1>
        <div class="p-1">
        <!--
        → if the music box doesn't work, 9/10 it's because of WYSIWYG so please
        double check that it's disabled
        -->
            
            <iframe src="https://www.youtube.com/embed/qIzxqytVr1o"
                class="flex-fill mb-0 w-100"
                style="min-height:380px;"
                frameborder="0">
            </iframe>
            
            
        </div>
    </div>
    </div>

<!-- DON'T TOUCH THE BELOW THABKS YOUU!!! -->
</div></div>
 <!-------------------------------------------------
 
 
                 CREDITS
 

 ------------------------------------------------->
 </div>
 <div class="pt-2 text-right small faded">
    <a href="https://toyhou.se/7275692.-f2u-sleek" class="text-muted">code by jiko</a> |
    <a href="LINK TO BACKGROUND ARTIST" class="text-muted">background by ARTIST</a>
 </div>
 </div>