JavaScript-DOM-Tutorial/index.html at master · ZaDivan/JavaScript-DOM-Tutorial · 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>
    <meta charset="utf-8">
    <link href="styles.css" rel="stylesheet" />
    <script src="app.js"></script>
    <title>JavaScript DOM Tutorials</title>
  </head>
  <body>
  	<div id="wrapper">
	    <header>
	    	<div id="page-banner">
	    		<h1 class="title">Bookorama</h1>
          <p>Books for Ninjas</p>
		  <a href="http://www.thenetninja.co.uk">the net ninja</a>
          <form id="search-books">
            <input type="text" placeholder="Search books..." />
          </form>
	    	</div>
	    </header>
	    <div id="book-list">
	    	<h2 class="title">Books to Read</h2>
	    	<ul>
	    		<li>
	    			<span class="name">Name of the Wind</span>
	    			<span class="delete">delete</span>
	    		</li>
	    		<li>
	    			<span class="name">The Wise Man's Fear</span>
	    			<span class="delete">delete</span>
	    		</li>
	    		<li>
	    			<span class="name">Kafka on the Shore</span>
	    			<span class="delete">delete</span>
	    		</li>
	    		<li>
	    			<span class="name">The Master and the Margarita</span>
	    			<span class="delete">delete</span>
	    		</li>
	    	</ul>
	    </div>
	    <form id="add-book">
        <input type="checkbox" id="hide" />
        <label for="hide">Hide all books</label>
	    	<input type="text" placeholder="Add a book..." />
	    	<button>Add</button>
	    </form>
      <div id="tabbed-content">
        <ul class="tabs">
          <li data-target="#about" class="active">About</li>
          <li data-target="#contact">Contact</li>
        </ul>
        <div class="panel active" id="about">
          <p>Content for about tab...</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id nunc porta urna ornare rhoncus. Ut convallis ante at.</p>
        </div>
        <div class="panel" id="contact">
          <p>Content for contact tab...</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id nunc porta urna ornare rhoncus. Ut convallis ante at.</p>
        </div>
      </div>
    </div>
  </body>
</html>