summary

juliecogley · Mar 23, 2024 · cbd1270 · cbd1270
1 parent 0d7c162
commit cbd1270
Show file tree

Hide file tree

Showing 18 changed files with 350 additions and 59 deletions.
diff --git a/common.css b/common.css
@@ -60,22 +60,32 @@ body {
 
 .contents-rectangle {
   background-color: #d9d9d9;
-  height: 80px;
+  position: fixed;
+  top: 467px;
   left: 0;
-  top: -80px;
-  width: 120px;
-  position: relative;
+  width: 40px;
+  height: 130px;
   z-index: 999;
-  margin: 0 auto;
 }
 
 .contents-text {
-  top: 38px;
-  width: 120px;
+  height: 100%;
+  font-size: 1.2rem;
+  left: 0;
   text-align: center;
   position: absolute;
   font-weight: 600;
   line-height: 1.5em;
+  letter-spacing: 5px;
+  writing-mode: vertical-rl;
+  -ms-writing-mode: tb-rl;
+  text-orientation: sideways;
+}
+
+.contents-sidearrow {
+  position: absolute;
+  top: 100px;
+  left: 4px;
 }
 
 .go-to-top,
@@ -94,11 +104,16 @@ body {
     width: 240px;
     height: 80px;
     top: -90px;
+    position: relative;
+    margin: 0 auto;
   }
 
   .contents-text {
-    width: 240px;
     font-size: 2.0rem;
+    top: 38px;
+    width: 240px;  
+    writing-mode: horizontal-tb;
+    margin: 0 auto;
   }
 
 }
@@ -210,7 +225,7 @@ body {
     width: 60px;
     height: 32px;
     position: relative;
-    top: -50px;
+    top: -140px;
     padding-right: 26px;
   }
 
@@ -249,6 +264,7 @@ body {
   }
 }
 
+
 /*footer*/
 .footer {
   padding: 40px 24px;

diff --git a/photo/sidearrow.svg b/photo/sidearrow.svg
diff --git a/works1.css b/works1.css
@@ -6,9 +6,6 @@
 	margin: 0 auto;
 }
 
-#nav-open {
-	top: -144px;
-}
 
 .section-works1__top {
 	padding: 0 24px;
@@ -144,7 +141,20 @@
 	margin: 80px auto;
 }
 
-.img-01,.img-02,.img-03,.img-04,.img-05,.img-06,.img-07,.img-08,.img-09,.img-10,.img-11,.img-12,.img-13,.img-14{
+.img-01,
+.img-02,
+.img-03,
+.img-04,
+.img-05,
+.img-06,
+.img-07,
+.img-08,
+.img-09,
+.img-10,
+.img-11,
+.img-12,
+.img-13,
+.img-14 {
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -302,6 +312,7 @@
 		transform: scale(1.1);
 	}
 }
+
 @keyframes slide-animation-04 {
 	0% {
 		opacity: 1;
@@ -378,6 +389,7 @@
 		transform: scale(1.1);
 	}
 }
+
 @keyframes slide-animation-07 {
 	0% {
 		opacity: 1;
@@ -464,31 +476,35 @@
 	}
 
 }
