-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
154 lines (145 loc) · 10.5 KB
/
index.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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SSB-619 | CSS Reference</title>
<link rel="stylesheet" href="css/css_reference.css">
</head>
<body>
<div class="menu">
<a href="index.html">CSS Reference |</a>
<a href="html/css_selectors.html">CSS Selectors</a>
</div>
<div class="properties">
<ol>
<li>
<h4>accent-color:</h4>It's selects like <b>input[type="checkbox"]</b> <br><br>
<input type="checkbox"> This is checkbox. <br>
<input type="radio"> I am okay. <br>
<span>Select Your Range</span><input type="range"><br>
<progress id="file" value="65" max="100"> 65% </progress>
</li>
<li>
<h4>align-content Property</h4>
<div id="main">
<div class="div1" style="background-color: rgb(94, 219, 94);"></div>
<div class="div2" style="background-color: rgb(255, 188, 64);"></div>
<div class="div3" style="background-color: rgb(149, 98, 197);"></div>
</div>
</li>
<li>
<h4>align-items Property</h4>
<div>
<span>Physics  </span>
<span>Chemistry  </span>
<span>Math</span>
</div>
</li>
<li>
<h4>align-self Property</h4>
<div class="main">
<div style="background-color: green;">Green</div>
<div style="background-color: orange;" class="orangeDiv">Orange</div>
<div style="background-color: blueviolet;">I am violet</div>
</div>
</li>
<li>
<h4>all Property</h4>
No All <br>
<div id="all1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae explicabo quaerat obcaecati? Reprehenderit quae ex corporis nisi modi provident temporibus?</div><br>
All inherit <br>
<div id="all2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae explicabo quaerat obcaecati? Reprehenderit quae ex corporis nisi modi provident temporibus?</div><br>
All initial <br>
<div id="all3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae explicabo quaerat obcaecati? Reprehenderit quae ex corporis nisi modi provident temporibus?</div><br>
All unset <br>
<div id="all4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae explicabo quaerat obcaecati? Reprehenderit quae ex corporis nisi modi provident temporibus?</div>
</li>
<li>
<h4>animation Property</h4>
<div class="animation"></div>
</li>
<li>
<h4>animation-delay Property</h4>
<div class="delay"></div>
</li>
<li>
<h4>animation-direction Property</h4>
<div class="direction"></div>
</li>
<li id="duration">
<h4>animation-duraion Property</h4>
<div class="duration"></div>
</li>
<li>
<h4>animation-fill-mode Property</h4>
<div class="fill"></div>
</li>
<li>
<h4>animation-iteration-count Property</h4>
<div class="iteration"></div>
</li>
<li>
<h4>animation-play-state Property</h4>
<div class="play"></div>
</li>
<li>
<h4>animation-timing-function Property</h4>
<div class="timing"></div>
</li>
<li>
<h4>aspect Property</h4>
<div class="ratio">HelloPublic!</div>
</li>
<li>
<h4>backdrop-filter Property</h4>
<div class="backdrop">
<div class="blur">
<span>This place is blur!</span>
</div>
</div>
</li>
<li>
<h4>background attatchment Property</h4>
<p id="attatchment">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda, molestias magni repellat delectus natus ducimus voluptate? Dolorum ducimus amet porro fuga accusantium, doloremque delectus. Cupiditate alias repellat vitae hic quas.
Quas reprehenderit deleniti magni repellendus unde itaque id illo sequi eligendi beatae odit iusto, vitae, temporibus dicta dolores. Accusamus porro vitae eligendi animi. Tenetur nihil corrupti vitae quos, aspernatur non.
Ad sint deserunt, cum beatae voluptates eveniet qui nisi, blanditiis numquam possimus ducimus quis illum labore. Vero pariatur vitae repellendus autem dolorum a velit? Natus ullam molestiae minima magnam neque.
Laudantium minima porro facere dolorem corporis consequatur temporibus sunt! Voluptas, fuga cum! Delectus iure magni maxime tenetur alias rerum voluptatibus ullam sunt aut? Quia dignissimos nostrum quibusdam aperiam est praesentium.
Dolores dolorum harum nisi beatae et nesciunt error ad iusto? A, adipisci illum dolor illo placeat voluptatum esse quasi eveniet id debitis quibusdam saepe distinctio, corporis quae magnam. Voluptatem, itaque!
Voluptatum esse et recusandae perferendis sed laudantium nihil consequatur eius perspiciatis eos quisquam voluptates a molestiae illo quo amet, deserunt labore dolorum odio ratione obcaecati culpa maxime in deleniti! Pariatur.
Aliquid necessitatibus deleniti exercitationem temporibus a voluptatibus voluptatum reiciendis laborum? Vitae, quam. Doloribus nisi illo magni non, ex ut nesciunt. Veritatis ipsam nemo adipisci aspernatur pariatur odio nobis quaerat accusamus.
Aliquid est porro ipsam quod voluptate, culpa esse quos delectus nemo doloremque corrupti a optio rerum corporis blanditiis non adipisci quaerat quasi molestiae dolorum amet in. Quibusdam sapiente reiciendis adipisci?
Vero natus temporibus, doloremque a quod praesentium officia? Vel accusamus ipsum porro ratione tempora architecto quisquam reiciendis fugiat, consectetur quo quasi obcaecati corporis officiis expedita quos adipisci, illo dolore nulla.
Quae repellendus quibusdam iusto adipisci sit tempora pariatur, cum odit dolore quo debitis ipsam aliquam autem placeat magni neque dolores assumenda animi! Architecto vero repellat consequatur necessitatibus eius! Dolore, velit.
Iure facilis, illum tenetur voluptas voluptatum quisquam officiis! Mollitia veniam accusantium similique error, odit modi possimus commodi natus fugit culpa! Ad laborum a molestias facere necessitatibus voluptate blanditiis voluptates minus.
Corporis, quasi. Architecto quos maxime modi deserunt reiciendis, qui quam aspernatur veritatis ad natus unde, nam doloremque dolorum autem expedita voluptatum, non possimus vero ea dolor temporibus laborum aliquid vel!
Fugiat, dolores pariatur perferendis nobis ipsam aperiam saepe, asperiores doloribus atque distinctio corrupti at. Doloremque adipisci consequatur repellat tempora pariatur id voluptas, distinctio ducimus, repudiandae maiores temporibus saepe provident aliquid.
Maiores minima rem voluptas excepturi dolor quibusdam adipisci quod, velit nihil quisquam sequi, cumque commodi labore ratione exercitationem error quae enim culpa, iste tempore officiis atque! Ipsam minima maxime deserunt?
Itaque, quas fugit? Id praesentium eos eum nisi sint, ab ad at necessitatibus veritatis soluta illo voluptates numquam nemo quod repellendus beatae mollitia nobis sapiente blanditiis ea tenetur dicta quisquam.
Eius provident ut voluptatem veritatis voluptatum repellendus esse aut, aliquam quae maxime placeat similique iure impedit maiores eveniet animi in totam! Reprehenderit cumque ipsam officiis ad quae explicabo optio assumenda. <br><br>
Tenetur perspiciatis mollitia enim dolorum perferendis sunt? Quibusdam facilis officia, ex reiciendis dolor quisquam laborum dolore cupiditate quam necessitatibus. Quam fugit, nobis cupiditate quae nihil autem quas nostrum quaerat voluptates!
Quo sunt dignissimos tenetur est non voluptate aperiam, dolorem laborum! Ea magni, placeat facilis itaque reiciendis assumenda. Culpa ipsum necessitatibus minima dignissimos, saepe voluptas harum, error aperiam sint atque perspiciatis.
Quasi enim officiis expedita, possimus assumenda minus rem culpa commodi non blanditiis nemo labore delectus est aspernatur quis vero animi eos quod molestias odio illum dolore? Aliquam nobis temporibus sit.
Omnis, dolore. Consectetur sequi reprehenderit, corporis veritatis perferendis, deserunt iusto officiis voluptas corrupti voluptatibus beatae neque quam placeat commodi laudantium. Assumenda, nemo? Minus praesentium soluta excepturi illum aliquid. Molestias, aliquid!
Voluptatem soluta quis neque vero ut. Earum laborum porro cumque, distinctio vero maiores eligendi magni perferendis, facilis et fuga? Ipsam laboriosam consequatur reprehenderit doloribus eligendi est unde impedit pariatur? Nam. <br></p>
</li>
<li>
<h4>background-blend-mode Property</h4>
<div id="myBlend"></div>
</li>
<li>
<h4>background-clip Property</h4>
<div class="example1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae.</div><br>
<div class="example2">Here is an example2</div><br>
<div class="example3">Lorem ipsum dolor sit</div>
</li>
<li>
<h4>background-clip Property</h4>
<div class="origin1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae.</div><br>
<div class="origin2">Here is an example2</div><br>
<div class="origin3">Lorem ipsum dolor sit</div>
</li>
</ol>
</div>
</body>
</html>