-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
154 lines (147 loc) · 5.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ferret Industries - Home</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
background-color: #2E4053; /* Dark Slate Blue background */
color: #F6F5F5; /* Off-white/light gray text */
}
.catchphrase {
text-align: center;
font-size: 1.25rem; /* Smaller size for mobile */
color: #F76C5E; /* Soft Coral for headers */
margin-top: 2rem; /* Add margin to separate from header */
}
@media (min-width: 768px) {
.catchphrase {
font-size: 1.75rem; /* Increase for tablets */
margin-top: 3rem; /* More margin on larger screens */
}
}
@media (min-width: 1024px) {
.catchphrase {
font-size: 2rem; /* Larger size for desktops */
margin-top: 4rem;
}
}
.main-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.dropdown-content {
display: none;
background-color: #1E2A3A; /* Darker background */
color: #F6F5F5; /* White text */
padding: 15px;
border-radius: 5px;
margin-top: 10px;
font-size: 1rem;
text-align: left;
width: 90%; /* Make the dropdown responsive */
max-width: 600px; /* Limit width on larger screens */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.button-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 1rem;
width: 100%; /* Full width for mobile */
max-width: 600px; /* Limit width on larger screens */
justify-content: center;
align-items: center;
}
@media (min-width: 768px) {
.button-group {
flex-direction: row; /* Horizontal layout for larger screens */
}
}
.custom-button {
background-color: #F4D35E; /* Warm yellow for buttons */
color: #2E4053; /* Dark text for contrast */
font-weight: bold;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
text-align: center;
}
.custom-button:hover {
background-color: #58A4B0; /* Calm Teal on hover */
color: #F6F5F5; /* Light text on hover */
}
.light-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(255,215,0,0.2) 0%, rgba(255,140,0,0.4) 50%, rgba(255,69,0,0.2) 100%);
opacity: 0;
animation: lightPulse 4s infinite alternate;
pointer-events: none;
z-index: 1;
mix-blend-mode: screen;
}
@keyframes lightPulse {
0% { opacity: 0.2; transform: scale(0.95); }
100% { opacity: 0.8; transform: scale(1.05); }
}
header {
background-color: #58A4B0; /* Calm Teal for header */
}
nav ul {
display: flex;
flex-direction: row; /* Ensure the nav links are in a row */
gap: 1rem;
justify-content: center;
width: 100%; /* Ensure it uses full width */
}
nav ul li a {
color: #F6F5F5; /* Light text for nav links */
}
nav ul li a:hover {
color: #F4D35E; /* Warm yellow on hover */
}
</style>
</head>
<body>
<div class="light-animation"></div>
<header class="p-4">
<nav>
<ul class="flex justify-center space-x-4">
<li><a href="index.html" class="hover:text-yellow-400">Home</a></li>
<li><a href="javascript:void(0);" onclick="toggleDropdown()">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div class="main-content">
<div class="catchphrase">
Bright ideas, tailored light!
</div>
<img src="IMG-20240917-WA0000.jpg" alt="Ferret Industries Logo" class="mx-auto rounded-full w-32 h-32 md:w-64 md:h-64 my-6">
<div class="button-group">
<button class="custom-button" onclick="toggleDropdown()">About</button>
<button class="custom-button"><a href="services.html">Services</a></button>
<button class="custom-button"><a href="members.html">Members</a></button>
</div>
<div id="aboutDropdown" class="dropdown-content">
<p><strong>Ferret Industries</strong></p>
<p>The company's main focus is engineering problem solving. Focusing on the present problems in the engineering world and finding innovative solutions.</p>
<p>The current project of the company includes studio light repairs, upgrades, maintenance, and manufacturing. Studio lights are used by professional photographers to ensure proper lighting in each photo. The studio lights are advanced engineering designs making it an expensive item to buy and repair. This is the main project currently along with numerous other projects.</p>
</div>
</div>
<script>
function toggleDropdown() {
var dropdown = document.getElementById('aboutDropdown');
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
}
</script>
</body>
</html>