Skip to content

Commit 37ff48f

Browse files
vladtymovladtymo
committed
Lists example.
1 parent 7824ace commit 37ff48f

File tree

4 files changed

+211
-0
lines changed

4 files changed

+211
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
.vscode/
2+
.DS_Store

‎01 Intro/display.html‎ renamed to ‎02-display.html‎

File renamed without changes.

‎03-lists.html‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Lists</title>
8+
<style>
9+
html {
10+
font-family: Arial, Helvetica, sans-serif;
11+
}
12+
13+
/* ---------- unordered list styling */
14+
ul.custom-style {
15+
list-style-type: circle;
16+
list-style-position: outside;
17+
}
18+
19+
/* pseudo class ::marker - styling marker only */
20+
li.important::marker {
21+
color: red;
22+
}
23+
24+
ul.reset-style {
25+
list-style-type: none;
26+
/* padding-left: 0; */
27+
}
28+
29+
ul.image-marker {
30+
list-style-image: url(./images/ukraine.png);
31+
}
32+
33+
/* ---------- ordered list styling */
34+
ol.custom-style {
35+
list-style-type: lower-alpha;
36+
}
37+
38+
ol.custom-marker {
39+
list-style-type: none;
40+
41+
/* create counter */
42+
counter-reset: number;
43+
}
44+
45+
/* pseudo elements ::before ::after - add content before/after an element */
46+
ol.custom-marker li::before {
47+
color: darkgoldenrod;
48+
49+
content: '(' counter(number) ') ';
50+
/* increment counter */
51+
counter-increment: number;
52+
}
53+
54+
h2::before,
55+
h2::after {
56+
content: '*';
57+
color: red;
58+
}
59+
60+
/* ---------- description list styling */
61+
dt {
62+
background-color: darkblue;
63+
color: white;
64+
padding: 10px;
65+
text-align: center;
66+
border-radius: 8px 8px 0 0;
67+
}
68+
69+
dd {
70+
background-color: rgb(67, 67, 221);
71+
color: white;
72+
margin-left: 0;
73+
padding: 10px;
74+
margin-bottom: 5px;
75+
border-radius: 0 0 8px 8px;
76+
}
77+
78+
/* ---------- multilevel list styling */
79+
/* level 1> */
80+
.multilevel-list {
81+
color: gray;
82+
}
83+
84+
/* level 2 */
85+
ol.multilevel-list>li>ol {
86+
color: brown
87+
}
88+
89+
/* level 3> */
90+
ol.multilevel-list ol ul {
91+
color: blueviolet;
92+
}
93+
94+
ol.multilevel-list ul ul {
95+
color: darkgoldenrod;
96+
}
97+
</style>
98+
</head>
99+
100+
<body>
101+
<h1>Working with Lists</h1>
102+
103+
<h2>Unordered Lists</h2>
104+
105+
<!-- emmet: ul>li*5>lorem6 -->
106+
<ul class="custom-style">
107+
<li>Lorem ipsum dolor sit amet consectetur.</li>
108+
<li>Sapiente accusamus minima eaque quia dolor?</li>
109+
<li class="important">Ipsum dolores quos expedita nemo sunt?</li>
110+
<li>Fugit officia tenetur voluptatem eius veniam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero
111+
deleniti dolore nam reprehenderit? Dignissimos, odit.</li>
112+
<li>Repellat ratione rem praesentium asperiores harum!</li>
113+
</ul>
114+
115+
<h3>Reseted List Style</h3>
116+
<ul class="reset-style">
117+
<li>Lorem ipsum dolor sit amet.</li>
118+
<li>Voluptate officiis voluptatibus sapiente eius.</li>
119+
<li>Soluta atque consequuntur laborum voluptates!</li>
120+
<li>Id ratione sequi quibusdam consequuntur?</li>
121+
</ul>
122+
123+
<h3>Image Marker Style</h3>
124+
<ul class="image-marker">
125+
<li>Lorem ipsum dolor sit amet.</li>
126+
<li>Voluptate officiis voluptatibus sapiente eius.</li>
127+
<li>Soluta atque consequuntur laborum voluptates!</li>
128+
<li>Id ratione sequi quibusdam consequuntur?</li>
129+
</ul>
130+
131+
<h2>Ordered Lists</h2>
132+
<ol class="custom-style">
133+
<li>Lorem ipsum dolor sit amet.</li>
134+
<li>Aspernatur nam sit adipisci quisquam.</li>
135+
<li>Consectetur animi culpa nemo molestias.</li>
136+
<li>Possimus quod architecto error ut.</li>
137+
<li>Soluta praesentium unde doloremque quae.</li>
138+
</ol>
139+
140+
<h3>Using attributes</h3>
141+
<ol start="6" reversed>
142+
<li>Lorem ipsum dolor sit amet.</li>
143+
<li>Aspernatur nam sit adipisci quisquam.</li>
144+
<li>Consectetur animi culpa nemo molestias.</li>
145+
<li value="10">Lorem ipsum dolor sit amet.</li>
146+
<li>Aspernatur nam sit adipisci quisquam.</li>
147+
<li>Consectetur animi culpa nemo molestias.</li>
148+
</ol>
149+
150+
<h3>Custom Marker Content</h3>
151+
<ol class="custom-marker">
152+
<li>Lorem ipsum dolor sit amet.</li>
153+
<li>Aspernatur nam sit adipisci quisquam.</li>
154+
<li>Consectetur animi culpa nemo molestias.</li>
155+
<li>Possimus quod architecto error ut.</li>
156+
<li>Soluta praesentium unde doloremque quae.</li>
157+
</ol>
158+
159+
<h2>Description Lists</h2>
160+
<dl>
161+
<dt>HTML</dt>
162+
<dd>The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed
163+
in a web browser. It defines the meaning and structure of web content.</dd>
164+
<dt>CSS</dt>
165+
<dd>Cascading Style Sheets is a style sheet language used for describing the presentation of a document written
166+
in a markup language such as HTML or XML.</dd>
167+
<dt>JS</dt>
168+
<dd>JavaScript, often abbreviated as JS, is a programming language that is one of the core technologies of the
169+
World Wide Web, alongside HTML and CSS.</dd>
170+
</dl>
171+
172+
<h2>Multilevel Lists</h2>
173+
<ol class="multilevel-list">
174+
<li>Lorem ipsum dolor sit, amet consectetur adipisicing.</li>
175+
<li>Quia, ullam nisi officiis voluptas et voluptatibus?
176+
<ol>
177+
<li>Lorem ipsum dolor sit amet.</li>
178+
<li>Doloremque eligendi sint veniam! Aliquid.
179+
<ul>
180+
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
181+
<li>Qui provident veritatis suscipit in magnam esse fugiat!</li>
182+
</ul>
183+
</li>
184+
<li>Quod, minus sequi! Labore, tempore.</li>
185+
</ol>
186+
</li>
187+
<li>Beatae reiciendis modi necessitatibus minus cupiditate quasi.</li>
188+
<li>Alias ipsa iusto iste sit repellat earum.
189+
<ul>
190+
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
191+
<li>Qui provident veritatis suscipit in magnam esse fugiat!
192+
<ul>
193+
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
194+
<li>Qui provident veritatis suscipit in magnam esse fugiat!</li>
195+
</ul>
196+
</li>
197+
</ul>
198+
</li>
199+
<li>Dicta voluptas ratione amet accusamus distinctio possimus.</li>
200+
<li>Illum, dolor voluptatibus! Eveniet inventore aliquid obcaecati?
201+
<ol>
202+
<li>Lorem ipsum dolor sit amet.</li>
203+
<li>Doloremque eligendi sint veniam! Aliquid.</li>
204+
<li>Quod, minus sequi! Labore, tempore.</li>
205+
</ol>
206+
</li>
207+
</ol>
208+
</body>
209+
210+
</html>

‎images/ukraine.png‎

446 Bytes
Loading

0 commit comments

Comments
 (0)