diff --git a/index.html b/index.html index fc49ab1..d1c3ba3 100644 --- a/index.html +++ b/index.html @@ -1,369 +1,180 @@ - - - - Badge Website - - - - - - - - - - - -
-
- - -
-
- -
-
-
- Badge Image -
-

Season of AI | Beginner AI Learner

-

Awarded to: hello.rajat.rajput@gmail.com

-

- Issued on: Jul 28, 2024 at - 1:11 AM -

-
-
- Download Badge -
- -
-
- -
-
- Badge Image -
-

Season of AI | Intermediate AI Learner

-

Awarded to: example.user@example.com

-

- Issued on: Sep 17, 2024 at - 3:55 PM -

-
-
- Download Badge -
- -
-
-
-
- Badge Image -
-

Season of AI | Intermediate AI Learner

-

Awarded to: example.user@example.com

-

- Issued on: Sep 17, 2024 at - 3:55 PM -

-
-
- Download Badge -
- -
-
-
-
- Badge Image -
-

Season of AI | Intermediate AI Learner

-

Awarded to: example.user@example.com

-

- Issued on: Sep 17, 2024 at - 3:55 PM -

-
-
- Download Badge -
- -
-
-
-
- Badge Image -
-

Season of AI | Intermediate AI Learner

-

Awarded to: example.user@example.com

-

- Issued on: Sep 17, 2024 at - 3:55 PM -

-
-
- Download Badge -
- -
-
- -
-
- Badge Image -
-

Season of AI | Advance AI Learner

-

Awarded to: example.user@example.com

-

- Issued on: Dec 17, 2024 at - 8:55 PM -

-
-
- Download Badge -
- -
-
-
- - - - + .navbar h1 { + color: white; + margin: 0; + } + .navbar-links { + display: flex; + list-style: none; + padding: 0; + margin: 0; + } + .navbar-links li { + margin-left: 20px; + } + .navbar-links a { + color: white; + text-decoration: none; + padding: 8px 15px; + border-radius: 5px; + transition: background 0.3s; + } + .navbar-links a:hover { + background-color: #555; + } + /* Header styles */ + .header { + background-color: #f8f8f8; + text-align: center; + padding: 20px; + margin-bottom: 20px; + } + .header h2 { + margin: 0; + } + .header p { + margin: 10px 0 0 0; + color: #666; + } + /* Hamburger menu styles */ + .hamburger { + display: none; + flex-direction: column; + cursor: pointer; + } + .bar { + height: 3px; + width: 25px; + background-color: white; + margin: 4px 0; + transition: 0.4s; + } + /* Badge styles */ + .badges { + display: flex; + flex-wrap: wrap; + padding: 20px; + } + .badge { + background-color: #f0f0f0; + border: 1px solid #ccc; + border-radius: 10px; + padding: 15px; + margin: 10px; + width: 200px; + text-align: center; + position: relative; + } + .badge h3 { + margin: 0 0 10px 0; + } + /* Styled share button */ + .badge button { + background-color: #007BFF; + color: white; + border: none; + padding: 10px 15px; + border-radius: 20px; /* Rounded button */ + cursor: pointer; + transition: background 0.3s, transform 0.3s; + } + .badge button:hover { + background-color: #0056b3; + transform: scale(1.05); /* Slightly enlarge on hover */ + } + /* Search bar styles */ + .search-container { + padding: 20px; + text-align: center; + } + .search-container input { + padding: 10px; + width: 200px; + border: 1px solid #ccc; + border-radius: 5px; + } + /* Footer styles */ + footer { + background-color: #333; + color: white; + text-align: center; + padding: 10px 0; + position: relative; + } + /* LinkedIn button styles */ + .linkedin-button { + background-color: #0077b5; + color: white; + border: none; + padding: 10px 15px; + border-radius: 20px; /* Rounded button */ + cursor: pointer; + transition: background 0.3s; + margin-top: 10px; + } + .linkedin-button:hover { + background-color: #005582; + } + /* Responsive styles */ + @media (max-width: 768px) { + .navbar-links { + display: none; /* Hide links initially */ + flex-direction: column; + position: absolute; + background-color: #333; + top: 50px; + right: 0; + width: 200px; + } + .navbar-links.active { + display: flex; /* Show links when active */ + } + .hamburger { + display: flex; /* Show hamburger on small screens */ + } + .badges { + flex-direction: column; /* Stack badges vertically on small screens */ + align-items: center; + } + } + + + - - - - +
+

Your Brand

+
+
+
+
+
+ +
- - - - + +
+

Badges Collection