RWD • Fluid

by Fabio Dan

HTML

<main>
  <header>
    My Awesome Groceries Website
  </header>
  <ul class="list">
    <li class="item">
      <img class="image" src="https://jetimages.jetcdn.net/md5/2798e78577ad186a3f30b7e7ae901446?odnBound=576" alt="">
      <div class="content">
        <div class="title">
          Uniquely J Raw Almonds, 28 Oz
        </div>
        <div class="price">
          $12.28
        </div>
        <button class="button">Add</button>
      </div>
    </li>
    <li class="item">
      <img class="image" src="https://jetimages.jetcdn.net/md5/2798e78577ad186a3f30b7e7ae901446?odnBound=576" alt="">
      <div class="content">
        <div class="title">
          Uniquely J Raw Almonds, 28 Oz
        </div>
        <div class="price">
          $12.28
        </div>
        <button class="button">Add</button>
      </div>
    </li>
    <li class="item">
      <img class="image" src="https://jetimages.jetcdn.net/md5/2798e78577ad186a3f30b7e7ae901446?odnBound=576" alt="">
      <div class="content">
        <div class="title">
          Uniquely J Raw Almonds, 28 Oz
        </div>
        <div class="price">
          $12.28
        </div>
        <button class="button">Add</button>
      </div>
    </li>
    <li class="item">
      <img class="image" src="https://jetimages.jetcdn.net/md5/2798e78577ad186a3f30b7e7ae901446?odnBound=576" alt="">
      <div class="content">
        <div class="title">
          Uniquely J Raw Almonds, 28 Oz
        </div>
        <div class="price">
          $12.28
        </div>
        <button class="button">Add</button>
      </div>
    </li>
    <li class="item">
      <img class="image" src="https://jetimages.jetcdn.net/md5/2798e78577ad186a3f30b7e7ae901446?odnBound=576" alt="">
      <div class="content">
        <div class="title">
          Uniquely J Raw Almonds, 28 Oz
        </div>
        <div class="price">
          $12.28
        </div>
        <button class="button">Add</button>
      </div>
    </li>
    <li class="item">
  ...

CSS

/* NORMALIZE */
html {
  font-family: "Roboto";
  color: #333;
}

button {
  font-family: "Roboto";
  border: 0;
  background: none;
  cursor: pointer;
}

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* MAIN */
main {
  min-width: 320px;
  margin: 0 auto;
  border: solid 1px #CCC;
  padding: 0 0 28px 0;
}

header {
  background: #68A51C;
  color: white;
  padding: 24px 16px;
  font-size: 18px;
  font-weight: 500;
}

.list {
  display: flex;
  flex-direction: column;
}

.item {
  display: flex;  
  padding: 24px 16px;
  border-bottom: solid 1px #CCC;
}

.image {
  width: 100%;
  max-width: 200px;
  min-width: 150px;
  border: solid 1px #CCC;
}

.content {
  padding: 0 0 0 16px;  
  width: 240px;
}

.title {
  margin-bottom: 16px;
}

.price {
  margin-bottom: 16px;  
  color: #538316;
  font-weight: 500;
}

.button {
  height: 40px;
  background: #68A51C;
  color: white;
  border-radius: 4px;
  font-size: 18px;
  padding: 0 16px;
}