Skip to content

Commit a8ae63c

Browse files
Turtle-HwanTurtle-Hwan
authored
Merge pull request #8 from Konkuk-KUIT/turtlehwan
feat: add week2 example code of @Jinho1011
2 parents 0764622 + bf46be1 commit a8ae63c

21 files changed

+1237
-0
lines changed

‎week2/jinho1011/clone/assets/heart.svg

+3
Loading

‎week2/jinho1011/clone/assets/home.svg

+3
Loading

‎week2/jinho1011/clone/assets/kebab.svg

+14
Loading

‎week2/jinho1011/clone/assets/left-chevron copy.svg

Loading

‎week2/jinho1011/clone/assets/left-chevron.svg

+14
Loading

‎week2/jinho1011/clone/assets/right-chevron.svg

+9
Loading

‎week2/jinho1011/clone/assets/share.svg

+14
Loading

‎week2/jinho1011/clone/index.css

+282
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
1+
/* Global Styles */
2+
button {
3+
background: none;
4+
border: none;
5+
padding: 0;
6+
cursor: pointer;
7+
outline: inherit;
8+
}
9+
10+
body {
11+
padding-bottom: 54px;
12+
}
13+
14+
/* Daangn Styles */
15+
.post-header {
16+
position: relative;
17+
}
18+
19+
.post-header header {
20+
width: 100%;
21+
position: absolute;
22+
display: flex;
23+
justify-content: space-between;
24+
padding: 14px 16px;
25+
box-sizing: border-box;
26+
}
27+
28+
.post-header .post-header__icon-container {
29+
display: flex;
30+
gap: 16px;
31+
align-items: center;
32+
}
33+
34+
.post-header .post__image {
35+
max-width: 100%;
36+
max-height: 100%;
37+
}
38+
39+
.post {
40+
padding: 0 16px;
41+
padding-bottom: 54px;
42+
}
43+
44+
.post>section {
45+
padding: 16px 0;
46+
border-bottom: 1px solid #eee;
47+
}
48+
49+
.post>section:last-child {
50+
border-bottom: none;
51+
}
52+
53+
.post__header {
54+
display: flex;
55+
justify-content: space-between;
56+
align-items: center;
57+
}
58+
59+
.post__header .header__user {
60+
display: flex;
61+
justify-content: space-between;
62+
align-items: center;
63+
gap: 8px;
64+
}
65+
66+
.header__user .user__profile-img {
67+
width: 40px;
68+
height: 40px;
69+
border-radius: 100%;
70+
}
71+
72+
.header__user .user__info {
73+
display: flex;
74+
flex-direction: column;
75+
}
76+
77+
.header__user .user__info .user__name {
78+
color: #000;
79+
font-family: Inter;
80+
font-size: 14px;
81+
font-style: normal;
82+
font-weight: 700;
83+
line-height: 18px;
84+
text-align: left;
85+
margin-bottom: 4px;
86+
}
87+
88+
.header__user .user__info .user__address {
89+
color: #4F4F4F;
90+
font-family: Inter;
91+
font-size: 12px;
92+
font-style: normal;
93+
font-weight: 400;
94+
line-height: 16px;
95+
text-align: left;
96+
}
97+
98+
.post__header .header__temperature {
99+
display: flex;
100+
flex-direction: column;
101+
align-items: flex-end;
102+
}
103+
104+
.header__temperature .temperature__container {
105+
display: flex;
106+
align-items: center;
107+
margin-bottom: 4px;
108+
}
109+
110+
.temperature__container .temperature__indicator {
111+
color: #4AC1DB;
112+
font-family: Inter;
113+
font-size: 14px;
114+
font-style: normal;
115+
font-weight: 700;
116+
line-height: 18px;
117+
text-align: left;
118+
margin-right: 4px;
119+
}
120+
121+
.temperature__indicator .temperature__bar {
122+
width: 100%;
123+
height: 2px;
124+
background-color: #d9d9d9;
125+
border-radius: 10px;
126+
127+
.temperature__bar--value {
128+
width: 37%;
129+
height: 2px;
130+
background-color: #4AC1DB;
131+
}
132+
}
133+
134+
.header__temperature .temperature__desc {
135+
color: #8C8C8C;
136+
font-family: Inter;
137+
font-size: 10px;
138+
font-style: normal;
139+
font-weight: 400;
140+
line-height: 12px;
141+
text-decoration-line: underline;
142+
text-align: left;
143+
144+
}
145+
146+
.post__content .post__title {
147+
margin-bottom: 8px;
148+
color: #000;
149+
font-family: Inter;
150+
font-size: 18px;
151+
font-style: normal;
152+
font-weight: 700;
153+
line-height: 28px;
154+
text-align: left;
155+
}
156+
157+
.desc__container {
158+
display: flex;
159+
gap: 2px;
160+
161+
color: #8C8C8C;
162+
font-family: Inter;
163+
font-size: 12px;
164+
font-style: normal;
165+
font-weight: 400;
166+
line-height: 16px;
167+
text-align: left;
168+
169+
.desc--clickable {
170+
text-decoration-line: underline;
171+
}
172+
}
173+
174+
.post__content .post__text {
175+
margin: 16px 0;
176+
color: #000;
177+
font-family: Inter;
178+
font-size: 14px;
179+
font-style: normal;
180+
font-weight: 400;
181+
line-height: 18px;
182+
text-align: left;
183+
}
184+
185+
.post .section__header {
186+
display: flex;
187+
justify-content: space-between;
188+
align-items: center;
189+
width: 100%;
190+
191+
.section__title {
192+
color: #000;
193+
font-family: Inter;
194+
font-size: 14px;
195+
font-style: normal;
196+
font-weight: 700;
197+
line-height: 20px;
198+
text-align: left;
199+
}
200+
}
201+
202+
.post .products__grid {
203+
display: grid;
204+
grid-template-columns: 1fr 1fr;
205+
gap: 24px 16px;
206+
margin: 16px 0 8px;
207+
}
208+
209+
.product__container {
210+
display: flex;
211+
flex-direction: column;
212+
gap: 8px;
213+
}
214+
215+
.product__container .product__img {
216+
width: 100%;
217+
max-height: 118px;
218+
object-fit: cover;
219+
border-radius: 4px;
220+
}
221+
222+
.product__container .product__name {
223+
color: #000;
224+
font-family: Inter;
225+
font-size: 14px;
226+
font-style: normal;
227+
font-weight: 400;
228+
line-height: 18px;
229+
text-align: left;
230+
}
231+
232+
.bottom-bar {
233+
display: flex;
234+
justify-content: space-between;
235+
position: fixed;
236+
bottom: 0;
237+
width: 100%;
238+
background-color: #fff;
239+
padding: 16px 8px 12px;
240+
border-top: 1px solid #d9d9d9;
241+
box-sizing: border-box;
242+
}
243+
244+
.bottom-bar .bar__chat-btn {
245+
border-radius: 4px;
246+
background: #ff7236;
247+
padding: 8px 14px;
248+
color: var(--white, #fff);
249+
font-family: Inter;
250+
font-size: 14px;
251+
font-style: normal;
252+
font-weight: 700;
253+
line-height: 18px;
254+
}
255+
256+
.bar__info-container {
257+
display: flex;
258+
justify-content: space-between;
259+
align-items: center;
260+
gap: 16px;
261+
262+
.divider {
263+
width: 1px;
264+
align-self: stretch;
265+
background-color: #eee;
266+
}
267+
}
268+
269+
.bar__info-container .bar__info {
270+
display: flex;
271+
flex-direction: column;
272+
273+
.product__desc {
274+
color: #8C8C8C;
275+
font-family: Inter;
276+
font-size: 12px;
277+
font-style: normal;
278+
font-weight: 700;
279+
line-height: 18px;
280+
text-align: left;
281+
}
282+
}

0 commit comments

Comments
 (0)