Skip to content

Commit 3785779

Browse files
dongquidongqui
authored
Merge pull request #25 from daonJeon/Basic-전수영-sprint1
[전수영] sprint1
2 parents 4dc5dd0 + 4c981bf commit 3785779

12 files changed

+216
-0
lines changed

‎images/ico_facebook.png

386 Bytes
Loading

‎images/ico_insta.png

396 Bytes
Loading

‎images/ico_twitter.png

334 Bytes
Loading

‎images/ico_youtube.png

286 Bytes
Loading

‎images/img_home_01.png

13.2 KB
Loading

‎images/img_home_02.png

26.6 KB
Loading

‎images/img_home_03.png

9.63 KB
Loading

‎images/img_home_bottom.png

65.6 KB
Loading

‎images/img_home_top.png

55.5 KB
Loading

‎images/logo.png

2.87 KB
Loading

‎index.html

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css" />
7+
<title>판다마켓</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<header id="header" class="header">
12+
<div class="main_inner">
13+
<h1 class="logo"><a href="/"><img src="images/logo.png" alt="판다마켓"/></a></h1>
14+
<a href="/login" class="btn-blue small48">로그인<span></span></a>
15+
</div>
16+
</header>
17+
18+
<main id="contents">
19+
<section id="section_top" class="section section_top">
20+
<div class="main_inner">
21+
<div class="text_box">
22+
<h2 class="main_text">일상의 모든 물건을<br>거래해 보세요</h2>
23+
<a href="/items" class="btn-blue large">구경하러 가기<span></span></a>
24+
</div>
25+
</div>
26+
</section>
27+
<section id="section2" class="section section2">
28+
<div class="main_inner">
29+
<div class="center_box">
30+
<img src="images/img_home_01.png" alt=""/>
31+
<div class="text_box">
32+
<span class="tag_text">Hot item</span>
33+
<h2 class="main_text">인기 상품을<br>확인해 보세요</h2>
34+
<p class="desc_text">가장 HOT한 중고거래 물품을<br>판다 마켓에서 확인해 보세요</p>
35+
</div>
36+
</div>
37+
</div>
38+
</section>
39+
<section id="section3" class="section section3">
40+
<div class="main_inner">
41+
<div class="center_box">
42+
<div class="text_box">
43+
<span class="tag_text">Search</span>
44+
<h2 class="main_text">구매를 원하는<br>상품을 검색하세요</h2>
45+
<p class="desc_text">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
46+
</div>
47+
<img src="images/img_home_02.png" alt=""/>
48+
</div>
49+
</div>
50+
</section>
51+
<section id="section4" class="section section4">
52+
<div class="main_inner">
53+
<div class="center_box">
54+
<img src="images/img_home_03.png" alt=""/>
55+
<div class="text_box">
56+
<span class="tag_text">Register</span>
57+
<h2 class="main_text">판매를 원하는 <br>상품을 등록하세요</h2>
58+
<p class="desc_text">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
59+
</div>
60+
</div>
61+
</div>
62+
</section>
63+
<section id="section_bottom" class="section section_bottom">
64+
<div class="main_inner">
65+
<div class="text_box">
66+
<h2 class="main_text">믿을 수 있는<br>판다마켓 중고 거래</h2>
67+
</div>
68+
</div>
69+
</section>
70+
</main>
71+
<footer id="footer" class="footer">
72+
<div class="main_inner">
73+
<p class="copyright">©codeit - 2024</p>
74+
<div class="menus">
75+
<a href="/privacy">Privacy Policy</a>
76+
<a href="/faq">FAQ</a>
77+
</div>
78+
<div class="sns">
79+
<a href="https://www.facebook.com/?locale=ko_KR" target="_blank"><img src="images/ico_facebook.png" alt="페이스북"></a>
80+
<a href="https://x.com/?lang=ko" target="_blank"><img src="images/ico_twitter.png" alt="트위터"></a>
81+
<a href="https://www.youtube.com/?hl=ko&gl=KR&app=desktop" target="_blank"><img src="images/ico_youtube.png" alt="유튜브"></a>
82+
<a href="https://www.instagram.com/" target="_blank"><img src="images/ico_insta.png" alt="인스타그램"></a>
83+
</div>
84+
</div>
85+
</footer>
86+
</body>
87+
</html>

