From a915582636dc2b2fcc09fc2e52dc49e6256215a1 Mon Sep 17 00:00:00 2001
From: juliecogley <151831029+juliecogley@users.noreply.github.com>
Date: Thu, 14 Mar 2024 21:56:54 +0900
Subject: [PATCH] summary
---
photo/01utuwa/{IMG_6569.JPG => 03.JPG} | Bin
photo/01utuwa/{IMG_6570.JPG => 04.JPG} | Bin
photo/01utuwa/{IMG_6579.JPG => 05.JPG} | Bin
photo/01utuwa/{IMG_6690.JPG => 06.JPG} | Bin
photo/01utuwa/{IMG_6692.JPG => 07.JPG} | Bin
photo/01utuwa/{IMG_6693.JPG => 08.JPG} | Bin
profile.css | 2 +-
works1.css | 219 +++++++++++++++++++++----
works1.html | 23 ++-
9 files changed, 203 insertions(+), 41 deletions(-)
rename photo/01utuwa/{IMG_6569.JPG => 03.JPG} (100%)
rename photo/01utuwa/{IMG_6570.JPG => 04.JPG} (100%)
rename photo/01utuwa/{IMG_6579.JPG => 05.JPG} (100%)
rename photo/01utuwa/{IMG_6690.JPG => 06.JPG} (100%)
rename photo/01utuwa/{IMG_6692.JPG => 07.JPG} (100%)
rename photo/01utuwa/{IMG_6693.JPG => 08.JPG} (100%)
diff --git a/photo/01utuwa/IMG_6569.JPG b/photo/01utuwa/03.JPG
similarity index 100%
rename from photo/01utuwa/IMG_6569.JPG
rename to photo/01utuwa/03.JPG
diff --git a/photo/01utuwa/IMG_6570.JPG b/photo/01utuwa/04.JPG
similarity index 100%
rename from photo/01utuwa/IMG_6570.JPG
rename to photo/01utuwa/04.JPG
diff --git a/photo/01utuwa/IMG_6579.JPG b/photo/01utuwa/05.JPG
similarity index 100%
rename from photo/01utuwa/IMG_6579.JPG
rename to photo/01utuwa/05.JPG
diff --git a/photo/01utuwa/IMG_6690.JPG b/photo/01utuwa/06.JPG
similarity index 100%
rename from photo/01utuwa/IMG_6690.JPG
rename to photo/01utuwa/06.JPG
diff --git a/photo/01utuwa/IMG_6692.JPG b/photo/01utuwa/07.JPG
similarity index 100%
rename from photo/01utuwa/IMG_6692.JPG
rename to photo/01utuwa/07.JPG
diff --git a/photo/01utuwa/IMG_6693.JPG b/photo/01utuwa/08.JPG
similarity index 100%
rename from photo/01utuwa/IMG_6693.JPG
rename to photo/01utuwa/08.JPG
diff --git a/profile.css b/profile.css
index c822843..9fb2084 100644
--- a/profile.css
+++ b/profile.css
@@ -113,7 +113,7 @@ max-width: 327px;
.section-profile__image-body{
width: 50%;
- height: 360px;
+ height: 100%;
border-left:solid 1px;
margin: 0;
}
diff --git a/works1.css b/works1.css
index ecc2148..e422a13 100644
--- a/works1.css
+++ b/works1.css
@@ -6,9 +6,10 @@
margin: 0 auto;
}
-#nav-open{
+#nav-open {
top: -144px;
- }
+}
+
.section-works1__top {
padding: 0 24px;
margin: 80px auto 120px auto;
@@ -16,7 +17,7 @@
}
.section-works1__title {
- width:60%;
+ width: 60%;
margin: 0 auto;
margin-bottom: 40px;
text-align: left;
@@ -27,9 +28,10 @@
.section-works1__title h1 {
font-size: 2.4rem;
- line-height: 2.0rem;
+ line-height: 2.0rem;
}
+
.section-works1__title h2 {
font-size: 1.8rem;
line-height: 2.0rem;
@@ -54,32 +56,35 @@
width: 100%;
height: 100%;
object-fit: cover;
- object-position: 0% 0%;
+ object-position: 0% 0%;
}
- /*画面サイズ1060以上での指定*/
- @media (min-width: 1060px) {
-.section-works1__top{
- display: flex;
- padding: 0 150px;
-align-items: center;
+/*画面サイズ1060以上での指定*/
+@media (min-width: 1060px) {
+ .section-works1__top {
+ display: flex;
+ padding: 0 150px;
+ align-items: center;
-}
-.section-works1__title{
- width: 50%;
- margin: 0;
+ }
+
+ .section-works1__title {
+ width: 50%;
+ margin: 0;
display: block;
-
+
}
- .section-works1__image-body{
+
+ .section-works1__image-body {
width: 50%;
height: 100%;
border-left: 1px solid #212427;
margin: 0;
}
+
.section-works1__image {
width: 80%;
margin: 0 auto;
@@ -95,34 +100,182 @@ align-items: center;
text-align: left;
padding: 40px 24px 0 24px;
border-top: 2px dotted #030303;
- margin: 0 auto 120px auto;
+ margin: 0 auto 120px auto;
width: 50%;
}
-.section-works1__poem p{
+
+.section-works1__poem p {
line-height: 2.4rem;
}
-.section-works1____other-images-body {
- height: 130px;
- width:100%;
- margin: 0 auto;
+/*画面サイズ1060以上での指定*/
+@media (min-width: 1060px) {
+ .section-works1__poem {
+ border: none;
+ -ms-writing-mode: tb-rl;
+ /* IE対応 */
+ writing-mode: vertical-rl;
+ text-orientation: upright;
+ /* すべて縦方向に表示 英数字も縦に表示するなら upright、和文も横に表示するなら sideways を指定 */
+ padding: 40px 0;
+ }
+
}
-.section-works1__other-images-items {
+/*
+.img-01,.img-02,.img-03,.img-04 {
width: 130px;
height: 130px;
object-fit: cover;
object-position: 0% 0%;
}
+*/
+.img-frame {
+ position: relative;
+ width: 100%;
+ height: 400px;
+ overflow: hidden;
+ margin: 80px auto;
+}
+
+.img-01,
+.img-02,
+.img-03 {
+ 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');
+ animation: slide-animation-01 24s infinite;
+}
+
+.img-02 {
+ background-image: url('photo/01utuwa/03.JPG');
+ animation: slide-animation-02 24s infinite;
+}
+
+.img-03 {
+ background-image: url('photo/01utuwa/04.JPG');
+ animation: slide-animation-03 24s infinite;
+}
+
+.img-04 {
+ background-image: url('photo/01utuwa/02.JPG');
+ animation: slide-animation-01 24s infinite;
+}
+
+.img-05 {
+ background-image: url('photo/01utuwa/03.JPG');
+ animation: slide-animation-02 24s infinite;
+}
+
+.img-06 {
+ background-image: url('photo/01utuwa/04.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;
+ }
+
+
+
+@keyframes slide-animation-01 {
+ 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-02 {
+ 0% {
+ opacity: 0;
+ }
+
+ 30% {
+ opacity: 0;
+ transform: scale(1.1);
+ }
- /*画面サイズ1060以上での指定*/
- @media (min-width: 1060px) {
- .section-works1__poem {
- border: none;
- -ms-writing-mode: tb-rl; /* IE対応 */
- writing-mode: vertical-rl;
- text-orientation: upright; /* すべて縦方向に表示 英数字も縦に表示するなら upright、和文も横に表示するなら sideways を指定 */
- }
+ 40% {
+ opacity: 1;
+ }
+
+ 60% {
+ opacity: 1;
+ }
+
+ 70% {
+ opacity: 0;
+ transform: scale(1.0);
+ }
+
+ 100% {
+ opacity: 0;
+ }
+}
+
+@keyframes slide-animation-03 {
+ 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;
+ width: 100%;
+
+ }
- }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/works1.html b/works1.html
index a66c6b5..67d0dc6 100644
--- a/works1.html
+++ b/works1.html
@@ -97,13 +97,22 @@ watering flowers,is it love or not?
覗き込んでみてください。
- 
-