PythonFullStackCourse/Day19/Html.html at main · GODSROBOT/PythonFullStackCourse · 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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>National Symbols of India</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
    body {
        background: linear-gradient(135deg, #fdfcfb, #e2d1c3);
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    /* Navbar */
    .navbar {
        background: linear-gradient(140deg, #ff3a08, #f8f9fa, #91ff00);
        padding: 1rem;
    }
    .navbar-brand {
        color: #000000;
        font-weight: 700;
        font-size: 1.6rem;
        letter-spacing: 1px;
    }
    /* Quote Section */
    figure {
        border-radius: 12px;
        font-style: italic;
        max-width: 1800px;
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
        margin: 2rem auto;
        padding: 2rem;
    }
    blockquote p {
        font-size: 1.25rem;
        font-weight: 500;
        color: #333;
    }
    figcaption {
        margin-top: 0.5rem;
        font-size: 1rem;
    }
    /* Cards */
    .card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-radius: 16px;
    }
    .card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
    }
    .card-title {
        font-weight: 600;
        color: #222;
    }
    .card-text {
        font-size: 1rem;
        color: #555;
    }
    .card-img-top {
        border-bottom: solid 1px #ddd;
    }
    /* Buttons */
    .btn-more {
        background: linear-gradient(135deg, #ff7e5f, #feb47b);
        border: none;
        color: #fff;
        font-weight: 500;
        padding: 0.6rem 1.2rem;
        border-radius: 25px;
        transition: all 0.3s ease;
    }
    .btn-more:hover {
        background: linear-gradient(135deg, #ff512f, #dd2476);
        transform: scale(1.05);
        box-shadow: 0 6px 15px rgba(0,0,0,0.2);
        color: #fff;
    }
    /* Footer */
    footer {
        background: linear-gradient(135deg, #000000, #434343);
    }
    footer p {
        margin: 0;
        font-size: 0.95rem;
        letter-spacing: 0.5px;
    }
    </style>
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar">
    <div class="container-fluid">
        <span class="navbar-brand mb-0 h1">🇮🇳 National Symbols of India</span>
    </div>
    </nav>

  <!-- Main Content -->
  <main>
    <!-- Quote -->
    <figure class="text-center bg-warning-subtle">
        <blockquote class="blockquote">
        <p>"Don't read the success stories, read the failure stories."</p>
        </blockquote>
        <figcaption class="blockquote-footer">A. P. J. Abdul Kalam</figcaption>
    </figure>

    <!-- Cards -->
    <div class="container">
        <div class="row row-cols-1 row-cols-md-2 g-4">
            <!-- National Flag -->
            <div class="col">
                <div class="card shadow-lg border-0 h-100">
                    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_of_India.svg/800px-Flag_of_India.svg.png" class="card-img-top p-3 w-75 mx-auto" alt="Flag of India">
                    <div class="card-body text-center">
                        <h2 class="card-title">National Flag</h2>
                        <p class="card-text">The National Flag is a horizontal tricolour of saffron, white, and green with a navy-blue Ashoka Chakra in the center.</p>
                        <a href="https://en.wikipedia.org/wiki/Flag_of_India" target="_blank" class="btn btn-more">More Info</a>
                        <button class="btn btn-warning">example</button>
                        <button class="btn btn-dark">example</button>
                    </div>
                </div>
            </div>
            <!-- National Symbol -->
            <div class="col">
                <div class="card shadow-lg border-0 h-100">
                    <img src="https://i.pinimg.com/736x/37/42/bc/3742bcd3b4b5d471dae27a60bd4b5f07.jpg" alt="Indian Culture" class="card-img-top p-3 w-75 mx-auto">
                    <div class="card-body text-center">
                        <h2 class="card-title">National Symbol</h2>
                        <p class="card-text">National Symbols of India represent its identity, heritage, pride, and patriotism.</p>
                        <a href="https://en.wikipedia.org/wiki/State_Emblem_of_India" target="_blank" class="btn btn-more">More Info</a>
                        <button class="btn btn-danger btn-md">example</button>
                        <button class="btn btn-primary btn-sm">example</button>
                    </div>
                </div>
            </div>
            <!-- National Bird -->
            <div class="col">
                <div class="card shadow-lg border-0 h-100">
                    <img src="https://www.ritiriwaz.com/wp-content/uploads/2017/01/Peacock.jpeg" alt="Peacock" class="card-img-top p-3 w-75 mx-auto">
                    <div class="card-body text-center">
                        <h2 class="card-title">National Bird</h2>
                        <p class="card-text">The Indian Peacock, known for its colorful feathers and courtship dance, is the national bird of India.</p>
                        <a href="https://en.wikipedia.org/wiki/Indian_peafowl" target="_blank" class="btn btn-more">More Info</a>
                        <button class="btn btn-outline-info">example</button>
                        <button class="btn btn-outline-danger">example</button>
                    </div>
                </div>
            </div>
            <!-- National Animal -->
            <div class="col">
                <div class="card shadow-lg border-0 h-100">
                    <img src="https://www.india-a2z.com/images/royal-bengal-tiger.jpg" alt="Bengal Tiger" class="card-img-top p-3 w-75 mx-auto">
                    <div class="card-body text-center">
                        <h2 class="card-title">National Animal</h2>
                        <p class="card-text">The Bengal Tiger, symbolizing strength and power, is the national animal of India.</p>
                        <a href="https://en.wikipedia.org/wiki/Bengal_tiger" target="_blank" class="btn btn-more">More Info</a>
                        <button class="btn btn-secondary disabled">example</button>
                    </div>
                </div>
            </div>
            <!-- National River -->
            <div class="col">
                <div class="card shadow-lg border-0 h-100">
                    <img src="https://cdn.firstcry.com/education/2022/07/10183146/Essay-On-River-Ganga-10-Lines-Short-and-Long-Essay-For-Kids.jpg" alt="Ganga River" class="card-img-top p-3 w-75 mx-auto">
                    <div class="card-body text-center">
                        <h2 class="card-title">National River</h2>
                        <p class="card-text">The Ganga, a sacred river, is deeply tied to India’s culture, spirituality, and civilization.</p>
                        <a href="https://en.wikipedia.org/wiki/Ganges" target="_blank" class="btn btn-more">More Info</a>
                    </div>
                </div>
            </div>
            <!-- National Tree -->
            <div class="col">
                <div class="card shadow-lg border-0 h-100">
                    <img src="https://www.ritiriwaz.com/wp-content/uploads/2019/01/The-National-Tree-of-India.jpg" alt="Banyan Tree" class="card-img-top p-3 w-75 mx-auto">
                    <div class="card-body text-center">
                        <h2 class="card-title">National Tree</h2>
                        <p class="card-text">The Banyan tree represents strength, longevity, and unity, declared as India’s national tree in 1950.</p>
                        <a href="https://en.wikipedia.org/wiki/Ficus_benghalensis" target="_blank" class="btn btn-more">More Info</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </main>
    <!-- Footer -->
    <footer class="text-light text-center py-3 mt-5">
    <p>© 2025 India Culture. All rights reserved. | Built with </p>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>