Merge pull request #36 from SpartaEnergizerTeam/feature/merge-header-…

…page feat: html header 병합
SpartaEnergizerTeam · May 8, 2024 · e3dc6ee · e3dc6ee
2 parents 94e9e33 + d270c80
commit e3dc6ee
Show file tree

Hide file tree

Showing 13 changed files with 236 additions and 225 deletions.
diff --git a/css/common.css b/css/common.css
@@ -89,4 +89,115 @@ html {
 #searchDeleteBtn:focus,
 #searchDeleteBtn:active {
     transform: scale(1);
+}
+
+.header-nav {
+    border-bottom: 1px solid #2e2e2e;
+}
+
+.header-nav-menu {
+    display: flex;
+    justify-content: flex-end;
+    font-size: 12px;
+    color: #a5a5a5;
+    position: relative;
+    height: 34px;
+    align-items: center;
+}
+
+.header-nav-menu ul li {
+    position: relative;
+}
+
+.header-nav-menu ul li::after {
+    position: absolute;
+    top: 2px;
+    right: 0px;
+    content: "";
+    height: 8px;
+    background-color: #2f2f2f;
+    width: 1px;
+}
+
+.header-nav-menu ul li:last-child::after {
+    display: none;
+}
+
+.header-section {
+    color: #ffffff;
+    display: flex;
+    height: 74px;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+}
+
+.header-menu {
+    flex-grow: 2;
+}
+
+#searchContainer {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.header-nav-menu ul {
+    display: flex;
+}
+
+.header-menu ul {
+    display: flex;
+    gap: 20px;
+}
+
+.header-nav ul li a {
+    color: #a5a5a5;
+    text-decoration: none;
+    font-weight: 400;
+    transition: color 0.3s ease;
+    font-size: 12px;
+    padding: 0 11px;
+}
+
+header nav ul li:first-child {
+    margin-left: 0;
+}
+
+.header-menu ul li a {
+    text-decoration: none;
+    transition: color 0.3s ease;
+    font-size: 20px;
+    padding: 0 10px;
+}
+
+header nav ul li a:hover {
+    color: #ffffff;
+}
+
+.header-menu ul li a.on {
+    color: #ffffff;
+}
+
+header {
+    max-width: 1240px;
+    margin: 0 auto;
+}
+
+header .logo {
+    flex-shrink: 0;
+    margin-right: 78px;
+}
+
+header .logo img {
+    width: 108px;
+}
+
+#searchResultSection {
+    margin-top: 80px;
+}
+
+.header-nav ul li:last-child a {
+    padding-right: 0;
 }
diff --git a/css/detail.css b/css/detail.css
@@ -1,9 +1,7 @@
 /*메인 이미지 관련 css*/
-
 #detailPage {
     max-width: 1240px;
     margin: 0 auto;
-    padding: 0 3%;
 }
 
 .video-detail .image-box:before {

diff --git a/css/header.css b/css/header.css
diff --git a/css/index.css b/css/index.css
@@ -1,7 +1,7 @@
 .main {
   width: 100%;
   height: 100%;
-  margin: 109px auto 0;
+  margin: 0 auto;
   padding-bottom: 50px;
   background-color: #1b1b1b;
 }

diff --git a/css/profile.css b/css/profile.css
@@ -43,7 +43,7 @@ input:-webkit-autofill:focus,
   min-height: 800px;
   height: 100vh;
   margin: 0 auto;
-  padding: 50px 0;
+  padding: 59px 0 50px;
   overflow: hidden;
 }
 

diff --git a/detail.html b/detail.html
@@ -3,7 +3,8 @@
 <head>
     <meta charset='UTF-8'>
     <title>Energivve(에너자이브)</title>
-    <link rel="shortcut icon" href="./img/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
+    <link rel="shortcut icon" href="./img/favicon.ico"/>
     <link rel="stylesheet" href="./css/reset.css"/>
     <link rel="stylesheet" href="./css/common.css"/>
     <link rel="stylesheet" href="./css/detail.css"/>
@@ -14,6 +15,37 @@
 </head>
 <div id="loaderWrap"><div id="loader"></div></div>
 <body id="detailPage">
+    <header>
+    <div class="header-nav">
+        <nav class="header-nav-menu">
+            <ul>
+                <li><a href="./profile.html">내 프로필</a></li>
+                <li><a href="#">이용권</a></li>
+                <li><a href="#">쿠폰·코인</a></li>
+                <li><a href="#">웨이브온</a></li>
+                <li><a href="#">이벤트</a></li>
+            </ul>
+        </nav>
+    </div>
+    <div class="header-section">
+        <a href="./index.html" class="logo">
+            <img src="./img/common/ci-wavve.svg" alt="WAVVE" />
+        </a>
+        <nav class="header-menu">
+            <ul>
+                <li><a href="#" class="on">홈</a></li>
+                <li><a href="#">카테고리</a></li>
+                <li><a href="#">LIVE</a></li>
+                <li><a href="./profile.html">MY</a></li>
+            </ul>
+        </nav>
+        <div class="search-container">
+            <a href="./search.html">
+                <img src="./img/common/icon-search.svg" alt="검색" />
+            </a>
+        </div>
+    </div>
+</header>
    <div class=video-detail>
        <div class="image-box">
            <img src="" alt=""/>

diff --git a/header.html b/header.html