-
Notifications
You must be signed in to change notification settings - Fork 0
/
20230705_BST.html
96 lines (76 loc) · 2.49 KB
/
20230705_BST.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding:0;
}
.cardlist{
}
.card{
margin: 0 15px 15px 15px;
border: 1px solid black;
padding:10px;
box-sizing: border-box;
}
.card img{
width: 100%;
border: 1px solid red;
vertical-align: top;
}
@media screen and (min-width: 768px ) {
.cardlist{
display: flex;
flex-wrap: wrap;
}
.card{
width: calc(100% /3 - 30px );
}
@media screen and (min-width: 1024px ) {
.card{
width: calc(100% /4 - 30px );
}
}
}
@media screen and (min-width: 1024px ) {
.card{
width: calc(100% /5 - 30px );
}
}
</style>
</head>
<body>
<div class="cardlist">
<div class="card">
<h3>title</h3>
<img src="https://picsum.photos/300/200/?random=10">
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, cum atque ipsam magni, nam sapiente necessitatibus eos, aut similique pariatur sunt natus dolore? Consequatur consectetuit eveniet ea totam!</P>
</div>
<div class="card">
<h3>title</h3>
<img src="https://picsum.photos/300/200/?random=10">
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, cum atque ipsam magni, nam sapiente necessitatibus ea totam!</P>
</div>
<div class="card">
<h3>title</h3>
<img src="https://picsum.photos/300/200/?random=10">
<P>Lorempsam magni, nam sapiente necessitatibus eos, aut similique pariatur sunt natus dolore? Consequatur consectetur placeat, reprehenderit eveniet ea totam!</P>
</div>
<div class="card">
<h3>title</h3>
<img src="https://picsum.photos/300/200/?random=10">
<P>Lorem ipsuma totam! lorem in20 </P>
</div>
<div class="card">
<h3>title</h3>
<img src="https://picsum.photos/300/200/?random=10">
<P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum, cum atque ipsam magni, nam sapiente necessitatib totam! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae facere eius alias quos error impedit suscipit possimus. Nihil quas distinctio voluptate ducimus voluptatem deserunt ipsum excepturi magnam, quasi sunt tempora.</P>
</div>
</div>
</body>
</html>