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