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