css cards

Solutions on MaxInterview for css cards by the best coders in the world

showing results for - "css cards"

14 Oct 2016

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

Colleen

30 Jun 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

source

Yannic

02 Aug 2020

1<div class="row row-cols-1 row-cols-md-3 g-4">
2  <div class="col">
3    <div class="card">
4      <img src="..." class="card-img-top" alt="...">
5      <div class="card-body">
6        <h5 class="card-title">Card title</h5>
7        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
8      </div>
9    </div>
10  </div>
11  <div class="col">
12    <div class="card">
13      <img src="..." class="card-img-top" alt="...">
14      <div class="card-body">
15        <h5 class="card-title">Card title</h5>
16        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
17      </div>
18    </div>
19  </div>
20  <div class="col">
21    <div class="card">
22      <img src="..." class="card-img-top" alt="...">
23      <div class="card-body">
24        <h5 class="card-title">Card title</h5>
25        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
26      </div>
27    </div>
28  </div>
29  <div class="col">
30    <div class="card">
31      <img src="..." class="card-img-top" alt="...">
32      <div class="card-body">
33        <h5 class="card-title">Card title</h5>
34        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
35      </div>
36    </div>
37  </div>
38</div>

source

Emilia

05 Aug 2017

1// Hello Friends, I have listed over 30+ best card designs made with HTML, CSS, and JS. Check out these excellent CSS card design examples which are available on Codepen.
2
3<div class="container">
4    <div class="cards grid-row">
5      <div class="card">
6        <div class="card-top">
7          <img src="img1.jpg" alt="Blog Name">
8        </div>
9        <div class="card-info">
10          <h2>JavaScript Quote Generator</h2>
11          <span class="date">Monday, Jan 20, 2021</span>
12          <p class="excerpt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
13        </div>
14        <div class="card-bottom flex-row">
15          <a href="#" class="read-more">Read Full Blog</a>
16          <a href="#" class="button btn-yellow">Blog</a>
17        </div>
18      </div>
19      <div class="card">
20        <div class="card-top">
21          <img src="img2.jpg" alt="Blog Name">
22        </div>
23        <div class="card-info">
24          <h2>How to Build HTML Minifier</h2>
25          <span class="date">Monday, Jan 20, 2021</span>
26          <p class="excerpt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
27        </div>
28        <div class="card-bottom flex-row">
29          <a href="#" class="read-more">Read Full Blog</a>
30          <a href="#" class="button btn-sky">Blog</a>
31        </div>
32      </div>
33      <div class="card">
34        <div class="card-top">
35          <img src="img3.jpg" alt="Blog Name">
36        </div>
37        <div class="card-info">
38          <h2>How to Build Signature Pad</h2>
39          <span class="date">Monday, Jan 20, 2021</span>
40          <p class="excerpt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
41        </div>
42        <div class="card-bottom flex-row">
43          <a href="#" class="read-more">Read Full Blog</a>
44          <a href="#" class="button btn-dpink">Blog</a>
45        </div>
46      </div>
47      <div class="card">
48        <div class="card-top">
49          <img src="img4.jpeg" alt="Blog Name">
50        </div>
51        <div class="card-info">
52          <h2>How to Build Gsap Gallery</h2>
53          <span class="date">Monday, Jan 20, 2021</span>
54          <p class="excerpt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
55        </div>
56        <div class="card-bottom flex-row">
57          <a href="#" class="read-more">Read Full Blog</a>
58          <a href="#" class="button btn-dpink">Blog</a>
59        </div>
60      </div>
61    </div>    
62  </div>
63  
64  
65  
66  //CSS
67  
68  
69  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
70* {
71    padding: 0;
72    margin: 0;
73    font-family: 'Poppins', sans-serif;
74}
75body {
76  display: flex;
77  align-items: center;
78  justify-content: center;
79  height: 100vh;
80  width: 100vw;
81  overflow-x: hidden;
82  background: #e8eff7;
83}
84.grid-row {
85  display: grid;
86  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
87  grid-gap: 20px;
88  margin: 20px 0;
89}
90.card-top img {
91  display: block;
92  width: 100%;
93}
94.container {
95  width: 95%;
96  margin: auto;
97}
98.card {
99  background: #fff;
100  padding: 20px;
101  border-radius: 20px;
102  box-shadow: 0px 0px 10px rgb(0 0 0 / 20%);
103}
104.card-top {
105  border-top-left-radius: 20px;
106  border-top-right-radius: 20px;
107  overflow: hidden;
108}
109.card-info h2 {
110  font-size: 18px;
111  margin: 10px 0 5px 0;
112}
113.date {
114  margin-bottom: 10px;
115}
116span,p {
117  font-size: 15px;
118  display: block;
119}
120.excerpt {
121  color: #aeaeae;
122}
123.flex-row {
124  display: flex;
125  align-items: center;
126  justify-content: space-between;
127}
128.card-bottom {
129  margin-top: 20px;
130}
131.button {
132  text-decoration: unset;
133  font-weight: 600;
134  text-transform: uppercase;
135  color: #4e4e4e;
136  width: 80px;
137  text-align: center;
138  font-size: 15px;
139  line-height: 30px;
140  border-radius: 5px;
141  background: #f2f4f6;
142}
143.read-more {
144  text-decoration: unset;
145  color: #000;
146  font-weight: 600;
147}
148.btn-yellow {
149  background: #ffb91d;
150}
151.btn-sky {
152  background: #d2f9fe;
153}
154.btn-dpink {
155  background: #e8d3fc;
156}
157

source

Laura

27 May 2018

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

cards design html css card animation css card template css html css card carousel css circle card how to centralize cards in css how to create triangle in under a card in css

queries leading to this page