Awesome-Books/index.html at master · demesameneshoa/Awesome-Books · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./CSS/style.css" as="style"/>
    <title>Awesome Books</title>
  </head>
  <body>
    <header class="header">
      <div class="nav-cont container flex">
        <div class="nav-title"><h2>Awesome Books</h2></div>
        <nav class="nav-items">
          <ul class="nav-list flex">
            <li id="nav-display" class="nav-item"><a href="#">List</a></li><hr>
            <li id="nav-form" class="nav-item"><a href="#">Add new</a></li><hr>
            <li id="nav-contact" class="nav-item"><a href="#">Contact</a></li>
          </ul>
        </nav>
      </div>
      <div class="date container">March 19th 2021, 9:25:32 am</div>
    </header>
    <main class="main">
      <section id="display" class="display">
        <div class="main-title"><h1>All awesome books</h1></div>
        <div class="books-list">
          <div class="book-cont container"></div>
        </div>
      </section>
      <section id="form" class="main-form">
        <div class="books-input">
          <h2 class="form-title">Add a new book</h2>
          <form class="form container">
            <input class="title-input" type="text" placeholder="Title" id="title" /></br></br>
            <input class="text-input" type="text" placeholder="Author" id="author"/></br></br>
            <div class="addBtn"><input type="submit" name="" id="addBtn" value="Add" /></div>
          </form>
        </div>
      </section>
      <section id="contact" class="contact container flex">
        <div class="contact-title"><h2>Contact Information</h2></div>
        <div class="contact-desc">
          <p>Do have any questions or you just want to say "Hello"?</p>
          <p>You can reach out to us!</p>
          <ul class="contact-list">
            <li class="contact-item">Our e-mail: mail@mail.com</li>
            <li class="contact-item">Our phone number: 0054187216</li>
            <li class="contact-item">Our address: Streetname 22, 84503 City, Country</li>
          </ul>
        </div>
      </section>
    </main>
    <footer class="footer">
      <div class="footer-cont container">
        <h2>Copyright &copy; 2023 Anthony Vásquez and Demes Ameneshoa</h2>
      </div>
    </footer>
    <script src="./JS/script.js" type="module"></script>
  </body>
</html>