‎style.css

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
@charset "UTF-8";
2+
/* reset */
3+
html * {max-height: 999999px;}
4+
html,body{ margin:0px;padding:0px; width:100%; font-family:"Pretendard" , sans-serif;-webkit-text-size-adjust:none;-webkit-font-smoothing:antialiased; letter-spacing: -1px; }
5+
header, footer, section, article, aside, nav, address { display: block; margin:0; } /* ie8 */
6+
ul,ol,li,dl,dd,dt,input,h1,h2,h3,h4,h5,h6,p,b,input,button,textarea,fieldset,legend,td,th{margin:0px; padding:0px; font-weight:normal; word-break:keep-all }
7+
input,textarea,button,select,option {font-family:"Pretendard", sans-serif; }
8+
li{ list-style:none }
9+
fieldset,img,a{ border:0px }
10+
img { max-width:100%; max-height:100%; vertical-align: top; }
11+
a{ display:inline-block;text-decoration:none; cursor: pointer; }
12+
legend,.blind{ position:absolute;top:0;left:-px;width:0;height:0;overflow:hidden;font-size:0;line-height:0 }
13+
caption{ display:none }
14+
input, textarea, button { background: none; border:none; }
15+
button { background: none; border:none; cursor: pointer; }
16+
button,label{ cursor:pointer }
17+
table{ width:100%;border-collapse:collapse;border-spacing:0;text-align:left; table-layout:fixed }
18+
table th, table td{ text-align:left; word-break:break-word;word-wrap:break-word; }
19+
var, em { font-style:normal }
20+
21+
/* input */
22+
input::-webkit-input-placeholder{ color:#999 }
23+
input::-moz-placeholder{ color:#999 }
24+
input:-moz-placeholder{ color:#999 }
25+
input:-ms-input-placeholder{ color:#999 }
26+
textarea::-webkit-input-placeholder{ color:#999 }
27+
textarea::-moz-placeholder{ color:#999 }
28+
textarea:-moz-placeholder{ color:#999 }
29+
textarea:-ms-input-placeholder{ color:#999 }
30+
31+
input:focus::-webkit-input-placeholder{ color:transparent!important }
32+
input:focus::-moz-placeholder{ color:transparent!important }
33+
input:focus:-moz-placeholder{ color:transparent!important }
34+
input:focus:-ms-input-placeholder{ color:transparent!important }
35+
textarea:focus::-webkit-input-placeholder{ color:transparent!important }
36+
textarea:focus::-moz-placeholder{ color:transparent!important }
37+
textarea:focus:-moz-placeholder{ color:transparent!important }
38+
textarea:focus:-ms-input-placeholder{ color:transparent!important }
39+
40+
input:focus, div:focus, select:focus, option:focus, textarea:focus, button:focus{ outline: none; }
41+
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0; }
42+
43+
/* scrollbar */
44+
::-webkit-scrollbar { width: 8px; }
45+
::-webkit-scrollbar-thumb { height: 30%; background: #aaa; border-radius: 10px; }
46+
::-webkit-scrollbar-track { background: #eee; }
47+
.main::-webkit-scrollbar { display: none; }
48+
49+
/* button */
50+
.btn-blue { min-width:88px; width:88px; height:48px; padding:14px 10px; background-color:#3692FF; text-align:center; border-radius:8px; line-height:20px; font-weight: 600; font-size:16px; color:#fff; box-sizing: border-box; }
51+
.btn-blue.small48 { width:128px; height:48px; }
52+
.btn-blue.medium { width:240px; height:48px; border-radius:24px; padding-top:11px; padding-bottom:11px; line-height:26px; font-size:18px }
53+
.btn-blue.large { width:357px; height:56px; border-radius:28px; padding-top:16px; padding-bottom:16px; line-height:24px; font-size:20px }
54+
.btn-blue:hover { background-color: #1967D6; }
55+
.btn-blue:active,.btn-blue:focus { background-color: #1251AA; }
56+
.btn-blue:disabled,.btn-blue.disabled { background-color: #9CA3AF; }
57+
58+
/* layout */
59+
.main_inner { width:1110px; margin:0 auto; box-sizing: border-box; }
60+
61+
/* header */
62+
.header { position:fixed; top:0; left:0; width:100%; height:70px; line-height: 70px; background-color:#fff; z-index:100; box-sizing: border-box;}
63+
.header .main_inner { width:1120px; margin-top:10px; display: flex; justify-content: space-between; align-items: center;}
64+
.header .logo, .header .logo a, .header .logo img { width:147px; height:50px }
65+
66+
/* contents */
67+
#contents { margin-top:70px; }
68+
.tag_text { margin-bottom:12px; line-height:26px; font-weight: 700; font-size:18px; color:#3692FF; text-align: left; }
69+
.main_text { margin-bottom:24px; line-height:56px; font-weight: 700; font-size:40px; color:#374151; text-align: left; }
70+
.desc_text { line-height:32px; font-weight: 500; font-size:24px; color:#374151; text-align: left; }
71+
72+
.section2,.section3,.section4 { padding:138px 0; height:720px; box-sizing: border-box; }
73+
.section_bottom { margin-top:138px; }
74+
.center_box { display:flex; justify-content: center; align-items: center; gap:64px; width: 988px; margin:0 auto; background-color: #FCFCFC; }
75+
.section_top, .section_bottom { height:540px; background-color: #CFE5FF }
76+
.section_top .main_inner { padding:240px 0 100px; background:url(images/img_home_top.png) no-repeat right bottom/ 746px auto; }
77+
.section_bottom .main_inner { padding:255px 0 173px; background:url(images/img_home_bottom.png) no-repeat right bottom/ 746px auto; }
78+
.section_top .main_text + .btn-blue { margin-top:8px; }
79+
80+
81+
/* footer */
82+
.footer { padding:32px 0 108px; background-color: #111827;line-height:20px; font-size:16px; }
83+
.footer .main_inner { width:1120px; display: flex; justify-content: space-between; align-items: center; }
84+
.copyright { color: #9CA3AF }
85+
.footer .menus a { font-weight:400; color:#fff }
86+
.footer .menus a + a { margin-left:30px; }
87+
.footer .sns a + a { margin-left:12px; }
88+
89+
@media (max-width: 1920px) {
90+
.header {padding:0 200px;}
91+
.header .main_inner {width:auto; }
92+
}
93+
94+
/* 브라우저 사이즈에 따른 사이즈 조절 */
95+
@media (max-width: 1120px) {
96+
.btn-blue { min-width:7.8571vw; width:7.8571vw; height:4.2857vw; padding:1.2500vw 0.8929vw; border-radius:0.7143vw; line-height:1.7857vw; font-size:1.4286vw; }
97+
.btn-blue.small48 { width:11.4286vw; height:4.2857vw; }
98+
.btn-blue.medium { width:21.4286vw; height:4.2857vw; border-radius:2.1429vw; padding-top:0.9821vw; padding-bottom:0.9821vw; line-height:2.3214vw; font-size:1.6071vw }
99+
.btn-blue.large { width:31.8750vw; height:5.0000vw; border-radius:2.5000vw; padding-top:1.4286vw; padding-bottom:1.4286vw; line-height:2.1429vw; font-size:1.7857vw }
100+
101+
/* layout */
102+
.main_inner, .footer .main_inner { width:100%; }
103+
104+
/* header */
105+
.header { padding:0 17.8571vw; height:6.2500vw; line-height: 6.2500vw; }
106+
.header .main_inner { margin-top:0.8929vw; }
107+
.header .logo, .header .logo a, .header .logo img { width:13.1250vw; height:4.4643vw }
108+
109+
/* contents */
110+
#contents { margin-top:6.2500vw; }
111+
.tag_text { margin-bottom:1.0714vw; line-height:2.3214vw; font-size:1.6071vw; }
112+
.main_text { margin-bottom:2.1429vw; line-height:5.0000vw; font-size:3.5714vw; }
113+
.desc_text { line-height:2.8571vw; font-weight: 500; font-size:2.1429vw;}
114+
115+
.section2,.section3,.section4 { padding:12.3214vw 0; height:64.2857vw;}
116+
.section_bottom { margin-top:12.3214vw; }
117+
.center_box { gap:5.7143vw; width: 88.2143vw; }
118+
.center_box img {width:51.7857vw}
119+
.section_top, .section_bottom { height:48.2143vw; }
120+
.section_top .main_inner { padding:21.4286vw 5vw 8.9286vw; background-size: 66.6071vw auto; }
121+
.section_bottom .main_inner { padding:22.7679vw 5vw 15.4464vw; background-size: 66.6071vw auto; }
122+
.section_top .main_text + .btn-blue { margin-top:0.7143vw; }
123+
124+
125+
/* footer */
126+
.footer { padding:2.8571vw 5vw 9.6429vw; line-height:1.7857vw; font-size:1.4286vw; }
127+
.footer .menus a + a { margin-left:2.6786vw; }
128+
.footer .sns a + a { margin-left:1.0714vw; }
129+
}

0 commit comments

Comments
 (0)