-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
229 lines (198 loc) · 11 KB
/
index.html
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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!--
*********************************************************************************************
* File: index.html
* Author: Madhurima Rawat
* Date: February 21, 2025
* Description: Main HTML page for the Badger-Icons platform, providing a collection of
* professionally styled icons and logos for job roles, programming languages,
* and subjects. The site features a carousel for featured icons, a navigation
* bar, and an interactive layout for ease of access and contribution.
* Version: 1.0
* GitHub Repository: https://github.com/madhurimarawat/Badger-Icons
* Issues/Bugs: For any issues or feature requests, visit the GitHub repository's
* [Issues](https://github.com/madhurimarawat/Badger-Icons/issues) section.
* Comments: This HTML file integrates Bootstrap components for responsiveness, Font Awesome
* for enhanced iconography, and a clean UI designed for both creators and users.
* Dependencies:
- **Bootstrap 4.5.2**: External CSS framework for a responsive and modern design.
- **Font Awesome 6.0.0-beta3**: Library for scalable vector icons.
- **Google Fonts - Montserrat**: Custom font for a professional and aesthetic UI.
* Design Notes:
- **Navigation Bar**: Includes a collapsible menu for mobile devices and a GitHub link.
- **Carousel**: Displays featured icons and categories using Bootstrap's carousel.
- **Grid System**: Content is structured with Bootstrap's grid layout for consistency.
- **Accessibility**: Uses semantic HTML elements and `alt` attributes for better screen reader support.
*********************************************************************************************
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="images/badger-logo.png" type="image/png">
<!-- Meta Tags for SEO -->
<meta name="description"
content="Badger-Icons - A collection of professional and beautifully styled icons and logos for job roles, programming languages, and subjects. Perfect for developers, designers, and educators.">
<meta name="keywords"
content="icons, job role icons, programming icons, logos, design resources, free icons, open source icons, tech logos, developer tools">
<meta name="author" content="Madhurima Rawat">
<meta name="robots" content="index, follow">
<!--
Specifies the publication date and time in ISO 8601 format.
Example: "2025-02-20T12:00:00Z" represents February 20, 2025, at 12:00 PM UTC.
-->
<meta name="date" content="2025-02-20T12:00:00Z" />
<!-- Last Updated -->
<meta name="last-modified" content="2025-02-21T12:30:45Z">
<!-- Open Graph Meta Tags for Social Sharing -->
<meta property="og:title" content="Badger-Icons - Beautifully Designed Job & Tech Icons" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://madhurimarawat.github.io/Badger-Icons/" />
<meta property="og:description"
content="Discover and use a vast collection of job role icons, programming logos, and subject-based designs. A perfect resource for developers and designers.">
<meta property="og:image"
content="https://raw.githubusercontent.com/madhurimarawat/Badger-Icons/main/website_snapshots/website_1.png" />
<meta property="og:image:alt" content="Badger-Icons Platform Screenshot" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Badger-Icons - Free Tech & Job Role Icons" />
<meta name="twitter:description"
content="Get free access to high-quality, open-source icons for job roles, programming languages, and more." />
<meta name="twitter:image"
content="https://raw.githubusercontent.com/madhurimarawat/Badger-Icons/main/website_snapshots/website_1.png" />
<!-- Additional Meta Tags -->
<meta name=" rating" content="General" />
<meta name="generator" content="Visual Studio Code" />
<meta name="version" content="1.0" />
<title>Badger-Icons</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top bg-light px-3">
<div class="container-fluid">
<!-- Logo on the Left -->
<a class="navbar-brand" href="#">
<img src="images/badger-logo.png" alt="Logo" class="logo me-2">
</a>
<!-- Centered Text -->
<div class="navbar-center">
<span class="full-text">Badger - Your Ultimate Partner for Logos & Icons</span>
<span class="medium-text">Badger- Tools & Icons</span>
<span class="short-text">Badger Icons</span>
</div>
<!-- GitHub Button on Right -->
<div class="ms-auto">
<a class="tool-button" href="https://github.com/madhurimarawat/Badger-Icons" target="_blank">
<i class="fab fa-github"></i> Repository
</a>
</div>
</div>
</nav>
</header>
<br><br>
<!-- Sliders -->
<div id="carouselExampleIndicators" class="carousel slide slider" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/banner.png" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="images/illustration_3.png" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="images/illustration_1.png" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="images/illustration_2.png" class="d-block w-100" alt="Slide 3">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<br>
<div class="about-card">
<h2>About Badger Icons</h2>
<p>
<strong>Badger Icons</strong> is a collection of beautifully styled icons and logos for job roles, tools,
and programming languages. Logos use original branding with enhancements, while icons add creative elements.
</p>
<p>
This website provides <b>both transparent and pastel gradient background versions</b> of each icon. You can
choose
the format that best suits your project’s needs! 🌟
</p>
<p>
Currently, it includes categories: <strong>Job Roles, Programming Languages, and Subjects.</strong>
I am actively adding more categories to expand this collection! 🚀
</p>
<p>
Embed them easily via the <strong>Copy Embed Code</strong> button! If you like this, 🌟 it on GitHub:
<a href="https://github.com/madhurimarawat/Badger-Icons" target="_blank">Badger Icons</a>.
Want to add your own? Check the
<a href="https://github.com/madhurimarawat/Badger-Icons/blob/main/CONTRIBUTING.md"
target="_blank">Contribution
Guidelines</a>,
open an <a href="https://github.com/madhurimarawat/Badger-Icons/issues" target="_blank">Issue</a>,
or start a <a href="https://github.com/madhurimarawat/Badger-Icons/discussions"
target="_blank">Discussion</a>.
</p>
<p>
If you have any doubts, feel free to message me on
<a href="https://www.linkedin.com/in/madhurima-rawat/" target="_blank">LinkedIn</a>. I'd love to help! 🚀
</p>
</div>
<section class="container mt-5">
<div class="row">
<!-- Dynamic content will be inserted here -->
</div>
</section>
<!-- Thank You section -->
<section id="thank-you" style="text-align: center; padding: 20px; background-color: #f1f1f1" ">
<h2 >Thank You</h2>
<p>
Thank you for visiting this website. If you have any questions or would
like to get in touch, please feel free to contact me.
</p>
<!-- Contact Links -->
<div class=" contact heading_1" style="text-align: center; padding: 10px;color: white;">
<a href="mailto:[email protected]" style="color: black"><i class="fas fa-envelope"></i> Email</a>
<a class="nav-link" href="tel:+9407959924" style="color: black"><i class="fa fa-phone"></i>
9407959924</a>
<a href="https://github.com/madhurimarawat" style="color: black"><i class="fab fa-github"></i>
GitHub</a>
<a href="https://www.linkedin.com/in/madhurima-rawat/" style="color: black"><i class="fab fa-linkedin"></i>
LinkedIn</a>
<a href="https://linktr.ee/madhurima_rawat" target="_blank" style="color: black"><i class="fa fa-link"></i>
LinkTree</a>
<a href="https://madhurimarawat.github.io/Portfolio-Website/" style="color: black"><i class="fas fa-globe"></i>
Portfolio</a>
<a href="https://madhurima-devfolio.streamlit.app/" style="color: black"><i class="fas fa-code"></i>
Devfolio</a>
</div>
<a class="tool-button-2" href="https://github.com/madhurimarawat/Badger-Icons">Visit on GitHub <i
class="fab fa-github"></i></a>
</section>
<footer class="footer text-center py-3">
<p>© 2025 Badger. All rights reserved.</p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>