warm ocean [f2u] [custom colours]

<!--
    WARM OCEAN [f2u]

    code by @ sodabranch on TH
    do not remove credit

    *~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
    live code editor:
    [https://th.circlejourney.net/]

    WARNING !! do not delete " " or
    it might not look correct
    ____________________________________

    COLOUR GUIDE:

    dark border/horizontal rule: #2C5579
    main border/horizontal rule: #008CBA

    background: #F8F9FA
    banners: #D9EDF7

    main font: #343A40
    coloured font: #597098
    water icon/badges: #63B49A

    stats:
        filled: #708CBA
        empty: #F8E3D3

-->

<div class="container p-4 rounded" style="
max-width: 800px;
background:url('https://file.garden/ZcPXKEClQE8Z0nqs/images-th/pattern%20238.gif');
background-size:auto;
background-repeat;
background-position: center center;
background-attachment: fixed;
border: solid 1px #2C5579;
color: #343A40;
">
    <!-- INFO -->
    <div class="card mb-2 p-2 rounded shadow-smy" style="
    background-color: #F8F9FA;
    border: solid 1px #008CBA;
    ">
        <p>
        <i class="fa-solid fa-water" style=" font-size: 22px; color: #63B49A;" aria-hidden="true"></i>  <b class="font-italic text-uppercase" style="font-size: 28px">
            <!-- NAME
            you can change the font-size to make it smaller to fit your text -->
            <span style="color: #597098">name</span> surname
        </b>
        </p>
    </div>
    <div class="row">
        <!-- IMAGE -->
        <div class="col-lg-4  mb-2">
            <div class="card rounded shadow-sm" style="
            position: static;
            background-color: #F8F9FA;
            border: solid 1px #008CBA;
            ">
                <div class="card-body p-2">
                    <!-- If you want a circle image then replace "rounded" with "rounded-circle"
                    replace the link with your image of choice-->

                    <img src="https://file.garden/ZcPXKEClQE8Z0nqs/images-th/18.png" class="img-fluid mb-1 rounded" style="
                    min-height: 180px;
                    width: 400px;
                    border: solid 1px #008CBA;">

                    <div class="text-center">

                    <!-- ADJECTIVES
                    add as many as you want
                    code to copy and paste

                    <span style="color: #597098;">•</span>
                    <span class="badge" style="background-color: #63B49A;">adjective</span> -->
                    <span class="badge" style="background-color: #63B49A;">adjective</span>
                    <span style="color: #597098;">•</span>
                    <span class="badge" style="background-color: #63B49A;">adjective</span>
                    <span style="color: #597098;">•</span>
                    <span class="badge" style="background-color: #63B49A;">adjective</span>
                    </div>
                    <hr class="my-1 faded" style="border-top: solid 1px #2C5579;">

                    <!-- BASIC INFO
                    to add more items just copy and paste it at the end -->
                    <div class="pt-3">
                    <!-- age -->
                    <span class="font-weight-bold"> <i class="fas fa-cake-candles"></i> Age</span>
                    <span class="pull-right">content [day/month]</span>
                    <hr class="my-1 faded" style="border-top: solid 1px #008CBA;">
                    <!-- pronouns -->
                    <span class="font-weight-bold"> <i class="fas fa-user"></i> Pronouns</span>
                    <span class="pull-right">content</span>
                    <hr class="my-1 faded" style="border-top: solid 1px #008CBA;">
                    <!-- gender -->
                    <span class="font-weight-bold"> <i class="fas fa-transgender"></i> Gender</span>
                    <span class="pull-right">content</span>
                    <hr class="my-1 faded" style="border-top: solid 1px #008CBA;">
                    <!-- sexuality -->
                    <span class="font-weight-bold"> <i class="fas fa-heart"></i> Orientation</span>
                    <span class="pull-right">content</span>
                    <hr class="my-1 faded" style="border-top: solid 1px #008CBA;">
                    <!-- species -->
                    <span class="font-weight-bold"> <i class="fas fa-dna"></i> Species</span>
                    <span class="pull-right">content</span>

                    <!-- to add one more paste <hr class="my-1 faded" style="border-top: solid 1px #008CBA;"> below the above item -->

                    <!-- credit -->
                    <hr class="my-1 faded"style="border-top: solid 1px #008CBA;">
                    <span class="font-weight-bold"> <i class="fas fa-signature"></i> Code</span>
                    <span class="pull-right">@sodabranch</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-8  mb-2">
            <div class="card rounded shadow-sm" style="
            background-color: #F8F9FA;
            border: solid 1px #008CBA;
            ">
                <div class="card-body p-2">
                    <!-- STATS -->
                    <div class="alert p-2 px-3 rounded d-inline-block w-100 text-uppercase" style="
                    background-color: #D9EDF7;
                    color: #597098
                    ">
                    <h3 class="mb-0"><i class="fa-solid fa-chart-simple-horizontal"></i>  stats</h3>
                    </div>
                    <div class="row my-2">
                        <!-- stat bars begin
                        I couldn't figure out progress bars...

                        filled out: <i class="fas fa-circle" style="color: #708CBA;></i>
                        empty: <i class="far fa-circle" style="color: #F8E3D3;"></i> -->

                        <!-- confidence -->
                        <div class="col-lg-5">
                        <span class="font-weight-bold">Confidence</span>
                        <span class="pull-right">
                        <i class="fas fa-circle" style="color: #708CBA;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        </span>
                        </div>
                        <!-- intelligence -->
                        <div class="col-lg-5">
                        <span class="font-weight-bold">Intelligence</span>
                        <span class="pull-right">
                        <i class="fas fa-circle" style="color: #708CBA;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        </span>
                        </div>
                        <!-- kindness -->
                        <div class="col-lg-5">
                        <span class="font-weight-bold">Kindness</span>
                        <span class="pull-right">
                        <i class="fas fa-circle" style="color: #708CBA;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        </span>
                        </div>
                        <!-- charisma -->
                        <div class="col-lg-5">
                        <span class="font-weight-bold">Charisma</span>
                        <span class="pull-right">
                        <i class="fas fa-circle" style="color: #708CBA;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        </span>
                        </div>
                        <!-- patience -->
                        <div class="col-lg-5">
                        <span class="font-weight-bold">Patience</span>
                        <span class="pull-right">
                        <i class="fas fa-circle" style="color: #708CBA;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        </span>
                        </div>
                        <!-- seriousness -->
                        <div class="col-lg-5">
                        <span class="font-weight-bold">Seriousness</span>
                        <span class="pull-right">
                        <i class="fas fa-circle" style="color: #708CBA;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        </span>
                        </div>
                        <!-- laziness -->
                        <div class="col-lg-5">
                        <span class="font-weight-bold">Laziness</span>
                        <span class="pull-right">
                        <i class="fas fa-circle" style="color: #708CBA;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        </span>
                        </div>
                        <!-- toughness -->
                        <div class="col-lg-5">
                        <span class="font-weight-bold">Toughness</span>
                        <span class="pull-right">
                        <i class="fas fa-circle" style="color: #708CBA;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        <i class="far fa-circle" style="color: #F8E3D3;"></i>
                        </span>
                        </div>

                        </div>
                        <hr class="my-1 faded" style="border-top: solid 1px #008CBA;">
                        <!-- STATS -->
                    <div class="alert p-2 px-3 rounded d-inline-block w-100 text-uppercase" style="
                    background-color: #D9EDF7;
                    color: #597098
                    ">
                    <h3 class="mb-0"><i class="fa-solid fa-fish"></i>  about</h3>
                    </div>
                    <!-- ABOUT
                    this box scrolls!! -->
                    <div class="px-3" style="height: 160px; overflow-y: auto; overflow-x: hidden">
                        <span style="font-size:17px; font-weight:bold;"><i class="fas fa-circle-info"> </i>General</span><br>
                        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.
                        <br><br>
                        <span style="font-size:17px; font-weight:bold;"><i class="fas fa-circle-info"> </i>Personality</span><br>
                        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.
                    </div>

                    </div>
                </div>
                <!-- LIKES & DISLIKES -->
                <div class="row mt-2">
                    <div class="col-lg mb-2">
                        <div class="card rounded shadow-sm" style="
                        background-color: #F8F9FA;
                        border: solid 1px #008CBA;
                        position: static;
                        ">
                            <div class="card-body p-2">
                                <!-- likes -->
                                <div class="alert p-2 px-3 rounded d-inline-block w-100 text-uppercase" style="
                                background-color: #D9EDF7;
                                color: #597098
                                ">
                                <h5 class="mb-0"><i class="fa-solid fa-heart"></i>  likes</h5>
                                </div>
                                <div style="height: 80px; overflow-y: auto; overflow-x: hidden">
                                <ul>
                                    <li>content</li>
                                    <li>content</li>
                                    <li>content</li>
                                    <li>content</li>
                                </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg mb-2">
                        <div class="card rounded shadow-sm" style="
                        background-color: #F8F9FA;
                        border: solid 1px #008CBA;
                        position: static;
                        ">
                            <div class="card-body p-2">
                                <!-- dislikes -->
                                <div class="alert p-2 px-3 rounded d-inline-block w-100 text-uppercase" style="
                                background-color: #D9EDF7;
                                color: #597098
                                ">
                                <h5 class="mb-0"><i class="fa-solid fa-heart-crack"></i>  dislikes</h5>
                                </div>
                                <div style="height: 80px; overflow-y: auto; overflow-x: hidden">
                                <ul>
                                    <li>content</li>
                                    <li>content</li>
                                    <li>content</li>
                                    <li>content</li>
                                </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- DESIGN INFO -->
                <div class="card rounded shadow-sm" style="
                        background-color: #F8F9FA;
                        border: solid 1px #008CBA;
                        ">
                    <div class="card-body p-2">
                        <div class="alert- p-2 px-3 rounded d-inline-block w-100 text-uppercase" style="
                                background-color: #D9EDF7;
                                color: #597098
                                ">
                        <h3 class="mb-0"><i class="fa-solid fa-whale"></i>  design</h3>
                        </div>
                        <div class="row mt-2">
                    <div class="col-lg mb-2">
                        <div class="card rounded" style="
                        background-color: #F8F9FA;
                        border: solid 1px #008CBA;
                        border: 0px;
                        position: static;
                        ">
                            <div class="card-body p-2">
                                <!-- design notes -->
                                <div class="alert p-2 px-3 rounded d-inline-block w-100 text-uppercase" style="
                                background-color: #D9EDF7;
                                color: #597098
                                ">
                                <h5 class="mb-0"><i class="fa-solid fa-book"></i>  notes</h5>
                                </div>
                                <div style="height: 80px; overflow-y: auto; overflow-x: hidden">
                                <ul>
                                    <li>content</li>
                                    <li>content</li>
                                    <li>content</li>
                                    <li>content</li>
                                </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg mb-2">
                        <div class="card rounded" style="
                        background-color: #F8F9FA;
                        border: solid 1px #008CBA;
                        border: 0px;
                        position: static;
                        ">
                            <div class="card-body p-2">
                                <!-- trivia -->
                                <div class="alert p-2 px-3 rounded d-inline-block w-100 text-uppercase" style="
                                background-color: #D9EDF7;
                                color: #597098
                                ">
                                <h5 class="mb-0"><i class="fa-solid fa-pen"></i>  trivia</h5>
                                </div>
                                <div style="height: 80px; overflow-y: auto; overflow-x: hidden">
                                <ul>
                                    <li>content</li>
                                    <li>content</li>
                                    <li>content</li>
                                    <li>content</li>
                                </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- COLORS -->
                <div class="alert- p-2 px-3 rounded d-inline-block w-100 text-uppercase" style="
                background-color: #D9EDF7;
                color: #597098
                ">
                <h5 class="mb-0"><i class="fa-solid fa-eye-dropper"></i>  color palette</h5>
                </div>
                <div class="row no-gutters d-flex align-items-stretch w-100 rounded my-2" style="height: 20px; overflow: hidden">
                    <!-- add as many as you fancy -->
                    <div class="col" style="background-color:#EE8888; display: block;"></div>
                    <div class="col" style="background-color:#F8B172; display: block;"></div>
                    <div class="col" style="background-color:#EFFAB4; display: block;"></div>
                    <div class="col" style="background-color:#BBF09A; display: block;"></div>
                    <div class="col" style="background-color:#8ABADE; display: block;"></div>
                    <div class="col" style="background-color:#AA7788; display: block;"></div>
                </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>