-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss.html
113 lines (100 loc) · 2.33 KB
/
css.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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!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>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
img{
padding: 40px;
border-radius: 60px;
}
img:hover{
transform: rotate(60deg);}
.a{
display: inline;
}
button{
animation: mymove 1s infinite;
color: blue;
size: 30px;
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
@keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
.r{
display: grid;
justify-items:center ;
}
footer{
background-color: black;
height: 200px;
color: azure;
text-align: center;
}
</style>
</head>
<body>
<div>
<ul type="none" >
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li ><a href="#">LOGIN</a></li>
<li style="float: right;"><a href="#">SIGNUP</a></li>
</ul>
</div>
<div style="border: 3px dashed;">
<div class="a">
<img src="th.jpg">
</div>
<div class="a">
<img src="th.jpg">
</div>
<div class="a">
<img src="th.jpg">
</div>
</div>
<div>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque accusamus accusantium, quos fugit modi unde dicta. Rerum enim laboriosam harum obcaecati modi quis delectus similique sunt, pariatur consectetur soluta? Aliquam dolores, rem error inventore nesciunt omnis minus a voluptatibus deserunt facere odio possimus nisi eligendi nam pariatur cumque ad sequi iste incidunt nostrum! Vel facilis ad praesentium maxime aliquid voluptatibus at possimus suscipit laboriosam ut harum eos explicabo doloremque qui hic cupiditate molestiae minima corporis a, distinctio iusto eius placeat! Ullam tempora cupiditate possimus, unde totam alias laboriosam ipsa voluptas optio quasi commodi laborum suscipit eveniet dolores, soluta temporibus fugiat.</p>
</div>
<div class="r">
<button>Click me</button>
</div>
<footer>
HELLO I AM FOOTER
</footer>
</body>
</html>