Skip to content

Commit dedbde5

Browse files
siravijbbsiravijbb
authored
Merge pull request #1 from WebmasterCamp/mains
lgtm
2 parents 0040017 + 43fbb14 commit dedbde5

File tree

7 files changed

+1034
-0
lines changed

7 files changed

+1034
-0
lines changed

‎phruk/home.html‎

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
<!DOCTYPE html>
2+
<html lang="th">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>ไลท์ - เว็บไซต์</title>
8+
<style>
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
14+
15+
body {
16+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
17+
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
18+
color: white;
19+
min-height: 100vh;
20+
position: relative;
21+
overflow-x: hidden;
22+
}
23+
24+
/* Background Moon/Planet Effect */
25+
body::before {
26+
content: '';
27+
position: fixed;
28+
bottom: -200px;
29+
right: -200px;
30+
width: 600px;
31+
height: 600px;
32+
background: radial-gradient(circle, #4a4a4a 0%, #2a2a2a 70%, transparent 100%);
33+
border-radius: 50%;
34+
opacity: 0.3;
35+
z-index: -1;
36+
}
37+
38+
/* Navigation */
39+
.navbar {
40+
display: flex;
41+
justify-content: space-between;
42+
align-items: center;
43+
padding: 20px 40px;
44+
background: rgba(0, 0, 0, 0.1);
45+
backdrop-filter: blur(10px);
46+
}
47+
48+
.logo {
49+
display: flex;
50+
align-items: center;
51+
gap: 10px;
52+
}
53+
54+
.logo-circle {
55+
width: 40px;
56+
height: 40px;
57+
background: white;
58+
border-radius: 50%;
59+
display: flex;
60+
align-items: center;
61+
justify-content: center;
62+
color: black;
63+
font-weight: bold;
64+
font-size: 14px;
65+
}
66+
67+
.logo-text {
68+
font-size: 18px;
69+
font-weight: bold;
70+
color: white;
71+
}
72+
73+
.nav-menu {
74+
display: flex;
75+
list-style: none;
76+
gap: 40px;
77+
}
78+
79+
.nav-item {
80+
position: relative;
81+
}
82+
83+
.nav-link {
84+
color: white;
85+
text-decoration: none;
86+
font-size: 16px;
87+
padding: 10px 0;
88+
transition: color 0.3s ease;
89+
}
90+
91+
.nav-link:hover {
92+
color: #60a5fa;
93+
}
94+
95+
.nav-link.active {
96+
color: #60a5fa;
97+
}
98+
99+
.nav-link.active::after {
100+
content: '';
101+
position: absolute;
102+
bottom: 0;
103+
left: 0;
104+
right: 0;
105+
height: 2px;
106+
background: #60a5fa;
107+
}
108+
109+
.auth-button {
110+
background: #60a5fa;
111+
color: white;
112+
padding: 12px 24px;
113+
border: none;
114+
border-radius: 25px;
115+
font-size: 14px;
116+
cursor: pointer;
117+
transition: background 0.3s ease;
118+
}
119+
120+
.auth-button:hover {
121+
background: #3b82f6;
122+
}
123+
124+
/* Main Content */
125+
.main-content {
126+
display: flex;
127+
flex-direction: column;
128+
align-items: center;
129+
justify-content: center;
130+
min-height: calc(100vh - 100px);
131+
text-align: center;
132+
padding: 40px;
133+
}
134+
135+
.hero-text {
136+
font-size: 48px;
137+
font-weight: bold;
138+
line-height: 1.2;
139+
margin-bottom: 40px;
140+
max-width: 800px;
141+
}
142+
143+
.hero-text .line1 {
144+
margin-bottom: 10px;
145+
}
146+
147+
.hero-text .line2 {
148+
margin-bottom: 20px;
149+
}
150+
151+
.cta-button {
152+
background: #60a5fa;
153+
color: white;
154+
padding: 16px 32px;
155+
border: none;
156+
border-radius: 30px;
157+
font-size: 18px;
158+
font-weight: 500;
159+
cursor: pointer;
160+
transition: all 0.3s ease;
161+
box-shadow: 0 4px 15px rgba(96, 165, 250, 0.3);
162+
}
163+
164+
.cta-button:hover {
165+
background: #3b82f6;
166+
transform: translateY(-2px);
167+
box-shadow: 0 6px 20px rgba(96, 165, 250, 0.4);
168+
}
169+
170+
/* Responsive Design */
171+
@media (max-width: 768px) {
172+
.navbar {
173+
padding: 15px 20px;
174+
flex-wrap: wrap;
175+
gap: 20px;
176+
}
177+
178+
.nav-menu {
179+
gap: 20px;
180+
flex-wrap: wrap;
181+
}
182+
183+
.hero-text {
184+
font-size: 32px;
185+
padding: 0 20px;
186+
}
187+
188+
.main-content {
189+
padding: 20px;
190+
}
191+
192+
body::before {
193+
width: 400px;
194+
height: 400px;
195+
bottom: -150px;
196+
right: -150px;
197+
}
198+
}
199+
200+
@media (max-width: 480px) {
201+
.nav-menu {
202+
display: none;
203+
}
204+
205+
.hero-text {
206+
font-size: 24px;
207+
}
208+
209+
.cta-button {
210+
padding: 14px 28px;
211+
font-size: 16px;
212+
}
213+
}
214+
</style>
215+
</head>
216+
217+
<body>
218+
<nav class="navbar">
219+
<div class="logo">
220+
<div class="logo-circle">ไลท์</div>
221+
</div>
222+
223+
<ul class="nav-menu">
224+
<li class="nav-item">
225+
<a href="#" class="nav-link active">ข้อมูล</a>
226+
</li>
227+
<li class="nav-item">
228+
<a href="#" class="nav-link">ข้อมูล</a>
229+
</li>
230+
<li class="nav-item">
231+
<a href="#" class="nav-link">ข้อมูล</a>
232+
</li>
233+
<li class="nav-item">
234+
<a href="#" class="nav-link">ข้อมูล</a>
235+
</li>
236+
</ul>
237+
238+
<button class="auth-button">ล็อกอิน/สมัครสมาชิก</button>
239+
</nav>
240+
241+
<main class="main-content">
242+
<div class="hero-text">
243+
<div class="line1">คำพูดเชิญชวนมากดปุ่ม</div>
244+
</div>
245+
246+
<button class="cta-button">ปุ่มไปฟังก์ชันแนบ</button>
247+
</main>
248+
</body>
249+
250+
</html>

‎phruk/img/home.png‎

13.5 KB
Loading

‎phruk/img/le.png‎

51.6 KB
Loading

‎phruk/img/users.png‎

7.74 KB
Loading

0 commit comments

Comments
 (0)