html make card

Solutions on MaxInterview for html make card by the best coders in the world

showing results for - "html make card"

1box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0px, 0px, 50px rgba(0, 0, 0, 0.2)

1<!DOCTYPE html>
2<html>
3<head>
4 <title>Cards</title>
5</head>
6
7<style type="text/css">
8
9
10*{
11 margin: 0px;
12 padding: 0px;
13}
14body{
15 font-family: arial;
16}
17.main{
18
19 margin: 2%;
20}
21
22.card{
23     width: 20%;
24     display: inline-block;
25     box-shadow: 2px 2px 20px black;
26     border-radius: 5px; 
27     margin: 2%;
28    }
29
30.image img{
31  width: 100%;
32  border-top-right-radius: 5px;
33  border-top-left-radius: 5px;
34  
35
36 
37 }
38
39.title{
40 
41  text-align: center;
42  padding: 10px;
43  
44 }
45
46h1{
47  font-size: 20px;
48 }
49
50.des{
51  padding: 3px;
52  text-align: center;
53 
54  padding-top: 10px;
55        border-bottom-right-radius: 5px;
56  border-bottom-left-radius: 5px;
57}
58button{
59  margin-top: 40px;
60  margin-bottom: 10px;
61  background-color: white;
62  border: 1px solid black;
63  border-radius: 5px;
64  padding:10px;
65}
66button:hover{
67  background-color: black;
68  color: white;
69  transition: .5s;
70  cursor: pointer;
71}
72
73</style>
74<body>
75
76<div class="main">
77
78 <!--cards -->
79
80<div class="card">
81
82<div class="image">
83   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Gfp-missouri-st-louis-clubhouse-pond-and-scenery.jpg/1199px-Gfp-missouri-st-louis-clubhouse-pond-and-scenery.jpg">
84</div>
85<div class="title">
86 <h1>
87Write title Here</h1>
88</div>
89<div class="des">
90 <p>You can Add Desccription Here...</p>
91<button>Read More...</button>
92</div>
93</div>
94<!--cards -->
95
96
97<div class="card">
98
99<div class="image">
100   <img src="https://cdn.pixabay.com/photo/2018/01/09/03/49/the-natural-scenery-3070808_1280.jpg">
101</div>
102<div class="title">
103 <h1>
104Write title Here</h1>
105</div>
106<div class="des">
107 <p>You can Add Desccription Here...</p>
108<button>Read More...</button>
109</div>
110</div>
111<!--cards -->
112
113
114<div class="card">
115
116<div class="image">
117   <img src="https://cdn.pixabay.com/photo/2015/11/07/11/41/lake-1031405_1280.jpg">
118</div>
119<div class="title">
120 <h1>
121Write title Here</h1>
122</div>
123<div class="des">
124 <p>You can Add Desccription Here...</p>
125<button>Read More...</button>
126</div>
127</div>
128<!--cards -->
129
130
131<div class="card">
132
133<div class="image">
134   <img src="https://cdn.pixabay.com/photo/2018/01/09/03/49/the-natural-scenery-3070808_1280.jpg">
135</div>
136<div class="title">
137 <h1>
138Write title Here</h1>
139</div>
140<div class="des">
141 <p>You can Add Desccription Here...</p>
142<button>Read More...</button>
143</div>
144</div>
145<!--cards -->
146
147
148<div class="card">
149
150<div class="image">
151   <img src="https://cdn.pixabay.com/photo/2018/01/09/03/49/the-natural-scenery-3070808_1280.jpg">
152</div>
153<div class="title">
154 <h1>
155Write title Here</h1>
156</div>
157<div class="des">
158 <p>You can Add Desccription Here...</p>
159<button>Read More...</button>
160</div>
161</div>
162<!--cards -->
163
164<div class="card">
165
166<div class="image">
167   <img src="https://cdn.pixabay.com/photo/2018/01/09/03/49/the-natural-scenery-3070808_1280.jpg">
168</div>
169<div class="title">
170 <h1>
171Write title Here</h1>
172</div>
173<div class="des">
174 <p>You can Add Desccription Here...</p>
175<button>Read More...</button>
176</div>
177</div>
178<!--cards -->
179
180<div class="card">
181
182<div class="image">
183   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Gfp-missouri-st-louis-clubhouse-pond-and-scenery.jpg/1199px-Gfp-missouri-st-louis-clubhouse-pond-and-scenery.jpg">
184</div>
185<div class="title">
186 <h1>
187Write title Here</h1>
188</div>
189<div class="des">
190 <p>You can Add Desccription Here...</p>
191<button>Read More...</button>
192
193</div>
194</div>
195<!--cards -->
196
197
198<div class="card">
199
200<div class="image">
201   <img src="https://cdn.pixabay.com/photo/2018/01/09/03/49/the-natural-scenery-3070808_1280.jpg">
202</div>
203<div class="title">
204 <h1>
205Write title Here</h1>
206</div>
207<div class="des">
208 <p>You can Add Desccription Here...</p>
209<button>Read More...</button>
210</div>
211</div>
212<!--cards -->
213
214
215<div class="card">
216
217<div class="image">
218   <img src="https://cdn.pixabay.com/photo/2015/11/07/11/41/lake-1031405_1280.jpg">
219</div>
220<div class="title">
221 <h1>
222Write title Here</h1>
223</div>
224<div class="des">
225 <p>You can Add Desccription Here...</p>
226<button>Read More...</button>
227</div>
228</div>
229</div>
230</body>
231</html>
232
233

1
2  <div class="card">
3    <div class="card-content">
4      <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
5    </div>
6    <div class="card-tabs">
7      <ul class="tabs tabs-fixed-width">
8        <li class="tab"><a href="https://amzn.to/3jOaZKL">Test 1</a></li>
9        <li class="tab"><a class="active" href="#test5">Test 2</a></li>
10        <li class="tab"><a href="#test6">Test 3</a></li>
11      </ul>
12    </div>
13    <div class="card-content grey lighten-4">
14      <div id="test4">Test 1</div>
15      <div id="test5">Test 2</div>
16      <div id="test6">Test 3</div>
17    </div>
18  </div>

similar questions

queries leading to this page