Merge pull request #51 from jisurk/part1-우지석-week2

[우지석]Week2
codeit-bootcamp-frontend · Feb 29, 2024 · 5e9f088 · 5e9f088
2 parents 4dc5dd0 + 4bf7fb9
commit 5e9f088
Show file tree

Hide file tree

Showing 18 changed files with 799 additions and 0 deletions.
diff --git a/img/facebook.svg b/img/facebook.svg
diff --git a/img/google.svg b/img/google.svg
diff --git a/img/instagram.svg b/img/instagram.svg
diff --git a/img/kakao.svg b/img/kakao.svg
diff --git a/img/logo.svg b/img/logo.svg
diff --git a/img/main.png b/img/main.png
diff --git a/img/manage.png b/img/manage.png
diff --git a/img/save.png b/img/save.png
diff --git a/img/search.png b/img/search.png
diff --git a/img/share.png b/img/share.png
diff --git a/img/twitter.svg b/img/twitter.svg
diff --git a/img/youtube.svg b/img/youtube.svg
diff --git a/main.html b/main.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <me ta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Linkbrary</title>
+    <link rel="stylesheet" href="main.style.css" />
+  </head>
+  <body>
+    <nav>
+      <div class="bar">
+        <a href="index.html">
+          <img class="header-logo" src="./img/logo.svg" alt="logo" />
+        </a>
+        <a class="login" href="signin.html">로그인</a>
+      </div>
+    </nav>
+
+    <div class="main">
+      <div class="main-description">
+        <span class="text-gradient">세상의 모든 정보</span
+        ><span
+          >를<br />
+          쉽게 저장하고 관리해 보세요</span
+        >
+      </div>
+      <div class="signUp">
+        <a class="addLink" href="signup.html">링크 추가하기</a>
+      </div>
+      <div class="header-img-section">
+        <img class="header-img" src="./img/main.png" alt="header-img" />
+      </div>
+    </div>
+    <div class="section save">
+      <div class="save-description">
+        <h2>
+          <span class="link-gradient">원하는 링크</span>를<br />
+          저장하세요
+        </h2>
+        <div class="description">
+          나중에 읽고 싶은 글. 다시 보고싶은 영상.<br />
+          사고싶은 옷. 기억하고 싶은 모든 것을<br />
+          한 공간에 저장하세요.
+        </div>
+      </div>
+      <img class="save-img" src="./img/save.png" alt="save" />
+    </div>
+    <div class="section">
+      <img class="manage-image" src="./img/manage.png" alt="manage" />
+      <div class="manage-description">
+        <h2>
+          링크를 폴더로<br />
+          <span class="manage-gradient">관리</span>하세요.
+        </h2>
+        <div class="description">
+          나만의 폴더를 무제한으로 만들고<br />
+          다양하게 활용할 수 있습니다.
+        </div>
+      </div>
+    </div>
+    <div class="section share">
+      <div class="share-description">
+        <h2>
+          저장한 링크를<br />
+          <span class="share-gradient">공유</span>해 보세요.
+        </h2>
+        <div class="description">
+          여러 링크를 폴더에 담고 공유할 수 있습니다.<br />
+          가족, 친구, 동료들에게 쉽고 빠르게 링크를<br />
+          공유해보세요.
+        </div>
+      </div>
+      <img class="share-img" src="./img/share.png" alt="share" />
+    </div>
+    <div class="section search">
+      <img class="search-img" src="./img/search.png" alt="search" />
+      <div class="search-description">
+        <h2>
+          저장한 링크를<br />
+          <span class="search-gradient">검색</span>해 보세요.
+        </h2>
+        <div class="description">중요한 정보들을 검색으로 쉽게 찾아보세요.</div>
+      </div>
+    </div>
+    <div class="footer">
+      <div class="footer-section">
+        <div class="footer-year">©codeit - 2023</div>
+        <div class="footer-main">
+          <a href="privacy.html">privacy Policy</a>
+          <a href="faq.html">FAQ</a>
+        </div>
+        <div class="footer-link">
+          <a href="https://www.facebook.com/"
+            ><img src="./img/facebook.svg" alt="Facebook" name="Facebook"
+          /></a>
+          <a href="https://twitter.com/"
+            ><img src="./img/twitter.svg" alt="Twitter" name="Twitter"
+          /></a>
+          <a href="https://youtube.com">
+            <img src="./img/youtube.svg" alt="Youtube" name="Youtube"
+          /></a>
+          <a href="https://instagram.com"
+            ><img src="./img/instagram.svg" alt="Instagram" name="instagram"
+          /></a>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/main.style.css b/main.style.css
@@ -0,0 +1,223 @@
+* {
+  box-sizing: border-box;
+}
+a {
+  text-decoration: none;
+}
+nav {
+  width: 100%;
+  height: 93px;
+  padding: 20px 200px 20px 200px;
+  background-color: #f0f6ff;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.header-logo {
+  width: 133px;
+  height: 24px;
+}
+.login {
+  background: linear-gradient(90.99deg, #6d6afe 0.12%, #6ae3fe 101.84%);
+  border-radius: 8px;
+  color: #f5f5f5;
+  font-family: "Pretendard";
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 21px;
+  padding: 16px 20px;
+  text-align: left;
+  white-space: nowrap;
+}
+.main {
+  background-color: #f0f6ff;
+  height: 953px;
+  overflow: hidden;
+}
+.main-description {
+  font-family: Pretendard;
+  font-size: 64px;
+  font-weight: 700;
+  line-height: 80px;
+  letter-spacing: 0px;
+  text-align: center;
+}
+.text-gradient {
+  background: linear-gradient(91.26deg, #6d6afe 17.28%, #ff9f9f 74.98%);
+  color: transparent;
+  background-clip: text;
+}
+.signUp {
+  display: flex;
+  justify-content: center;
+}
+.addLink {
+  margin: 24px;
+  background: linear-gradient(90.99deg, #6d6afe 0.12%, #6ae3fe 101.84%);
+  color: #f5f5f5;
+  display: flex;
+  width: 350px;
+  height: 53px;
+  padding: 16px, 20px, 16px, 20px;
+  border-radius: 8px;
+  gap: 10px;
+  justify-content: center;
+  align-items: center;
+  font-family: Pretendard;
+  font-size: 18px;
+  font-weight: 600;
+}
+.header-img-section {
+  display: flex;
+  justify-content: center;
+}
+.header-img {
+  width: 1118px;
+  height: 659px;
+  top: 50px;
+  left: 41px;
+  border-radius: 25px;
+}
+.section {
+  width: 998px;
+  margin: 120px auto 50px;
+  display: grid;
+  grid-template: 1fr/2fr;
+  grid-template-areas: "img des";
+}
+.section.save {
+  grid-template-areas: "des img";
+}
+.save-description {
+  grid-area: des;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+h2 {
+  font-family: Pretendard;
+  font-size: 48px;
+  font-weight: 700;
+  letter-spacing: 0px;
+  text-align: left;
+}
+.link-gradient {
+  background: linear-gradient(95.63deg, #fe8a8a 1.72%, #a4ceff 74.97%);
+  color: transparent;
+  background-clip: text;
+}
+.save-img {
+  grid-area: img;
+  width: 550px;
+  height: 450px;
+  border-radius: 15px;
+  background-color: #f0f6ff;
+}
+.description {
+  font-family: Abel;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0px;
+  text-align: left;
+  margin-top: -20px;
+  color: rgba(107, 107, 107, 1);
+}
+/* .section.manage {
+  display: grid;
+  grid-template: 1fr/2fr;
+  grid-template-areas: "img des";
+} */
+.manage-image {
+  width: 550px;
+  height: 450px;
+  padding: 114px, 68px, 66px, 68px;
+  border-radius: 15px;
+  grid-area: img;
+}
+.manage-gradient {
+  background: linear-gradient(277.01deg, #6fbaff 59.22%, #ffd88b 93.66%);
+  color: transparent;
+  background-clip: text;
+}
+.manage-description {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  grid-area: des;
+}
+.section.share {
+  grid-template-areas: "des img";
+}
+.share-gradient {
+  background: linear-gradient(
+    99.5deg,
+    #6d7ccd 19.76%,
+    rgba(82, 136, 133, 0.22) 52.69%
+  );
+  color: transparent;
+  background-clip: text;
+}
+.share-description {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  grid-area: des;
+}
+.share-img {
+  width: 570px;
+  height: 450px;
+  top: -9px;
+  left: -10px;
+  border-radius: 25px;
+  grid-area: img;
+}
+.section.search {
+  grid-template-areas: "img des";
+}
+.search-img {
+  width: 550px;
+  height: 450px;
+  border-radius: 15px;
+  grid-area: img;
+}
+
+.search-description {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  grid-area: des;
+}
+.search-gradient {
+  background: linear-gradient(271.36deg, #fe578f -9.84%, #68e8f9 107.18%);
+  color: transparent;
+  background-clip: text;
+}
+.footer {
+  background-color: rgba(17, 19, 34, 1);
+  color: rgba(207, 207, 207, 1);
+  width: 100%;
+  height: 160px;
+  padding: 32px 104px 64px;
+}
+.footer-section {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+.footer-year {
+  color: rgba(103, 103, 103, 1);
+}
+.footer-main {
+  display: flex;
+  gap: 30px;
+}
+.footer-main a {
+  color: rgba(207, 207, 207, 1);
+}