[ f2u ] translucent (CODE)

    
<!----

    translucent - f2u html
    by pastelsparkyl
    
    - feel free to edit / frankenstein as much as you'd like!
    - don't remove my credit, redistribute, or claim as your own!
    - turn off WYSIWYG


---->

<div class="mx-auto" style="width:75%">
    <!---- if your background is light, change 'color:#fff;' to 'color:#000;' or another dark hex code. DON'T FORGET THE SEMICOLON!
    add the background image url between the paretheses where it says background-image:url() ----->
    <div class="card p-2" style="
    background-image:url(https://images.unsplash.com/photo-1498735599329-ed6e3798cdcb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80); 
    border-color:#fff; 
    color:#fff;
    padding:5px;
    font-family:courier new;
    background-size:cover">
    <div class="card p-2 mx-auto border-0" style="background-color:rgba(0,0,0,0.5)">
    <!---- avatar ------------->
    <div class="card mx-auto p-3" style="background-image:url(URL HERE); width:200px; height:200px; background-size:cover">
    <!---- avatar end --------->
    </div></div><br>
    
    <div class="card p-3 border-0" style="background-color:rgba(0,0,0,0.5);">
        <span class="text-uppercase" style="font-size:40px">
            <!---- ADD NAME HERE: ------------->
            <i>name</i>
        </span>
        <div>
            <!---- quote ------------->
            <span><i class="fas fa-quote-left"></i></span>
            <span><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i></span>
            <span><i class="fas fa-quote-right"></i></span>
            <!---- quote end --------->
        </div><br>
        
        <!---- basics ------------->
        <div class="row">
            <div class="col-lg-6 justify-content-between">
                <span>name</span>
                <span>content</span>
            </div>
            <div class="col-lg-6 justify-content-between">
                <span>age</span>
                <span>content</span>
            </div>
            <div class="col-lg-6 justify-content-between">
                <span>gender</span>
                <span>content (pro/nouns)</span>
            </div>
            <div class="col-lg-6 justify-content-between">
                <span>species</span>
                <span>content</span>
            </div>
        </div><br>
        <!---- basics end ---------->
        
        <!---- about ------------->
        <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>
        <!---- about end --------->
        
        <br>
        <!---- likes + dislikes ------------->
        <div class="row">
            <div class="col-lg-6">
                <p>likes</p>
                <ul>
                    <li>content</li>
                    <li>content</li>
                    <li>content</li>
                </ul>
            </div>
            <div class="col-lg-6">
                <p>dislikes</p>
                <ul>
                    <li>content</li>
                    <li>content</li>
                    <li>content</li>
                </ul>
            </div>
        </div>
        <!---- likes + dislikes end --------->
        
        <!---- notes ------------->
        <p>notes</p>
        <ul>
             <li>add some notes here!</li>
        </ul>
        <!---- notes end --------->
        
    </div><br>
    
    <div class="card p-3 border-0" style="background-color:rgba(0,0,0,0.5)">
        <!---- moodboard ------------->
        <div class="row">
             <div class="col-lg-3">
                 <div class="card border-0" style="background-image:url(); height:130px; background-size:cover"></div>
             </div>
             <div class="col-lg-3">
                 <div class="card border-0" style="background-image:url(); height:130px; background-size:cover"></div>
             </div>
             <div class="col-lg-3">
                 <div class="card border-0" style="background-image:url(); height:130px; background-size:cover"></div>
             </div>
             <div class="col-lg-3">
                <div class="card border-0" style="background-image:url(); height:130px; background-size:cover"></div>
             </div>
        </div>
        <!---- moodboard end --------->
    </div><br>
    
    
    <div class="card p-3 border-0" style="background-color:rgba(0,0,0,0.5)">
    <!---- song ------------->
        <div class="justify-content-between">
            <span>
            <!---- add the video id (part after the '/v=' in the url) after the 'embed/' ------------->
            <iframe src="https://www.youtube.com/embed/" style="height:20px; width:20px; position:absolute; opacity:0"></iframe>
            <i class="fas fa-play"></i></span>
            <span>song name - artist</span>
        </div>
    <!---- song end --------->
    </div>
    </div>
    <!---- credits, add or remove what you need but don't remove my credit ------------->
    <div class="text-right text-muted" style="font-size:13px">
        <a href="img source" class="text-muted tooltipster" title="bg image from (source)">
            <i class="far fa-camera"></i>
        </a> .
        <!---- my credit, don't touch -------->
        <a href="https://toyhou.se/12054345.-f2u-transluscent" class="text-muted tooltipster" title="code by pastelsparkyl">
            <i class="far fa-seedling"></i>
        </a>
    </div>
</div>