web_hosting/index.html at main · junAlexx/web_hosting · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>판다마켓</title>

    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <!-- Navigation bar -->
    <div class="nav">
      <div class="space left"></div>
      <div class="container">
        <a class="button market_home" href="/">
          <img src="./img/index/ic_main.svg" alt="main_icon" />
          <img
            src="./img/index/text_logo_panda_market.svg"
            alt="panda_market_text_logo"
          />
        </a>
        <a class="button login" href="./login.html">로그인</a>
      </div>
      <div class="space right"></div>
    </div>

    <!-- Section_1 -->
    <div class="section_1">
      <div class="container">
        <div class="divider"></div>
        <div class="header_and_button">
          <header>
            일상의 모든 물건을<br />
            거래해보세요
          </header>
          <a class="button item_page" href="./item_page.html"> 구경하러가기 </a>
        </div>
        <div class="divider"></div>
        <div class="img">
          <img
            src="./img/index/Img_home_top_a_panda_with_blue_bag.svg"
            alt="a_panda_with_blue_bag"
          />
        </div>
      </div>
    </div>

    <!-- Main Contents -->
    <div class="main_contents">
      <div class="container">
        <!-- Section_2 -->
        <div class="section_2">
          <img
            src="./img/index/Img_home_01_green_tshirt.svg"
            alt="green_tshirt"
          />
          <div class="text_container">
            <div>
              <div class="blue_text">Hot item</div>
              <div class="header_text">
                인기 상품을<br />
                확인해보세요
              </div>
            </div>
            <div class="text">
              가장 HOT한 중고거래 물품을<br />
              판다 마켓에서 확인해보세요
            </div>
          </div>
        </div>
        <!-- Section_3 -->
        <div class="section_3">
          <img
            src="./img/index/Img_home_02_magnifying_glass.svg"
            alt="magnifying_glass"
          />
          <div class="text_container">
            <div>
              <div class="blue_text">Search</div>
              <div class="header_text">
                구매를 원하는<br />
                상품을 검색하세요
              </div>
            </div>
            <div class="text">
              구매하고 싶은 물품은 검색해서<br />
              쉽게 찾아보세요
            </div>
          </div>
        </div>
        <!-- Section_4 -->
        <div class="section_4">
          <img src="./img/index/Img_home_03_folders.svg" alt="folders" />
          <div class="text_container">
            <div>
              <div class="blue_text">Register</div>
              <div class="header_text">
                판매를 원하는<br />
                상품을 등록하세요
              </div>
            </div>
            <div class="text">
              어떤 물건이든 판매하고 싶은 상품을<br />
              쉽게 등록하세요
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Section_5 -->
    <div class="section_5">
      <div class="container">
        <div class="divider"></div>
        <div class="header_box">
          <header>
            믿을 수 있는<br />
            판다마켓 중고 거래
          </header>
        </div>
        <div class="divider"></div>
        <div class="img">
          <img
            src="./img/index/Img_home_bottom_two_pandas.svg"
            alt="two_pandas"
          />
        </div>
      </div>
    </div>

    <!-- Footer -->
    <div class="footer">
      <div class="container">
        <div class="company">©codeit - 2024</div>
        <div class="policy_and_faq">
          <a class="policy" href="/">Privacy Policy</a>
          <a class="faq" href="/">FAQ</a>
        </div>
        <div class="links">
          <a href="https://www.facebook.com/" target="_blank">
            <img src="./img/index/ic_facebook.svg" alt="facebook" />
          </a>
          <a href="https://x.com/" target="_blank">
            <img src="./img/index/ic_twitter.svg" alt="twitter" />
          </a>
          <a href="https://www.youtube.com/" target="_blank">
            <img src="./img/index/ic_youtube.svg" alt="youtube" />
          </a>
          <a href="https://www.instagram.com/" target="_blank">
            <img src="./img/index/ic_instagram.svg" alt="instagram" />
          </a>
        </div>
      </div>
    </div>
  </body>
</html>