[f2u] dirt digger (code (new))

Zylphide

Info


Created
2 years, 11 months ago
Creator
Zylphide
Favorites
0

Profile



<!----------------------------------------------
    |           dirt digger            | 
    |           by Zylphide            | 
------------------------------------------------

------- COLORS ------------
sky morning, bottom gradient: rgba(255,247,228,1)
sky morning, top gradient: rgba(53,178,252,1)
sky midday, bottom gradient: rgba(202,252,251,1)
sky midday, top gradient: rgba(55,194,253,1)
ground: #4A392A
sun: #f3c73c
seedlings: #97c05b
clouds: #ffffff
flowers (dark):  #58762B
flowers (light): #86B888
text: #140700
line breaks: #ACB69C

------>



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

<!--- if you don't want this starting sky screen, delete this entire "starting sunrise" section ---->
<!---- starting sunrise---->
<div class="col-lg-10 pt-5 collapse multi-collapse show" id="login"  style="background: linear-gradient(0deg, rgba(255,247,228,1) 0%, rgba(53,178,252,1) 100%); border-top-right-radius:20px; border-top-left-radius:20px;">
    
    <div class="row" style="height: 600px;" > 
    
        <!---- buds left ---->
        <div class="col-lg-3 d-none d-lg-block px-4" style="margin-top: auto;">
            <i class="fad fa-seedling mx-3" style="font-size: 2em; color: #97c05b;"></i>
            <i class="fad fa-seedling mx-3" style="font-size: 2em; color: #97c05b"></i>
            <i class="fad fa-seedling mx-3" style="font-size: 2em; color: #97c05b"></i>
            <i class="fad fa-seedling mx-3" style="font-size: 2em; color: #97c05b"></i>
        </div>
        <!---- buds left END ---->
        
        <!---- sun ---->
        <div class="col-lg-6 justify-content-center" style="margin-top: auto;">
            
            <a href="#" data-target=".multi-collapse" data-toggle="collapse" style="height: 250px; width: 500px; background: #f3c73c; border-top-right-radius: 250px; border-top-left-radius: 250px; bottom"></a>

        </div>
        <!---- sun END ---->
    
        <!---- buds right ---->
        <div class="col-lg-3 d-none d-lg-block px-4" style="margin-top: auto;">
            <i class="fad fa-seedling mx-3" style="font-size: 2em; color: #97c05b"></i>
            <i class="fad fa-seedling mx-3" style="font-size: 2em; color: #97c05b"></i>
            <i class="fad fa-seedling mx-3" style="font-size: 2em; color: #97c05b"></i>
            <i class="fad fa-seedling mx-3" style="font-size: 2em; color: #97c05b"></i>
        </div>
        <!---- buds right END ---->
    
    </div>    
    <!--- dawn start screen END ---->
        
        
</div>
<!---- starting sunrise END---->


<!--- if you don't want the starting sky screen, make sure you add the word "show" to [class="col-lg-10 pt-5 px-2 collapse multi-collapse w-100"]
    i.e. it should say [class="col-lg-10 pt-5 px-2 collapse multi-collapse w-100 show"]
