Skip to content

Commit b44a4ac

Browse files
Lennon57Lennon57
authored
Merge pull request #115 from codingaring/part1-김유경-week2
[김유경] Week3
2 parents 87e3f15 + f785f5d commit b44a4ac

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+1303
-0
lines changed

‎css/colors.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
:root {
2+
--primary: #6d6afe;
3+
--red: #ff5b56;
4+
--black: #111322;
5+
--white: #ffffff;
6+
7+
--gray1: #3e3e43;
8+
--gray2: #9fa6b2;
9+
--gray3: #ccd5e3;
10+
--gray4: #e7effb;
11+
12+
--background: #f0f6ff;
13+
}

‎css/common.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@import "./colors.css";
2+
@import "./setting.css";
3+
@import "./font.css";

‎css/font.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/** font **/
2+
@font-face {
3+
font-family: "Pretendard-Regular";
4+
src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff")
5+
format("woff");
6+
font-weight: 400;
7+
font-style: normal;
8+
}

‎css/index.css

Lines changed: 329 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,329 @@
1+
@import "./common.css";
2+
3+
/** 여러 요소에 적용 **/
4+
.button {
5+
padding: 15px 35px;
6+
background: linear-gradient(90deg, var(--primary), #6ae3fe);
7+
border-radius: 8px;
8+
cursor: pointer;
9+
}
10+
11+
.button a {
12+
color: var(--white);
13+
font-size: 1.8rem;
14+
}
15+
16+
main img {
17+
width: 111.8rem;
18+
}
19+
20+
.title {
21+
width: 29.1rem;
22+
font-size: 4.8rem;
23+
font-weight: 700;
24+
}
25+
26+
/** header **/
27+
.gnb {
28+
padding: 20px 200px;
29+
position: fixed;
30+
top: 0;
31+
left: 0;
32+
right: 0;
33+
background-color: var(--background);
34+
}
35+
36+
nav {
37+
display: flex;
38+
justify-content: space-between;
39+
align-items: center;
40+
margin: 0 auto;
41+
}
42+
43+
nav img {
44+
cursor: pointer;
45+
width: 13.3rem;
46+
}
47+
48+
/** main **/
49+
main {
50+
background-color: var(--white);
51+
display: flex;
52+
flex-direction: column;
53+
justify-content: center;
54+
align-items: center;
55+
}
56+
57+
.section-top {
58+
width: 100%;
59+
height: 100%;
60+
background-color: var(--background);
61+
display: flex;
62+
flex-direction: column;
63+
justify-content: center;
64+
align-items: center;
65+
gap: 30px;
66+
padding-top: 12rem;
67+
margin-bottom: 7rem;
68+
}
69+
70+
.section-top img {
71+
width: 111.8rem;
72+
height: 65.9rem;
73+
}
74+
75+
.main-title {
76+
font-size: 6.4rem;
77+
font-weight: 700;
78+
text-align: center;
79+
}
80+
81+
.main-title span {
82+
background: linear-gradient(90deg, var(--primary), #ff9f9f);
83+
color: transparent;
84+
-webkit-background-clip: text;
85+
}
86+
87+
.add-link.button {
88+
padding: 1.5rem 10rem;
89+
} /** section top **/
90+
91+
.explanation {
92+
font-size: 1.6rem;
93+
font-weight: 400;
94+
color: #6b6b6b;
95+
place-self: flex-start flex-start;
96+
}
97+
98+
.section-container {
99+
display: grid;
100+
grid-template-columns: 1fr 1fr;
101+
place-items: flex-end flex-end;
102+
gap: 1rem 15.7rem;
103+
width: 99.8rem;
104+
height: 45rem;
105+
margin: 5rem auto;
106+
}
107+
108+
.section-container img {
109+
width: 55rem;
110+
height: 45rem;
111+
grid-area: 1 / 2 / 3 / 3;
112+
}
113+
114+
#second-section img,
115+
#fourth-section img {
116+
grid-area: 1 / 1 / 3 / 2;
117+
}
118+
119+
/** text gradiant **/
120+
.link {
121+
background: linear-gradient(90deg, #fe8a8a, #a4ceff);
122+
color: transparent;
123+
-webkit-background-clip: text;
124+
}
125+
126+
.manage {
127+
background: linear-gradient(270deg, #6fbaff, #ffd88b);
128+
color: transparent;
129+
-webkit-background-clip: text;
130+
}
131+
132+
.share {
133+
background: linear-gradient(90deg, #6d7ccd, #52888538);
134+
color: transparent;
135+
-webkit-background-clip: text;
136+
}
137+
138+
.search {
139+
background: linear-gradient(270deg, #fe578f, #68e8f9 25%);
140+
color: transparent;
141+
-webkit-background-clip: text;
142+
}
143+
144+
/** footer **/
145+
footer {
146+
margin-top: 150px;
147+
height: 160px;
148+
background-color: var(--black);
149+
font-size: 1.8rem;
150+
display: flex;
151+
justify-content: space-between;
152+
align-items: flex-start;
153+
padding: 3.2rem 10.4rem 6.4rem 10.4rem;
154+
position: relative;
155+
}
156+
157+
.footer-nav {
158+
width: 50%;
159+
display: flex;
160+
justify-content: space-between;
161+
align-items: center;
162+
}
163+
164+
footer img {
165+
width: 18px;
166+
margin: 8px;
167+
cursor: pointer;
168+
}
169+
170+
.copyright {
171+
color: #676767;
172+
}
173+
174+
.footer-menu {
175+
display: flex;
176+
align-items: center;
177+
justify-content: center;
178+
gap: 20px;
179+
}
180+
181+
.footer-menu a {
182+
color: #cfcfcf;
183+
}
184+
185+
/** Tablet **/
186+
@media (max-width: 1199px) {
187+
/** nav **/
188+
.login.button {
189+
width: 12.8rem;
190+
display: grid;
191+
grid-row: 1 / 2;
192+
grid-column: 4 / 5;
193+
}
194+
195+
.gnb {
196+
padding: 2rem 0;
197+
}
198+
199+
nav {
200+
width: 79.9rem;
201+
margin: 0 auto;
202+
}
203+
204+
/** section top **/
205+
.main-title {
206+
font-size: 6.3rem;
207+
width: 47.2rem;
208+
height: 24rem;
209+
}
210+
211+
.section-top {
212+
margin-bottom: 3rem;
213+
}
214+
215+
.section-top img {
216+
width: 65.03rem;
217+
height: 38.311rem;
218+
}
219+
220+
/** section **/
221+
.section-container img {
222+
width: 38.5rem;
223+
height: 31.5rem;
224+
}
225+
226+
.section-container {
227+
padding: 5rem auto 0;
228+
gap: 1rem 5.1rem;
229+
width: 69.8rem;
230+
height: 31.5rem;
231+
margin: 5rem auto 0;
232+
}
233+
234+
.writing {
235+
width: 26.2rem;
236+
height: 19.6rem;
237+
gap: 1rem;
238+
}
239+
}
240+
241+
/** Mobile **/
242+
@media (max-width: 767px) {
243+
.button a {
244+
font-size: 1.4rem;
245+
line-height: 1.671rem;
246+
}
247+
248+
/** nav **/
249+
.gnb {
250+
width: 100%;
251+
padding: 1.3rem 3.2rem;
252+
}
253+
254+
nav {
255+
margin-left: 3.2rem;
256+
margin-right: 3.2rem;
257+
}
258+
259+
nav img {
260+
width: 8.867rem;
261+
}
262+
263+
/** section top **/
264+
.section-top img {
265+
object-fit: cover;
266+
padding-left: 3.2rem;
267+
padding-right: 3.2rem;
268+
border-radius: 25px;
269+
}
270+
271+
.section-top {
272+
font-size: 3.2rem;
273+
}
274+
275+
/** section **/
276+
.section {
277+
display: flex;
278+
flex-direction: column;
279+
gap: 2rem;
280+
}
281+
282+
.section-container {
283+
padding: 4rem 3.2rem 4rem 3.3rem;
284+
width: 100%;
285+
height: auto;
286+
display: flex;
287+
flex-direction: column;
288+
place-items: flex-start center;
289+
}
290+
291+
.title {
292+
font-size: 2.4rem;
293+
order: 0;
294+
}
295+
296+
.section-container img {
297+
margin: 0 3.2rem;
298+
object-fit: cover;
299+
place-self: center center;
300+
width: 100%;
301+
height: auto;
302+
order: 1;
303+
}
304+
305+
.explanation {
306+
font-size: 1.5rem;
307+
order: 3;
308+
}
309+
310+
/** footer **/
311+
footer {
312+
width: 100%;
313+
height: 16rem;
314+
padding: 3.2rem 3.2rem 6.4rem 3.2rem;
315+
align-items: flex-start;
316+
}
317+
318+
.footer-nav {
319+
display: flex;
320+
flex-direction: column;
321+
justify-content: space-between;
322+
align-items: flex-start;
323+
gap: 6rem;
324+
}
325+
326+
.copyright {
327+
order: 1;
328+
}
329+
}

‎css/setting.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/** 기본 설정 **/
2+
* {
3+
box-sizing: border-box;
4+
margin: 0;
5+
font-family: "Pretendard-Regular";
6+
}
7+
8+
/** rem을 사용할 때, 계산하기 쉽게 하기 위해서 **/
9+
html,
10+
body {
11+
font-size: 62.5%;
12+
}
13+
14+
a {
15+
text-decoration: none;
16+
cursor: pointer;
17+
}
18+
19+
button {
20+
border: none;
21+
}

0 commit comments

Comments
 (0)