Update

fold6 · Jul 12, 2024 · 4f6f899 · 4f6f899
1 parent b7b634b
commit 4f6f899
Show file tree

Hide file tree

Showing 15 changed files with 1,820 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,15 @@
-# Gidle_how_to_be_a_queen-landing-respon
- (여자)아이들의 'I Feel' 앨범 티져 영상 속, PC 웹사이트를 임의로 재현한 반응형 웹 페이지
+# how to be a queen 홈페이지 (Fan made)
+(여자)아이들의 'I Feel' 앨범 티져 영상 속, PC 웹사이트를 임의로 재현하여 반응형 웹으로 제작 (영상 속 원본 디자인카피 및 퍼블리싱)<br>
+Recreated the PC website from (G)I-DLE's 'I Feel' album teaser video as a responsive web page)<br>
+<br>
+📌[티져 영상보기](https://youtu.be/38kvqREhg8k?si=i4LJBnqwTAmET3yh&t=29) <br><br>
+
+📌[홈페이지 바로가기](https://fold6.github.io/dreamcatcher_summerholiday_hp/)<br>
+
+<br>
+<br>
+
+## 기능 및 특징
+- 반응형 웹 페이지
+- (여자)아이들 SNS 바로가기 링크버튼 (Tiktok, Instargram, Weverse,Youtube)
+- 'I Feel' 앨범 수록곡 6종의 Playlist 플레이어 팝업 (Register 버튼 클릭)
diff --git a/css/common.css b/css/common.css
@@ -0,0 +1,305 @@
+@charset "utf-8";
+
+* {
+     font-size: 1.7rem;
+}
+
+html{
+     overflow-y: auto;
+}
+.mo_bk_wrap,
+.bk_wrap
+{
+     display: none;
+}
+
+.fas,
+.mobile {
+     display: none;
+}
+.fa-bars{
+     display: none;
+}
+
+/* 스크롤막대지우기 */
+
+*::-webkit-scrollbar {
+     width: 0!important;
+}
+
+
+
+/* mo menu */
+
+header {
+     height: 60px;
+     line-height: 60px;
+     position: relative;
+     width: 100%;
+     text-align: center;
+     box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
+     background-color: #000;
+}
+
+/* 스크롤 고정 */
+header.fixed {
+     width: 100%;
+     position: fixed;
+     top: 0;
+     left: 0;
+     height: 60px;
+     z-index: 5000;
+}
+
+.header_in {
+     text-align: right;
+     width: calc(100% - 40px);
+     height: 100%;
+     display: inline-block;
+     margin: 0 auto;
+}
+
+.header_in div {
+     display: inline-block;
+}
+
+.header_in .logo a img {
+     width: 200px;
+     vertical-align: middle;
+}
+
+.pc_none {
+     display: inline-block;
+}
+
+
+/* pc menu 2개 */
+ul li {
+     display: inline-block;
+     padding: 0 15px;
+     text-align: center;
+
+}
+
+ul li a {
+     font-size: 1.6rem;
+     color: #e499bf;
+}
+
+/* 유튜브 가는 메뉴만 테두리 */
+.G_yt {
+     /* background-color: #555; */
+     border: 1px solid #e499bf;
+     line-height: 36px;
+     border-radius: 5px;
+     height: 40px;
+}
+
+
+
+
+/* header end */
+
+
+
+
+
+/* 위로가기 */
+/* .up {
+     position: fixed;
+     bottom: 0;
+     right: 0;
+     display: inline-block;
+     text-align: center;
+     z-index: 3000;
+}
+
+.up a {
+     box-shadow: 0px 0px 3px rgb(0, 0, 0);
+     position: absolute;
+     z-index: 5000;
+     bottom: 30px;
+     right: 30px;
+     width: 50px;
+     height: 50px;
+     background-color: rgba(82, 81, 81, 0.589);
+     border-radius: 50%;
+
+}
+
+.up img {
+     position: absolute;
+     width: 60%;
+     height: 60%;
+     display: inline-block;
+     transform: rotateZ(-90deg);
+     left: 20%;
+     top: 18%;
+} */
+
+
+
+
+
+/* Mo.ver */
+@media (max-width: 768px) {
+
+     .bk_wrap{
+          display: none;
+     }
+     .mo_bk_wrap{
+          z-index: 4999!important;
+          /* animation: fadeIn .2s ease-in-out forwards; */
+     }
+
+     /* mo.menu */
+     ul li {
+          display: inline-block;
+          text-align: left;
+          width: 100%;
+     }
+
+     /* 유튜브 가는 메뉴만 테두리 */
+     .G_yt {
+          border: none;
+          line-height: 30px;
+          border-radius: 0;
+          height: 33px;
+          width: 100%;
+     }
+
+     .G_yt::after {
+          content: '';
+          display: block;
+          background-color: #e499bf;
+          height: 1px;
+          width: 63px;
+
+     }
+
+
+     ul li a {
+          font-size: 1.6rem;
+          color: #e499bf;
+     }
+
+
+
+
+     .pc_none div {
+          display: none;
+     }
+
+     .ui.button {
+          display: none;
+     }
+
+     /* sementic */
+
+     .mobile {
+          display: block;
+          position: fixed;
+          top: 0;
+          /* 0514 잠시체크용 */
+          left: -100%;
+          /* left: 0%; */
+          width: 50%;
+          height: 100%;
+          background-color: #000;
+          z-index: 60000;
+          transition: .2s;
+     }
+
+     .fas {
+          display: block;
+          position: absolute;
+          right: 25px;
+          top: 16px;
+          font-size: 2.0rem;
+          z-index: 9999;
+          color: #e499bf;
+     }
+
+     .fa-times {
+          display: none;
+          color: #e499bf;
+          z-index: 9999;
+     }
+
+
+
+     /* 헤더 */
+     header {
+          height: 50px;
+          line-height: 50px;
+     }
+
+     .header_in .logo a img {
+          width: 160px;
+     }
+
+     header.fixed {
+          width: 100%;
+          position: fixed;
+          top: 0;
+          left: 0;
+          height: 50px;
+          z-index: 5000;
+     }
+
+     /* 햄버거메뉴 */
+     .mo_wrap {
+          width: calc(100% - 10px);
+          margin-top: 45px;
+          text-align: left;
+     }
+
+
+     .mo_inner ul {
+          width: 100%;
+          display: inline-block;
+     }
+
+     .mo_inner ul {
+          width: 100%;
+          display: inline-block;
+     }
+
+     .mo_inner img {
+          width: 60%;
+     }
+
+     .ham_text p {
+          font-size: 2.6rem;
+          font-weight: 400;
+          text-align: left;
+          line-height: 40px;
+          margin-top: 20px
+     }
+
+
+
+     /* Dl&footer */
+
+     .info_footer li {
+          font-size: 1.3rem;
+     }
+
+
+     /* 모바일 uo */
+
+     .up a {
+          box-shadow: 0px 0px 3px rgb(0 0 0);
+          position: absolute;
+          z-index: 5000;
+          bottom: 30px;
+          right: 20px;
+          width: 35px;
+          height: 35px;
+          background-color: rgba(82, 81, 81, 0.589);
+          border-radius: 50%;
+     }
+
+
+
+}
diff --git a/css/font.css b/css/font.css
@@ -0,0 +1,20 @@
+@charset "utf-8";
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&family=Noto+Sans:wght@400;700&display=swap');
+@font-face {
+     font-family: 'TmonMonsori';
+     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/TmonMonsori.woff') format('woff');
+     font-weight: normal;
+     font-style: normal;
+ }
+ @font-face {
+     font-family: 'NanumSquareRound';
+     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
+     font-weight: normal;
+     font-style: normal;
+ }
+
+*{
+     font-family: 'Noto Sans', sans-serif;
+     font-family: 'Noto Sans KR', sans-serif;
+     /* 400 500 700 900  */
+}