-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathdom-lecture.html
More file actions
148 lines (144 loc) · 6.64 KB
/
dom-lecture.html
File metadata and controls
148 lines (144 loc) · 6.64 KB
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM Lecture</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
body {
background: #eee;
min-height: 1800px;
}
</style>
</head>
<body>
<header class="container">
<div class="jumbotron bg-success">
<h1 id="main-title" class="text-center text-light">Document Object Model <small>(DOM)</small></h1>
</div>
</header>
<main class="container">
<section class="row">
<div class="col">
<h2>Some Table</h2>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First</th>
<th>Last</th>
<th>Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="col">
<h2>Some List</h2>
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</section>
<hr>
<section class="row">
<div class="col-12">
<h2>Some Items</h2>
</div>
<div class="col-md-3 d-flex align-items-stretch mb-3">
<div class="card">
<img src="img/300x300.png" alt="" class="card-img-top img-fluid">
<div class="card-body">
<h3 class="card-title">Card </h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dicta fugit molestiae necessitatibus obcaecati odit praesentium quos rem repellendus tempore!</p>
</div>
</div>
</div>
<div class="col-md-3 d-flex align-items-stretch mb-3">
<div class="card">
<img src="img/300x300.png" alt="" class="card-img-top img-fluid">
<div class="card-body">
<h3 class="card-title">Card </h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto aspernatur assumenda cum eaque magnam modi nemo nostrum repellendus veritatis voluptatem!</p>
</div>
</div>
</div>
<div class="col-md-3 d-flex align-items-stretch mb-3">
<div class="card">
<img src="img/300x300.png" alt="" class="card-img-top img-fluid">
<div class="card-body">
<h3 class="card-title">Card </h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam atque commodi corporis ex expedita fugit iste neque reiciendis reprehenderit?</p>ates.</p>
</div>
</div>
</div>
<div class="col-md-3 d-flex align-items-stretch mb-3">
<div class="card">
<img src="img/300x300.png" alt="" class="card-img-top img-fluid">
<div class="card-body">
<h3 class="card-title">Card </h3>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam explicabo porro provident quidem sint! Architecto eligendi iusto natus necessitatibus recusandae!</p>
</div>
</div>
</div>
</section>
<hr>
<section class="row">
<div class="col">
<h2>Some Form</h2>
<form action="" method="POST" name="feedback-form">
<div class="form-group">
<label for="username">Username</label>
<input class="form-control" type="text" name="username" id="username" placeholder="Enter username">
</div>
<div class="form-group">
<label for="feedback">Feedback</label>
<textarea class="form-control" name="feedback" id="feedback" cols="30" rows="10" placeholder="Give us your opinion"></textarea>
</div>
<button class="btn btn-primary btn-block">Submit</button>
</form>
</div>
</section>
<hr>
<section>
<p class="cowboy" id="cowboy"
data-1="howdy"
data-author="Justin Reich"
data-genre="fiction"
data-device="mobile">
This is a test sentence about cowboys.
</p>
</section>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="js/dom-lecture.js"></script>
</body>
</html>