DOM-JavaScript-mini/index.html at master · Younglimpy/DOM-JavaScript-mini · 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
<!DOCTYPE html>
<html>
	<head>
		<title>Introduction to the DOM</title>
		<link rel="stylesheet" href="./styles.css">
	</head>
	<body>
		<script defer="defer" src="./components/Tabs/Tabs.js"></script>

		<div class="Section Section--bordered">
			<div class="Section__full">
				<div class="Header">Header</div>
			</div>
		</div>

		<div class="Section Section--bordered ">
			<div class="Section__half-left">
				<div class="Section__flag">New!</div>
				<div class="Box">
					<div class="Box__title">Placeholder</div>
					<div class="Box__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.</div>
				</div>
			</div><div class="Section__half-right">
				<div class="Box">
					<div class="Box__title">Placeholder</div>
					<div class="Box__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.</div>
				</div>
			</div>
		</div>

		<div class="Section Section--bordered">
			<div class="Section__full">
				<div class="Section__title">Tab Menu</div>
				<div class="Tabs">
					<div class="List">
						<div class="List__item Tabs__link" data-tab="1">Tab 1</div>
						<div class="List__item Tabs__link" data-tab="2">Tab 2</div>
						<div class="List__item Tabs__link" data-tab="3">Tab 3</div>
					</div>

					<div class="Tabs__item" data-tab="1">
						<div class="Box Box--placeholder Box--grey">
							<div class="Box__title">Box # 1</div>
							<div class="Box__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.</div>
						</div>
					</div>
					<div class="Tabs__item" data-tab="2">
						<div class="Box Box--placeholder Box--blue">
							<div class="Box__title">Box # 2</div>
							<div class="Box__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.</div>
						</div>
					</div>
					<div class="Tabs__item" data-tab="3">
						<div class="Box Box--placeholder Box--green">
							<div class="Box__title">Box # 3</div>
							<div class="Box__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce risus nibh, gravida nec felis quis, facilisis facilisis lectus. Nulla ac orci pretium, condimentum orci quis, accumsan nisi. Aliquam erat volutpat. Curabitur cursus mattis libero, at viverra risus hendrerit quis. Fusce imperdiet tristique tortor non tincidunt. Mauris accumsan urna nec augue feugiat porta. Proin vitae magna in ex malesuada laoreet eget a nulla. Aliquam tristique et elit at consequat. In hac habitasse platea dictumst.</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>
</html>