04. Windows X3 (Code)

<!--
Code by Hiilumaru!

Colors used (crtl+f to replace):
    #F6809C dark pink
    #F9A6BA mid pink
    #FBCBD7 light pink
    #FEF7F8 white pink
Window buttons - replace the names to change the font awesome symbols    
    #BEDAFE window-minimize
    #FEF8A2 window-restore
    #FED3D8 window-close
-->



<div class="mx-auto p-0" style="color:#F6809C;font-size:10pt;max-width:700px;height:auto;">
    <div class="row no-gutters">
    
<!-- Window 1 -->
        <div class="col-12 col-sm-6 my-sm-3 mb-3">
<div class="card m-auto p-1" style="border-radius:10px 10px 0px 0px;border:1px solid #F6809C;background: linear-gradient(#FBCBD7, #F9A6BA);box-shadow: 3px 3px #F6809C;"><div class="justify-content-between">
    <div class="display-inline" style="font-size:14px;text-align:left;Color:#fff;text-shadow:-1px -1px 0 #F6809C,1px -1px 0 #F6809C,-1px 1px 0 #F6809C,1px 1px 0 #F6809C;">

    <span class="mx-1"><b>About me</b></span>

    </div>
    <div class="display-inline" style="font-size:14px;text-align:right;text-shadow:-1px -1px 0 #F6809C,1px -1px 0 #F6809C,-1px 1px 0 #F6809C,1px 1px 0 #F6809C;">
    <i style="color:#BEDAFE;" class="mx-1 fas fa-window-minimize" ></i>
    <i style="color:#FEF8A2;" class="mx-1 fas fa-window-restore"></i>
    <i style="color:#FED3D8;" class="mx-1 fas fa-window-close"></i>
    </div>
    </div>
    <div class="display-inline" style="font-size:12px;text-align:left;Color:#fff;text-shadow:-1px -1px 0 #F6809C,1px -1px 0 #F6809C,-1px 1px 0 #F6809C,1px 1px 0 #F6809C;">
    <span class="mx-1"><u>F</u>ile</span>
    <span class="mx-1"><u>E</u>dit</span>
    <span class="mx-1"><u>V</u>iew</span>
    </div>
</div>

<div class="card p-2" style="height:250px; border-radius:0px 0px 10px 10px;border:1px solid #F6809C;border-top:none;background:#FEF7F8;box-shadow: 3px 2px #F6809C; overflow:auto; font-size:8pt; scrollbar-width:auto;">
    <div class="p-2">
<!-- Quote box -->
        <div class="card p-1" style="border-radius:10px;border:1px solid #FBCBD7;background: linear-gradient(#FEF7F8, #FBCBD7);">
            <span class="mx-auto">"Quote!"</span>
        </div>
        
<!-- Info form -->

        <div class="row no-gutters p-2">
            <div class="col">
        <div class="row no-gutters">
            <div class="col"><b>Name</b></div>
            <div class="col">content</div>
        </div>
        <div class="row no-gutters">
            <div class="col"><b>Age</b></div>
            <div class="col">content</div>
        </div>
        <div class="row no-gutters pb-1">
            <div class="col"><b>Pronouns</b></div>
            <div class="col">content</div>
        </div>
       </div>
            <div class="col">
        <div class="row no-gutters">
            <div class="col"><b>Species</b></div>
            <div class="col">content</div>
        </div>
        <div class="row no-gutters">
            <div class="col"><b>Orientation</b></div>
            <div class="col">content</div>
        </div>
        <div class="row no-gutters pb-1">
            <div class="col"><b>Star sign</b></div>
            <div class="col">content</div>
        </div>
       </div>
        </div>
        <div class="text-center">
            <p><b>lorem ipsum or whatever</b></p>
            <p>This box scrolls if you type enough</p>
            
        </div>
    </div>
</div>
</div>

<!-- Window 2 -->

        <div class="col d-none d-sm-block m-3">
<div class="card m-auto p-1" style="border-radius:10px 10px 0px 0px;border:1px solid #F6809C;background: linear-gradient(#FBCBD7, #F9A6BA);box-shadow: 3px 3px #F6809C;">
    <div class="justify-content-between">
    <div class="display-inline" style="font-size:14px;text-align:left;Color:#fff;text-shadow:-1px -1px 0 #F6809C,1px -1px 0 #F6809C,-1px 1px 0 #F6809C,1px 1px 0 #F6809C;">
    <span class="mx-1"><b>Character.png</b></span>
    </div>
    <div class="display-inline" style="font-size:14px;text-align:right;text-shadow:-1px -1px 0 #F6809C,1px -1px 0 #F6809C,-1px 1px 0 #F6809C,1px 1px 0 #F6809C;">
    <i style="color:#BEDAFE;" class="mx-1 fas fa-window-minimize" ></i>
    <i style="color:#FEF8A2;" class="mx-1 fas fa-window-restore"></i>
    <i style="color:#FED3D8;" class="mx-1 fas fa-window-close"></i>
    </div>
    </div>
    <div class="display-inline" style="font-size:12px;text-align:left;Color:#fff;text-shadow:-1px -1px 0 #F6809C,1px -1px 0 #F6809C,-1px 1px 0 #F6809C,1px 1px 0 #F6809C;">
    <span class="mx-1"><u>F</u>ile</span>
    <span class="mx-1"><u>E</u>dit</span>
    <span class="mx-1"><u>V</u>iew</span>
    </div>
