Marine-enthusiasts/library.html at main · anishibhatnagar/Marine-enthusiasts · 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
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
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Marine Library</title>
    <link rel="stylesheet" href="library.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

    <script src="library.js"></script>


</head>
<body>
    <div class="video-bg">
        <video autoplay loop muted>
            <source src="img/bg4.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>

    <div class="main">

        <div class="side-bar">
            <div class="nav">
                <div class="navbar">
                    <i class="fa-solid fa-bookmark"></i>
                    <a href="#">Bookmarks</a>
                </div>
                <div class="navbar">
                    <i class="fa-solid fa-magnifying-glass"></i>
                    <a href="#">Search</a>
                </div>
                <input type="text" placeholder="Search for marine books...">
                <div class="navbar">
                    <ul>
                        <li>Marine Biology</li>
                        <li>Ocean Conservation</li>
                        <li>Aquatic Ecosystems</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="main-content">
            <header>
                <h1>🌊 Marine Community Library</h1>
                <nav>
                    <a href="index.html">Home</a>
                    <a href="#library-section">Books</a>
                    <a href="#add-book-section">Add Book</a>
                    <a href="#about">About Us</a>
                </nav>
            </header>

            <section id="hero">
                <h2 id="hero-text">EXPLORE THE DEPTHS OF KNOWLEDGE</h2>
                <!-- <p id="hero-text">Discover and contribute</p> -->
            </section>

            <section id="library-section">
                <h2>📚 Marine Book Collection</h2>
                <input type="text" id="search-bar" placeholder="Search books by title..." />

                <div class="book-list" id="book-list">
                    <!-- Book Card 1 -->
                    <div class="book-card">
                        <img src="img/Image1.jpg" alt="Book 1 Cover" class="book-image">
                        <h3>Marine Biology</h3>
                        <p><strong>Author:</strong> Sylvia Earle</p>
                        <div class="card-actions">
                            <button class="bookmark-btn">Bookmark</button>
                            <button class="review-btn">Review</button>
                        </div>
                    </div>

                    <!-- Book Card 2 -->
                    <div class="book-card">
                        <img src="img/Image2.jpg" alt="Book 2 Cover" class="book-image">
                        <h3>Marine Science</h3>
                        <p><strong>Author:</strong> Jacques Cousteau</p>
                        <div class="card-actions">
                            <button class="bookmark-btn">Bookmark</button>
                            <button class="review-btn">Review</button>
                        </div>
                    </div>

                    <!-- Book Card 3 -->
                    <div class="book-card">
                        <img src="img/Image3.jpg" alt="Book 3 Cover" class="book-image">
                        <h3>Science of Ocean</h3>
                        <p><strong>Author:</strong> Rachel Carson</p>
                        <div class="card-actions">
                            <button class="bookmark-btn">Bookmark</button>
                            <button class="review-btn">Review</button>
                        </div>
                    </div>
                </div>
            </section>
            </section>
            <section id="library-section1">
                <h2>Most Popular Books of the Week</h2>
                <div class="book-list" id="book-list">
                    <!-- Book Card 1 -->
                    <div class="book-card">
                        <img src="img/Image1.jpg" alt="Book 1 Cover" class="book-image">
                        <h3>The Marine World</h3>
                        <p><strong>Author:</strong> Sylvia Earle</p>
                        <div class="card-actions">
                            <button class="bookmark-btn">Bookmark</button>
                            <button class="review-btn">Review</button>
                        </div>
                    </div>

                    <!-- Book Card 2 -->
                    <div class="book-card">
                        <img src="img/images.jpeg" alt="Book 2 Cover" class="book-image">
                        <h3>Marine Ecosystem</h3>
                        <p><strong>Author:</strong> Jacques Cousteau</p>
                        <div class="card-actions">
                            <button class="bookmark-btn">Bookmark</button>
                            <button class="review-btn">Review</button>
                        </div>
                    </div>
                </div>

                <section id="add-book-section">
                    <h2>Contribute To Library</h2>
                    <form id="book-form">
                        <input type="text" id="book-title" placeholder="Book Title" required />
                        <input type="text" id="author-name" placeholder="Author" required />
                        <textarea id="description" placeholder="Brief Description" required></textarea>
                        <button id="submit" type="submit">Add Book</button>
                    </form>
                    <div id="confirmation-popup" class="hidden">
                        <p>Book added successfully! 🎉</p>
                    </div>
                </section>

                <section id="new-books-section">
                    <h2>📚 Newly Added Books</h2>
                    <div class="book-list" id="new-book-list"></div>
                </section>


            <footer id="about">
                <p>Made by Marine Enthusiasts 🌊 | 2024</p>
            </footer>
        </div>
    </div>