blush folder / f2u html (CODE)

dogboy

Profile


BOOTSTRAP VERSION:

<!--- 

BLUSH FOLDER (BS) / by cati/dogboy
 
    NOTES
    mobile friendly + bootstrap colors! ✔✔✔

    RULES & DISCLAIMERS
    - fav/comment if using pls!
    - not wysiwyg friendly so please turn that off!
    - feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
    - have a nice day!!

--->

<div class="container" style="background:none;max-width:1030px;margin:70px auto;">
    <div class="row">
        <!--- info column --->
        <div class="col-lg-8 p-2">
            <div class="card h-100 bg-primary" style="border:0px;">
                <div class="card p-2" style="background:#FFF;margin:13px;border-radius:0px;">
                <div class="d-flex justify-content-between">
                    <i class="fas fa-star fa-3x text-secondary"></i>
                    <!--- name --->
                    <h1 class="my-auto text-secondary" style="font-weight:500;letter-spacing:0.09em;font-size:25px;">
                        FOLDER TITLE
                    </h1>
                    <i class="fas fa-star fa-3x text-secondary"></i>
                </div>
                </div>
                <div class="card p-3" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;height:200px;overflow:auto;">
                    <!--- intro --->
                    <p class="text-center text-secondary" style="font-weight:350;">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.
                    </p>
                </div>
                <div class="card p-2" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;height:200px;overflow:auto;">
                    <!--- characters --->
                    <div class="row no-gutters justify-content-center">
                        <div class="col-3 text-center">
                            <h3 class="font-italic" style="letter-spacing:1px;font-weight:400;"><a href="URLHERE">Name</a></h3>
                            <img class="fr-rounded" style="width:130px;border:4px solid;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
                        </div>
                        <div class="col-3 text-center">
                            <h3 class="font-italic" style="letter-spacing:1px;font-weight:400;"><a href="URLHERE">Name</a></h3>
                            <img class="fr-rounded" style="width:130px;border:4px solid;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
                        </div>
                        <div class="col-3 text-center">
                            <h3 class="font-italic" style="letter-spacing:1px;font-weight:400;"><a href="URLHERE">Name</a></h3>
                            <img class="fr-rounded" style="width:130px;border:4px solid;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
                        </div>
                        <div class="col-3 text-center">
                            <h3 class="font-italic" style="letter-spacing:1px;font-weight:400;"><a href="URLHERE">Name</a></h3>
                            <img class="fr-rounded" style="width:130px;border:4px solid;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
                        </div>
                    </div>
                    <div class="row no-gutters mt-2 justify-content-center">
                        <div class="col-3 text-center">
                            <h3 class="font-italic" style="letter-spacing:1px;font-weight:400;"><a href="URLHERE">Name</a></h3>
                            <img class="fr-rounded" style="width:130px;border:4px solid;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
                        </div>
                        <div class="col-3 text-center">
                            <h3 class="font-italic" style="letter-spacing:1px;font-weight:400;"><a href="URLHERE">Name</a></h3>
                            <img class="fr-rounded" style="width:130px;border:4px solid;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
                        </div>
                        <div class="col-3 text-center">
                            <h3 class="font-italic" style="letter-spacing:1px;font-weight:400;"><a href="URLHERE">Name</a></h3>
                            <img class="fr-rounded" style="width:130px;border:4px solid;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
                        </div>
                        <div class="col-3 text-center">
                            <h3 class="font-italic" style="letter-spacing:1px;font-weight:400;"><a href="URLHERE">Name</a></h3>
                            <img class="fr-rounded" style="width:130px;border:4px solid;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
                        </div>
                    </div>
                </div>
            </div>
    </div>
        <div class="col-lg-4 p-2">
            <div class="card h-100 hidden-sm-down bg-primary" style="border:0px;">
                <!--- image --->
                <div class="card h-100 m-3" style="background:url('https://www.downvids.net/video/bestimages/img-denzerosubs-honeyworks-ft-narumi-sena-cv-amamiya-sora-310.jpg');background-size:cover;background-position:center;"></div>
            </div>
        </div>
    </div>
    <!--- credit, dont remove pls! --->
    <a class="d-block text-muted text-right mr-2" href="9474647" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
</div>


CUSTOM COLORS VERSION:


<!--- 

BLUSH FOLDER (CC) / by cati/dogboy
 
    NOTES
    accent: #8594CE
    bg color: #FADEEE
            (use ctrl+f + replace for accent replacement)
    mobile friendly + custom colors! ✔✔✔

    RULES & DISCLAIMERS
    - fav/comment if using pls!
    - not wysiwyg friendly so please turn that off!
    - feel free to edit/frakenstein/etc if you feel, just pls dont remove my credit!!
    - have a nice day!!

--->

