summary

juliecogley · Mar 20, 2024 · 0dff8ca · 0dff8ca
1 parent e1fc1ef
commit 0dff8ca
Show file tree

Hide file tree

Showing 2 changed files with 210 additions and 23 deletions.
diff --git a/works1.css b/works1.css
@@ -121,6 +121,7 @@
 		padding: 40px 0;
 		width: auto;
 	}
+
 	.section-works1__poem p {
 		line-height: 1.8em;
 	}
@@ -143,60 +144,86 @@
 	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;
 	width: 100%;
 	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
@@ -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>