index.html

{% extends "base.html" %}
{% block content %}
    <div class="jumbotron bg-transparent">
        <div class="container">
            <div class="row">
                <div class="col align-self-center">
                    <h1 class="jumbo-intro-head">
                        Lorem Ipsum
                    </h1>
                    <h6 class="jumbo-intro-sub">
                        Victrixs mori <span class="jumbo-highlight">rugensis civitas!</span>
                    </h6>
                    <p class="jumbo-intro-desc">
                        Sunt peses reperire neuter,
                        <span class="jumbo-highlight">nobilis</span> rationees.
                    </p>
                </div>
                <div class="col">
                </div>
            </div>
        </div>
    </div>
{% endblock %}

styles.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

.jumbo-intro-sub {
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 5px;
}

.jumbo-intro-head {
    font-family: Montserrat, sans-serif;
    font-weight: bold;
    font-size: 70px;
    line-height: 85px;
}

.nav-head {
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 33px;
    color: #2f2e41;
}

.jumbo-intro-desc {
    font-family: Montserrat, sans-serif;
    font-weight: normal;
    font-size: 36px;
    padding-top: 15px;
    line-height: 42px;
}

.jumbo-highlight {
    color: #89CFF0;
}

.jumbo-fit-button {
    box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.15);
}

img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    /*top: 0;*/
    /*bottom: 0;*/
    /*left: 0;*/
    /*right: 0;*/
    margin: auto;
}

.logo {
    max-width: 50px;
    max-height: 50px;
    width: auto;
    height: auto;
    vertical-align: middle;
}

.jumbo-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.jumbotron {
    height: 100vh;
}