-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest7.html
60 lines (59 loc) · 1.86 KB
/
test7.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
<!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;
background-color: rgb(141, 190, 233);
}
#head{
background-color: rgb(29, 18, 41);
border: solid 5px cornflowerblue;
border-radius: 5px;
}
ul{
display: inline-grid;
grid-template-columns: auto auto auto;
}
ul li{
list-style-type:none;
font-size: x-large;
margin: 0 35px;
}
@media screen and (max-width:1000px) {
#container{
background-color: aqua;
}
}
@media screen and (max-width:800px) {
*{
background-color: rgb(38, 54, 54);
}
}
@media screen and (max-width:450px) {
*{
background-color: rgb(2, 31, 31);
}
}
</style>
</head>
<body>
<header id="head">
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
</header>
<div id="container">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi vitae delectus nam molestias, quibusdam soluta corrupti necessitatibus amet dignissimos animi, doloremque iusto dolores odio. Ad, hic aperiam maiores voluptate debitis animi iusto nemo inventore itaque impedit consectetur reiciendis distinctio ipsam modi. Hic, voluptatum ad? Quos, a architecto. Quam totam iure velit officiis, cupiditate consectetur laudantium rerum facilis beatae quod explicabo?
</div>
</body>
</html>