Skip to content

Commit 08a1e7f

Browse files
burnt-exeburnt-exe
authored
Update index.html
1 parent 3ea7b0e commit 08a1e7f

File tree

1 file changed

+114
-20
lines changed

1 file changed

+114
-20
lines changed

‎index.html‎

Lines changed: 114 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -16,24 +16,108 @@
1616
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
1717
<link rel="stylesheet" href="styles.css">
1818
<style>
19-
/* Fallback styles in case external CSS doesn't load */
19+
/* Fallback and additional styles */
2020
body {
2121
font-family: Arial, sans-serif;
2222
line-height: 1.6;
2323
color: #000000;
2424
max-width: 1200px;
2525
margin: 0 auto;
26-
padding: 20px;
26+
padding: 0;
2727
background-color: #f4f4f4;
2828
}
29+
.container {
30+
padding: 0 20px;
31+
}
2932
header {
3033
background-color: #333333;
3134
color: #fcfcfc;
32-
padding: 1rem;
35+
padding: 1rem 0;
3336
text-align: center;
37+
position: relative;
38+
}
39+
.header-content {
40+
max-width: 1160px; /* 1200px - 2 * 20px padding */
41+
margin: 0 auto;
42+
padding: 0 20px;
43+
}
44+
.logo {
45+
max-width: 200px;
46+
height: auto;
47+
margin-bottom: 1rem;
48+
}
49+
nav {
50+
background-color: #333333;
51+
padding: 10px 0;
52+
}
53+
.nav-content {
54+
max-width: 1160px;
55+
margin: 0 auto;
56+
padding: 0 20px;
57+
}
58+
nav ul {
59+
list-style-type: none;
60+
padding: 0;
61+
margin: 0;
62+
display: flex;
63+
justify-content: center;
64+
flex-wrap: wrap;
65+
}
66+
nav ul li {
67+
margin: 5px 10px;
68+
}
69+
nav ul li a {
70+
color: #ffffff;
71+
text-decoration: none;
72+
padding: 5px 10px;
73+
border-radius: 5px;
74+
transition: background-color 0.3s ease;
75+
}
76+
nav ul li a:hover {
77+
background-color: #2980b9;
3478
}
79+
.menu-toggle {
80+
display: none;
81+
background: none;
82+
border: none;
83+
color: #ffffff;
84+
font-size: 1.5rem;
85+
cursor: pointer;
86+
position: absolute;
87+
top: 1rem;
88+
right: 1rem;
89+
}
90+
@media (max-width: 768px) {
91+
.menu-toggle {
92+
display: block;
93+
}
94+
nav {
95+
background-color: transparent;
96+
padding: 0;
97+
}
98+
.nav-content {
99+
padding: 0;
100+
}
101+
nav ul {
102+
display: none;
103+
flex-direction: column;
104+
align-items: center;
105+
background-color: #333333;
106+
position: absolute;
107+
top: 100%;
108+
left: 0;
109+
right: 0;
110+
padding: 1rem;
111+
}
112+
nav ul.show {
113+
display: flex;
114+
}
115+
nav ul li {
116+
margin: 0.5rem 0;
117+
}
35118
h1 {
36119
color: #ffffff;
120+
margin-bottom: 0.5rem;
37121
}
38122
h2, h3 {
39123
color: #010101;
@@ -74,6 +158,13 @@
74158
background-color: #333333;
75159
color: #ecf0f1;
76160
}
161+
@media (max-width: 768px) {
162+
.container {
163+
padding: 0 10px;
164+
}
165+
.header-content {
166+
padding: 0 10px;
167+
}
77168
@media (max-width: 768px) {
78169
body {
79170
padding: 10px;
@@ -83,7 +174,7 @@
83174
}
84175
}
85176
/* New styles for enhanced features */
86-
.menu-toggle {
177+
.menu-toggle {
87178
display: none;
88179
background: none;
89180
border: none;
@@ -120,24 +211,27 @@
120211
</head>
121212
<body>
122213
<header>
123-
<img src="skunkworks-lab-services-logo.svg" alt="Skunkworks Lab Services Logo" class="logo">
124-
<h1>Skunkworks Lab Services</h1>
125-
<p>Innovative Solutions for Complex Problems</p>
126-
<button class="menu-toggle" aria-label="Toggle menu">
127-
<i class="fas fa-bars"></i>
128-
</button>
214+
<div class="header-content">
215+
<img src="skunkworks-lab-services-logo.svg" alt="Skunkworks Lab Services Logo" class="logo" width="200" height="auto">
216+
<h1>Skunkworks Lab Services</h1>
217+
<p>Innovative Solutions for Complex Problems</p>
218+
<button class="menu-toggle" aria-label="Toggle menu">
219+
<i class="fas fa-bars"></i>
220+
</button>
221+
</div>
129222
</header>
130-
131223
<nav>
132-
<ul>
133-
<li><a href="#engineering">Engineering</a></li>
134-
<li><a href="#education">Education</a></li>
135-
<li><a href="#it">IT Infrastructure</a></li>
136-
<li><a href="#business">Business Development</a></li>
137-
<li><a href="#sales-marketing">Sales & Marketing</a></li>
138-
</ul>
224+
<div class="nav-content">
225+
<ul>
226+
<li><a href="#engineering">Engineering</a></li>
227+
<li><a href="#education">Education</a></li>
228+
<li><a href="#it">IT Infrastructure</a></li>
229+
<li><a href="#business">Business Development</a></li>
230+
<li><a href="#sales-marketing">Sales & Marketing</a></li>
231+
</ul>
232+
</div>
139233
</nav>
140-
234+
<main class="content container">
141235
<div class="content">
142236
<h2>Our Case Studies</h2>
143237

@@ -196,7 +290,7 @@ <h4>Success Story: Boosting Campaign Conversions</h4>
196290
<a href="#sales-marketing" class="cta-button">Learn About Our Sales and Marketing Solutions</a>
197291
</div>
198292
</div>
199-
293+
</main>
200294
<footer>
201295
<p>&copy; 2024 Skunkworks Lab Services. All rights reserved.</p>
202296
<p>Contact us: <a href="mailto:[email protected]">[email protected]</a> | (555) 123-4567</p>

0 commit comments

Comments
 (0)