codeit_weekly_work/index.html at main · orrhrr/codeit_weekly_work · 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
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" as="style" crossorigin
        href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard-dynamic-subset.css" />
    <link rel="stylesheet" href="style.css">
    <title>Linkbrary</title>
</head>

<body>
   <!-- 헤더 -->
    <header>
        <a href="/">
        <img src="images/icon/logo.svg" alt="logo image">
        </a>
        <a href="/signin" class="login-link">로그인</a>
    </header>

    <!-- 메인 -->
    <main>

        <!-- 메인 섹션 -->
        <section class="main-section">
            <div class="main-description">
                <h1>
                    <span>세상의 모든 정보</span>를<br>
                    쉽게 저장하고 관리해 보세요
                </h1>

                <a href="/signup" class="add-link">링크 추가하기</a>
            </div>
            <div class="main-image-box">
                <!-- <img src="/images/main_image.png" class="main-image" alt=" search image"> -->
            </div>
        </section>

        <!-- 내용 섹션1 -->
        <div class="section-container">

            <section class="wanted-link-section sections">
                <div class="content">
                    <div class="description">
                        <h2>
                            <span>원하는 링크</span>를<br>
                            저장하세요
                        </h2>
                        <p>
                            나중에 읽고 싶은 글, 다시 보고 싶은 영상,
                            사고 싶은 옷, 기억하고 싶은 모든 것을
                            한 공간에 저장하세요.
                        </p>
                    </div>


                    <div class="wanted-link-cards">
                        <div class="cards-frame">
                        <img src="images/card1.png" alt="wanted-link-card1">
                            <div class="card-border">
                                <img src="images/card2.png" class="select-card" alt="wanted-link-card2">
                            </div>
                        <img src="images/icon/Group 20.svg" class="save-link" alt="save-link">
                        <img src="images/card3.png" alt="wanted-link-card3">
                        </div>
                    </div>
                </div>
            </section>

            <!-- 내용 섹션2 -->
            <section class="folder-management-section sections">
                <div class="content">

                    <div class="popup_folder_name_change-box">
                        <img src="images/팝업_폴더이름변경하기.png" alt="popup_folder_name_change" class="popup_folder_name_change">
                    </div>

                    <div class="description">
                        <h2>
                            링크를 폴더로<br>
                            <span>관리</span>하세요
                        </h2>
                        <p>
                            나만의 폴더를 무제한으로 만들고
                            다양하게 활용할 수 있습니다.
                        </p>
                    </div>


                </div>
            </section>

            <!-- 내용 섹션3 -->
            <section class="link-share-section sections">
                <div class="content">
                    <div class="description">
                        <h2>
                            저장한 링크를<br>
                            <span>공유</span>해 보세요.
                        </h2>
                        <p>
                            여러 링크를 폴더에 담고 공유할 수 있습니다.
                            가족, 친구, 동료들에게 쉽고 빠르게 링크를
                            공유해 보세요.
                        </p>
                    </div>

                    <div class="inner-image-box">
                        <img class="inner-image" src="images/main_image.png" alt="main-image">
                        <img src="images/팝업_폴더 공유하기.png" alt="popup_folder_share" class="popup_folder_share">
                    </div>

                </div>
            </section>

            <!-- 내용 섹션4 -->
            <section class="link-search-section sections">
                <div class="content">
                    <div class="codeit_search_image-box">
                        <img src="images/스크린샷_코드잇 검색결과.png" alt="codeit_search_image" class="codeit_search_image">
                    </div>


                    <div class="description">
                        <h2>
                            저장한 링크를<br>
                            <span>검색</span>해 보세요
                        </h2>
                        <p>
                            중요한 정보들을 검색으로 쉽게 찾아보세요.
                        </p>
                    </div>

                </div>
            </section>

        </div>
        </main>

        <!-- 푸터 -->
        <footer>
            <div class="copyright">
                ©codeit - 2023
            </div>
            <div class="footer-link">
                <a href="/privacy">Privacy Policy</a>
                <a href="/faq">FAQ</a>
            </div>
            <div class="sns_icons">
                <a href="https://www.facebook.com/">
                <img src="images/icon/akar-icons_facebook-fill.svg" alt="facebook_icon"></a>

                <a href="https://twitter.com/?lang=ko"><img src="images/icon/akar-icons_twitter-fill.svg" alt="twitter_icon"></a>

                <a href="https://www.youtube.com/">
                <img src="images/icon/akar-icons_youtube-fill.svg" alt="youtube_icon" ></a>

                <a href="https://www.instagram.com/">
                <img src="images/icon/ant-design_instagram-filled.svg" alt="instagram_icon" ></a>
            </div>
        </footer>

</body>

</html>