-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
83 lines (68 loc) · 3.19 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- CSS Colors -->
<h1>CSS Colors</h1>
<section>
<h2>Hello World</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita rerum nostrum, ratione sunt praesentium,
numquam magnam alias eius iusto quam voluptate laudantium consequuntur repudiandae quasi autem quis et.
Ratione
assumenda nisi cum optio voluptate sint ullam soluta distinctio. Nulla dolorum illum obcaecati rem
similique,
asperiores itaque dolore quod possimus modi.</p>
</section>
<!-- CSS Borders -->
<h1>CSS Borders</h1>
<p class="borders">Border on all sides</p>
<p class="border-bottom">Red Border on bottom sides</p>
<p class="border-left">Blue Border on left sides</p>
<p class="rounded">Rounded Borders</p>
<!-- border-style -->
<h3>Border Style</h3>
<p class="dotted">Dotted Border</p>
<p class="dashed">Dashed Border</p>
<p class="solid">Solid Border</p>
<p class="double">Double Border</p>
<p class="groove">Groove Border</p>
<p class="ridge">Ridge Border</p>
<p class="inset">Inset Border</p>
<p class="outset">Outset Border</p>
<p class="none">None Border</p>
<p class="hidden">Hidden Border</p>
<!-- CSS Fonts -->
<h1>CSS Fonts</h1>
<p class="monospace">This is monospace font</p>
<h3>Font Style</h3>
<p class="monospace-italic">This is an italic monospace font.</p>
<h3>Weight and Size</h3>
<p class="monospace thick">The font-weight example.</p>
<p class="monospace size-32">The font-size example.</p>
<h1>Margins and Padding</h1>
<p class="borders m-individual-sides">Margin example (Individual Sides)</p>
<p class="borders p-individual-sides">Padding example (Individual Sides)</p>
<p class="borders m-shorthand">Margin example - Shorthand Property (top: 80px, right: 100px, bottom: 150px, left:
100px)</p>
<p class="borders p-shorthand">Padding example - Shorthand Property (top: 80px, right: 100px, bottom: 50px, left:
100px)</p>
<!-- two values -->
<p class="borders m-two-values">Margin example - two values (top and bottom margins are 25px, right and left margins
are 50px)</p>
<p class="borders p-two-values">Padding example - two values (top and bottom padding are 25px, right and left
padding are 50px)</p>
<!-- one values -->
<p class="borders m-one-values">Margin example - one values (all four margins are 50px)</p>
<p class="borders p-one-values">Padding example - one values (all four padding are 50px)</p>
<!-- CSS Height and Width -->
<p class="borders w-100">This element has width 100%</p>
<p class="borders hw-example">This element has a height of 100 pixels and a width of 500 pixels.</p>
<!-- max width property -->
<p class="borders mw-200">This element has a height of 100 pixels and a max-width of 200 pixels.</p>
</body>
</html>