Webdev/HomePage.html at main · zishan27-web/Webdev · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
    <link rel="stylesheet" href="HomePage.css">
</head>

<body>
    <header>
        <nav class="navbar">
            <div class="navdiv">
                <div class="logo">
                    <img src="assets/logo.png" alt="Logo">
                </div>
                <ul>
                    <li><a href="HomePage.html">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <button id="darkModeToggle" class="dark-mode-btn">🌙 Dark Mode</button>
                    <button><a href="SignIn.html">Sign In</a></button>
                    <button><a href="SignUp.html">Sign Up</a></button>
                </ul>
            </div>
        </nav>
    </header>

    <main>
        <section class="hero">
            <div class="hero-image">
                <!-- <img width="100px" src="assets/hero_img.png" alt="Hero Image" loading="lazy"> -->
                <img src="assets/image1.jpg" alt="Carousel Image" class="carousel-image">
            </div>
            <div class="hero-button">
                <div class="separation"></div>
                <button class="cta-button" onclick="location.href='CreateBlog.html'">
                    Start Posting Your Own Blogs
                </button>
            </div>

        </section>


        <section class="blogs">
            <h2 class="blogs-heading">Latest Blogs</h2>
            <div class="blog-grid">
                <div class="blog-card">Blog 1</div>
                <div class="blog-card">Blog 2</div>
                <div class="blog-card">Blog 3</div>
                <div class="blog-card">Blog 4</div>
                <div class="blog-card">Blog 5</div>
                <div class="blog-card">Blog 6</div>
                <div class="blog-card">Blog 7</div>
                <div class="blog-card">Blog 8</div>
            </div>
            <div class="view-more">
                <button id="viewMoreBtn">
                    <span>View more</span>
                    <svg xmlns="http://www.w3.org/2000/svg" width="25px" viewBox="0 0 24 24">
                        <g data-name="Double down">
                            <path d="M12 17a1 1 0 0 1-.707-.293l-4-4a1 1 0 1 1 1.414-1.414L12 14.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4A1 1 0 0 1 12 17z" style="fill:#ffffff"/>
                            <path d="M12 13a1 1 0 0 1-.707-.293l-4-4a1 1 0 1 1 1.414-1.414L12 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4A1 1 0 0 1 12 13z" style="fill:#ffffff"/>
                        </g>
                    </svg>
                </button>
            </div>
        </section>
    </main>

    <div class="separation"></div>

    <footer>
        <div class="footer-container">

            <div class="footer-section about">
                <h3>About Us</h3>
                <p>Welcome to our college blogging platform! Here, students and faculty share ideas, research, and campus stories.</p>
            </div>


            <div class="footer-section links">
                <h3>Quick Links</h3>
                <ul>
                    <li><a href="HomePage.html">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Terms & Conditions</a></li>
                </ul>
            </div>


            <div class="footer-section contact">
                <h3>Contact Us</h3>
                <p>Email: <a href="mailto: regis@iiests.ac.in"> regis@iiests.ac.in</a></p>
                <p>Phone:  +91 (033) 2668 4561 to 63</p>
                <p>Address: P.O. Botanic Garden, Howrah - 711 103, West Bengal, India</p>
            </div>

            <div class="footer-section newsletter">
                <h3>Subscribe to Our Newsletter</h3>
                <p>Get the latest blog updates and news straight to your inbox.</p>
                <form action="#">
                    <input type="email" placeholder="Enter your email" required>
                    <button type="submit">Subscribe</button>
                </form>
            </div>


            <div class="footer-section social">
                <h3>Follow Us</h3>
                <div class="social-icons">
                    <a href="#"><img src="assets/facebook.svg" alt="Facebook"></a>
                    <a href="#"><img src="assets/twitter.svg" alt="Twitter"></a>
                    <a href="#"><img src="assets/instagram.svg" alt="Instagram"></a>
                    <!-- <a href="#"><img src="assets/linkedin.svg" alt="LinkedIn"></a> -->
                </div>
            </div>
        </div>

        <div class="footer-bottom">
            <p>&copy; 2025 College Blog | All rights reserved.</p>
        </div>
    </footer>
    <script src="HomePage.js"></script>
</body>

</html>