Skip to content

Commit 522b103

Browse files
sarawut5555sarawut5555
committed
first commit
0 parents  commit 522b103

2 files changed

Lines changed: 616 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
<!DOCTYPE html>
2+
<html lang="th">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="description" content="[คำอธิบายโปรเจกต์สั้นๆ 150-160 ตัวอักษร]">
7+
<meta name="keywords" content="[คีย์เวิร์ดสำคัญ]">
8+
<meta name="author" content="Group XX - ENGCE301">
9+
<title>[ชื่อโปรเจกต์] - ENGCE301 Term Project</title>
10+
11+
<!-- CSS -->
12+
<link rel="stylesheet" href="style.css">
13+
14+
<!-- Google Fonts (ถ้าใช้) -->
15+
<link rel="preconnect" href="https://fonts.googleapis.com">
16+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
17+
</head>
18+
<body>
19+
20+
<!-- =========================== HEADER =========================== -->
21+
<header class="main-header">
22+
<div class="container">
23+
<!-- Logo -->
24+
<div class="logo">
25+
<h1>[ชื่อโปรเจกต์]</h1>
26+
<!-- หรือใช้รูปภาพ: <img src="assets/images/logo.png" alt="Logo"> -->
27+
</div>
28+
29+
<!-- Navigation Menu -->
30+
<nav class="main-nav">
31+
<ul>
32+
<li><a href="#home">Home</a></li>
33+
<li><a href="#features">Features</a></li>
34+
<li><a href="#about">About</a></li>
35+
<li><a href="#team">Team</a></li>
36+
<li><a href="#contact">Contact</a></li>
37+
</ul>
38+
</nav>
39+
</div>
40+
</header>
41+
42+
<!-- =========================== MAIN CONTENT =========================== -->
43+
<main>
44+
45+
<!-- Hero Section -->
46+
<section id="home" class="hero-section">
47+
<div class="container">
48+
<h2 class="hero-title">
49+
[Tagline ของโปรเจกต์ - ดึงดูดความสนใจ]
50+
</h2>
51+
<p class="hero-description">
52+
[คำอธิบายย่อ 2-3 ประโยค ว่าระบบนี้ทำอะไร แก้ปัญหาอะไร]
53+
</p>
54+
<div class="hero-cta">
55+
<button class="btn btn-primary">Get Started</button>
56+
<button class="btn btn-secondary">Learn More</button>
57+
</div>
58+
</div>
59+
</section>
60+
61+
<!-- Problem Statement Section -->
62+
<section id="problem" class="problem-section">
63+
<div class="container">
64+
<h2>The Problem We're Solving</h2>
65+
<p>
66+
[อธิบายปัญหาที่พบจาก User Interview - Pain Points]
67+
</p>
68+
</div>
69+
</section>
70+
71+
<!-- Features Section -->
72+
<section id="features" class="features-section">
73+
<div class="container">
74+
<h2>Key Features</h2>
75+
<p class="section-description">
76+
[สรุปย่อว่ามีฟีเจอร์อะไรบ้าง]
77+
</p>
78+
79+
<div class="features-grid">
80+
<!-- Feature Card 1 -->
81+
<article class="feature-card">
82+
<div class="feature-icon">
83+
<!-- ใส่ไอคอนหรือรูปภาพ -->
84+
<span>🎯</span>
85+
</div>
86+
<h3>[ชื่อฟีเจอร์ 1]</h3>
87+
<p>[คำอธิบายสั้นๆ ว่าฟีเจอร์นี้ทำอะไร]</p>
88+
</article>
89+
90+
<!-- Feature Card 2 -->
91+
<article class="feature-card">
92+
<div class="feature-icon">
93+
<span>📊</span>
94+
</div>
95+
<h3>[ชื่อฟีเจอร์ 2]</h3>
96+
<p>[คำอธิบายสั้นๆ]</p>
97+
</article>
98+
99+
<!-- Feature Card 3 -->
100+
<article class="feature-card">
101+
<div class="feature-icon">
102+
<span>🔐</span>
103+
</div>
104+
<h3>[ชื่อฟีเจอร์ 3]</h3>
105+
<p>[คำอธิบายสั้นๆ]</p>
106+
</article>
107+
108+
<!-- เพิ่ม feature cards ตามความเหมาะสม (แนะนำ 4-6 อัน) -->
109+
</div>
110+
</div>
111+
</section>
112+
113+
<!-- How It Works Section -->
114+
<section id="how-it-works" class="how-section">
115+
<div class="container">
116+
<h2>How It Works</h2>
117+
<div class="steps">
118+
<article class="step">
119+
<span class="step-number">1</span>
120+
<h3>[ขั้นตอนที่ 1]</h3>
121+
<p>[อธิบาย]</p>
122+
</article>
123+
124+
<article class="step">
125+
<span class="step-number">2</span>
126+
<h3>[ขั้นตอนที่ 2]</h3>
127+
<p>[อธิบาย]</p>
128+
</article>
129+
130+
<article class="step">
131+
<span class="step-number">3</span>
132+
<h3>[ขั้นตอนที่ 3]</h3>
133+
<p>[อธิบาย]</p>
134+
</article>
135+
</div>
136+
</div>
137+
</section>
138+
139+
<!-- About Section -->
140+
<section id="about" class="about-section">
141+
<div class="container">
142+
<h2>About This Project</h2>
143+
<p>
144+
[บอกเล่าเพิ่มเติมเกี่ยวกับโปรเจกต์ - แรงบันดาลใจ, วัตถุประสงค์]
145+
</p>
146+
</div>
147+
</section>
148+
149+
<!-- Team Section -->
150+
<section id="team" class="team-section">
151+
<div class="container">
152+
<h2>Our Team</h2>
153+
<div class="team-grid">
154+
<!-- Team Member 1 -->
155+
<article class="team-member">
156+
<img src="assets/images/member1.jpg" alt="Member Name">
157+
<h3>[ชื่อสมาชิก 1]</h3>
158+
<p class="role">[Role: Product Owner / Developer / Designer]</p>
159+
<p class="student-id">[รหัสนักศึกษา]</p>
160+
</article>
161+
162+
<!-- Team Member 2 -->
163+
<article class="team-member">
164+
<img src="assets/images/member2.jpg" alt="Member Name">
165+
<h3>[ชื่อสมาชิก 2]</h3>
166+
<p class="role">[Role]</p>
167+
<p class="student-id">[รหัสนักศึกษา]</p>
168+
</article>
169+
170+
<!-- เพิ่มสมาชิกทุกคนในกลุ่ม -->
171+
</div>
172+
</div>
173+
</section>
174+
175+
<!-- Contact/CTA Section -->
176+
<section id="contact" class="contact-section">
177+
<div class="container">
178+
<h2>Interested in Our Project?</h2>
179+
<p>[Call-to-Action message]</p>
180+
<button class="btn btn-primary">Contact Us</button>
181+
</div>
182+
</section>
183+
184+
</main>
185+
186+
<!-- =========================== ASIDE (Optional) =========================== -->
187+
<aside class="sidebar">
188+
<!-- ถ้ามี Sidebar เช่น Latest Updates, Quick Links -->
189+
</aside>
190+
191+
<!-- =========================== FOOTER =========================== -->
192+
<footer class="main-footer">
193+
<div class="container">
194+
<div class="footer-content">
195+
<!-- Footer Info -->
196+
<div class="footer-info">
197+
<h4>[ชื่อโปรเจกต์]</h4>
198+
<p>ENGCE301: Software Design and Development</p>
199+
<p>Term Project - Group XX</p>
200+
<p>Rajamangala University of Technology Lanna</p>
201+
</div>
202+
203+
<!-- Footer Links -->
204+
<div class="footer-links">
205+
<h4>Quick Links</h4>
206+
<ul>
207+
<li><a href="#home">Home</a></li>
208+
<li><a href="#features">Features</a></li>
209+
<li><a href="https://github.com/[username]/[repo]" target="_blank">GitHub Repository</a></li>
210+
<li><a href="SRS_Draft.md">View SRS Document</a></li>
211+
</ul>
212+
</div>
213+
214+
<!-- Footer Contact -->
215+
<div class="footer-contact">
216+
<h4>Contact</h4>
217+
<p>📧 Email: [group-email]@rmutl.ac.th</p>
218+
<p>📱 Tel: XXX-XXX-XXXX</p>
219+
</div>
220+
</div>
221+
222+
<!-- Copyright -->
223+
<div class="footer-bottom">
224+
<p>&copy; 2025 [ชื่อโปรเจกต์]. All rights reserved.</p>
225+
<p>Developed with ❤️ by Group XX</p>
226+
</div>
227+
</div>
228+
</footer>
229+
230+
</body>
231+
</html>

0 commit comments

Comments
 (0)