-.back-to-works{
-position: relative;
-display: flex;
-text-align: right;
-margin-bottom: 80px;
+
+.back-to-works {
+	position: relative;
+	display: flex;
+	text-align: right;
+	margin-bottom: 80px;
 }
-.back-to-works__text{
-position: absolute;
-right: 0px;
-padding-right: 24px;
-text-decoration: none;
-color: #212427;
+
+.back-to-works__text {
+	position: absolute;
+	right: 0px;
+	padding-right: 24px;
+	text-decoration: none;
+	color: #212427;
 }
-.back-to-works__line{
+
+.back-to-works__line {
 	position: absolute;
 	right: 124px;
 	top: 10px;
-	}
+}
+
 
-
 @media (min-width: 1060px) {
-	.back-to-works__text{
+	.back-to-works__text {
 		padding-right: 50px;
-		}
-		.back-to-works__line{
-			right: 150px;
-			}
+	}
+
+	.back-to-works__line {
+		right: 150px;
+	}
 }
diff --git a/works1.html b/works1.html
@@ -28,7 +28,6 @@
   <header class="header">
     <div class="header-content-wrapper">
       <div class="label">
-
         <a class="go-to-top" href="index.html">
           <p class="nakahara-nami">
             <span class="n">N</span>
@@ -40,30 +39,34 @@
               <br>PORTFOLIO</span>
           </p>
         </a>
-
       </div>
-
-    </div>
-    <div class="contents-rectangle">
-      <div class="contents-text">
-        作品集</div>
-    </div>
-    <div id="nav-drawer">
-      <input id="nav-input" class="none" type="checkbox">
-      <label id="nav-open" for="nav-input"><span></span></label>
-      <label id="nav-close" class="none" for="nav-input"></label>
-      <nav id="nav-content" class="header__navigation">
-        <div class="nav-drawer__title none"></div>
-        <ul>
-          <li class="nav-drawer__link-top none">目　次</li>
-          <li><a href="index.html">トップページ</a></li>
-          <li><a href="profile.html">プロフィール</a></li>
-          <li><a href="works.html">作品集</a></li>
-          <li><a href="kotobagaki.html">ことばがき</a></li>
-          <li><a href="contact.html">お問い合わせ</a></li>
-        </ul>
-      </nav>
     </div>
+      <div class="contents-rectangle">
+        <div class="contents-text">作品集</div>
+      </div>
+      <div id="nav-drawer">
+        <input id="nav-input" class="none" type="checkbox">
+        <label id="nav-open" for="nav-input"><span></span></label>
+        <label id="nav-close" class="none" for="nav-input"></label>
+        <nav id="nav-content" class="header__navigation">
+          <div class="nav-drawer__title none"></div>
+          <ul>
+            <li class="nav-drawer__link-top none">目　次</li>
+            <li><a href="index.html">トップページ</a></li>
+            <li><a href="profile.html">プロフィール</a></li>
+            <li><a href="works.html">作品集</a></li>
+            <li><a href="kotobagaki.html">ことばがき</a></li>
+            <li><a href="contact.html">お問い合わせ</a></li>
+          </ul>
+        </nav>
+      </div>
+
+
+
+
+
+
+
   </header>
   <main class="main">
 

diff --git a/works2.css b/works2.css
@@ -262,4 +262,36 @@
 
 	}
 
+}
+
+.back-to-works {
+	position: relative;
+	display: flex;
+	text-align: right;
+	margin-bottom: 80px;
+}
+
+.back-to-works__text {
+	position: absolute;
+	right: 0px;
+	padding-right: 24px;
+	text-decoration: none;
+	color: #212427;
+}
+
+.back-to-works__line {
+	position: absolute;
+	right: 124px;
+	top: 10px;
+}
+
+
+@media (min-width: 1060px) {
+	.back-to-works__text {
+		padding-right: 50px;
+	}
+
+	.back-to-works__line {
+		right: 150px;
+	}
 }
diff --git a/works2.html b/works2.html
@@ -102,6 +102,10 @@ <h1>Imaginary melancholy</h1>
         <div class="img-03"></div>
         <div class="img-04"></div>
     </div>
+    <div class="back-to-works">
+      <img class="back-to-works__line" src="photo/line.svg" alt="line">
+     <a class="back-to-works__text" href="works.html">作品集へ戻る</a>
+    </div>
   </main>
   <footer class="footer">
     <div class="footer-content-wrapper">

diff --git a/works3.css b/works3.css
@@ -265,4 +265,36 @@
 
 	}
 
+}
+
+.back-to-works {
+	position: relative;
+	display: flex;
+	text-align: right;
+	margin-bottom: 80px;
+}
+
+.back-to-works__text {
+	position: absolute;
+	right: 0px;
+	padding-right: 24px;
+	text-decoration: none;
+	color: #212427;
+}
+
+.back-to-works__line {
+	position: absolute;
+	right: 124px;
+	top: 10px;
+}
+
+
+@media (min-width: 1060px) {
+	.back-to-works__text {
+		padding-right: 50px;
+	}
+
+	.back-to-works__line {
+		right: 150px;
+	}
 }
diff --git a/works3.html b/works3.html
@@ -107,6 +107,12 @@ <h1>今日の月、ひとつかみ</h1>
         <div class="img-03"></div>
         <div class="img-04"></div>
     </div>
+
+    <div class="back-to-works">
+      <img class="back-to-works__line" src="photo/line.svg" alt="line">
+     <a class="back-to-works__text" href="works.html">作品集へ戻る</a>
+    </div>
+
   </main>
   <footer class="footer">
     <div class="footer-content-wrapper">

diff --git a/works4.css b/works4.css
@@ -263,4 +263,36 @@
 
 	}
 
+}
+
+.back-to-works {
+	position: relative;
+	display: flex;
+	text-align: right;
+	margin-bottom: 80px;
+}
+
+.back-to-works__text {
+	position: absolute;
+	right: 0px;
+	padding-right: 24px;
+	text-decoration: none;
+	color: #212427;
+}
+
+.back-to-works__line {
+	position: absolute;
+	right: 124px;
+	top: 10px;
+}
+
+
+@media (min-width: 1060px) {
+	.back-to-works__text {
+		padding-right: 50px;
+	}
+
+	.back-to-works__line {
+		right: 150px;
+	}
 }
diff --git a/works4.html b/works4.html
@@ -103,6 +103,10 @@ <h1>白露の朝、陽だまりをひとくち</h1>
         <div class="img-03"></div>
         <div class="img-04"></div>
     </div>
+    <div class="back-to-works">
+      <img class="back-to-works__line" src="photo/line.svg" alt="line">
+     <a class="back-to-works__text" href="works.html">作品集へ戻る</a>
+    </div>
   </main>
   <footer class="footer">
     <div class="footer-content-wrapper">