-
Notifications
You must be signed in to change notification settings - Fork 31
/
index.html
127 lines (105 loc) · 4.76 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0" />
<title>ITCSS Primer</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div class="o-wrapper">
<div class="c-page-title">
<h1 class="c-page-title__main">Inverted Triangle CSS</h1>
<h2 class="c-page-title__sub">Welcome to the ITCSS Screencast</h2>
</div>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p><a href="#">Link</a></p>
<p><a href="#" class="u-link-natural">Natural link</a></p>
<p><a href="#" class="u-link-bare">Bare link</a></p>
<p><a href="#" class="u-link-obvious">Obvious link</a></p>
<p><a href="#" class="c-btn">Button</a></p>
<ul>
<li>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<ol>
<li>Vestibulum auctor dapibus neque.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
</ol>
</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ul>
<ul class="o-layout">
<li class="o-layout__item u-1/3">
<p>Foo</p>
<li class="o-layout__item u-1/3">
<p>Bar</p>
<li class="o-layout__item u-1/3">
<p>Baz</p>
</ul>
<blockquote>
<img src="https://pbs.twimg.com/profile_images/378800000842511021/741a0a2593ea55bbd6238f8705c7074f.jpeg" alt="" />
<p>Wow, ITCSS makes it so much simpler to construct, maintain, and scale CSS projects. I can’t imagine how I ever worked without it.</p>
<b>This Guy</b>
</blockquote>
<blockquote class="o-media">
<span class="o-media__img">
<img src="https://pbs.twimg.com/profile_images/378800000842511021/741a0a2593ea55bbd6238f8705c7074f.jpeg" alt="" />
</span>
<div class="o-media__body">
<p>Wow, ITCSS makes it so much simpler to construct, maintain, and scale CSS projects. I can’t imagine how I ever worked without it.</p>
<b>This Guy</b>
</div>
</blockquote>
<blockquote class="o-media c-testimonial">
<span class="o-media__img">
<img src="https://pbs.twimg.com/profile_images/378800000842511021/741a0a2593ea55bbd6238f8705c7074f.jpeg" alt="" class="c-avatar c-avatar--large" />
</span>
<div class="o-media__body c-testimonial__text">
<p>Wow, ITCSS makes it so much simpler to construct, maintain, and scale CSS projects. I can’t imagine how I ever worked without it.</p>
<b class="c-testimonial__source">This Guy</b>
</div>
</blockquote>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend
leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum
erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean
fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar
facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor
neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat
volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
luctus.</p>
<!--
<blockquote class="o-media">
<span class="o-media__img">
<img src="http://upload.wikimedia.org/wikipedia/en/3/3b/Dark_Side_of_the_Moon.png" alt="" />
</span>
<div class="o-media__body">
<h4>Pink Floyd – The Dark Side of the Moon</h4>
<ol>
<li>Speak to Me</li>
<li>Breathe</li>
<li>On the Run</li>
<li>Time</li>
<li>The Great Gig in the Sky</li>
<li>Money</li>
<li>Us and Them</li>
<li>Any Colour You Like</li>
<li>Brain Damage</li>
<li>Eclipse</li>
</ol>
</div>
</blockquote>
-->
</div>
</body>
</html>