[f2u] rock licker (code)

Zylphide

Info


Created
3 years, 2 days ago
Creator
Zylphide
Favorites
3

Profile


  
<!----------------------------------------------
    |           ROCK LICKER            | 
    |           by Zylphide            | 
------------------------------------------------

------- COLORS ------------
rock background #1 from top: #9a7a49
rock background #2 from top: #82502e
rock background #3 from top: #673825
rock background #4 from top: #402216
profile box background: #978871
bones: #D5C5AC 
lighter colored bone: #EFE5D3
picture borders: #BFB4A4
text: #ffffff
dividing line: #D2CCC3

------>



<div class="row justify-content-center" style="overflow-x: hidden">


<!---- rock strata ---->
<div class="col-lg-10 pt-5 px-2 w-100" style="background-image: linear-gradient(0deg, #402216 20%, #673825 20%, #673825 33.33%, #82502e 33.33%, #82502e 43.33%, #9a7a49 43.33%, #9a7a49 50%, #402216 50%, #402216 70%, #673825 70%, #673825 83.33%, #82502e 83.33%, #82502e 93.33%, #9a7a49 93.33%, #9a7a49 100%);
background-size: 1700.00px 1700.00px; border-top-right-radius:20px; border-top-left-radius:20px; border-bottom-right-radius:20px; border-bottom-left-radius:20px;">
    
    <div class="row justify-content-center"> 
    
        <!---- bones left ---->
        <div class="col-lg-1 justify-content-center d-none d-lg-block my-auto pl-5">
            
            <div style="transform: rotate(15deg)">
                <i class="fas fa-bone" style="font-size: 7em; color: #D5C5AC"></i>
            </div>
            
            
        </div>
        <!---- bones left END ---->
        
        <!---- info box ---->
        <div class="col-lg-10">
            
            <div class="py-3" style="color: #ffffff; background: #978871; border-top-right-radius:20px; border-top-left-radius:20px; border-bottom-right-radius:20px; border-bottom-left-radius:20px;">

                <!--- character info row ---->
                <div class="row px-3 py-2"> 
                
                    <!---- text area ---->
                    <div class="col-lg-7 ">
                    
                        <!---- name / title ---->
                        <div class="display-4 justify-content-center">
                            paleontology
                        </div>
                        <!---- name / title END ---->
                    
                        <div class="card border-0 mx-4 my-3" style="height: 2px; background: #D2CCC3;"></div>
                        
                        <!---- profile text ---->
                        <div class="container" style="height:495px; overflow-y: auto;">
                            
                            <p>Geologists will lick rocks to get a better ID. Fossils apparently stick to your tongue. But you probably shouldn't lick any rocks unless you're a geologist and know what you're doing. </p>
                            
                            <p>You can use this code as a character page or a worldbuilding page or whatever else you want it to be I guess ¯\_(ツ)_/¯.</p>
                            
                            
                            <h2 class="display-4" style="font-size: 1.5rem">section one: <i>Genus species</i></h2>
                            
                            <p>Unde eius for dicta yet corporis or nemo and tempora. Ab error, so velitesse. Ad. Eos perspiciatis natus. Ipsam natus and sit yet dolor veniam yet nequeporro. Sed nulla so nesciunt so voluptate but ullam ipsum aliquid. Nulla id and perspiciatis so quaerat yet sint but magnam veritatis. Quis aute quo or quia aperiam. Qui incidunt. Molestiae. Duis. Pariatur architecto. Aliquip numquam cupidatat. Laboris consequuntur or architecto. </p>
                            
                            <h2 class="display-4" style="font-size: 1.5rem">section two: <i>Genus species</i> sbsp. subspecies</h2>
                            
                            <p>Explicabo suscipit proident. Laudantium dolor yet deserunt, for veniam ut or laudantium nihil. Quasi esse, but qui ullam. Qui. Si minima yet ratione magna so sit. Eos dolore, inventore yet esse, or omnis. Ipsam. Sint odit so dolorem odit yet minim and aliquam. Quaerat natus and dolore fugit for magna yet vel proident. Corporis velitesse, yet anim or consectetur unde for quasi iure. Qui beatae, yet duis, et for sint incididunt. Explicabo doloremque quae or autem consectetur. Modi duis natus ipsam. Nisi enim labore so quia but magna. Quaerat unde or. </p>
                            
                            <p>Lorem ipsum natus and sit yet dolor veniam yet nequeporro. Sed nulla so nesciunt so voluptate but ullam ipsum aliquid. Nulla id and perspiciatis so quaerat yet sint but magnam veritatis. Quis aute quo or quia aperiam.</p>
                            
                        </div>
                        <!---- profile text END---->
                    
                    </div>
                    <!---- text area ---->
                
                    <!--- profile images ---->
                    <div class="col-lg-5" style="margin: auto; ">
                        
                        <!--- top image ---->
                        <div class="card border-0 p-2 my-2" style="background: #BFB4A4">
                        
                            <div class="card border-0" style="height: 260px; background: url(https://images.unsplash.com/photo-1609252575203-dfa9d318fae5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80); background-size: cover; background-repeat: no-repeat; background-position: center;"></div>
                        
                        </div>
                        <!--- top image END ---->
                        
                        <!--- bottom image ---->
                        <div class="card border-0 p-2 my-2" style="background: #BFB4A4">
                            
                            <div class="card border-0" style="height: 260px; background: url(https://images.pexels.com/photos/3839557/pexels-photo-3839557.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940); background-size: cover; background-repeat: no-repeat; background-position: center;"></div>
                        </div>
                        <!--- bottom image END ---->
                        
                    </div>
                    <!--- profile images END ----> 
                   
                </div>  
                <!--- character info row END ---->
            </div>    
      
            
            <!---- credits, do not remove! ------>
            <a class="d-block float-left pt-2" style="font-size:12px; color: #D5C5AC;" href="https://toyhou.se/Zylphide"><i class="fas fa-dragon fa-flip-horizontal" data-placement="left" title="code by Zylphide"></i></a>
            <!--- credits end ---->
        
        </div>
        <!---- info box END ---->
    
        <!---- bones  right ---->
        <div class="col-lg-1 justify-content-center d-none d-lg-block" >

            <div style="transform: rotate(135deg); margin-right: 50px">
                <i class="fas fa-bone" style="font-size: 6em; color: #EFE5D3"></i>
            </div>
            
        </div>
        <!---- bones right END ---->
    
    </div>    
    
    
    <!--- dino skull ---->
    <div class="float-right" style="margin-right: 70px; margin-top: -45px">
        <img src="https://i.imgur.com/lrWcNOT.png">
    </div>
    <!--- dino skull END ---->

</div>
<!---- rock strata END---->
    
</div>