From 0dff8caa333afb7633ea420a1fb2e35e661059b0 Mon Sep 17 00:00:00 2001
From: juliecogley <151831029+juliecogley@users.noreply.github.com>
Date: Thu, 21 Mar 2024 08:22:57 +0900
Subject: [PATCH] summary

---
 works1.css  | 225 +++++++++++++++++++++++++++++++++++++++++++++++-----
 works1.html |   8 +-
 2 files changed, 210 insertions(+), 23 deletions(-)

diff --git a/works1.css b/works1.css
index 4480c5b..83f3ca8 100644
--- a/works1.css
+++ b/works1.css
@@ -121,6 +121,7 @@
 		padding: 40px 0;
 		width: auto;
 	}
+
 	.section-works1__poem p {
 		line-height: 1.8em;
 	}
@@ -143,9 +144,7 @@
 	margin: 80px auto;
 }
 
-.img-01,
-.img-02,
-.img-03 {
+.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;
@@ -153,50 +152,78 @@
 	height: 100%;
 	background-size: cover;
 	background-repeat: no-repeat;
-
 	display: block;
-
 }
 
 .img-01 {
-	background-image: url('photo/01utuwa/02.JPG');
+	background-image: url('photo/01utuwa/utuwa02.JPG');
 	animation: slide-animation-01 24s infinite;
 }
 
 .img-02 {
-	background-image: url('photo/01utuwa/03.JPG');
+	background-image: url('photo/01utuwa/utuwa03.JPG');
 	animation: slide-animation-02 24s infinite;
 }
 
 .img-03 {
-	background-image: url('photo/01utuwa/04.JPG');
+	background-image: url('photo/01utuwa/utuwa04.JPG');
 	animation: slide-animation-03 24s infinite;
 }
 
 .img-04 {
-	background-image: url('photo/01utuwa/02.JPG');
-	animation: slide-animation-01 24s infinite;
+	background-image: url('photo/01utuwa/utuwa05.JPG');
+	animation: slide-animation-04 24s infinite;
 }
 
 .img-05 {
-	background-image: url('photo/01utuwa/03.JPG');
-	animation: slide-animation-02 24s infinite;
+	background-image: url('photo/01utuwa/utuwa06.JPG');
+	animation: slide-animation-05 24s infinite;
 }
 
 .img-06 {
-	background-image: url('photo/01utuwa/04.JPG');
+	background-image: url('photo/01utuwa/utuwa07.JPG');
+	animation: slide-animation-06 24s infinite;
+}
+
+.img-07 {
+	background-image: url('photo/01utuwa/utuwa08.JPG');
+	animation: slide-animation-07 24s infinite;
+}
+
+.img-08 {
+	background-image: url('photo/01utuwa/utuwa09.JPG');
+	animation: slide-animation-08 24s infinite;
+}
+
+.img-09 {
+	background-image: url('photo/01utuwa/utuwa10.JPG');
+	animation: slide-animation-09 24s infinite;
+}
+
+.img-10 {
+	background-image: url('photo/01utuwa/utuwa11.JPG');
+	animation: slide-animation-10 24s infinite;
+}
+
+.img-11 {
+	background-image: url('photo/01utuwa/utuwa12.JPG');
+	animation: slide-animation-02 24s infinite;
+}
+
+.img-12 {
+	background-image: url('photo/01utuwa/utuwa13.JPG');
 	animation: slide-animation-03 24s infinite;
 }
-	.img-07 {
-		background-image: url('photo/01utuwa/02.JPG');
-		animation: slide-animation-01 24s infinite;
-	}
 
-	.img-08 {
-		background-image: url('photo/01utuwa/03.JPG');
-		animation: slide-animation-02 24s infinite;
-	}
+.img-13 {
+	background-image: url('photo/01utuwa/utuwa14.JPG');
+	animation: slide-animation-01 24s infinite;
+}
 
+.img-14 {
+	background-image: url('photo/01utuwa/utuwa15.JPG');
+	animation: slide-animation-02 24s infinite;
+}
 
 
 @keyframes slide-animation-01 {
@@ -275,9 +302,163 @@
 		transform: scale(1.1);
 	}
 }
+@keyframes slide-animation-04 {
+	0% {
+		opacity: 1;
+		transform: scale(1.0);
+	}
+
+	30% {
+		opacity: 1;
+	}
+
+	40% {
+		opacity: 0;
+		transform: scale(1.15);
+	}
+
+	90% {
+		opacity: 0
+	}
+
+	100% {
+		opacity: 1;
+		transform: scale(1.0);
+	}
+}
+
+@keyframes slide-animation-05 {
+	0% {
+		opacity: 0;
+	}
+
+	30% {
+		opacity: 0;
+		transform: scale(1.1);
+	}
+
+	40% {
+		opacity: 1;
+	}
+
+	60% {
+		opacity: 1;
+	}
+
+	70% {
+		opacity: 0;
+		transform: scale(1.0);
+	}
+
+	100% {
+		opacity: 0;
+	}
+}
+
+@keyframes slide-animation-06 {
+	0% {
+		opacity: 0;
+	}
+
+	60% {
+		opacity: 0;
+		transform: scale(1.0);
+	}
+
+	70% {
+		opacity: 1;
+	}
+
+	90% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+		transform: scale(1.1);
+	}
+}
+@keyframes slide-animation-07 {
+	0% {
+		opacity: 1;
+		transform: scale(1.0);
+	}
+
+	30% {
+		opacity: 1;
+	}
+
+	40% {
+		opacity: 0;
+		transform: scale(1.15);
+	}
+
+	90% {
+		opacity: 0
+	}
+
+	100% {
+		opacity: 1;
+		transform: scale(1.0);
+	}
+}
+
+@keyframes slide-animation-08 {
+	0% {
+		opacity: 0;
+	}
+
+	30% {
+		opacity: 0;
+		transform: scale(1.1);
+	}
+
+	40% {
+		opacity: 1;
+	}
+
+	60% {
+		opacity: 1;
+	}
+
+	70% {
+		opacity: 0;
+		transform: scale(1.0);
+	}
+
+	100% {
+		opacity: 0;
+	}
+}
+
+@keyframes slide-animation-09 {
+	0% {
+		opacity: 0;
+	}
+
+	60% {
+		opacity: 0;
+		transform: scale(1.0);
+	}
+
+	70% {
+		opacity: 1;
+	}
+
+	90% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+		transform: scale(1.1);
+	}
+}
+
+
 @media (min-width: 1060px) {
 	.img-frame {
-		height:800px;
+		height: 800px;
 		width: 100%;
 
 	}
diff --git a/works1.html b/works1.html
index e4a25e7..843d678 100644
--- a/works1.html
+++ b/works1.html
@@ -78,7 +78,7 @@ <h2>watering flowers,is it love or not?</h2>
       </div>
 
       <div class="section-works1__image-body">
-        <img class="section-works1__image" src="photo/01utuwa/01.JPG" alt="top_image">
+        <img class="section-works1__image" src="photo/01utuwa/utuwa01.JPG" alt="top_image">
       </div>
     </section>
 
@@ -105,6 +105,12 @@ <h2>watering flowers,is it love or not?</h2>
       <div class="img-06"></div>
       <div class="img-07"></div>
       <div class="img-08"></div>
+      <div class="img-09"></div>
+      <div class="img-10"></div>
+      <div class="img-11"></div>
+      <div class="img-12"></div> 
+      <div class="img-13"></div>
+      <div class="img-14"></div> 
     </div>
   </main>