[F2U HTML] splatoon (code)

owlhari

Info


Created
1 year, 6 months ago
Creator
owlhari
Favorites
4

Profile


<!-- 
SPLATOON CHARACTER HTML
F2U BY OWLHARÌ
DO NOT REMOVE CREDIT

CHANGING BACKGROUND STRIPES
- go to the piece of code below where it says "background:repeating-linear-gradient"
- copy all the text in between the ( ) and replace it with the following...
RED-ORANGE: 45deg, #FF4900, #FF4900 20px, #FF9600 20px, #FF9600 40px
YELLOW: 45deg, #FFE83F, #FFE83F 20px, #FCD23A 20px, #FCD23A 40px
GREEN: 45deg, #01B212, #01B212 20px, #04D724 20px, #04D724 40px
BLUE: 45deg, #0E10E6, #0E10E6 20px, #101AB3 20px, #101AB3 40px
PURPLE: 45deg, #7701D8, #7701D8 20px, #4201AA 20px, #4201AA 40px
PINK: 45deg, #D802CB, #D802CB 20px, #C001D5 20px, #C001D5 40px
GRAY: 45deg, #0D0D0D, #0D0D0D 20px, #191919 20px, #191919 40px
-->

<div class="container">
<!-- BACKGROUND -->
<div class="text-body row container p-3 m-auto text-break" style="border:0; border-radius:50px;
        background:repeating-linear-gradient(45deg, #7701D8, #7701D8 20px, #4201AA 20px, #4201AA 40px);">

    <div class="col-sm-4">
        <!-- IMAGE -->
        <div class="card m-2 p-3 bg-body" style="border:0; border-radius:50px;">
        <div class="card-body">
                <img src="IMAGELINK" style="border-radius:50px;" class="card-img-top">
                <div class="card-text text-center">caption or <a href="">artist</a></div>
        </div>
        </div>
        
        <!-- STATS -->
        <div class="card m-2 mt-3 px-3 py-4 bg-body" style="border:0; border-radius:50px;">
        <div class="card-body">
            <table class="table m-0" style="border:0;"><tbody>
                <tr>
                    <td class="w-50"><b>FULL NAME</b></td>
                    <td class="w-50">name</td>
                </tr>
                <tr>
                    <td><b>AGE</b></td>
                    <td>age</td>
                </tr>
                <tr>
                    <td><b>PRONOUNS</b></td>
                    <td>pro/nouns</td>
                </tr>
                <tr>
                    <td><b>SPECIES</b></td>
                    <td>species</td>
                </tr>
                <tr>
                    <td><b>INK COLOR</b></td>
                    <td>color</td>
                </tr>
                <tr>
                    <td><b>THEME</b></td>
                    <td><a href="">song link</a></td>
                </tr>
                
            </tbody></table>
        </div>
        </div>
    </div>
    
    <div class="col-sm">
        
        <!-- TEXT -->
        <div class="card m-2 p-4 bg-body" style="border:0; border-radius:50px;">
        <div class="card-body">
            <h1 class="text-center text-uppercase">character name <i class="fa-solid fa-splotch"></i> extra info</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
            <h3 class="text-center text-uppercase">subheader</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
            <h3 class="text-center text-uppercase">subheader</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
        </div>
        </div>
        
        <!-- GEAR -->
        <div class="card m-2 mt-3 p-4 bg-body" style="border:0; border-radius:50px; font-weight:bold;">
        <div class="row container p-0 m-auto">
            <div class="col-sm-3"><div class="card bg-body border-0 text-center" >
                <img class="card-img-top" src="https://cdn.wikimg.net/en/splatoonwiki/images/8/8b/S_Weapon_Main_Hero_Shot_Replica.png">
                <div class="card-body">Hero Shot Replica</div>
            </div></div>
            <div class="col-sm-3"><div class="card bg-body border-0 text-center" >
                <img class="card-img-top" src="https://cdn.wikimg.net/en/splatoonwiki/images/thumb/4/45/S2_Gear_Headgear_Hero_Headset_Replica.png/192px-S2_Gear_Headgear_Hero_Headset_Replica.png">
                <div class="card-body">Hero Headset Replica</div>
            </div></div>
            <div class="col-sm-3"><div class="card bg-body border-0 text-center" >
                <img class="card-img-top" src="https://cdn.wikimg.net/en/splatoonwiki/images/thumb/b/b2/S2_Gear_Clothing_Hero_Jacket_Replica.png/192px-S2_Gear_Clothing_Hero_Jacket_Replica.png">
                <div class="card-body">Hero Jacket Replica</div>
            </div></div>
            <div class="col-sm-3"><div class="card bg-body border-0 text-center" >
                <img class="card-img-top" src="https://cdn.wikimg.net/en/splatoonwiki/images/thumb/b/b6/S2_Gear_Shoes_Hero_Runner_Replicas.png/192px-S2_Gear_Shoes_Hero_Runner_Replicas.png">
                <div class="card-body">Hero Runner Replicas</div>
            </div></div>
        </div>
        </div>
    </div>
    
</div>
<div class="pull-right">
    <a href="https://toyhou.se/18441231.-f2u-html-splatoon" data-toggle="tooltip" data-placement="left" title="get the code!"><i class="fa-solid fa-code"></i></a>
    <a href="/owlhari" data-toggle="tooltip" data-placement="left" title="code by owlharì"><i class="fa-solid fa-crow"></i></a>
</div>
</div>