Cozy (Simple) (code)

<!---
  
  ========================================================
  
  code by Lullah
  colors used:
    > bg-dark (bootstrap) (outer border)
    > bg-faded (bootstrap) (circle icon bg; text box)
    > text-white (bootstrap) (leftside texts)
    > text-muted (bootstrap) (basic info)
    
  You may...
    > Edit this code to oblivion!
    > Recycle parts for your own use!
  
  You may not...
    > Remove my watermark!
    
  ========================================================

--->

<div class="container" style="max-width:700px;font-size:0.9em;">
  <div class="rounded p-1 bg-dark">
  <!--- background image --->
  <!--- 255, 255,255 is white while 0,0,0 is black! adjust accordingly! --->
  <!--- you can also adjust the intensity with the last number! --->
  <!--- i.e rgba(255,255,255,.5) for a stronger white overlay --->
  <div class="row no-gutters px-2 py-3" style="
  
  background-image:url(https://via.placeholder.com/);
  
  background-size:cover;background-position:center;box-shadow: inset 0 0 0 1000px rgba(255,255,255,.2);">
    
  <div class="col-md-4 p-3 pl-md-4 text-white">
    <!---- name ---->
    <div class="text-center" style="font-size:1.5em;font-variant:small-caps;">
      Name</div>
    <!---- icon ---->
    <div class="py-1"><div class="d-flex" style="">
      <img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/8706465?1604210846" class="rounded-circle p-1 bg-faded mx-auto" style="width:170px;height:170px;object-fit:cover;">
    </div></div>
    <!---- traits ---->
    <div class="text-center" style="font-size:0.85em;letter-spacing:1.5px;">
      trait. trait. trait.</div>
  </div>
  
  <div class="col-md-8 mt-3 mt-md-0 pl-md-3 pr-md-2">
    <div class="rounded bg-faded px-3 py-2" style="height:257px;overflow:auto;">
      
    <!---- profile ---->
    <div ><i class="fas fa-user fa-sm mr-1"></i><b>Profile</b><hr class="my-1"></div>
      <div class="row no-gutters">
      <div class="col-md-6 px-1">
        <!---- basic info (left) ---->
        <div class="justify-content-between">
          <span>Name</span>
          <span class="text-muted">Info</span></div>
        <div class="justify-content-between">
          <span>Nickname</span>
          <span class="text-muted">Info</span></div>
        <div class="justify-content-between">
          <span>Age</span>
          <span class="text-muted">Info</span></div>
        <div class="justify-content-between">
          <span>Height</span>
          <span class="text-muted">Info</span></div>
      </div>
      <div class="col-md-6 px-1 pr-md-1">
        <!---- basic info (right) ---->
        <div class="justify-content-between">
          <span>Occupation</span>
          <span class="text-muted">Info</span></div>
        <div class="justify-content-between">
          <span>Sexuality</span>
          <span class="text-muted">Info</span></div>
        <div class="justify-content-between">
          <span>Theme</span>
          <span><a href="">Info</a></span></div>
        <div class="justify-content-between">
          <span>Designer</span>
          <span>Username</span></div>
      </div>
      </div>
        
      <!---- summary ---->
      <div class="mt-2"><i class="fas fa-book fa-sm mr-1"></i><b>Summary</b><hr class="my-1"></div>
      <!---- content ---->
      <div class="">&nbsp;&nbsp;&nbsp;&nbsp;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.</div>
        
        
      <!---- spacer! ---->
      <div class="p-2"></div>
    </div>
  </div>
    
  <!---- moodboard ---->
  <div class="col-12 mt-3 pl-md-2"><div class="row no-gutters">
  <div class="col-6 col-md-3 pr-md-2">
        
    <!---- img 1 ---->
    <div class="rounded" style="height:150px;
        
    background-image:url(https://via.placeholder.com/150);
        
    background-size:cover;background-position:center;box-shadow: 0px 0px 3px #222;"></div>
        
  </div>
  <div class="col-6 col-md-3 pr-md-2">
        
    <!---- img 2 ---->
    <div class="rounded" style="height:150px;
        
    background-image:url(https://via.placeholder.com/150);
        
    background-size:cover;background-position:center;box-shadow: 0px 0px 3px #222;"></div>
        
  </div>
  <div class="col-6 col-md-3 pr-md-2">
        
    <!---- img 3 ---->
    <div class="rounded" style="height:150px;
        
    background-image:url(https://via.placeholder.com/150);
        
    background-size:cover;background-position:center;box-shadow: 0px 0px 3px #222;"></div>
        
  </div>
  <div class="col-6 col-md-3 pr-md-2">
        
    <!---- img 4 ---->
    <div class="rounded" style="height:150px;
        
    background-image:url(https://via.placeholder.com/150);
        
    background-size:cover;background-position:center;box-shadow: 0px 0px 5px #222;"></div>
        
  </div>
  </div></div>
  
  </div>
  </div>
  
  <!---- credit!! do not remove plz :( ---->
  <div class="text-right"><a href="https://toyhou.se/Lullah" class=""><i class="fas fa-code fa-sm"></i></a></div>
  
</div>