Skip to content

Commit 6c586ad

Browse files
longsizhuolongsizhuo
authored
Merge pull request #1 from InvolutionHell/copilot/fix-aa08008f-5099-4a0d-9292-ccd0eab516a9
Create basic frontend template and DOCS folder for GitHub Pages site
2 parents 04d4cf7 + e3c8d4f commit 6c586ad

5 files changed

Lines changed: 774 additions & 0 deletions

File tree

‎css/style.css‎

Lines changed: 310 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,310 @@
1+
/* Reset and base styles */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
font-family: 'Arial', sans-serif;
10+
line-height: 1.6;
11+
color: #333;
12+
background-color: #f8f9fa;
13+
}
14+
15+
.container {
16+
max-width: 1200px;
17+
margin: 0 auto;
18+
padding: 0 20px;
19+
}
20+
21+
/* Header and Navigation */
22+
.navbar {
23+
background-color: #2c3e50;
24+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
25+
position: fixed;
26+
top: 0;
27+
width: 100%;
28+
z-index: 1000;
29+
}
30+
31+
.nav-container {
32+
max-width: 1200px;
33+
margin: 0 auto;
34+
padding: 0 20px;
35+
display: flex;
36+
justify-content: space-between;
37+
align-items: center;
38+
height: 70px;
39+
}
40+
41+
.nav-logo {
42+
color: #ecf0f1;
43+
font-size: 1.5rem;
44+
font-weight: bold;
45+
}
46+
47+
.nav-menu {
48+
display: flex;
49+
list-style: none;
50+
margin: 0;
51+
}
52+
53+
.nav-item {
54+
margin-left: 2rem;
55+
}
56+
57+
.nav-link {
58+
color: #ecf0f1;
59+
text-decoration: none;
60+
transition: color 0.3s ease;
61+
}
62+
63+
.nav-link:hover {
64+
color: #3498db;
65+
}
66+
67+
/* Hamburger menu */
68+
.hamburger {
69+
display: none;
70+
flex-direction: column;
71+
cursor: pointer;
72+
}
73+
74+
.bar {
75+
width: 25px;
76+
height: 3px;
77+
background-color: #ecf0f1;
78+
margin: 3px 0;
79+
transition: 0.3s;
80+
}
81+
82+
/* Hero section */
83+
.hero {
84+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
85+
color: white;
86+
text-align: center;
87+
padding: 150px 0 100px;
88+
margin-top: 70px;
89+
}
90+
91+
.hero-content h1 {
92+
font-size: 3rem;
93+
margin-bottom: 1rem;
94+
animation: fadeInUp 1s ease;
95+
}
96+
97+
.hero-content p {
98+
font-size: 1.2rem;
99+
margin-bottom: 2rem;
100+
animation: fadeInUp 1s ease 0.2s both;
101+
}
102+
103+
.cta-button {
104+
background-color: #e74c3c;
105+
color: white;
106+
padding: 15px 30px;
107+
border: none;
108+
border-radius: 5px;
109+
font-size: 1.1rem;
110+
cursor: pointer;
111+
transition: all 0.3s ease;
112+
animation: fadeInUp 1s ease 0.4s both;
113+
}
114+
115+
.cta-button:hover {
116+
background-color: #c0392b;
117+
transform: translateY(-2px);
118+
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
119+
}
120+
121+
/* About section */
122+
.about {
123+
padding: 80px 0;
124+
background-color: white;
125+
}
126+
127+
.about h2 {
128+
text-align: center;
129+
font-size: 2.5rem;
130+
margin-bottom: 2rem;
131+
color: #2c3e50;
132+
}
133+
134+
.about p {
135+
text-align: center;
136+
font-size: 1.2rem;
137+
margin-bottom: 3rem;
138+
color: #666;
139+
}
140+
141+
.features {
142+
display: grid;
143+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
144+
gap: 2rem;
145+
margin-top: 3rem;
146+
}
147+
148+
.feature {
149+
text-align: center;
150+
padding: 2rem;
151+
background-color: #f8f9fa;
152+
border-radius: 10px;
153+
transition: transform 0.3s ease;
154+
}
155+
156+
.feature:hover {
157+
transform: translateY(-5px);
158+
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
159+
}
160+
161+
.feature h3 {
162+
font-size: 1.5rem;
163+
margin-bottom: 1rem;
164+
color: #2c3e50;
165+
}
166+
167+
/* Contact section */
168+
.contact {
169+
padding: 80px 0;
170+
background-color: #f8f9fa;
171+
}
172+
173+
.contact h2 {
174+
text-align: center;
175+
font-size: 2.5rem;
176+
margin-bottom: 1rem;
177+
color: #2c3e50;
178+
}
179+
180+
.contact p {
181+
text-align: center;
182+
font-size: 1.2rem;
183+
margin-bottom: 3rem;
184+
color: #666;
185+
}
186+
187+
.contact-form {
188+
max-width: 600px;
189+
margin: 0 auto;
190+
display: flex;
191+
flex-direction: column;
192+
gap: 1rem;
193+
}
194+
195+
.contact-form input,
196+
.contact-form textarea {
197+
padding: 15px;
198+
border: 1px solid #ddd;
199+
border-radius: 5px;
200+
font-size: 1rem;
201+
transition: border-color 0.3s ease;
202+
}
203+
204+
.contact-form input:focus,
205+
.contact-form textarea:focus {
206+
outline: none;
207+
border-color: #3498db;
208+
}
209+
210+
.contact-form textarea {
211+
min-height: 120px;
212+
resize: vertical;
213+
}
214+
215+
.contact-form button {
216+
background-color: #3498db;
217+
color: white;
218+
padding: 15px;
219+
border: none;
220+
border-radius: 5px;
221+
font-size: 1.1rem;
222+
cursor: pointer;
223+
transition: background-color 0.3s ease;
224+
}
225+
226+
.contact-form button:hover {
227+
background-color: #2980b9;
228+
}
229+
230+
/* Footer */
231+
footer {
232+
background-color: #2c3e50;
233+
color: #ecf0f1;
234+
text-align: center;
235+
padding: 2rem 0;
236+
}
237+
238+
/* Animations */
239+
@keyframes fadeInUp {
240+
from {
241+
opacity: 0;
242+
transform: translateY(30px);
243+
}
244+
to {
245+
opacity: 1;
246+
transform: translateY(0);
247+
}
248+
}
249+
250+
/* Responsive design */
251+
@media screen and (max-width: 768px) {
252+
.nav-menu {
253+
position: fixed;
254+
left: -100%;
255+
top: 70px;
256+
flex-direction: column;
257+
background-color: #2c3e50;
258+
width: 100%;
259+
text-align: center;
260+
transition: 0.3s;
261+
box-shadow: 0 10px 27px rgba(0,0,0,0.05);
262+
padding: 2rem 0;
263+
}
264+
265+
.nav-menu.active {
266+
left: 0;
267+
}
268+
269+
.nav-item {
270+
margin: 1rem 0;
271+
}
272+
273+
.hamburger {
274+
display: flex;
275+
}
276+
277+
.hamburger.active .bar:nth-child(2) {
278+
opacity: 0;
279+
}
280+
281+
.hamburger.active .bar:nth-child(1) {
282+
transform: translateY(8px) rotate(45deg);
283+
}
284+
285+
.hamburger.active .bar:nth-child(3) {
286+
transform: translateY(-8px) rotate(-45deg);
287+
}
288+
289+
.hero-content h1 {
290+
font-size: 2rem;
291+
}
292+
293+
.features {
294+
grid-template-columns: 1fr;
295+
}
296+
}
297+
298+
@media screen and (max-width: 480px) {
299+
.hero {
300+
padding: 120px 0 80px;
301+
}
302+
303+
.hero-content h1 {
304+
font-size: 1.8rem;
305+
}
306+
307+
.about, .contact {
308+
padding: 60px 0;
309+
}
310+
}