---->
<!---- midday sky ---->
<div class="col-lg-10 pt-5 px-2 collapse multi-collapse w-100" style="background: linear-gradient(0deg, rgba(202,252,251,1) 0%, rgba(55,194,253,1) 100%); border-top-right-radius:20px; border-top-left-radius:20px;">
    
    <div class="row justify-content-center"> 
    
        <!---- flowers/clouds left ---->
        <div class="col-lg-2 justify-content-center d-none d-lg-block" style="margin-top: auto;">
            
            <!---- clouds ---->
            <div><i class="fad fa-clouds" style="font-size: 9em; color: #ffffff; margin-bottom: 100px;"></i></div>
            <div><i class="fad fa-clouds faded" style="font-size: 6em; color: #ffffff; margin-bottom: 180px;"></i></div>
            <!---- clouds END ---->
            
            <!---- flowers ---->
            <i class="fad fa-flower-daffodil" style="font-size: 4em; color: #58762B;"></i>
            <i class="fad fa-flower-daffodil" style="font-size: 3em; color: #86B888;"></i>
            <i class="fad fa-flower-daffodil" style="font-size: 4em; color: #58762B;"></i>
            <!---- flowers END ---->
            
        </div>
        <!---- flowers/clouds left END ---->
        
        <!---- info box ---->
        <div class="col-lg-7 my-2">
            
            <div class="pb-2" style="color: #140700; background: #A3AE91; border: dashed 2px #D0DBBE; border-top-right-radius:20px; border-top-left-radius:20px; border-bottom-right-radius:20px; border-bottom-left-radius:20px;">
            
                <!--- title row ---->
                <div class="row px-1 mt-3"> 
                
                    <!--- icon left --->
                    <div class="col-3 display-4" style="color: #472712; text-align: right">
                        
                        <i class="fad fa-hand-holding-seedling"></i>
                        
                    </div>
                    <!--- icon left END --->
                
                    <!---- name/title ----->
                    <div class="col-6 justify-content-center display-4 mb-3" >
                        
                        dirt digger
                    </div>
                    <!---- name/title END ----->
                    
                    
                    <!--- icon left --->
                    <div class="col-3 display-4" style="color: #472712;">
                        
                        <i class="fad fa-hand-holding-seedling fa-flip-horizontal"></i>
                        
                    </div>
                    <!--- icon right END --->
                
            </div>
                <!---- title row END ---->
                
                <div class="card mx-5 mb-2 border-0" style="background: #ACB69C; height:1px;"></div>
                
                <!--- character info row ---->
                <div class="row px-3 py-2"> 
                
                    <!--- character image ---->
                    <div class="col-lg-5 ">
                        <div class="card border-0" style="background: url(https://images.unsplash.com/photo-1602867741746-6df80f40b3f6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=675&q=80); background-size: contain; background-position: center;  background-repeat: no-repeat; height: 500px"></div>
                </div>
                    <!--- character image ---->
                    
                    <!--- profile text, will scroll, not stretch --->
                    <div class="col-lg-7" style="height: 500px; overflow: auto;">
                        
                        <!---- stats ----->
                        <div class="row mb-1">
                            <div class="col-lg-6">
                                <!---- stat 1 ----->
                                <div class="col-lg-12 mb-2">
                                    <span class="text-uppercase" style="color: #4A392A"><b>stat</b></span>
                                    <span class="pull-right">info</span>
                                </div>
                                <!---- stat 1 END ----->
                                        
                                <!---- stat 2 ----->
                                <div class="col-lg-12 mb-2">
                                    <span class="text-uppercase" style="color: #4A392A"><b>stat</b></span>
                                    <span class="pull-right">info</span>
                                </div>
                                <!---- stat 2 END ----->
                                        
                                <!---- stat 3 ----->
                                <div class="col-lg-12 mb-2">
                                    <span class="text-uppercase" style="color: #4A392A"><b>stat</b></span>
                                    <span class="pull-right">info</span>
                                </div>
                                <!---- stat 3 END ----->
                            </div>
                            
                            <div class="col-lg-6">
                                <!---- stat 4 ----->
                                <div class="col-lg-12 mb-2">
                                    <span class="text-uppercase" style="color: #4A392A"><b>stat</b></span>
                                    <span class="pull-right">info</span>
                                </div>
                                <!---- stat 4 END ----->
                                        
                                <!---- stat 5 ----->
                                <div class="col-lg-12 mb-2">
                                    <span class="text-uppercase" style="color: #4A392A"><b>stat</b></span>
                                    <span class="pull-right">info</span>
                                </div>
                                <!---- stat 5 END ----->
                                        
                                <!---- stat 6 ----->
                                <div class="col-lg-12 mb-2">
                                    <span class="text-uppercase" style="color: #4A392A"><b>stat</b></span>
                                    <span class="pull-right">info</span>
                                </div>
                                <!---- stat 6 END ----->
                            </div>
                        </div>
                        <!---- stats END --->
                        
                        <div class="card mx-5 mb-3 border-0" style="background: #ACB69C; height:1px;"></div>
                        
                        <h2 class="text-center display-4" style="font-size: 1.5rem">section 1 title</h2>
                        
                        <p>Cat ipsum dolor sit amet, consequatur consequat or illum. Consectetur quae or enim. Quia deserunt but do and dolor. Et incididunt. Reprehenderit omnis ea. Eos. Tempora ad inventore lorem. Autem quaerat eum for dolor or iste so laboriosam. Duis. Consequat sed yet magnam and magnam anim, for inventore. Ullam. Elit omnis yet nulla. Dicta dolorem so numquam. Ex. Quis anim dolores ipsa cupidatat or nesciunt aliquid. Aliqua consequat yet est ad so dolorem for eos. Velit perspiciatis yet voluptatem in and voluptatem but tempor, aliquam. Et. Est. Ullam minim but veritatis for autem. </p>
                        
                        
                        
                        <h2 class="text-center display-4" style="font-size: 1.5rem">section 2 title</h2>
                        
                        <p>Dolores sed, so et. Ipsum quasi and fugit eos architecto nihil. Proident. Tempor non vitae or esse aliqua. Veritatis si so eos or commodi and totam. Dolor quo mollit for natus but perspiciatis so nulla pariatur. Si inventore dolore yet ullam or dolores. Cillum modi. Adipisci. Illo aliquid culpa or qui and minima magnam. Sed commodi veniam, veniam but laborum so sit so labore. Sunt enim error so inventore, and dolores for suscipit. In irure so proident. In aliquip. Voluptatem. Voluptate ea yet architecto for iste ut. Sed eum so fugit totam nulla, and laboris and lorem. Aliquip voluptatem yet aut. Numquam reprehenderit aspernatur.  Cillum modi. Adipisci. Illo aliquid culpa or qui and minima magnam.</p>
                        
                        
                        <!---- add more sections above here ---->

                        <div class="card mx-5 my-3 border-0" style="background: #ACB69C; height:1px;"></div>
                        
                    </div>
                    <!--- profile text END --->
                </div>    
            </div>    
            <!--- character info row END ---->
        
        </div>
        <!---- info box END ---->
    
        <!---- flowers/clouds  right ---->
        <div class="col-lg-2 justify-content-center d-none d-lg-block" style="margin-top: auto;">
            <!---- clouds ---->
            <div style="text-align: right"><i class="fad fa-clouds faded" style="font-size: 4em; color: #ffffff; margin-bottom: 50px;"></i></div>
            <div><i class="fad fa-clouds" style="font-size: 8em; color: #ffffff; margin-bottom: 250px;"></i></div>
            <!---- clouds END ---->
            
            <!---- flowers ---->
            <i class="fad fa-flower-daffodil" style="font-size: 4em; color: #58762B;"></i>
            <i class="fad fa-flower-daffodil" style="font-size: 3em; color: #86B888;"></i>
            <i class="fad fa-flower-daffodil" style="font-size: 4em; color: #58762B;"></i>
            <!---- flowers ---->
        </div>
        <!---- flowers/clouds  right END ---->
    
    </div>    
</div>
<!---- midday sky END---->
    
    
<!---- ground ----->
<div class="col-lg-10 py-4" style="background: #4A392A; border-bottom-right-radius:20px; border-bottom-left-radius:20px;">
        
    <!--- credits, do not remove! --->
    <a class="col-12 " style="color: #97c05b; font-size: 12px; display: block; text-align: center" 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>
<!---- ground END ----->
    
</div>