Skip to content

Commit e9d1a9e

Browse files
SooY2SooY2
authored
Merge pull request #1 from HTTP-LAB/optimization-http1
Optimization http1
2 parents 96a60be + 13f9ff8 commit e9d1a9e

19 files changed

Lines changed: 2767 additions & 118 deletions

File tree

‎assets/icons/icon_sprite.png‎

1.61 KB
Loading

‎default-template/css/style1.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
}
77

88
body {
9-
font-family: 'Noto Sans KR', sans-serif;
9+
font-family: 'pretendard', sans-serif;
1010
line-height: 1.6;
1111
color: #333;
1212
background-color: #ffffff;

‎default-template/index.html‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,18 @@
1212
<link rel="stylesheet" href="./css/style4.css">
1313
<link rel="stylesheet" href="./css/style5.css">
1414

15-
<!-- Font Loading -->
16-
<link rel="preconnect" href="https://fonts.googleapis.com">
17-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1815
<style>
1916
@font-face {
20-
font-family: 'Noto Sans KR';
17+
font-family: 'pretendard';
2118
font-style: normal;
2219
font-weight: 400;
23-
src: url('./fonts/NotoSansKR-Regular.woff2') format('woff2');
20+
src: url('../assets/fonts/pretendard/Pretendard-Black.woff2') format('woff2');
2421
}
2522
@font-face {
26-
font-family: 'Noto Sans KR';
23+
font-family: 'pretendard';
2724
font-style: normal;
2825
font-weight: 700;
29-
src: url('./fonts/NotoSansKR-Bold.woff2') format('woff2');
26+
src: url('../assets/fonts/pretendard/Pretendard-Bold.woff2') format('woff2');
3027
}
3128
</style>
3229
</head>

‎optimization-http1/css/icon.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.icon-sprite {
2+
width: 16px;
3+
height: 16px;
4+
background-image: url('../../assets/icons/icon_sprite.png');
5+
background-repeat: no-repeat;
6+
display: inline-block;
7+
}
8+
.icon-1 { background-position: 0px 0; }
9+
.icon-2 { background-position: -16px 0; }
10+
.icon-3 { background-position: -32px 0; }
11+
.icon-4 { background-position: -48px 0; }
12+
.icon-5 { background-position: -64px 0; }
13+
.icon-6 { background-position: -80px 0; }
14+
.icon-7 { background-position: -96px 0; }
15+
.icon-8 { background-position: -112px 0; }
16+
.icon-9 { background-position: -128px 0; }
17+
.icon-10 { background-position: -144px 0; }
18+
.icon-11 { background-position: -160px 0; }
19+
.icon-12 { background-position: -176px 0; }
20+
.icon-13 { background-position: -192px 0; }
21+
.icon-14 { background-position: -208px 0; }
22+
.icon-15 { background-position: -224px 0; }
23+
.icon-16 { background-position: -240px 0; }
24+
.icon-17 { background-position: -256px 0; }
25+
.icon-18 { background-position: -272px 0; }
26+
.icon-19 { background-position: -288px 0; }
27+
.icon-20 { background-position: -304px 0; }
28+
.icon-21 { background-position: -320px 0; }

‎optimization-http1/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-http1/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-http1/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)