Navigate to Content >> Edit Web Pages >> New Web Page +



Here is the code that is required require to make the get matched page look like this one: http://interiordesignersdemo.directoryup.com/find-your-next-designer


HTML Code:


<!-- PAGE BANNER -->
<div class="content-container">
  <div class="alert nomargin bg-primary">
    <div class="clearfix clearfix-lg"></div>
    <div class="container">
      <div class="row">
        <div class="pagehead notmargin nobmargin hmargin hpad">

          <h1>
            Get Quotes From Multiple Professionals
          </h1>

          <h3 class="hmargin hpad nobmargin line-height-lg">
            Receiving quotes is fun and easy. Take a moment to describe your needs below and our team will match you with the best professionals. Get multiple bids and pick the best one!
          </h3>

        </div>
      </div>
    </div>
    <div class="clearfix clearfix-lg"></div>
  </div>
</div>

<!-- PAGE BODY CONTENT -->
<div class="content-container tpad" style="background: #f7f7f7;color:#404042;">  
  <div class="clearfix clearfix-lg"></div>  
  <div class="container">    
    <div class="row">    
      <div class="col-md-6">
        
        <!-- START TESTIMONIAL -->
        <div class="module">
          
          <!-- IMAGE -->
          <img class="img-thumbnail img-circle pull-left rmargin" src="/images/sample-review.jpg"/>
          
          <!-- BODY -->
          <h3 class="tmargin line-height-lg">
            This is a happy testimonial from a customer who was connected with professionals and received quotes. 
          </h3>
          
          <hr>
          
          <!-- NAME -->
          <p>
            John Smith - Los Angeles, CA
          </p>
          
          <div class="clearfix"></div>
        </div>
        <!-- END TESTIMONIAL -->

        <h2>
          The Best Way To Get Quotes
        </h2>
        
        <p class="h4 line-height-xl tmargin bpad inline-block">                 
          <i class="fa fa-check-circle fa-3x text-success pull-left" aria-hidden="true"></i>                  
          This is a great reason to use our website. You'll love the features and the benefits you'll receive.               
        </p> 
        
        <p class="h4 line-height-xl bpad">                  
          <i class="fa fa-check-circle fa-3x text-success pull-left" aria-hidden="true"></i>                  
          This is a great reason to use our website. You'll love the features and the benefits you'll receive.               
        </p>  
        
        <p class="h4 line-height-xl bpad ">                 
          <i class="fa fa-check-circle fa-3x text-success pull-left" aria-hidden="true"></i>                  
          This is a great reason to use our website. You'll love the features and the benefits you'll receive.               
        </p>
        
      </div>

      <!-- GET MATCHED FORM -->
      <div class="col-md-6">              
        <div class="well nomargin">
          
          <h2 class="tmargin bold text-center">                             
            Fill In The Form to Get Quotes                        
          </h2>
          
          <hr>
          
          
          <?=form("bootstrap_get_match","",$w[website_id],$w)?>
          
        </div>
        <div class="clearfix clearfix-lg"></div>
      </div>

    </div>
  </div>
  <div class="clearfix clearfix-lg"></div>  
</div>

<!-- DISPLAY RECENT MEMBERS WIDGET -->
[widget=Bootstrap Theme - Display - Recent Members]



Paste it here: 




CSS Code: 


.well {box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);}



Then scroll down and paste the CSS Code:



Make sure to select the "Full-Width Page" here and save the changes: