Skip to content

Commit ab1c396

Browse files
zesamerizesameri
committed
Add NYC Weekend Guide HTML and CSS files; implement layout, styling, and content for various sections including accommodations, dining, and nightlife.
1 parent e401ce1 commit ab1c396

File tree

2 files changed

+718
-0
lines changed

2 files changed

+718
-0
lines changed

‎css/nyc.css‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
2+
3+
body {
4+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
5+
font-size: 15px;
6+
line-height: 1.6;
7+
color: #1a1a1a;
8+
background: #f5f4f0;
9+
}
10+
11+
/* ── Layout ── */
12+
.page {
13+
max-width: 960px;
14+
margin: 0 auto;
15+
padding: 2rem 1.5rem 4rem;
16+
}
17+
18+
/* ── Header ── */
19+
.site-header {
20+
margin-bottom: 2.5rem;
21+
border-bottom: 1px solid #ddd;
22+
padding-bottom: 1.5rem;
23+
}
24+
.site-header h1 {
25+
font-size: 28px;
26+
font-weight: 600;
27+
letter-spacing: -0.02em;
28+
margin-bottom: 0.4rem;
29+
}
30+
.site-header p {
31+
color: #666;
32+
font-size: 14px;
33+
}
34+
35+
/* ── Map embed ── */
36+
.map-section {
37+
margin-bottom: 2.5rem;
38+
}
39+
.map-section h2 {
40+
font-size: 13px;
41+
font-weight: 600;
42+
text-transform: uppercase;
43+
letter-spacing: 0.08em;
44+
color: #888;
45+
margin-bottom: 0.75rem;
46+
}
47+
.map-embed {
48+
width: 100%;
49+
height: 420px;
50+
border: 1px solid #ddd;
51+
border-radius: 10px;
52+
overflow: hidden;
53+
background: #eee;
54+
}
55+
.map-embed iframe {
56+
width: 100%;
57+
height: 100%;
58+
border: none;
59+
}
60+
.map-placeholder {
61+
width: 100%;
62+
height: 100%;
63+
display: flex;
64+
flex-direction: column;
65+
align-items: center;
66+
justify-content: center;
67+
gap: 12px;
68+
color: #888;
69+
font-size: 14px;
70+
text-align: center;
71+
padding: 2rem;
72+
}
73+
.map-placeholder .icon {
74+
font-size: 32px;
75+
opacity: 0.4;
76+
}
77+
.map-placeholder a {
78+
color: #1a73e8;
79+
font-weight: 500;
80+
}
81+
82+
/* ── Section headers ── */
83+
.section {
84+
margin-bottom: 2rem;
85+
}
86+
.section-header {
87+
display: flex;
88+
align-items: center;
89+
gap: 10px;
90+
margin-bottom: 0.75rem;
91+
padding-bottom: 0.6rem;
92+
border-bottom: 1px solid #e0ddd8;
93+
}
94+
.section-header h2 {
95+
font-size: 17px;
96+
font-weight: 600;
97+
letter-spacing: -0.01em;
98+
}
99+
.section-tag {
100+
font-size: 11px;
101+
font-weight: 600;
102+
padding: 2px 8px;
103+
border-radius: 99px;
104+
letter-spacing: 0.04em;
105+
text-transform: uppercase;
106+
}
107+
108+
/* tag colors */
109+
.tag-stay { background: #e6f4d7; color: #2e6b11; }
110+
.tag-gp { background: #ede9fd; color: #4a33b5; }
111+
.tag-dtbk { background: #dbeafe; color: #1d4ed8; }
112+
.tag-bush { background: #fde8e0; color: #992d1b; }
113+
.tag-mht { background: #d9f5ec; color: #0e6b50; }
114+
.tag-ktown { background: #fef0d4; color: #7c4a0a; }
115+
.tag-xtra { background: #eeeceb; color: #4a4947; }
116+
117+
/* ── Subsections ── */
118+
.subsection-label {
119+
font-size: 11px;
120+
font-weight: 600;
121+
text-transform: uppercase;
122+
letter-spacing: 0.07em;
123+
color: #999;
124+
margin: 1.2rem 0 0.5rem;
125+
}
126+
127+
/* ── Cards grid ── */
128+
.cards {
129+
display: grid;
130+
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
131+
gap: 8px;
132+
}
133+
134+
.card {
135+
background: #fff;
136+
border: 1px solid #e4e2dd;
137+
border-radius: 10px;
138+
padding: 11px 13px;
139+
display: flex;
140+
flex-direction: column;
141+
gap: 5px;
142+
transition: border-color 0.15s;
143+
}
144+
.card:hover { border-color: #bbb; }
145+
146+
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
147+
148+
.card-name {
149+
font-size: 14px;
150+
font-weight: 600;
151+
color: #1a73e8;
152+
text-decoration: none;
153+
}
154+
.card-name:hover { text-decoration: underline; }
155+
156+
.card-type {
157+
font-size: 11.5px;
158+
color: #888;
159+
margin-top: 1px;
160+
}
161+
162+
.card-note {
163+
font-size: 12.5px;
164+
color: #444;
165+
line-height: 1.5;
166+
}
167+
168+
.card-badges {
169+
display: flex;
170+
flex-wrap: wrap;
171+
gap: 4px;
172+
margin-top: 2px;
173+
}
174+
175+
.badge {
176+
font-size: 10px;
177+
font-weight: 500;
178+
padding: 2px 7px;
179+
border-radius: 99px;
180+
border: 1px solid transparent;
181+
}
182+
.badge-res { background: #e6f4d7; color: #2e6b11; border-color: #b4daa0; }
183+
.badge-walkin { background: #f0efed; color: #5a5855; border-color: #d4d2ce; }
184+
.badge-early { background: #fde8e0; color: #992d1b; border-color: #f5bfae; }
185+
.badge-cash { background: #fef0d4; color: #7c4a0a; border-color: #f9d498; }
186+
.badge-tickets { background: #ede9fd; color: #4a33b5; border-color: #c9bef8; }
187+
188+
/* ── Intro note ── */
189+
.intro-note {
190+
font-size: 13px;
191+
color: #555;
192+
line-height: 1.6;
193+
padding: 10px 14px;
194+
background: #fff;
195+
border: 1px solid #e4e2dd;
196+
border-radius: 8px;
197+
margin-bottom: 1.5rem;
198+
}
199+
.intro-note .badge { display: inline-flex; vertical-align: middle; }
200+
201+
/* ── Footer ── */
202+
footer {
203+
margin-top: 3rem;
204+
padding-top: 1.5rem;
205+
border-top: 1px solid #ddd;
206+
font-size: 12px;
207+
color: #999;
208+
}
209+
210+
@media (max-width: 600px) {
211+
.site-header h1 { font-size: 22px; }
212+
.cards { grid-template-columns: 1fr; }
213+
}

0 commit comments

Comments
 (0)