Skip to content

Commit c685f72

Browse files
Ananatawaanthonydmays
Ananatawa
and
anthonydmays
authored
feat: adds Nana's express web server (#573)
* Saving my progess on Lesson 22 * saving progress for Lesson24 work so far * Savings changes made to Lesson24 * Lesson 24: Add Express server and contact form * chore: removes extra files Signed-off-by: Anthony D. Mays <[email protected]> * feat: serves static files properly Signed-off-by: Anthony D. Mays <[email protected]> --------- Signed-off-by: Anthony D. Mays <[email protected]> Co-authored-by: Anthony D. Mays <[email protected]>
1 parent a538dd8 commit c685f72

File tree

8 files changed

+1101
-1
lines changed

8 files changed

+1101
-1
lines changed

‎lesson_24/ananatawa/package-lock.json

Lines changed: 816 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lesson_24/ananatawa/package.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "lesson-24-webserver",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"keywords": [],
10+
"author": "",
11+
"license": "ISC",
12+
"type": "commonjs",
13+
"dependencies": {
14+
"express": "^5.1.0"
15+
}
16+
}

‎lesson_24/ananatawa/public/contact.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Contact Us</title>
5+
<link rel="stylesheet" href="style.css" />
6+
</head>
7+
<body>
8+
<h1>Contact Us</h1>
9+
<form action="/contact" method="POST">
10+
<label>Name:</label><br/>
11+
<input type="text" name="name" required /><br/><br/>
12+
<label>Email:</label><br/>
13+
<input type="email" name="email" required /><br/><br/>
14+
<label>Message:</label><br/>
15+
<textarea name="message" required></textarea><br/><br/>
16+
<button type="submit">Submit</button>
17+
</form>
18+
</body>
19+
</html>

‎lesson_22/template/hero.jpg renamed to ‎lesson_24/ananatawa/public/hero.jpg

File renamed without changes.

‎lesson_22/template/index.html renamed to ‎lesson_24/ananatawa/public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<ul class="header-top-menu">
1717
<li><a href="#">Home</a></li>
1818
<li><a href="#">About</a></li>
19-
<li><a href="#">Contact</a></li>
19+
<li><a href="/contact.html">Contact</a></li>
2020
</ul>
2121
<div class="header-cta">
2222
<a class="sign-up-button" href="#">Sign Up</a>

‎lesson_22/template/logo.png renamed to ‎lesson_24/ananatawa/public/logo.png

File renamed without changes.

