Host to BOS

Host to BOS

by pj_js15

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="main-container">
  <div class="section-container">

    <div class="sub-section">
    
      <div class="title margin-right-10px">General information</div>
      <div class="bordered-container">
      
        <div class="title-2">
          Automated Charge Through retailers are able to collect a “host file” containing the retailer selected ‘My Range’ of charge through products on a weekly basis. Key points are
        </div>

        <ul>
          <li>Host is only available in V7 format.</li>
          <li>Weekly Maintenance host is available from Monday each week.</li>
          <li>Host includes normal product and price updates, as well as any promotions that may be negotiated on those products.</li>
          <li>Initially, the host will include key lines previously hosted in the normal Metcash host, such as Pacific Brands and Parmalat Milk. Some current Metcash hosted directs will cease to be hosted until the Supplier moves to AutoCT.</li>
        </ul>

        <div class="title-2">
          This means AutoCT retailers should collect 2 Host Files each week
        </div>

        <ul>
          <li>Your normal weekly Metcash host; and</li>
          <li>A separate host file for all hosted directs (includes Automated Charge Through products and initially, key warehouse hosted directs).</li>
        </ul>
      </div>
      
    </div>




    <div class="sub-section sub-section-no-left-padding">
      <div class="title">Support</div>

      <div class="title-2">
        For AutoCT Support, Contact Metcash Retail Technology
      </div>

      <ul>
        <li>Phone: 1300 138 220</li>
        <li>Email: [email protected]</li>
        <li>Further information about hosting and support available by visiting the Retail Technology Website: https://metcashretailtechnology.com.au/</li>
      </ul>

      <div class="title-2">
        Metcash Retail...

CSS

* {
  font-family: Lato;
  font-style: normal;
  font-weight: normal;
  line-height: 18px;
  font-size: 14px;
}

.main-container {
  background-color: #FFF;
}

.section-container {
  background-color: #FFF;
  max-width: 1000px;
}
.bordered-container{
  border-right: 1px solid #EEE;
  padding-right: 20px;
}
.sub-section {
  //border: 1px solid #EEE;
  display: inline-block;
  padding: 10px 15px;
  min-height: 525px;
  width: 46.5%;
  vertical-align: top;
}
.sub-section-no-left-padding{
  padding-left: 0;
}

.title {
  background: #1087B0;
  border-radius: 2px;
  font-family: Lato;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  font-size: 24px;
  color: #FFFFFF;
  padding: 5px;
  margin-bottom: 20px;
}

.margin-right-10px{
  margin-right: 15px;
}

.title-2 {
  font-family: Lato;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  font-size: 18px;
  color: #666666;
}

ul {
  padding-left: 20px;
  list-style: none;
  margin-bottom: 40px;
}

li {
  margin-bottom: 10px;
}

li:before {
  font-family: 'FontAwesome';
  content: '\f058';
  color: #00B393;
  margin: 0 10px 0 -15px;
}