Session16-HTML-CSS/index.html at main · PhillyCoderDojo/Session16-HTML-CSS · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>📚 My Library</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 🎩 Header - Top of page -->
    <header>
        <h1>📚 My Library</h1>
        <nav>
            <a href="#books">Books</a>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <!-- ⭐ Main - Primary content -->
    <main>
        <section id="books">
            <h2>📖 Our Books</h2>
            <p>Welcome to our library! Browse our collection below.</p>

            <!-- 🔍 Search and Filter Section -->
            <div class="search-bar">
                <input type="text" id="search" placeholder="🔍 Search books...">
                <select id="filter">
                    <option value="all">All Books</option>
                    <option value="available">Available Only</option>
                    <option value="checked-out">Checked Out</option>
                </select>
            </div>

            <!-- 📚 Book cards container -->
            <div class="book-grid">
                <!-- 📕 Book Card 1 -->
                <article class="book-card">
                    <div class="book-cover">📕</div>
                    <h3>The Great Gatsby</h3>
                    <p class="author">By F. Scott Fitzgerald</p>
                    <p class="pages">180 pages</p>
                    <span class="status available">Available</span>
                    <button class="checkout-btn">Check Out</button>
                </article>

                <!-- 📗 Book Card 2 -->
                <article class="book-card">
                    <div class="book-cover">📗</div>
                    <h3>To Kill a Mockingbird</h3>
                    <p class="author">By Harper Lee</p>
                    <p class="pages">281 pages</p>
                    <span class="status available">Available</span>
                    <button class="checkout-btn">Check Out</button>
                </article>

                <!-- 📘 Book Card 3 -->
                <article class="book-card">
                    <div class="book-cover">📘</div>
                    <h3>1984</h3>
                    <p class="author">By George Orwell</p>
                    <p class="pages">328 pages</p>
                    <span class="status checked-out">Checked Out</span>
                    <button class="checkout-btn" disabled>Unavailable</button>
                </article>

                <!-- 📙 Book Card 4 -->
                <article class="book-card">
                    <div class="book-cover">📙</div>
                    <h3>Pride and Prejudice</h3>
                    <p class="author">By Jane Austen</p>
                    <p class="pages">279 pages</p>
                    <span class="status available">Available</span>
                    <button class="checkout-btn">Check Out</button>
                </article>

                <!-- 📓 Book Card 5 -->
                <article class="book-card">
                    <div class="book-cover">📓</div>
                    <h3>The Hobbit</h3>
                    <p class="author">By J.R.R. Tolkien</p>
                    <p class="pages">310 pages</p>
                    <span class="status available">Available</span>
                    <button class="checkout-btn">Check Out</button>
                </article>

                <!-- 📔 Book Card 6 -->
                <article class="book-card">
                    <div class="book-cover">📔</div>
                    <h3>Harry Potter</h3>
                    <p class="author">By J.K. Rowling</p>
                    <p class="pages">309 pages</p>
                    <span class="status checked-out">Checked Out</span>
                    <button class="checkout-btn" disabled>Unavailable</button>
                </article>
            </div>
        </section>

        <!-- ℹ️ About Section -->
        <section id="about">
            <h2>ℹ️ About Our Library</h2>
            <p>
                Welcome to the CoderDojo Library! This is a demonstration project
                built to learn HTML and CSS. Our library lets you browse books,
                check them out, and return them.
            </p>
            <ul>
                <li>📚 Browse our collection of books</li>
                <li>🔍 Search for specific titles</li>
                <li>📤 Check out available books</li>
                <li>📥 Return books when you're done</li>
            </ul>
        </section>

        <!-- 📞 Contact Section -->
        <section id="contact">
            <h2>📞 Contact Us</h2>
            <p>Have questions? Reach out to us!</p>
            <div class="contact-info">
                <p>📧 Email: <a href="mailto:library@coderdojo.com">library@coderdojo.com</a></p>
                <p>📍 Location: CoderDojo HQ, Philadelphia, PA</p>
                <p>🕐 Hours: Saturday 11:00 AM - 1:00 PM</p>
            </div>
        </section>
    </main>

    <!-- 👟 Footer - Bottom of page -->
    <footer>
        <p>&copy; 2026 My Library. Made with ❤️ at CoderDojo Philadelphia</p>
    </footer>
</body>
</html>