jupiter-web-exercises/selectors-properties-lecture.html at master · CodeupClassroom/jupiter-web-exercises · GitHub

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
<!DOCTYPE html>
<html>
<head>
	<title>CSS Selectors and Properties Lecture</title>
    <link rel="stylesheet" href="css/selectors-properties-lecture.css">
</head>
<body>
	<main>

		<!-- Combining Classes -->
        <!-- <element class="someSelector anotherSelector"></element> -->

		<nav>
			<ul>
				<li>
					<a href="http://google.com">Home</a>
				</li>
				<li>
					<a href="http://google.com">Products</a>
				</li>
				<li>
					<a href="http://google.com">Login</a>
				</li>
			</ul>
		</nav>

		<h1>Selectors and Properties</h1>

		<section>
			<h3>Sub-Heading 1</h3>
			<p class="comic">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum fugit quasi velit veniam.
				Asperiores blanditiis cumque, dicta distinctio doloribus, ex facilis illum mollitia pariatur quae,
				quia vero voluptate. Aut, esse!
			</p>
		</section>

		<section>
			<h3 class="class1 class2">Sub-Heading 2</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum fugit quasi velit veniam.
				Asperiores blanditiis cumque, dicta distinctio doloribus, ex facilis illum mollitia pariatur quae,
				quia vero voluptate. Aut, esse!
			</p>
		</section>

		<section>
			<h3 id="comic">Sub-Heading 3</h3>
			<p class="comic">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum fugit quasi velit veniam.
				Asperiores blanditiis cumque, dicta distinctio doloribus, ex facilis illum mollitia pariatur quae,
				quia vero voluptate. Aut, esse!
			</p>
		</section>


        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias deleniti eligendi error eveniet illo ipsum laudantium, maxime officia quo veritatis! Assumenda autem culpa dolores impedit ipsum iure minus nesciunt officia sapiente suscipit temporibus, voluptate voluptates? Aliquam asperiores consequatur deleniti ea incidunt nobis officia quasi repellendus? Ad asperiores debitis earum fuga quaerat quam quibusdam quos? Ad necessitatibus quam sint. A alias aliquid commodi consequuntur culpa dignissimos dolore doloremque dolores eius enim esse facilis hic impedit nihil nobis omnis qui quisquam quos, sapiente suscipit ut vitae voluptatem! Consectetur consequatur dicta dolore dolorem eos excepturi fugiat impedit, laboriosam quae soluta tenetur velit voluptate.
        </p>

        <ol class="blue" id="purple">
            <li class="comic">one</li>
            <li>two</li>
            <li>three</li>
        </ol>

        <ul>
            <li>blah</li>
            <li>blah</li>
            <li>blah</li>
        </ul>

	</main>
</body>
</html>