WebD_final_project/index.html at main · ParyuJain/WebD_final_project · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog | Home</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="bg-dark text-white py-3">
        <nav class="navbar navbar-expand-lg bg-dark">
            <div class="container d-flex align-items-center justify-content-between">
                <!-- Logo Section -->
                <a href="index.html" class="navbar-brand">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9rD9v3KJpyLN3ekFh2mFi9zVCV5zBYRhZkA&s" alt="Logo" style="height: 70px; width: 80px;">
                </a>


                <!-- Navigation Links -->
                <div class="collapse navbar-collapse justify-content-left" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link text-white active" aria-current="page" href="index.html">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-white" href="blog-list.html">Blogs</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-white" href="create.html">Create Blog</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <main class="container text-center py-5">
        <h1>Welcome to Our Book Lover’s Blog</h1>
        <hr>

        <p class="lead" style="text-align: left;">
            If you're passionate about books, stories, and everything literary, you've found the right place! Our website is a cozy corner for book enthusiasts to connect, discover, and discuss all things books. Whether you're searching for your next great read, reviews on the latest bestsellers, or recommendations in your favorite genre, we’ve got it all here.

            Dive in, explore, and let your voice be heard!</p>
        <a href="blog-list.html" class="btn btn-primary btn-lg" style="background-color: rgb(30, 29, 29);">Explore Blogs</a>
    </main>
<hr>
    <!-- About Me Section -->
    <section class="container py-5">
        <div class="row align-items-center">
            <!-- Text Content (Left) -->
            <div class="col-lg-6">
                <h2 class="mb-4">About Me</h2>
                <p>Hello, fellow book lovers! I'm <strong>Paryu Jain</strong>, the creator behind this blog. With a deep passion for reading and storytelling, I started this platform to share my love for books and connect with fellow readers. Whether it’s reviewing the latest bestsellers, exploring hidden literary gems, or diving into thought-provoking discussions, my goal is to inspire and spark your love for reading.</p>
                <p>Join me on this literary journey, and let’s explore the wonderful world of books together!</p>
            </div>
            <!-- Photo (Right) -->
            <div class="col-lg-6 text-center">
                <img src="./My img.jpeg" alt="My Photo" class="img-fluid rounded-square" style="max-width: 250px;">
            </div>
        </div>
    </section>
    <footer class="bg-dark text-light py-4">
        <div class="container">

                <!-- Contact Section -->
                <div>
                    <h5>Contact Me</h5>
                    <p>
                        Moblie: 9247XXXXXX<br>
                        Email: par***@gmail.com
                    </p>
                </div>
            </div>

            <!-- Divider -->
            <hr class="border-light">

            <!-- Footer Bottom -->
            <div class="text-center">
                <p class="mb-0">Made by Paryu Jain | © 2024 Book Lover's Blog. All
                    Rights Reserved.</p>
            </div>
        </div>
    </footer>

</body>
</html>