how to create a card using css

Solutions on MaxInterview for how to create a card using css by the best coders in the world

Search
showing results for - "how to create a card using css"
Valerio
14 May 2017
1.card {
2  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
3  transition: 0.3s;
4  width: 15%;
5  height: 200px;
6  background: white;
7  display: flex;
8  justify-content: center;
9  align-items: center;
10  border-radius: 5%;
11  }
12  
13  .card:hover {
14    cursor: pointer;
15    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
16    width: 20%;
17    height: 250px;
18  }
source
Flavien
11 May 2019
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
similar questions
card template csshtml css card carouselcards design html csshow to centralize cards in csshow to create triangle in under a card in csscard animation csscss cardscard with image csshtml css id cardcss circle card
queries leading to this page
html card w3schoolscss card listhow to create a card using csssimple css cardshow to create a card on csshtml cardcards in html pagecss to create card with imagedesigning cards in csstags on css cardhow to add interactive cards in htmlcss info cardcreate card layout cssinteractive cards html css javascriptcards in css and htmlhtml css card itemcreating card csscreating css cardscss for cardcard css codecustom cards htmlcreate cards in htmlcss card codecss card propertieswebsite create cards csshow to make cards using html css jscard details csscard in html csscards figure csshow to create cards in htmlabout card csshow to add a card htmladding cards in htmlhtml style cardcss card viewmake simple cards in htmldisplay cards csshow to make a card whith html and csshow to access card csshow do i create a card in htmla card in htmlcraete card with csscss image cardwhat to put on about card cssabout us html css cardssimple card html cssinfromation card cssdisplay card csscss card viewstyle a card csshow to create a card html cssdisplaying in cards cssinformations card html cssmake a card in csshtml and css simple cardshow to make cards using csshow to display information in card csscard design in html cssmaking card csssmall card html css examplew3 css cardscard example htmlcard box csscreate a card htmlcalling card example csshow to add cards in htmlhow to make card layout using html and csscard style cssexample cards htmlhow to use cards in htmlbuy card using html and csshtml css card with imagehow to create a card in html w3schoolspure html css cardw3schools card csscss display cardscard html and csshow to make card htmlput code of html and css in card websiteways to display cards in cssdetails card csshow to create cards with cssstyle my cards csscreate a card with csshtml cardshtml cardscard en csshtml display cardscard css examplehow to make card in htmlcards cssmake yout own css cardcards using html and csscards in html cscss cards w3schoolshow to make css cardmake cards in htmlhow to make a card csscard component cssget css for cardstyle card cssdiv card csscss reference cardmaking cards using csscards description csshow to create a card in html w3 schoolsa card htmlhmtl css cardcss card layouthow to design a card with html and csscreate cards with html and csscss cardcard css w3schoolscss card example basic card in csshtml css cardshow to make a card in csscss card linkcard html css card html cssmake card with csscard css stylehow to make css cardscard using csscards in cssput code of html and css in cardplace card on card in cssadd new css cardmaking cards in htmlcr c3 a9er une card html cssinfo card csssimple cards htmlhow to style cards csscreate individual cards using csssimple html cardcard using html csshow to create card in csscss style cardshtml create cardscreat css cardshow to style card in csshtml css card layoutcreate a card in htmlcards css detailscards display in csscss card w3schoolscard layouts css htmlsimple html css cardscard html css codemake cards htmlmake a card csscard sample cssdisplay card elements csshtml and css cardhtml how to make a cardsimple cards csscard css imagecss cardcard view in html csscard properties in csscreate card with image csshow to create a card view in htmlcards with cssdevelop a card with an image in css htmlcreate card in csssimple css cardcard in html and csscss for cardshow to create cards cssbuilding a card with csscss card objectssmall card html and cssstyle cards csshow to create card in html cssmaking a card in html en cssdigital card csshtml make cardhtml css cardcard with html csshtml card w3ccards csscard in csscard examples cssw3school cards csshtml creating cardcards html csscustom card html csscss cardsproperties of a card csscss info cardsw3school css cardcss create cardhow to make cards in html csswhat is card in csscard in html simpleabout card using html csshow make card with csshow to make cards in cssmake cards in csscard en css simplecard csscss card imagehow to create a card with image in csshow make a card in csshow to create a card in csshow ro make card in htmldesign ways to display cards in cssmasion cards in csscard make html and cssdiv adding cards css boxmake a card with details in csscard css htmlhow to make a card htmlcard section csscss about cardhtml how to make cardscard details html csshtml and css cardshow can create a card in html cssbuild a card with cssmake card using csshtml a cardcards using cssabout us card html csscard view cssinformation card csscard css examplescard with csshtml card csscss code for cardsdesign a card in csshtml css card stylehow to create a card in htmlhow to create cards in csscards in html and csscardds csshow to make a card in htmlinfo cards csshtml code for cardshow to create a card using css