レクタングルだけ移動

header レクタングルだけclass=header content wrapperから外に移動
juliecogley · Mar 12, 2024 · 05c92cd · 05c92cd
1 parent 41c9246
commit 05c92cd
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 19 deletions.
diff --git a/common.css b/common.css
@@ -66,15 +66,18 @@ body {
   color:#000000;
   }
 
-  .header-content-wrapper .contents-rectangle{
+  .contents-rectangle{
   background-color: #d9d9d9;
   height: 80px;
     left: 0;
-    top: 0;
+    top: -80px;
     width: 120px;
-  position: relative;}
+  position: relative;
+  z-index: 999;
+  margin: 0 auto;
+}
 
-  .header-content-wrapper .contents-text{
+  .contents-text{
   top: 38px;
   width: 120px;
   text-align: center;

diff --git a/index.html b/index.html
@@ -39,17 +39,17 @@
 		  </p>
 	</div>
 
-			 <div class="contents-rectangle">
-        <div class="contents-text">プロフィール</div>
-				 </div>
-
+
        <div class="hamburger" >
          <div class="line-1"></div>
          <div class="line-2"></div>
          <div class="line-3"></div>
      </div>
-    </div> 
-
+	   </div> 
+     <div class="contents-rectangle">
+      <div class="contents-text">
+        プロフィール</div>
+       </div>
 
   </header>
   <main class="main">

diff --git a/profile.html b/profile.html
@@ -39,15 +39,17 @@
 		  </p>
 	</div>
 
-			 <div class="contents-rectangle">
-        <div class="contents-text">プロフィール</div>
-				 </div>
+
        <div class="hamburger" >
          <div class="line-1"></div>
          <div class="line-2"></div>
          <div class="line-3"></div>
      </div>
 	   </div> 
+     <div class="contents-rectangle">
+      <div class="contents-text">
+        プロフィール</div>
+       </div>
 
   </header>
   <main class="main">

diff --git a/top.css b/top.css
@@ -1,11 +1,11 @@
 @charset "UTF-8";
 
-.header-content-wrapper .contents-rectangle {
+.contents-rectangle {
 	display: none;
 }
 
 .section-top {
-	margin-bottom: 80px;
+	margin: 20px 0 80px 0;
 }
 
 .section-top__image {

diff --git a/works1.html b/works1.html
@@ -38,16 +38,19 @@
             <br/>PORTFOLIO</span>
 		  </p>
 	</div>
-			 <div class="contents-rectangle">
-        <div class="contents-text">作品集</div>
-				 </div>
+
+
        <div class="hamburger" >
          <div class="line-1"></div>
          <div class="line-2"></div>
          <div class="line-3"></div>
      </div>
-
 	   </div> 
+     <div class="contents-rectangle">
+      <div class="contents-text">
+        作品集</div>
+       </div>
+
   </header>
   <main class="main">