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