[박유빈] week4

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

home/home.css

@@ -0,0 +1,267 @@
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+}
+header {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: #f0f6ff;
+  position: fixed;
+}
+a {
+  text-decoration: none;
+}
+main {
+  margin-bottom: 50px;
+}
+#top_div {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 20px 200px;
+}
+.logo_img {
+  width: 133px;
+  height: 24px;
+}
+.btn {
+  margin: 0;
+  display: flex;
+  padding: 16px 20px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border: none;
+  border-radius: 8px;
+  background: var(
+    --gra-purpleblue-to-skyblue,
+    linear-gradient(91deg, #6d6afe 0.12%, #6ae3fe 101.84%)
+  );
+  color: white;
+  width: 350px;
+  flex-shrink: 0;
+}
+.login_btn {
+  width: 128px;
+  cursor: pointer;
+}
+main {
+  width: 100%;
+}
+.first_page_back {
+  background: #f0f6ff;
+}
+.first_page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* gap: 40px; */
+  margin: 0;
+  margin-bottom: 120px;
+}
+span {
+  background: linear-gradient(91deg, #6d6afe 17.28%, #ff9f9f 74.98%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.infors {
+  margin-top: 100px;
+  margin-bottom: 40px;
+  padding-top: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.infor {
+  font-family: Pretendard;
+  font-size: 64px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 80px; /* 125% */
+  color: #000;
+  flex-shrink: 0;
+  margin: 0;
+}
+.br {
+  display: flex;
+  gap: 20px;
+}
+.link_btn {
+  width: 350px;
+  margin: 0;
+  margin-bottom: 40px;
+  cursor: pointer;
+}
+.first_page_img_back {
+  background-color: #f0f6ff;
+  width: 1200px;
+  height: 590px;
+  display: flex;
+  justify-content: center;
+  padding: 50px 0;
+  overflow: hidden;
+}
+.first_page_img {
+  width: 1118px;
+  height: 659px;
+  background-size: contain;
+  background-position: center;
+  flex-shrink: 0;
+  border-radius: 25px;
+  background-image: linear-gradient(
+      180deg,
+      rgba(196, 196, 196, 0) 67.68%,
+      #f0f6ff 94.76%
+    ),
+    url(image/page.png);
+  box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.08);
+}
+.next_page {
+  width: 100%;
+  display: flex;
+  margin: 100px auto;
+  justify-content: space-evenly;
+  align-items: center;
+}
+.texts {
+  display: flex;
+  width: 291px;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-around;
+  gap: 10px;
+  flex-shrink: 0;
+  margin: 0;
+}
+.text {
+  margin: 0;
+  color: #000;
+  font-family: Pretendard;
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: -0.3px;
+}
+.text_sml {
+  color: #6b6b6b;
+  font-family: Abel;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%; /* 24px */
+}
+.imgs {
+  width: 550px;
+  height: 450px;
+  border-radius: 15px;
+}
+footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0;
+  padding: 32px 104px 64px;
+  background: var(--The-julge-black, #111322);
+}
+#codeit {
+  color: #676767;
+  text-align: center;
+  font-family: Acme;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+#center {
+  display: flex;
+  gap: 30px;
+  color: #cfcfcf;
+  font-family: Acme;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.privacy,
+.faq {
+  color: white;
+}
+#icon {
+  display: flex;
+  gap: 10px;
+}
+@media (max-width: 1199px) {
+  #top_div {
+    margin: 13px 32px;
+  }
+  .first_page {
+    width: 698px;
+    margin: 0 auto;
+  }
+  .first_page_img_back {
+    width: 698px;
+    height: 343px;
+    padding: 29px;
+  }
+  .first_page_img {
+    width: 650.303px;
+    height: 383.114px;
+    flex-shrink: 0;
+  }
+  .imgs {
+    width: 385px;
+    height: 315px;
+  }
+  .br {
+    flex-direction: column;
+    gap: 0;
+  }
+}
+@media (max-width: 767px) {
+  #top_div {
+    margin: 13px 32px;
+  }
+  .text_img {
+    padding: 0 30px;
+  }
+  .first_page {
+    width: 100%;
+    padding: 0 32px;
+  }
+  .next_page {
+    flex-direction: column;
+    margin: 70px 0;
+    gap: 24px;
+  }
+  .left {
+    flex-direction: column-reverse;
+  }
+  .texts {
+    width: 100%;
+  }
+  .text {
+    font-size: 24px;
+  }
+  .first_page_img_back {
+    width: 100%;
+    padding: 30px;
+  }
+  .first_page_img {
+    background-repeat: no-repeat;
+    width: 100%;
+    flex-shrink: 0;
+  }
+  .imgs {
+    width: 100%;
+    height: auto;
+  }
+  .br {
+    flex-direction: column;
+    gap: 0;
+  }
+}

