Skip to content

Commit

Permalink
summary
Browse files Browse the repository at this point in the history
  • Loading branch information
@juliecogley
juliecogley committed Mar 23, 2024
1 parent 1aaab92 commit 3cb0f48
Show file tree
Hide file tree
Showing 8 changed files with 72 additions and 325 deletions.
6 changes: 6 additions & 0 deletions common.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -315,6 +315,12 @@ body {
padding-right: 1.4px;
}

@media (min-width: 1060px) {
.footer__copyright {
left: -50px;
}

}
.start {
background: #FFF;
position: fixed;
Expand Down
17 changes: 0 additions & 17 deletions reset.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,20 +101,3 @@ padding:0;
input, select {
vertical-align:middle;
}
/* リセットCSS */
body,ul,li { padding: 0; margin: 0;}
/* スリックスライダー */
.slider li {
width: 100%;
height: 100vh;
object-fit: cover;
}
.slider li:first-of-type {
background-image: url(photo/01utuwa/utuwa01.JPG);
}
.slider li:nth-of-type(2) {
background-image: url(photo/01utuwa/utuwa02.JPG);
}
.slider li:last-of-type {
background-image: url(photo/01utuwa/utuwa03.JPG);
}
219 changes: 18 additions & 201 deletions works1.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,14 +124,6 @@
}
}

/*
.img-01,.img-02,.img-03,.img-04 {
width: 130px;
height: 130px;
object-fit: cover;
object-position: 0% 0%;
}

.img-frame {
position: relative;
Expand Down Expand Up @@ -163,95 +155,49 @@
background-size: cover;
background-repeat: no-repeat;
display: block;
object-fit: cover;
object-position: 0% 0%;
}


.img-01 {
background-image: url('photo/01utuwa/utuwa02.JPG');
animation: slide-animation-01 40s infinite;
background-image: url('photo/01utuwa/utuwa01.JPG');
animation: slide-animation-01 24s infinite;
}

.img-02 {
background-image: url('photo/01utuwa/utuwa03.JPG');
animation: slide-animation-02 40s infinite;
background-image: url('photo/01utuwa/utuwa02.JPG');
animation: slide-animation-02 24s infinite;
}

.img-03 {
background-image: url('photo/01utuwa/utuwa04.JPG');
animation: slide-animation-03 40s infinite;
background-image: url('photo/01utuwa/utuwa03.JPG');
animation: slide-animation-03 24s infinite;
}

.img-04 {
background-image: url('photo/01utuwa/utuwa05.JPG');
animation: slide-animation-04 40s infinite;
}
/*
.img-05 {
background-image: url('photo/01utuwa/utuwa06.JPG');
animation: slide-animation-05 24s infinite;
}
.img-06 {
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;
background-image: url('photo/01utuwa/utuwa04.JPG');
animation: slide-animation-04 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-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 {
0% {
opacity: 1;
transform: scale(1.0);
}

30% {
10% {
opacity: 1;
}

40% {
30% {
opacity: 0;
transform: scale(1.15);
}

90% {
60% {
opacity: 0
}

Expand Down Expand Up @@ -294,16 +240,16 @@
opacity: 0;
}

60% {
45% {
opacity: 0;
transform: scale(1.0);
}

70% {
55% {
opacity: 1;
}

90% {
65% {
opacity: 1;
}

Expand Down Expand Up @@ -338,135 +284,6 @@
}
}

@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 {
Expand All @@ -476,7 +293,7 @@
}

}
*/

.back-to-works {
position: relative;
display: flex;
Expand Down
47 changes: 1 addition & 46 deletions works1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,36 +22,8 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap" rel="stylesheet">

<title>Slick Demo</title>
<link rel="stylesheet" type="text/css" href="slick.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="slick.min.js"></script>
<script>
$('.slider').slick({
infinite: true, //スライドのループを有効
arrows: false, //前へ、次への矢印ボタンの有無
fade: true, //スライドの切り替えをフェードに
speed: 2000, //アニメーションの切り替えスピード
autoplaySpeed: 3000, //自動再生時のスライドの静止時間
autoplay: true, //スライダーの自動再生
pauseOnFocus: false, //フォーカスで一時停止を無効
pauseOnHover: false, //マウスホバーで一時停止を無効
pauseOnDotsHover: false, //ドットナビゲーションをマウスホバーで一時停止を無効
});
</script>
</head>
<body>
<div class="slick-slider">
<div><img src="photo/01utuwa/utuwa02.JPG"></div>
<div><img src="photo/01utuwa/utuwa03.JPG"></div>
<div><img src="photo/01utuwa/utuwa04.JPG"></div>
</div>
<script>
$(document).ready(function(){
$('.slick-slider').slick();
});
</script>
<header class="header">
<div class="header-content-wrapper">
<div class="label">
Expand Down Expand Up @@ -119,29 +91,12 @@ <h2>watering flowers,is it love or not?</h2>
<p>覗き込んでみてください。</p><br>
</div>

<ul class="slider">
<li></li>
<li></li>
<li></li>
</ul>

<!-- Provide a short description of the page.
<div class="img-frame">
<div class="img-01"></div>
<div class="img-02"></div>
<div class="img-03"></div>
<div class="img-04"></div>
<div class="img-05"></div>
<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>-->
</div>

<div class="back-to-works">
<img class="back-to-works__line" src="photo/line.svg" alt="line">
Expand Down
Loading

0 comments on commit 3cb0f48

Please sign in to comment.