</div>

<div class="card p-3" style="height:250px;border-radius:0px 0px 10px 10px;border:1px solid #F6809C;border-top:none;background:#FEF7F8;box-shadow: 3px 2px #F6809C;overflow:hidden;">
<!-- Image -->
    <div class="card m-auto h-100 w-100" style="border:1px solid #F6809C;
  
    background:url(https://i.imgur.com/kxg8QqP.png);
    
    background-size:cover">
    </div>
</div>
</div>
        
    </div>
<!-- window 3 -->    
            <div class="mb-3">
<div class="card m-auto p-1" style="border-radius:10px 10px 0px 0px;border:1px solid #F6809C;background: linear-gradient(#FBCBD7, #F9A6BA);box-shadow: 3px 3px #F6809C;">
    <div class="justify-content-between">
    <div class="display-inline" style="font-size:14px;text-align:left;Color:#fff;text-shadow:-1px -1px 0 #F6809C,1px -1px 0 #F6809C,-1px 1px 0 #F6809C,1px 1px 0 #F6809C;">
    <span class="mx-1"><b>Moodboard</b></span>
    </div>
    <div class="display-inline" style="font-size:14px;text-align:right;text-shadow:-1px -1px 0 #F6809C,1px -1px 0 #F6809C,-1px 1px 0 #F6809C,1px 1px 0 #F6809C;">
    <i style="color:#BEDAFE;" class="mx-1 fas fa-window-minimize" ></i>
    <i style="color:#FEF8A2;" class="mx-1 fas fa-window-restore"></i>
    <i style="color:#FED3D8;" class="mx-1 fas fa-window-close"></i>
    </div>
    </div>
    <div class="display-inline" style="font-size:12px;text-align:left;Color:#fff;text-shadow:-1px -1px 0 #F6809C,1px -1px 0 #F6809C,-1px 1px 0 #F6809C,1px 1px 0 #F6809C;">
    <span class="mx-1"><u>F</u>ile</span>
    <span class="mx-1"><u>E</u>dit</span>
    <span class="mx-1"><u>V</u>iew</span>
    </div>
</div>

<div class="card p-1 display-inline" style="border-radius:0px 0px 10px 10px;border:1px solid #F6809C;border-top:none;background:#FEF7F8;box-shadow: 3px 2px #F6809C;overflow:hidden;">
<!-- images -->
<div class="row no-gutter justify-content-center">    
    <div class="col-3 col-sm-2 m-2 p-0" style="height:100px;border-radius:10px;border:1px solid #F6809C;overflow:hidden; 
            Background:url(https://i.imgur.com/kxg8QqP.png);
        background-size:cover;"></div>
    <div class="col-3 col-sm-2 m-2 p-0" style="height:100px;border-radius:10px;border:1px solid #F6809C;overflow:hidden; 
            Background:url(https://i.imgur.com/kxg8QqP.png);
        background-size:cover;"></div>
<div class="col-3 col-sm-2 m-2 p-0" style="height:100px;border-radius:10px;border:1px solid #F6809C;overflow:hidden; 
            Background:url(https://i.imgur.com/kxg8QqP.png);
        background-size:cover;"></div>
    <div class="col-3 col-sm-2 m-2 p-0" style="height:100px;border-radius:10px;border:1px solid #F6809C;overflow:hidden; 
            Background:url(https://i.imgur.com/kxg8QqP.png);
        background-size:cover;"></div>
        <div class="col-3 col-sm-2 m-2 p-0" style="height:100px;border-radius:10px;border:1px solid #F6809C;overflow:hidden; 
            Background:url(https://i.imgur.com/kxg8QqP.png);
        background-size:cover;"></div>
    <div class="col-3 d-sm-none m-2 p-0" style="height:100px;border-radius:10px;border:1px solid #F6809C;overflow:hidden; 
            Background:url(https://i.imgur.com/kxg8QqP.png);
        background-size:cover;"></div>
    </div>
</div>
</div>

    <div class="row">
    
<!-- Window 4 -->
        <div class="col-6 col-sm-6 mb-3">
<div class="card m-auto p-1" style="border-radius:10px 10px 0px 0px;border:1px solid #F6809C;background: linear-gradient(#FBCBD7, #F9A6BA);box-shadow: 3px 3px #F6809C;">
    <div class="justify-content-between">
    <div class="display-inline" style="font-size:14px;text-align:left;Color:#fff;text-shadow:-1px -1px 0 #F6809C,1px -1px 0 #F6809C,-1px 1px 0 #F6809C,1px 1px 0 #F6809C;">
    <span class="mx-1"><b>Likes</b></span>
    </div>
    <div class="display-inline" style="font-size:14px;text-align:right;text-shadow:-1px -1px 0 #F6809C,1px -1px 0 #F6809C,-1px 1px 0 #F6809C,1px 1px 0 #F6809C;">
    <i style="color:#BEDAFE;" class="mx-1 fas fa-window-minimize" ></i>
    <i style="color:#FEF8A2;" class="mx-1 fas fa-window-restore"></i>
    <i style="color:#FED3D8;" class="mx-1 fas fa-window-close"></i>
    </div>
    </div>
    <div class="display-inline" style="font-size:12px;text-align:left;Color:#fff;text-shadow:-1px -1px 0 #F6809C,1px -1px 0 #F6809C,-1px 1px 0 #F6809C,1px 1px 0 #F6809C;">
    <span class="mx-1"><u>F</u>ile</span>
    <span class="mx-1"><u>E</u>dit</span>
    <span class="mx-1"><u>V</u>iew</span>
    </div>
</div>

<div class="card p-2" style="border-radius:0px 0px 10px 10px;border:1px solid #F6809C;border-top:none;background:#FEF7F8;box-shadow: 3px 2px #F6809C;">
    <div class="p-1">
        <div><p class="text-left">
            <span>
            <i class="fas fa-heart"></i> Like
            <br><i class="fas fa-heart"></i> Like
            <br><i class="fas fa-heart"></i> Like
            <br><i class="fas fa-heart"></i> Like</span></p>
            <p class="text-right">
            <span> Dislike <i class="fas fa-heart-broken"></i>
            <br> Dislike <i class="fas fa-heart-broken"></i>
            <br>Dislike <i class="fas fa-heart-broken"></i>
            <br>Dislike <i class="fas fa-heart-broken"></i> </span>
           </p>
            
        </div>
    </div>
</div>
<div class="mx-auto"><a href="https://toyhou.se/Hiilumaru/characters/folder:2492566" style="color:#F9A6BA;"><i class="fas fa-code"></i></a></div>

</div>

<!-- Window 5 -->

        <div class="col mb-3">
<div class="card m-auto p-1" style="border-radius:10px 10px 0px 0px;border:1px solid #F6809C;background: linear-gradient(#FBCBD7, #F9A6BA);box-shadow: 3px 3px #F6809C;">
    <div class="justify-content-between">
    <div class="display-inline" style="font-size:14px;text-align:left;Color:#fff;text-shadow:-1px -1px 0 #F6809C,1px -1px 0 #F6809C,-1px 1px 0 #F6809C,1px 1px 0 #F6809C;">
    <span class="mx-1"><b>Traits</b></span>
    </div>
    <div class="display-inline" style="font-size:14px;text-align:right;text-shadow:-1px -1px 0 #F6809C,1px -1px 0 #F6809C,-1px 1px 0 #F6809C,1px 1px 0 #F6809C;">
    <i style="color:#BEDAFE;" class="mx-1 fas fa-window-minimize" ></i>
    <i style="color:#FEF8A2;" class="mx-1 fas fa-window-restore"></i>
    <i style="color:#FED3D8;" class="mx-1 fas fa-window-close"></i>
    </div>
    </div>
    <div class="display-inline" style="font-size:12px;text-align:left;Color:#fff;text-shadow:-1px -1px 0 #F6809C,1px -1px 0 #F6809C,-1px 1px 0 #F6809C,1px 1px 0 #F6809C;">
    <span class="mx-1"><u>F</u>ile</span>
    <span class="mx-1"><u>E</u>dit</span>
    <span class="mx-1"><u>V</u>iew</span>
    </div>
</div>

<div class="card p-2" style="max-height:250px; overflow:auto;border-radius:0px 0px 10px 10px;border:1px solid #F6809C;border-top:none;background:#FEF7F8;box-shadow: 3px 2px #F6809C; scrollbar-width:none;">
    <div class="p-1">
        <!-- Palette -->
        <div> <p class="card bg-transparent text-center pb-0" style="font-size:20px;color:#F6809C;border:none;text-shadow:-1px -1px 0 #F6809C,1px -1px 0 #F6809C,-1px 1px 0 #F6809C,1px 1px 0 #F6809C;"><span>
                <i class="fas fa-palette" style="color:#F6CECE"></i> 
                <i class="fas fa-palette" style="color:#F3E2A9"></i> 
                <i class="fas fa-palette" style="color:#F5F6CE"></i> 
                <i class="fas fa-palette" style="color:#CEF6CE"></i> 
                <i class="fas fa-palette" style="color:#CEECF5"></i>
                <i class="fas fa-palette" style="color:#ECCEF5"></i>
            </span></p>
            <!--  -->
         <p class="text-left mt-0">
            <span>
            <i class="fas fa-star"></i> Abilities
            <br><i class="fas fa-star"></i> design notes
            <br><i class="fas fa-star"></i> quirks
            <br><i class="fas fa-star"></i> or whatever</span></p> 
           
            <span class="card bg-transparent text-center mx-auto rounded-0 m-2" style="border:none; border-top:1px dashed #F6809C;">other stuff - this box will scroll once it gets too long</span>
        </div>
    </div>
</div>
</div>
        
    </div>
</div>