‎lesson_24/ananatawa/public/style.css

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
/* Basic Reset */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
html, body {
9+
margin: 0;
10+
padding: 0;
11+
overflow-x: hidden; /* Prevents horizontal scroll */
12+
width: 100vw; /* Ensures full-viewport fit */
13+
}
14+
15+
body {
16+
font-family: 'Poppins', 'Montserrat', sans-serif;
17+
line-height: 1.6;
18+
background-color: #ffffff;
19+
color: #333;
20+
}
21+
22+
23+
.header {
24+
position: fixed;
25+
top: 0;
26+
left: 0;
27+
width: 100vw;
28+
background-color: #ffffff;
29+
display: flex;
30+
justify-content: space-between;
31+
align-items: center;
32+
padding: 40px 60px;
33+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
34+
z-index: 1000;
35+
transition: padding 0.3s ease, box-shadow 0.3s ease;
36+
box-sizing: border-box;
37+
}
38+
39+
.header.shrunk {
40+
padding: 15px 60px;
41+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
42+
}
43+
44+
.header-logo img {
45+
height: 75px;
46+
}
47+
48+
.header-top-menu {
49+
list-style: none;
50+
display: flex;
51+
gap: 20px;
52+
}
53+
54+
.header-top-menu li a {
55+
text-decoration: none;
56+
color: #333;
57+
font-weight: 600;
58+
transition: color 0.3s ease;
59+
}
60+
61+
.header-top-menu li a {
62+
position: relative;
63+
text-decoration: none;
64+
color: #333;
65+
font-weight: 600;
66+
padding: 5px 0;
67+
transition: color 0.3s ease;
68+
}
69+
70+
.header-top-menu li a::after {
71+
content: '';
72+
position: absolute;
73+
left: 0;
74+
bottom: 0;
75+
width: 0%;
76+
height: 2px;
77+
background-color: orange;
78+
transition: width 0.3s ease;
79+
}
80+
81+
/* Normal hover effect */
82+
.header-top-menu li a:hover::after {
83+
width: 100%;
84+
}
85+
86+
/* New: Always underline the FIRST link (Home) */
87+
.header-top-menu li:first-child a::after {
88+
width: 100%;
89+
}
90+
91+
.header-cta .sign-up-button {
92+
background-color: #f37f0b;
93+
color: #fff;
94+
padding: 10px 20px;
95+
text-decoration: none;
96+
border-radius: 5px;
97+
.btn-contact {
98+
font-weight: 600;
99+
font-family: 'Inter', sans-serif;
100+
/* Optional matching styles: */
101+
text-transform: uppercase;
102+
letter-spacing: 0.05em;
103+
}
104+
transition: background-color 0.3s ease;
105+
}
106+
107+
.header-cta .sign-up-button:hover {
108+
background-color: #0056b3;
109+
}
110+
111+
.main {
112+
padding-top: 120px; /* So the hero and rest of page starts AFTER header */
113+
padding-left: 0px;
114+
padding-right: 0px;
115+
}
116+
117+
118+
119+
.hero-section {
120+
position: relative;
121+
background-image: url("hero.jpg");
122+
background-size: cover;
123+
background-position: center center;
124+
background-repeat: no-repeat;
125+
height: 100vh;
126+
width: 100vw;
127+
overflow: hidden;
128+
filter: brightness(1.5);
129+
padding-top: 125px; /* <-- NEW, creates white space under the header */
130+
box-sizing: border-box;
131+
}
132+
133+
134+
.hero-overlay {
135+
position: absolute;
136+
top: 0;
137+
right: 0;
138+
bottom: 0;
139+
left: 0;
140+
background-color: rgba(0, 0, 0, 0.5);
141+
}
142+
143+
.hero-content {
144+
position: relative;
145+
z-index: 2;
146+
max-width: 800px;
147+
}
148+
149+
.hero-title {
150+
font-family: 'Poppins', sans-serif;
151+
font-weight: 700;
152+
font-size: 48px;
153+
line-height: 1.2;
154+
color: #ffffff;
155+
text-align: left;
156+
max-width: 600px; /* keeps the line breaks like the real site */
157+
margin: 0 auto 0 0;
158+
159+
}
160+
161+
.highlight {
162+
color: #ddff00; /* Gold Highlight */
163+
}
164+
165+
.hero-text {
166+
font-size: 1.2rem;
167+
}
168+
169+
.programs-section {
170+
margin-top: 60px;
171+
text-align: center;
172+
}
173+
174+
.programs-section h2 {
175+
font-size: 2rem;
176+
margin-bottom: 30px;
177+
}
178+
179+
.programs {
180+
list-style: none;
181+
display: grid;
182+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
183+
gap: 20px;
184+
padding: 0;
185+
}
186+
187+
.program {
188+
background-color: #f4f4f4;
189+
padding: 20px;
190+
border-radius: 8px;
191+
transition: box-shadow 0.3s ease;
192+
}
193+
194+
.program:hover {
195+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
196+
}
197+
198+
.program h3 {
199+
margin-bottom: 10px;
200+
font-size: 1.5rem;
201+
}
202+
203+
.program p {
204+
font-size: 1rem;
205+
}
206+
207+
.footer {
208+
background-color: #222;
209+
color: #fff;
210+
text-align: center;
211+
padding: 20px;
212+
margin-top: 40px;
213+
}
214+
215+
.highlight {
216+
color: inherit;
217+
background-image: linear-gradient(to bottom, transparent 65%, #f37f0b 65%);
218+
background-repeat: no-repeat;
219+
background-size: 100% 100%;
220+
}
221+
222+
.hero-content {
223+
position: relative;
224+
z-index: 2;
225+
max-width: 800px;
226+
margin-left: 60px;
227+
margin-top: 100px; /* vertically aligns the hero-title */
228+
}

‎lesson_24/ananatawa/server.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const express = require('express');
2+
const app = express();
3+
const PORT = 3000;
4+
5+
app.use(express.urlencoded({ extended: true }));
6+
app.use(express.static('public'));
7+
8+
// Home page
9+
app.get('/', (req, res) => {
10+
res.send('<h1>Welcome to My Site</h1><p><a href="/contact">Contact Us</a></p>');
11+
});
12+
13+
// Handle form submission
14+
app.post('/contact', (req, res) => {
15+
const { name, message } = req.body;
16+
res.send(`<h3>Thanks, ${name}!</h3><p>Your message: ${message}</p>`);
17+
});
18+
19+
app.listen(PORT, () => {
20+
console.log(`Server running at http://localhost:${PORT}`);
21+
});

0 commit comments

Comments
 (0)