​x
 
1
<!doctype html>
2
<title>Example</title>
3
<style>
4
  .cards {
5
    display: flex;
6
    flex-wrap: wrap;
7
    align-items: stretch;
8
  }
9
  .card {
10
    flex: 0 0 200px;
11
    margin: 10px;
12
    border: 1px solid #ccc;
13
    box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
14
  }
15
  .card img {
16
    max-width: 100%;
17
  }
18
  .card .text {
19
    padding: 0 20px 20px;
20
  }
21
  .card .text > button {
22
    background: gray;
23
    border: 0;
24
    color: white;
25
    padding: 10px;
26
    width: 100%;
27
    }
28
</style>
29
​
30
<main class="cards">
31
  <article class="card">
32
    <img src="/pix/samples/23m.jpg" alt="Sample photo">
33
    <div class="text">
34
      <h3>Seamlessly visualize quality</h3>
35
      <p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
36
      <button>Here's why</button>
37
    </div>
38
  </article>
39
  <article class="card">
40
    <img src="/pix/samples/24m.jpg" alt="Sample photo">
41
    <div class="text">
42
      <h3>Completely Synergize</h3>
43
      <p>Dramatically engage seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing.</p>
44
      <button>Here's how</button>
45
    </div>
46
  </article>
47
  <article class="card">
48
    <img src="/pix/samples/22l.jpg" alt="Sample photo">
49
    <div class="text">
50
      <h3>Dynamically Procrastinate</h3>
51
      <p>Completely synergize resource taxing relationships via premier niche markets.</p>
52
      <button>Read more</button>
53
    </div>
54
  </article>
55
  <article class="card">
56
    <img src="/pix/samples/15l.jpg" alt="Sample photo">
57
    <div class="text">
58
      <h3>Best in class</h3>
59
      <p>Imagine jumping into that boat, and just letting it sail wherever the wind takes you...</p>
60
      <button>Just do it...</button>
61
    </div>
62
  </article>
63
  <article class="card">
64
    <img src="/pix/samples/25m.jpg" alt="Sample photo">
65
    <div class="text">
66
      <h3>Dynamically innovate supply chains</h3>
67
      <p>Holisticly predominate extensible testing procedures for reliable supply chains.</p>
68
      <button>Here's why</button>
69
    </div>
70
  </article>
71
  <article class="card">
72
    <img src="/pix/samples/16l.jpg" alt="Sample photo">
73
    <div class="text">
74
      <h3>Sanity check</h3>
75
      <p>Objectively innovate empowered manufactured products whereas parallel platforms.</p>
76
      <button>Stop here</button>
77
    </div>
78
  </article>
79
</main>