-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
137 lines (137 loc) · 4.58 KB
/
index.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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!--
Crafted and Designed By DesignDrastic
Author: DesignDrastic
Author URL: http://designdrastic.com
License URL: http://designdrastic.com/license
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design Drastic</title>
<!-- Default/Common Styles -->
<link rel="stylesheet" href="css/default.css">
<!-- Stylesheer -->
<link rel="stylesheet" href="css/style.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:400,700,900&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="grid gutter grid-3">
<div class="items">
<!-- Effect 1 -->
<div class="card effect1">
<div class="card-header">
<img src="svg/client5.svg" class="card-header__avatar">
<label class="card-header__lbl">The Balls</label>
</div>
<div class="card-footer">
<div class="card-footer__info">
<h4 class="card-footer__title">Lala balls</h4>
<small>- la la player</small>
</div>
</div>
<div class="card-body">
<img src="images/photo-of-ball-pit-balls-681118.jpg" class="card-image">
</div>
</div>
</div>
<div class="items">
<!-- Effect 2 -->
<div class="card effect2">
<div class="card-header m6">
<img src="svg/client2.svg" class="card-header__avatar">
<label class="card-header__lbl">Pen Pencil</label>
</div>
<div class="card-footer m6">
<div class="card-footer__info">
<h4 class="card-footer__title">Lorem ipsum</h4>
<small>- pen Pencil</small>
</div>
</div>
<div class="card-body">
<img src="images/yellow-pencil-color-in-clear-glass-case-230514.jpg" class="card-image">
</div>
</div>
</div>
<div class="items">
<!-- Effect 3 -->
<div class="card effect3">
<div class="card-header m2">
<img src="svg/client7.svg" class="card-header__avatar">
<label class="card-header__lbl">Bulb bulb</label>
</div>
<div class="card-footer m2">
<div class="card-footer__info">
<h4 class="card-footer__title">Lorem ipsum</h4>
<small>- Bulb</small>
</div>
</div>
<div class="card-body">
<img src="images/close-up-photo-ofg-light-bulb-716398.jpg" class="card-image">
</div>
</div>
</div>
</div>
<br />
<div class="grid gutter grid-3">
<div class="items">
<!-- Effect 4 -->
<div class="card effect4">
<div class="card-header">
<img src="svg/client3.svg" class="card-header__avatar">
<label class="card-header__lbl">Tea Coffee</label>
</div>
<div class="card-footer">
<div class="card-footer__info">
<h4 class="card-footer__title">Lorem ipsum</h4>
<small>- tea coffee</small>
</div>
</div>
<div class="card-body">
<img src="images/cup.jpg" class="card-image">
</div>
</div>
</div>
<div class="items">
<!-- Effect 5 -->
<div class="card effect5">
<div class="card-header">
<img src="svg/client1.svg" class="card-header__avatar">
<label class="card-header__lbl">Three three</label>
</div>
<div class="card-footer">
<div class="card-footer__info">
<h4 class="card-footer__title">Lala three</h4>
<small>- three</small>
</div>
</div>
<div class="card-body">
<img src="images/grey-3-chain-1061140.jpg" class="card-image">
</div>
</div>
</div>
<div class="items">
<!-- Effect 6 -->
<div class="card effect6">
<div class="card-header">
<img src="svg/client4.svg" class="card-header__avatar">
<label class="card-header__lbl">The balls</label>
</div>
<div class="card-footer">
<div class="card-footer__info">
<h4 class="card-footer__title">Lorem ipsum</h4>
<small>- Balls</small>
</div>
</div>
<div class="card-body">
<img src="images/adidas-ball-game-grass-39362.jpg" class="card-image">
</div>
</div>
</div>
</div>
</div>
</body>
</html>