‎docs/README.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
# InvolutionHell Documentation
2+
3+
Welcome to the official documentation for InvolutionHell!
4+
5+
## Table of Contents
6+
7+
1. [Getting Started](./getting-started.md)
8+
2. [Installation Guide](./installation.md)
9+
3. [Configuration](./configuration.md)
10+
4. [API Reference](./api-reference.md)
11+
5. [Examples](./examples.md)
12+
6. [Troubleshooting](./troubleshooting.md)
13+
14+
## Overview
15+
16+
InvolutionHell is a cutting-edge platform that explores the depths of technological innovation. This documentation provides comprehensive guides and references to help you get the most out of our platform.
17+
18+
## Quick Start
19+
20+
1. **Clone the repository**
21+
```bash
22+
git clone https://github.com/InvolutionHell/involutionhell.github.io.git
23+
```
24+
25+
2. **Navigate to the project**
26+
```bash
27+
cd involutionhell.github.io
28+
```
29+
30+
3. **Open in your browser**
31+
Simply open `index.html` in your preferred web browser.
32+
33+
## Features
34+
35+
- **Responsive Design**: Works perfectly on desktop and mobile devices
36+
- **Modern UI**: Clean and intuitive user interface
37+
- **Fast Loading**: Optimized for performance
38+
- **Easy Customization**: Simple to modify and extend
39+
40+
## Contributing
41+
42+
We welcome contributions! Please read our contributing guidelines before submitting pull requests.
43+
44+
## Support
45+
46+
If you need help or have questions:
47+
48+
1. Check our [troubleshooting guide](./troubleshooting.md)
49+
2. Visit our main website
50+
3. Contact us through the contact form
51+
52+
## License
53+
54+
This project is licensed under the MIT License. See the LICENSE file for details.

0 commit comments

Comments
 (0)