<div class="container" style="background:none;max-width:1030px;margin:70px auto;">
    <div class="row">
        <!--- info column --->
        <div class="col-lg-8 p-2">
            <div class="card h-100" style="background-color:#FADEEE;border:0px;">
                <div class="card p-2" style="background:#FFF;margin:13px;border-radius:0px;">
                <div class="d-flex justify-content-between">
                    <i class="fas fa-star fa-3x" style="color:#8594CE"></i>
                    <!--- name --->
                    <h1 class="my-auto" style="color:#8594CE;font-weight:500;letter-spacing:0.09em;font-size:25px;">
                        FOLDER TITLE
                    </h1>
                    <i class="fas fa-star fa-3x" style="color:#8594CE"></i>
                </div>
                </div>
                <div class="card p-3" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;height:200px;overflow:auto;">
                    <!--- intro --->
                    <p class="text-center" style="color:#8594CE;font-weight:350;">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non auctor lorem. Maecenas et viverra nibh. Duis eget dignissim dolor. Ut eu turpis porta, bibendum odio vitae, efficitur leo. Aenean ultrices, nulla in maximus consectetur, libero eros efficitur ex, vel faucibus sapien sem et leo. Pellentesque massa est, pretium sed euismod sit amet, iaculis sit amet justo.
                    </p>
                </div>
                <div class="card p-2" style="background:#FFF;border:0px;border-radius:0px;margin:0px 13px 15px;height:200px;overflow:auto;">
                    <!--- characters --->
                    <div class="row no-gutters justify-content-center">
                        <div class="col-3 text-center">
                            <h3 class="font-italic" style="color:#8594CE;letter-spacing:1px;font-weight:400;"><a href="URLHERE" style="color:#8594CE;">Name</a></h3>
                            <img class="fr-rounded" style="width:130px;border:4px solid #8594CE;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
                        </div>
                        <div class="col-3 text-center">
                            <h3 class="font-italic" style="color:#8594CE;letter-spacing:1px;font-weight:400;"><a href="URLHERE" style="color:#8594CE;">Name</a></h3>
                            <img class="fr-rounded" style="width:130px;border:4px solid #8594CE;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
                        </div>
                        <div class="col-3 text-center">
                            <h3 class="font-italic" style="color:#8594CE;letter-spacing:1px;font-weight:400;"><a href="URLHERE" style="color:#8594CE;">Name</a></h3>
                            <img class="fr-rounded" style="width:130px;border:4px solid #8594CE;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
                        </div>
                        <div class="col-3 text-center">
                            <h3 class="font-italic" style="color:#8594CE;letter-spacing:1px;font-weight:400;"><a href="URLHERE" style="color:#8594CE;">Name</a></h3>
                            <img class="fr-rounded" style="width:130px;border:4px solid #8594CE;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
                        </div>
                    </div>
                    <div class="row no-gutters mt-2 justify-content-center">
                        <div class="col-3 text-center">
                            <h3 class="font-italic" style="color:#8594CE;letter-spacing:1px;font-weight:400;"><a href="URLHERE" style="color:#8594CE;">Name</a></h3>
                            <img class="fr-rounded" style="width:130px;border:4px solid #8594CE;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
                        </div>
                        <div class="col-3 text-center">
                            <h3 class="font-italic" style="color:#8594CE;letter-spacing:1px;font-weight:400;"><a href="URLHERE" style="color:#8594CE;">Name</a></h3>
                            <img class="fr-rounded" style="width:130px;border:4px solid #8594CE;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
                        </div>
                        <div class="col-3 text-center">
                            <h3 class="font-italic" style="color:#8594CE;letter-spacing:1px;font-weight:400;"><a href="URLHERE" style="color:#8594CE;">Name</a></h3>
                            <img class="fr-rounded" style="width:130px;border:4px solid #8594CE;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
                        </div>
                        <div class="col-3 text-center">
                            <h3 class="font-italic" style="color:#8594CE;letter-spacing:1px;font-weight:400;"><a href="URLHERE" style="color:#8594CE;">Name</a></h3>
                            <img class="fr-rounded" style="width:130px;border:4px solid #8594CE;" src="https://64.media.tumblr.com/381f7a94234b22369a52873047e8bf25/tumblr_ok5c98Ibxl1qjkre8o1_250.png">
                        </div>
                    </div>
                </div>
            </div>
    </div>
        <div class="col-lg-4 p-2">
            <div class="card h-100 hidden-sm-down" style="background:#FADEEE;border:0px;">
                <!--- image --->
                <div class="card h-100 m-3" style="background:url('https://www.downvids.net/video/bestimages/img-denzerosubs-honeyworks-ft-narumi-sena-cv-amamiya-sora-310.jpg');background-size:cover;background-position:center;"></div>
            </div>
        </div>
    </div>
    <!--- credit, dont remove pls! --->
    <a class="d-block text-muted text-right mr-2" href="9474647" style="font-size:0.6em;">code by cati <i class="fad fa-rainbow"></i></a>
</div>