nvnzz

<!--

turn off WYSIWYG editor.
do not sell for profit.
do not remove credit.

-->

<div class="container" style="max-width:900px;">

    <div class="row my-2 mx-0">

<!-- avatar -->
        <div class="col-md-3 mr-md-2 bg-dark text-muted" style="height:200px; background:url(IMAGE_URL_HERE) center no-repeat; background-size:cover;"></div>

        <div class="col p-0">
                <div class="p-5" style="background:url(IMAGE_URL_HERE) center no-repeat fixed; background-size:cover;"></div>
<!-- Name Surname -->
            <div class="row my-2 pt-1 mx-0">
                <div class="col-md-4"></div>
                <div class="col bg-dark text-center font-italic text-muted p-2" style="font-size:1.2rem;">
                    <i class="fa-duotone fa-sparkles fa-rotate-180 fa-2x" style="position:absolute; left:3px; top:3px; opacity:50%"></i>
                    Name Surname
                    <i class="fa-duotone fa-sparkles fa-2x" style="position:absolute; right:3px; top:3px; opacity:50%"></i> </div>
            </div>
<!-- tags -->
            <div class="row mx-0" style="letter-spacing:2px;">
                <div class="col bg-dark text-center text-muted p-2">
                    <i class="fa-duotone fa-hashtag fa-rotate-180 fa-2x" style="position:absolute; left:3px; top:3px; opacity:50%"></i> word  </div>
                <div class="col mx-2 text-center bg-secondary text-dark p-2">
                    <i class="fa-duotone fa-hashtag fa-rotate-180 fa-2x" style="position:absolute; left:3px; top:3px; opacity:50%"></i>  word </div>
                <div class="col bg-dark text-center text-muted p-2">
                    <i class="fa-duotone fa-hashtag fa-rotate-180 fa-2x" style="position:absolute; left:3px; top:3px; opacity:50%"></i>  word </div>
            </div>
            </div>
</div>

<!-- about -->
    <div class="bg-faded text-muted p-2 my-2" style="height:300px; overflow-y:auto;">

<!-- basic info -->
      <p>
        text
        </p>

<!-- additional info title -->
<div class="align-items-center font-italic px-2" style="font-size: 1.2rem; letter-spacing: 2px;">
                    <span>additional details</span>
                    <span class="col mx-2 mt-2 bg-dark" style="padding: .5px;"></span>
                </div>

<!-- additional info -->
      <p>
          text
      </p>
    </div>

    <div class="row my-2 mx-0">
        <div class="col mr-md-2">

<!-- moodboard -->
            <div class="row">
                <div class="col bg-dark text-muted p-2" style="height:96px; background:url(IMAGE_URL_HERE) center no-repeat; background-size:cover;"> </div>
                <div class="col mx-2 bg-secondary text-dark p-2" style="height:96px; background:url(IMAGE_URL_HERE) center no-repeat; background-size:cover;">  </div>
                <div class="col bg-dark text-muted p-2" style="height:96px; background:url(IMAGE_URL_HERE) center no-repeat; background-size:cover;">  </div>
            </div>

<!-- quote -->
            <div class="row my-2">
                <div class="col bg-dark text-muted align-items-center font-italic text-center p-2" style="font-size: 1.2rem; letter-spacing: 2px; height:96px; overflow-y:auto;">
                    <i class="fa-duotone fa-quote-left fa-2x" style="position:absolute; left:3px; top:3px; opacity:50%"></i>
                <p class="w-100">
                quote
</p>

                    <i class="fa-duotone fa-quote-right fa-2x" style="position:absolute; right:3px; bottom:3px; opacity:50%"></i>
                    </div>
            </div>
        </div>

<!-- another image -->
        <div class="col-md-3 bg-dark p-3 text-muted" style="height:200px; background:url(IMAGE_URL_HERE) center no-repeat;">
        </div>

    </div>
<div class="row mx-1">
    <div class="col p-0"></div>
    <span><small>code by @yaboisonne</small></span>
</div>