Safe's editor, editing: View by Togo

Code Output

<!--------------------------------
    
  | code by togo / eithorne
  contact either account if you have questions!
  
  | TEMPLATE AUTO-EDITED BY @SAFE HTTPS://TOYHOU.SE/SAFE || TEMPLATES GIVEN WITH EXPLICIT PERMISSION BY AUTHOR.
  | feel free to move/style the credit. just keep it visible and easy to find.
  
  
  | bootstrap colours + custom accent colour
  
  find and replace the hex below to change accent colour:
  
  #ffb2fb
  
  
  | layout works both on mobile and desktop :)
  
  | additional comments are added below other customizable elements.
  
--------------------------------->

<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card rounded-0 border-0 p-2">

<!--------------------------------

         HEADER IMAGE

-------------------------------->

<div style="
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: #ffb2fb;

    background-image: url(/img/placeholder-background.png);
    /* | Add URL for header image */;

background-size: cover;
background-position: center;

    background-blend-mode: luminosity;
    /* | Remove this if you don't want the image to blend with your accent colour */;

border-radius: 20px 20px 0 0;
">
</div>
<div class="card mt-2 p-3" style="
border-radius: 0 0 20px 20px;
">
<div class="row no-gutters">

<!--------------------------------

           SIDEBAR

-------------------------------->

<div class="col-md-auto order-md-2 text-center">

    <img src="/img/placeholder.png" 

class="rounded-circle" style="
width: 150px;
">
<div class="card border-0 mt-3 text-md-left text-muted" style="
font-size: 1.2em;
font-family: monospace;
">
<div>

    Name LastName

<hr class="w-100 my-1">

    Age

<hr class="w-100 my-1">

    male (he/him)

<hr class="w-100 my-1">

    6'0 / 183cm

<hr class="w-100 my-1">

    Job

<hr class="w-100 my-1">

    <a href="safe" style="color: #ffb2fb">content</a>

<hr class="w-100 my-1">
</div>
</div>
</div>

<!--------------------------------

         DESCRIPTION

-------------------------------->

<div class="col-md">
<p class="mt-2" style="
padding-bottom: 5px;
font-size: 24px;
font-family: monospace;
text-transform: uppercase;
color: #ffb2fb;
border-bottom: 2px solid #ffb2fb;
">

    // Title goes here

    <i class="fad fa-cat pull-right mt-1 mr-1"></i>
    

</p>
<p class="text-muted" style="
font-weight: 300;
letter-spacing: 1px;
">
    
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum...
</p>

<!--------------------------------

          MOODBOARD

-------------------------------->

<div class="row no-gutters mt-2" style="

    filter: grayscale(100%);
    /* | Remove this if you don't want greyscale images */;

">
<div class="col-md-3 col-6 p-1">
<div class="rounded bg-faded" style="

    background-image: url(/img/placeholder.png);

width: 100%;
padding-bottom: 100%;
background-size: cover;
background-position: center;">
</div>
</div>
<div class="col-md-3 col-6 p-1">
<div class="rounded bg-faded" style="

    background-image: url(/img/placeholder.png);

width: 100%;
padding-bottom: 100%;
background-size: cover;
background-position: center;">
</div>
</div>
<div class="col-md-3 col-6 p-1">
<div class="rounded bg-faded" style="

    background-image: url(/img/placeholder.png);

width: 100%;
padding-bottom: 100%;
background-size: cover;
background-position: center;">
</div>
</div>
<div class="col-md-3 col-6 p-1">
<div class="rounded bg-faded" style="

    background-image: url(/img/placeholder.png);

width: 100%;
padding-bottom: 100%;
background-size: cover;
background-position: center;">
</div>
</div>
</div>
</div>
<div class="col-auto d-none d-md-flex">
<div class="card h-100 border-left-0 mx-3"></div>
</div>
</div>
</div>
</div>
<a class="pull-right px-2" style="color: #ffb2fb;" href="https://toyhou.se/togo"><i class="fal fa-code"></i></a>
<!-- | credz. feel free to style/move but don't delete, cheers -->
<!-- | TEMPLATE AUTO-EDITED BY @SAFE HTTPS://TOYHOU.SE/SAFE || TEMPLATES GIVEN WITH EXPLICIT PERMISSION BY AUTHOR. -->
</div>
</div>
</div>