Display multiple loan options on a webpage

by Tan

HTML

<div class="layout_container">

<div class="featured_container">As Featured on:

<div class="featured_flex">
<div class="featured_item"></div>
<div class="featured_item"></div>
<div class="featured_item"></div>
<div class="featured_item"></div>
<div class="featured_item"></div>
<div class="featured_item"></div>
<div class="featured_item"></div>
<div class="featured_item"></div>
<div class="featured_item"></div>
<div class="featured_item"></div>
<div class="featured_item"></div>
<div class="featured_item"></div>
</div>

</div>

<div class="service_container">
<div class="service_item"><h2>Bridging Loans</h2>
<p class="content">As independent bridging finance brokers we have access to all the best lenders. Our very experienced, friendly team will ensure that you receive the best possible bridging deal.</p>

<ul>
<li>Loans from £50,000 to £500 million</li>
<li>Loan terms from 1 to 24 months</li>
<li>Fast turnaround</li>
<li>No broker fees</li>
</ul>

<a class="footer">Bridging Loan Calculator</a>
</div>


<div class="service_item"><h2>Development Finance</h2>
    
<p>Our specialist development finance broker team have access to all the most competitive and flexible development plans. They will also ensure that the whole process is kept as simple as possible.</p>
<ul>
<li>Loans from £100,000 to £1 billion</li>
<li>Fast funding</li>
<li>Flexible plans</li>
<li>No broker fees</li>
</ul>
<a>Development Finance Calculator</a>
</div>


<div class="service_item"><h2>Commercial Mortgages</h2>
      
<p>We have an awards winning team who have extensive facilities to provide the best deals on business loans and commercial mortgages throughout the UK.</p>
<ul>
<li>Commercial Mortgages from £100,000 to £250 million</li>
<li>Full commercial or semi-commercial properties</li>
<li>Interest Only options available</li>
<li>Access to all the best lenders</li>
</ul>
<a>Commercial Mortgage Calculator</a>
</div>


<div...

CSS

body {background-color:#F1F5FA;}

.layout_container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: center;

}

.featured_container {text-align:center;margin:20px 0;}

.featured_flex {max-width:1010px;margin:20px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: stretch;
    align-items: flex-start;
    gap:10px;
    }

.featured_item {width:160px;height:80px;background-color:pink;}

.service_container {max-width:1400px;margin:20px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: stretch;
    gap:20px;
    }
    .service_item {width:25%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;}

    .service_item h2 {background-color:#003162;color:#ffffff;padding:10px 15px;border-radius:0px 20px 0 0;font-weight:bold;margin:0;font-size:18px;}
    .service_item p {background-color:#ffffff;padding:10px 15px;line-height:24px;margin:0;}
    .service_item ul {background-color:#ffffff;padding:0px 15px 10px 34px;flex: 1 1 auto;line-height:22px;margin:0;}
    .service_item ul li {padding:5px 0;color:#39509e;font-weight:bold;}
    .service_item a {background-color:#569e39;color:#ffffff;padding:15px 15px;border-radius:0 0 20px 20px;text-align:center;font-weight:bold;}

@media only screen and (max-width: 1200px) {
  .service_container {
    flex-wrap: wrap; 
    }
 .service_item {width: calc(50% - 20px); }
}

@media only screen and (max-width: 600px) {
 .service_item {width: 100%; }

 .featured_container:nth-child(1) {
    order: 2;
    }
    
}