-
Notifications
You must be signed in to change notification settings - Fork 0
/
header.html
58 lines (55 loc) · 3.71 KB
/
header.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
<!--
*********************************************************************************************
* File: header.html
* Author: Madhurima Rawat
* Date: December 18, 2024
* Description: This is the header section of Madhurima Rawat's personal website "Madhurima Mindscape".
* The header contains the main title of the site, a tagline, and a dropdown menu to
* select various theme options for the website background. It also includes links to
* the portfolio and GitHub repositories.
* This header is consistent across all pages, providing a unified look and navigation.
* Version: 1.0
* GitHub Repository: https://github.com/madhurimarawat/Madhurima-Mindscape
* Issues/Bugs: For any issues or bugs, please visit the GitHub repository issues section.
* Comments:
- The header displays the title "Madhurima Mindscape" and a brief tagline describing the site.
- The dropdown button allows the user to choose different background color themes, enhancing user customization.
- Links to the personal portfolio and GitHub repository are provided for easy access to more information.
- The header is designed to be lightweight, providing both aesthetics and functionality.
* Dependencies:
- No external dependencies are used in this section (apart from general site-wide styles and scripts).
*********************************************************************************************
-->
<header class="header">
<h1>Madhurima Mindscape</h1>
<p>Modules, Materials, Moments, Memories, and More</p>
<!-- Select Theme Button Positioned to the Side -->
<div class="dropdown">
<a href="#" class="dropdown-toggle" style="color: white;">
🎨 Select Theme
</a>
<!-- Dropdown content with theme options -->
<div class="dropdown-content">
<a href="#" onclick="changeBackground('#ff7e5f', '#feb47b')">🌅 Sunset Vibes</a>
<a href="#" onclick="changeBackground('#2bc0e4', '#eaecc6')">🌊 Ocean Breeze</a>
<a href="#" onclick="changeBackground('#c2a6ff', '#d6c1ff')">🌙 Lavender Dream</a>
<a href="#" onclick="changeBackground('#6dd5ed', '#2193b0')">🍃 Green Freshness</a>
<a href="#" onclick="changeBackground('#ff7f50', '#ff4500')">🔥 Fiery Passion</a>
<a href="#" onclick="changeBackground('#f6d365', '#fda085')">🌇 Golden Hour</a>
<a href="#" onclick="changeBackground('#a8e0ff', '#6ec1e4')">🚢 Calm Seas</a>
<a href="#" onclick="changeBackground('#ffebeb', '#fff4f4')">🔥 Fiery Passion</a>
<a href="#" onclick="changeBackground('#ff9a8b', '#ffb8b2')">🍂 Autumn Leaves</a>
<a href="#" onclick="changeBackground('#d1d1d176', '#333333')">🌌 Mysterious Night</a>
<a href="#" onclick="changeBackground('#a1c4fd', '#c2e9fb')">☁️ Pastel Dream</a>
<a href="#" onclick="changeBackground('#00b4db', '#0083b0')">🌴 Tropical Paradise</a>
<a href="#" onclick="changeBackground('#8e44ad', '#3498db')">🌫️ Purple Haze</a>
<a href="#" onclick="changeBackground('#8e44ad', '#e74c3c')">🍓 Berry Blast</a>
<a href="#" onclick="changeBackground('#9cecfb', '#65c7f7')">🌬️ Cool Breeze</a>
<a href="#" onclick="changeBackground('#d7bfae', '#b29381')">☕ Mocha Mousse</a>
</div>
</div>
<!-- Added Link After Themes Button -->
<a href="https://madhurimarawat.github.io/Portfolio-Website/" class="portfolio-link">💡 Portfolio</a>
<!-- Added Link After Themes Button -->
<a href="https://github.com/madhurimarawat/Madhurima-Mindscape" class="github-link">📂 GitHub</a>
</header>