-
Notifications
You must be signed in to change notification settings - Fork 0
/
media test.html
51 lines (46 loc) · 1.71 KB
/
media test.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
<!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;
}
#hey{
background-color: black;
height: 1000px;
color: aliceblue;
}
@media screen and (max-width:800px){
#hey{
background-color: blueviolet;
}
}
.list{
color: rgb(0, 0, 0);
display: inline-grid;
grid-template-columns: 100px;
background-color: antiquewhite;
grid-template-rows: 200px;
column-gap: 100px;
row-gap: 1000px;
justify-content: space-betwee;
}
</style>
</head>
<body>
<div id="hey">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cupiditate molestiae doloremque deleniti eos laborum perspiciatis doloribus fugiat laboriosam deserunt eum eius repellat reprehenderit, cum facere nobis maxime, praesentium magnam hic soluta! Molestias est impedit ad voluptatum deleniti quaerat corrupti. Atque provident harum ipsum accusantium? Fugit similique corporis consequatur consequuntur laudantium aliquid error. Eveniet et voluptatum ipsa natus possimus neque? Laboriosam.
<div id="container">
<div class="list">1</div>
<div class="list">1</div>
<div class="list">1</div>
<div class="list">1</div>
</div>
</div>
</body>
</html>