home/home.html

@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta property="og:title" content="Linkbrary" />
+    <meta
+      property="og:description"
+      content="세상의 모든 정보를 쉽게 저장하고 관리해 보세요"
+    />
+    <meta property="og:image" content="image/page.png" />
+    <meta property="og:url" content="https://www.codeit.kr" />
+    <link rel="stylesheet" href="home.css" />
+    <title>Linkbrary</title>
+  </head>
+  <body>
+    <header class="top">
+      <nav id="top_div">
+        <img class="logo_img" src="logo.svg" alt="" />
+        <a class="login_btn btn" href="../login/login.html">로그인</a>
+      </nav>
+    </header>
+    <main>
+      <article class="first_page_back">
+        <div class="first_page">
+          <div class="infors">
+            <div class="infor"><span>세상의 모든 정보</span>를</div>
+            <div class="br">
+              <div class="infor">쉽게 저장하고</div>
+              <div class="infor">관리해 보세요</div>
+            </div>
+          </div>
+          <a class="link_btn btn" href="../join/join.html">링크 추가하기</a>
+          <div class="first_page_img_back">
+            <div class="first_page_img"></div>
+          </div>
+        </div>
+      </article>
+      <article class="text_img">
+        <section class="next_page">
+          <div class="texts">
+            <div class="text"><span>원하는 링크</span>를 저장하세요</div>
+            <div class="text_sml">
+              나중에 읽고 싶은 글, 다시 보고 싶은 영상, 사고 싶은 옷, 기억하고
+              싶은 모든 것을 한 공간에 저장하세요.
+            </div>
+          </div>
+          <img class="imgs" src="image/dog.png" alt="" />
+        </section>
+
+        <section class="next_page left">
+          <img class="imgs" src="image/folder.png" alt="" />
+          <div class="texts">
+            <div class="text">
+              링크를 폴더로
+              <span>관리</span>하세요
+            </div>
+            <div class="text_sml">
+              나만의 폴더를 무제한으로 만들고 다양하게 활용할 수 있습니다.
+            </div>
+          </div>
+        </section>
+
+        <section class="next_page">
+          <div class="texts">
+            <div class="text">
+              저장한 링크를
+              <span>공유</span>해 보세요.
+            </div>
+            <div class="text_sml">
+              여러 링크를 폴더에 담고 공유할 수 있습니다. 가족, 친구, 동료들에게
+              쉽고 빠르게 링크를 공유해 보세요.
+            </div>
+          </div>
+          <img class="imgs" src="image/share.png" alt="" />
+        </section>
+
+        <section class="next_page left">
+          <img class="imgs" src="image/search.png" alt="" />
+          <div class="texts">
+            <div class="text">
+              저장한 링크를
+              <span>검색</span>해 보세요
+            </div>
+            <div class="text_sml">
+              중요한 정보들을 검색으로 쉽게 찾아보세요.
+            </div>
+          </div>
+        </section>
+      </article>
+    </main>
+    <footer>
+      <p id="codeit">©codeit - 2023</p>
+      <div id="center">
+        <a class="privacy" href="http://www.facebook.com">Privacy Policy</a>
+        <a class="faq" href="http://www.facebook.com">FAQ</a>
+      </div>
+      <div id="icon">
+        <a href="http://www.facebook.com">
+          <img src="icon/landing/akar-icons_facebook-fill.svg" alt="" />
+        </a>
+        <a href="http://www.twitter.com">
+          <img src="icon/landing/akar-icons_twitter-fill.svg" alt="" />
+        </a>
+        <a href="http://www.youtube.com">
+          <img src="icon/landing/akar-icons_youtube-fill.svg" alt="" />
+        </a>
+        <a href="http://www.instagram.com">
+          <img src="icon/landing/ant-design_instagram-filled.svg" alt="" />
+        </a>
+      </div>
+    </footer>
+  </body>
+</html>