Skip to content

Commit 5084c62

Browse files
SooY2SooY2
authored
Merge pull request #2 from HTTP-LAB/optimization-http2
optimization-http2
2 parents e9d1a9e + 612d844 commit 5084c62

11 files changed

Lines changed: 1245 additions & 0 deletions

File tree

‎optimization-http2/css/style1.css‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/* style1.css - Base styles and typography */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
font-family: 'pretendard', sans-serif;
10+
line-height: 1.6;
11+
color: #333;
12+
background-color: #ffffff;
13+
}
14+
15+
.container {
16+
max-width: 1200px;
17+
margin: 0 auto;
18+
padding: 0 20px;
19+
}
20+
21+
.section {
22+
padding: 80px 0;
23+
opacity: 0;
24+
transform: translateY(30px);
25+
transition: all 0.8s ease;
26+
}
27+
28+
.section.visible {
29+
opacity: 1;
30+
transform: translateY(0);
31+
}
32+
33+
.section-title {
34+
font-size: 2.5rem;
35+
font-weight: 700;
36+
color: #2563eb;
37+
margin-bottom: 20px;
38+
text-align: center;
39+
}
40+
41+
.section-description {
42+
font-size: 1.1rem;
43+
color: #64748b;
44+
margin-bottom: 30px;
45+
text-align: center;
46+
max-width: 800px;
47+
margin-left: auto;
48+
margin-right: auto;
49+
}

‎optimization-http2/css/style2.css‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/* style2.css - Header and navigation styles */
2+
.header {
3+
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
4+
position: fixed;
5+
top: 0;
6+
left: 0;
7+
right: 0;
8+
z-index: 1000;
9+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
10+
}
11+
12+
.navbar {
13+
display: flex;
14+
justify-content: space-between;
15+
align-items: center;
16+
padding: 1rem 2rem;
17+
max-width: 1200px;
18+
margin: 0 auto;
19+
}
20+
21+
.nav-brand {
22+
font-size: 1.8rem;
23+
font-weight: 700;
24+
color: white;
25+
text-decoration: none;
26+
display: flex;
27+
align-items: center;
28+
gap: 0.5rem;
29+
}
30+
31+
.brand-icon {
32+
width: 32px;
33+
height: 32px;
34+
filter: brightness(0) invert(1);
35+
}
36+
37+
.nav-menu {
38+
display: flex;
39+
list-style: none;
40+
gap: 2rem;
41+
}
42+
43+
.nav-menu a {
44+
color: white;
45+
text-decoration: none;
46+
font-weight: 500;
47+
transition: color 0.3s ease;
48+
padding: 0.5rem 1rem;
49+
border-radius: 5px;
50+
display: flex;
51+
align-items: center;
52+
gap: 0.5rem;
53+
}
54+
55+
.nav-icon {
56+
width: 16px;
57+
height: 16px;
58+
filter: brightness(0) invert(1);
59+
}
60+
61+
.nav-menu a:hover {
62+
background-color: rgba(255, 255, 255, 0.2);
63+
color: #e0f2fe;
64+
}
65+
66+
/* Add top margin to body to account for fixed header */
67+
body {
68+
margin-top: 70px;
69+
}

‎optimization-http2/css/style3.css‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
/* style3.css - Introduction section styles */
2+
.intro-section {
3+
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
4+
min-height: 100vh;
5+
display: flex;
6+
align-items: center;
7+
}
8+
9+
.content-wrapper {
10+
display: grid;
11+
grid-template-columns: 1fr 1fr;
12+
gap: 4rem;
13+
align-items: center;
14+
}
15+
16+
.intro-icons {
17+
display: flex;
18+
gap: 1rem;
19+
margin-bottom: 1rem;
20+
justify-content: flex-start;
21+
}
22+
23+
.intro-icon {
24+
width: 48px;
25+
height: 48px;
26+
filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1896%) hue-rotate(215deg) brightness(91%) contrast(94%);
27+
}
28+
29+
.text-content .section-title {
30+
text-align: left;
31+
font-size: 3rem;
32+
margin-bottom: 1.5rem;
33+
}
34+
35+
.text-content .section-description {
36+
text-align: left;
37+
font-size: 1.2rem;
38+
margin-bottom: 2rem;
39+
}
40+
41+
.feature-highlights {
42+
display: flex;
43+
gap: 2rem;
44+
margin-bottom: 2rem;
45+
flex-wrap: wrap;
46+
}
47+
48+
.highlight-item {
49+
display: flex;
50+
align-items: center;
51+
gap: 0.5rem;
52+
padding: 0.5rem 1rem;
53+
background: rgba(59, 130, 246, 0.1);
54+
border-radius: 20px;
55+
border: 1px solid rgba(59, 130, 246, 0.2);
56+
}
57+
58+
.highlight-icon {
59+
width: 20px;
60+
height: 20px;
61+
filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1896%) hue-rotate(215deg) brightness(91%) contrast(94%);
62+
}
63+
64+
.highlight-item span {
65+
font-size: 0.9rem;
66+
color: #2563eb;
67+
font-weight: 500;
68+
}
69+
70+
.cta-button {
71+
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
72+
color: white;
73+
border: none;
74+
padding: 15px 30px;
75+
font-size: 1.1rem;
76+
font-weight: 600;
77+
border-radius: 8px;
78+
cursor: pointer;
79+
transition: all 0.3s ease;
80+
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
81+
display: flex;
82+
align-items: center;
83+
gap: 0.5rem;
84+
}
85+
86+
.button-icon {
87+
width: 20px;
88+
height: 20px;
89+
filter: brightness(0) invert(1);
90+
}
91+
92+
.cta-button:hover {
93+
transform: translateY(-2px);
94+
box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
95+
}
96+
97+
.image-grid {
98+
display: grid;
99+
grid-template-columns: repeat(3, 1fr);
100+
gap: 1rem;
101+
}
102+
103+
.grid-image {
104+
width: 100%;
105+
height: 150px;
106+
object-fit: cover;
107+
border-radius: 8px;
108+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
109+
transition: transform 0.3s ease;
110+
}
111+
112+
.grid-image:hover {
113+
transform: scale(1.05);
114+
}

0 commit comments

Comments
 (0)