Interstellar Dust

<!-- Interstellar Dust theme by Circlejourney. Editing is allowed. Just remember to credit me! -->
<div style="background: url(https://www.nasa.gov/sites/default/files/styles/full_width_feature/public/thumbnails/image/pia23647.jpg); background-size: cover; background-attachment: fixed; width: auto; padding: 32px; margin: -15px; position: relative;">
    <div class="container bg-dark rounded d-lg-block d-flex flex-column pt-lg-0 pb-lg-3 py-3">
        <div class="row">
            <!-- Navigation bar start -->
            <div class="col-12 nav nav-pills nav-fill text-uppercase p-3 flex-wrap order-1 order-lg-0">
                <a class="nav-item btn-lg nav-link active" data-toggle="tab" href="#basics">Basics</a>
                <a class="nav-item btn-lg nav-link" data-toggle="tab" href="#aesthetics">Aesthetics</a>
                <a class="nav-item btn-lg btn-outline- nav-link" data-toggle="tab" href="#story">Story</a>
                <a class="nav-item btn-lg nav-link" data-toggle="tab" href="#relationships">Relationships</a>
                <a class="nav-item btn-lg nav-link" data-toggle="tab" href="#trivia">Trivia</a>
            </div>
            <!-- Navigation bar end -->

            <!-- Picture box start -->
            <div class="col-12 col-lg-4 order-0 order-lg-1">
                <div class="bg-light text-dark" style="height: 70px;">
                    <div class="text-center d-flex flex-column justify-content-center table-responsive" style="height: 100%;">
                        <h4 class="text-dark text-uppercase font-weight-light mb-1" style=" letter-spacing: 1px;">
                            My Name
                        </h4>
                        <div style="font-size: 10pt;">
                            trait 1 ⋆ trait 2 ⋆ trait 3
                        </div>
                    </div>
                </div>

                <div class="bg-light" style="height: 335px; background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/19405477_SMWf6N2z4YgMmZT.png?1579873295) no-repeat center; background-size: cover; background-position: top;">
                    <!-- To change the thumbnail, change the URL inside the brackets of background: url() -->
                </div>

                <div class="bg-light text-dark text-center py-2 px-4 d-flex flex-column justify-content-center" style="height: 65px; letter-spacing: 0.5px; font-size: 12pt; line-height: 1em; overflow: hidden;">
                    <p>It does not matter how slowly you go as long as you do not stop.</p>

                    <i class="fas fa-quote-left" style="position: absolute; left: 22px; bottom: 25px;"></i>
                    <i class="fas fa-quote-right" style="position: absolute; right: 22px; bottom: 25px;"></i>
                </div>
            </div>
            <!-- Picture box end -->

            <!-- Tab content start -->
            <div class="col-12 col-lg-8 pl-lg-0 order-2 order-lg-2">
                <div class="tab-content text-light table-responsive rounded-0 card card-outline-secondary" style="height: 470px;">
                    <div class="tab-pane fade show active p-3" id="basics">
                        <h2 class="display-4 text-center mb-4"><i class="fal fa-star"></i> Basics</h2>

                        <!-- Basics box start -->
                        <div class="px-4 py-3 mb-4 text-center text-uppercase bg-faded text-muted" id="basic-info" style="font-size: 10pt;">
                            <div class="row px-4">
                                <div class="col-lg-3 col-md-6 col-12">
                                    <p class="font-weight-bold text-primary mb-0">Name</p>
                                    <p>My name</p>
                                </div>
                                <div class="col-lg-3 col-md-6 col-12">
                                    <p class="font-weight-bold text-primary mb-0">Called</p>
                                    <p>My nicknames</p>
                                </div>
                                <div class="col-lg-3 col-md-6 col-12">
                                    <p class="font-weight-bold text-primary mb-0">Age</p>
                                    <p>My age</p>
                                </div>
                                <div class="col-lg-3 col-md-6 col-12">
                                    <p class="font-weight-bold text-primary mb-0">Pronouns</p>
                                    <p>Pronouns</p>
                                </div>
                            </div>
                            <br>
                            <div class="row px-4">
                                <div class="col-lg-3 col-md-6 col-12">
                                    <p class="font-weight-bold text-primary mb-0">Species</p>
                                    <p>My species</p>
                                </div>
                                <div class="col-lg-3 col-md-6 col-12">
                                    <p class="font-weight-bold text-primary mb-0">Occupation</p>
                                    <p>My occupation</p>
                                </div>
                                <div class="col-lg-3 col-md-6 col-12">
                                    <p class="font-weight-bold text-primary mb-0">Height</p>
                                    <p>My height</p>
                                </div>
                                <div class="col-lg-3 col-md-6 col-12">
                                    <p class="font-weight-bold text-primary mb-0">Lives in</p>
                                    <p>My location</p>
                                </div>
                            </div>
                        </div>
                        <!-- Basics box end -->

                        <div class="text-center">
                            <p>Here is some filler text.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet justo donec enim diam vulputate ut pharetra sit. Neque egestas congue quisque egestas. Ornare arcu dui vivamus arcu felis bibendum ut tristique et. Aliquet enim tortor at auctor urna nunc id cursus metus. Nunc aliquet bibendum enim facilisis gravida neque.</p>
                            <p>Ullamcorper morbi tincidunt ornare massa eget egestas. Sem nulla pharetra diam sit amet. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare. Eget mauris pharetra et ultrices neque ornare aenean euismod elementum. Enim praesent elementum facilisis leo vel fringilla est ullamcorper eget. Amet facilisis magna etiam tempor orci eu lobortis. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. </p>
                        </div>
                    </div>

                    <div class="tab-pane fade p-3" id="story">
                        <h2 class="display-4 text-center mb-4"><i class="fal fa-meteor"></i>     Story</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet justo donec enim diam vulputate ut pharetra sit. Neque egestas congue quisque egestas. Ornare arcu dui vivamus arcu felis bibendum ut tristique et. Dolor sit amet consectetur adipiscing elit. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo vel. Aliquet enim tortor at auctor urna nunc id cursus metus. Nunc aliquet bibendum enim facilisis gravida neque.</p>
                            <p>Ullamcorper morbi tincidunt ornare massa eget egestas. Sem nulla pharetra diam sit amet. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare. Eget mauris pharetra et ultrices neque ornare aenean euismod elementum. Enim praesent elementum facilisis leo vel fringilla est ullamcorper eget. Amet facilisis magna etiam tempor orci eu lobortis. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. </p>
                    </div>
                    <div class="tab-pane fade p-3" id="relationships">
                        <h2 class="display-4 text-center mb-4"><i class="fal fa-eclipse"></i> Relationships</h2>
                        <div class="card-group d-flex mb-2 text-muted">
                            <div class="card" style="flex-grow: 1; overflow: hidden">
                                <img src="https://via.placeholder.com/300">
                            </div>
                            <div class="card" style="flex-grow: 3;">
                                <div class="card-header text-uppercase text-center text-muted">Related character</div>
                                <div class="card-block">
                                    <p>A description of the relationship goes here.</p>
                                </div>
                            </div>
                        </div>

                        <div class="card-group d-flex mb-2 text-muted">
                            <div class="card" style="flex-grow: 1; overflow: hidden">
                                <img src="https://via.placeholder.com/300">
                            </div>
                            <div class="card" style="flex-grow: 3;">
                                <div class="card-header text-uppercase text-center text-muted">Related character</div>
                                <div class="card-block">
                                    <p>A description of the relationship goes here.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade p-3" id="aesthetics">
                        <h2 class="display-4 text-center mb-4"><i class="fal fa-stars"></i> Aesthetics</h2>
                        <h3 class="text-primary text-center mb-4">Theme
                            <a class="btn btn-primary" target="_blank" href="THEME LINK 1">1</a>
                            <a class="btn btn-primary" target="_blank" href="THEME LINK 2">2</a>
                        </h3>
                        <div class="row no-gutters text-center">
                            <div class="col-lg-3 col-md-6 col-12">
                                <img src="https://i.imgur.com/L0RhGpr.png">
                            </div>
                            <div class="col-lg-3 col-md-6 col-12">
                                <img src="https://i.imgur.com/9kjgmZa.png">
                            </div>
                            <div class="col-lg-3 col-md-6 col-12">
                                <img src="https://i.imgur.com/X9q9TiJ.png">
                            </div>
                            <div class="col-lg-3 col-md-6 col-12">
                                <img src="https://i.imgur.com/0GPIF2e.png">
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade fade p-3" id="trivia">
                        <h2 class="display-4 text-center mb-4"><i class="fal fa-moon-stars"></i> Trivia</h2>
                        <div class="row px-4 justify-content-center">
                            <div class="col-6">
                                <h5 class="text-uppercase text-primary">Likes</h5>
                                <ul>
                                    <li>Cool stuff</li>
                                    <li>Cool stuff</li>
                                </ul>
                            </div>
                            <div class="col-6">
                                <h5 class="text-uppercase text-primary">Dislikes</h5>
                                <ul>
                                    <li>Bad stuff</li>
                                    <li>Bad stuff</li>
                                </ul>
                            </div>
                        </div>

                        <hr>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet justo donec enim diam vulputate ut pharetra sit. Neque egestas congue quisque egestas. Ornare arcu dui vivamus arcu felis bibendum ut tristique et. Dolor sit amet consectetur adipiscing elit. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo vel. Aliquet enim tortor at auctor urna nunc id cursus metus. Nunc aliquet bibendum enim facilisis gravida neque.</p>
                        <p>Ullamcorper morbi tincidunt ornare massa eget egestas. Sem nulla pharetra diam sit amet. Diam quis enim lobortis scelerisque fermentum dui faucibus in ornare. Eget mauris pharetra et ultrices neque ornare aenean euismod elementum. Enim praesent elementum facilisis leo vel fringilla est ullamcorper eget. Amet facilisis magna etiam tempor orci eu lobortis. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. </p>
                    </div>
                </div>
            </div>
            <!-- Tab content end -->
        </div>
    </div>
    <div id="credit" style="font-size: 10pt; position: absolute; bottom: 5px; right: 5px;">
      <a href="https://toyhou.se/~forums/16.htmlcss-graphics/75580.circlejourney-s-code-creations-free-">Theme by Circlejourney</a>
      <!-- Do not remove credit info! -->
    </div>
</div>