[유지민] sprint1, 2

CSS/index.css

@@ -0,0 +1,392 @@
+a {
+  text-decoration: none;
+}
+
+.top {
+  display: flex;
+  justify-content: center;
+  border-bottom: 1px solid #dfdfdf;
+  background: #fff;
+
+  position: sticky;
+  top: 0px;
+  z-index: 1000;
+}
+
+.top_container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 1920px;
+  padding: 9px 200px;
+  gap: 10px;
+  /* border: 1px solid black; */
+  cursor: pointer;
+}
+
+.login {
+  display: flex;
+  padding: 12px 23px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  background: var(--Primary-100, #3692ff);
+
+  color: var(--Cool-Gray-100, #f3f4f6);
+
+  /* pretendard/lg-16px-semibold */
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 26px; /* 162.5% */
+  text-wrap: nowrap;
+
+  cursor: pointer;
+}
+
+.hero {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #cfe5ff;
+  /* border: 1px solid black; */
+}
+
+.hero_container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-end;
+  padding: 200px 405px 0 405px;
+  gap: 7px;
+  /* border: 1px solid black; */
+}
+
+.hero_content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-bottom: 60px;
+  gap: 32px;
+
+  color: var(--Secondary-700, #374151);
+  font-family: Pretendard;
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 140%;
+  white-space: nowrap;
+
+  cursor: pointer;
+}
+
+.go {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px 124px;
+
+  color: var(--Secondary-50, #f9fafb);
+  text-align: center;
+  /* pretendard/xl-20px-semibold */
+  font-family: "Pretendard";
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 32px;
+
+  border-radius: 40px;
+  background: var(--brand-blue, #3692ff);
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  /* border: 1px solid black; */
+}
+
+.set1,
+.set3 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 138px 344px;
+  gap: 64px;
+  /* border: 1px solid black; */
+}
+
+.set2 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 138px 344px;
+  gap: 64px;
+  /* border: 1px solid black; */
+}
+
+.frame1,
+.frame3 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  text-align: start;
+  text-wrap: nowrap;
+  gap: 12px;
+  /* border: 1px solid black; */
+}
+
+.frame2 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  text-align: end;
+  text-wrap: nowrap;
+  gap: 12px;
+  /* border: 1px solid black; */
+}
+
+.keyword {
+  color: var(--Primary-100, #3692ff);
+  /* pretendard/2lg-18px-bold */
+  font-family: Pretendard;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+}
+
+.set_t {
+  color: var(--Secondary-700, #374151);
+  font-family: Pretendard;
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 140%; /* 56px */
+  letter-spacing: 0.8px;
+}
+
+.set_t2 {
+  color: var(--Secondary-700, #374151);
+  /* pretendard/2xl-24px-medium */
+  font-family: Pretendard;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 32px; /* 133.333% */
+}
+
+.footer {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  background: #cfe5ff;
+
+  padding: 143px 405px 0 405px;
+}
+
+.footer_container {
+  display: flex;
+  align-items: center;
+  gap: 69px;
+
+  color: var(--Secondary-700, #374151);
+  font-family: Pretendard;
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 140%; /* 56px */
+  text-wrap: nowrap;
+}
+
+.bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  height: 160px;
+  padding: 32px 200px;
+  background: var(--Secondary-900, #111827);
+  gap: 20px;
+}
+
+.t1 {
+  color: var(--Secondary-400, #9ca3af);
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.t2 {
+  display: flex;
+  gap: 30px;
+  color: var(--Secondary-200, #e5e7eb);
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.landing {
+  gap: 30px;
+  color: var(--Secondary-200, #e5e7eb);
+  text-align: center;
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+
+  cursor: pointer;
+}
+
+.t3 {
+  display: flex;
+  /* flex-wrap: wrap; */
+  gap: 10px;
+  cursor: pointer;
+}
+
+/*========타블렛 다바이스용 (700~ )======*/
+@media (max-width: 1200px) {
+  .footer_container {
+    flex-direction: column;
+    text-align: start;
+  }
+  .top_container {
+    padding: 1px 30px;
+    gap: 150px;
+  }
+  .go {
+    padding: 12px 50px;
+  }
+  .login {
+    padding: 12px 30px;
+    border-radius: 10px;
+  }
+  .footer {
+    padding: 40px 70px 0 70px;
+  }
+  .bottom {
+    padding: 20px 50px;
+  }
+  .hero_content {
+    gap: 10px;
+    padding: 10px 0;
+  }
+  .hero_container {
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 10px;
+    padding: 30px 150px 0px 150px;
+  }
+  .set1,
+  .set2,
+  .set3 {
+    flex-direction: row;
+    text-align: center;
+    white-space: nowrap;
+    padding: 35px 50px;
+    gap: 60px;
+  }
+  /* 40px 크기 */
+  .hero_content,
+  .set_t,
+  .footer_container {
+    font-size: 30px;
+    line-height: 115%;
+  }
+  /* 20px 크기*/
+  .login,
+  .go,
+  .set_t2 {
+    font-size: 20px;
+    line-height: 30px;
+  }
+  .keyword {
+    font-size: 15px;
+  }
+
+  img {
+    width: 100%;
+    max-width: 300px;
+    min-width: 200px;
+    height: auto; /* 높이를 고정할 경우 */
+  }
+}
+
+/*=============핸드폰 다바이스용 (345~ )===========*/
+@media (max-width: 700px) {
+  .set1,
+  .set2,
+  .set3 {
+    flex-direction: row;
+    text-align: center;
+    white-space: nowrap;
+    padding: 35px 50px;
+    gap: 20px;
+  }
+  .login {
+    padding: 5px 10px;
+    border-radius: 4px;
+  }
+  .go {
+    padding: 6px 15px;
+  }
+  .hero_container {
+    justify-content: flex-end;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 70px 0px 70px;
+  }
+
+  .footer_container {
+    flex-direction: column;
+    text-align: center;
+    gap: 25px;
+  }
+  /* 40px 크기 */
+  .hero_content,
+  .set_t,
+  .footer_container {
+    font-size: 13px;
+    line-height: 115%;
+  }
+  /* 20px 크기*/
+  .login,
+  .go,
+  .set_t2 {
+    font-size: 8px;
+    line-height: 10px;
+  }
+  .keyword,
+  .t1,
+  .landing {
+    font-size: 8px;
+  }
+
+  .top_container img {
+    width: 50px;
+  }
+
+  img {
+    width: 100%;
+    max-width: 200px;
+    min-width: 80px;
+    height: auto; /* 높이를 고정할 경우 */
+  }
+}
+
+.t3 img {
+  max-width: 100%;
+  min-width: 1px;
+  height: auto;
+}