Squared Off (-> Code Custom Color)

Hukiolukio

Profile



<!--- Notes ---

- This profile uses custom colors, meaning you can change the colors to your liking.
- Use ctrl+f to find and replace each color
- Color 1: #9BC995
- Color 2: #6B5B91
- Color 2: #6F829A

- Rules and more info: https://toyhou.se/~forums/16.htmlcss-graphics/39007.-free-html-templates

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


<div class="container">
  
  
  <!--------------------- About Section --------------------->
  <p class="display-1 mb-2" style="color:#9BC995;"><i class="fas fa-star"></i> 
    
    <!-- Put Image Here -->
    Name
    
  </p>
  <div class="card bg-faded card-block rounded-0 mb-4" style="border-width:2px; border-color:#9BC995;">
    <h2 class="text-right" style="color:#9BC995;"><em>
      
      <!-- Put Quote Here -->
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
      
    </em></h3>
    
    <!-- Paragraphs: About -->
    <p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Aliquam quis fringilla erat. Morbi sollicitudin id lorem eu efficitur. Mauris varius id magna vitae ullamcorper. In gravida libero consectetur, lobortis nisl sit amet, pellentesque ligula. Suspendisse tincidunt feugiat posuere. Duis dui erat, accumsan a aliquam eu, efficitur a tortor. Nunc molestie, leo in commodo aliquam, tellus augue tempor velit, non placerat ex sem non nisi.</p>
    <p style="text-align: justify;">Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Aliquam quis fringilla erat. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna.</p>
    
    <h2 style="color:#9BC995;"><i class="far fa-star"></i> Appearance</h4>
    <div class="mb-2" style="height:2px; width:100%; background-color:#9BC995;"></div>
    
    <!-- Paragraphs: Appearance -->
    <p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Aliquam quis fringilla erat.</p>
    
  </div>
  <!------------------- About Section End ------------------->
  
  
  <!------------------- Backstory Section ------------------->
  <p class="text-right display-3 mb-2" style="color:#6B5B91;">Backstory <i class="fas fa-star"></i></p>
  <div class="card bg-faded card-block rounded-0 mb-4" style="border-width:2px; border-color:#6B5B91;">
    <h2 style="color:#6B5B91;"><em>
      
      <!-- Put Quote Here -->
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
      
    </em></h3>
    
    <!-- Paragraphs: Backstory -->
    <p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Aliquam quis fringilla erat. Morbi sollicitudin id lorem eu efficitur. Mauris varius id magna vitae ullamcorper. In gravida libero consectetur, lobortis nisl sit amet, pellentesque ligula. Suspendisse tincidunt feugiat posuere. Duis dui erat, accumsan a aliquam eu, efficitur a tortor. Nunc molestie, leo in commodo aliquam, tellus augue tempor velit, non placerat ex sem non nisi.</p>
    <p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Aliquam quis fringilla erat. Morbi sollicitudin id lorem eu efficitur. Mauris varius id magna vitae ullamcorper. In gravida libero consectetur, lobortis nisl sit amet, pellentesque ligula. Suspendisse tincidunt feugiat posuere. Duis dui erat, accumsan a aliquam eu, efficitur a tortor. Nunc molestie, leo in commodo aliquam, tellus augue tempor velit, non placerat ex sem non nisi.</p>
    
    <h2 class="text-right" style="color:#6B5B91;">Present Day <i class="far fa-star"></i></h4>
    <div class="mb-2" style="height:2px; width:100%; background-color:#6B5B91;"></div>
    
    <!-- Paragraphs: Present Day -->
    <p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante. Aliquam magna libero, dictum sit amet scelerisque ac, scelerisque tincidunt magna. Nulla et consectetur diam. Aliquam ipsum mi, tristique sed vestibulum ac, aliquet eget magna. Aliquam quis fringilla erat.</p>
    
  </div>
  <!------------------- Backstory Section ------------------->
  
  
  <!------------------ Relationship Section ------------------>
  <p class="display-3 mb-2" style="color:#6F829A;"><i class="fas fa-star"></i> Relationships</p>
  <div class="card bg-faded card-block rounded-0" style="border-width:2px; border-color:#6F829A;">
    <div class="row justify-content-between">
      
      
      <!----------------- First Relationship ----------------->
      <div class="col-md-4 mb-3">
        
        <!-- Character Name and Profile Link -->
        <h3 style="color:#6F829A;"><i class="far fa-star"></i> <a href="link" style="color:#6F829A;">Name</a></h3> 
        
        <div class="mb-2" style="height:2px; width:100%; background-color:#6F829A;"></div>
        
        <!-- Paragraphs-->
        <p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tortor ligula. Proin quis luctus eros. Curabitur et lacinia tellus, sed feugiat ipsum. Suspendisse quam nisi, aliquam sit amet mauris vitae, pellentesque varius massa.</p>
      </div>
      <!--------------- First Relationship End --------------->
      
      
      <!----------------- Second Relationship ----------------->
      <div class="col-md-4 mb-3">
        
        <!-- Character Name and Profile Link -->
        <h3 style="color:#6F829A;"><i class="far fa-star"></i> <a href="link" style="color:#6F829A;">Name</a></h3> 
        
        <div class="mb-2" style="height:2px; width:100%; background-color:#6F829A;"></div>
        
        <!-- Paragraphs -->
        <p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tortor ligula. Proin quis luctus eros. Curabitur et lacinia tellus, sed feugiat ipsum. Suspendisse quam nisi, aliquam sit amet mauris vitae, pellentesque varius massa.</p>
        
      </div>
      <!--------------- Second Relationship End --------------->
      
      
      <!----------------- Third Relationship ----------------->
      <div class="col-md-4 mb-3">
        
        <!-- Character Name and Profile Link -->
        <h3 style="color:#6F829A;"><i class="far fa-star"></i> <a href="link" style="color:#6F829A;">Name</a></h3> 
        
        <div class="mb-2" style="height:2px; width:100%; background-color:#6F829A;"></div>
        
        <!-- Paragraphs -->
        <p style="text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel tortor ligula. Proin quis luctus eros. Curabitur et lacinia tellus, sed feugiat ipsum. Suspendisse quam nisi, aliquam sit amet mauris vitae, pellentesque varius massa.</p>
        
      </div>
      <!--------------- Third Relationship End --------------->
      
    </div>
  </div>
  <!---------------- Relationship Section End ---------------->
  
  <!-- Credits, Don't Remove -->
  
<p class="text-right mb-0" style="color:#6F829A;">profile html by <a href="https://toyhou.se/hukiolukio" style="color:#6F829A;"><i class="fas fa-user"></i> hukiolukio</p>
  
</div>