diff --git a/stamp/img/AR.png b/stamp/img/AR.png new file mode 100644 index 0000000..0e587ba --- /dev/null +++ b/stamp/img/AR.png Binary files differ diff --git a/stamp/img/Paper map-amico.svg b/stamp/img/Paper map-amico.svg new file mode 100644 index 0000000..24b87eb --- /dev/null +++ b/stamp/img/Paper map-amico.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/stamp/img/aiu.gif b/stamp/img/aiu.gif new file mode 100644 index 0000000..271f2f4 --- /dev/null +++ b/stamp/img/aiu.gif Binary files differ diff --git a/stamp/img/img1.jpg b/stamp/img/img1.jpg new file mode 100644 index 0000000..d9dc160 --- /dev/null +++ b/stamp/img/img1.jpg Binary files differ diff --git a/stamp/img/mashiro.png b/stamp/img/mashiro.png new file mode 100644 index 0000000..da9e801 --- /dev/null +++ b/stamp/img/mashiro.png Binary files differ diff --git a/stamp/img/stamp_rally.png b/stamp/img/stamp_rally.png new file mode 100644 index 0000000..62dfbcc --- /dev/null +++ b/stamp/img/stamp_rally.png Binary files differ diff --git a/stamp/img/sumafo.jpg b/stamp/img/sumafo.jpg new file mode 100644 index 0000000..f177f83 --- /dev/null +++ b/stamp/img/sumafo.jpg Binary files differ diff --git a/stamp/responsive.css b/stamp/responsive.css new file mode 100644 index 0000000..2371c23 --- /dev/null +++ b/stamp/responsive.css @@ -0,0 +1,251 @@ +@media screen and (max-width: 730px){ + header{ + height: 85px; + } + div.main_visual>img{ + width: 100%; + height: 760px; + } + #ham-menu{ + opacity: 0; + position: fixed; + } + label .buns{ + position: fixed; + top: 1.2em; + right: 1em; + z-index:3; + height: 2em; + width: 2em; + } + label .buns::before, + label .buns::after, + label .buns .patty { + position: absolute; + left: 0; + width: 100%; + height: 4px; + border-radius: 5px; + background: #fff; + content: ""; + transition:all .3s; + } + label .buns::before{ + top: 0; + transform-origin: top left; + } + label .buns .patty{ + top: 45%; + } + label .buns::after{ + bottom: 0; + transform-origin: bottom left; + } + header nav ul{ + position: fixed; + top: 0; + left: 0; + bottom: 0; + z-index: 2; + height: 100%; + display: flex; + flex-flow: column nowrap; + } + .bd-no{ + display: none; + } + header nav ul::before{ + position: absolute; + top: 0; + bottom: 0; + left: 0; + z-index: -1; + width: 27em; + background: rgba(42, 124, 83,.9); + transform: skewX(-20deg) translateX(-200%); + transform-origin: bottom left; + transition: transform.3s; + content: ""; + } + header nav ul li{ + margin: 1em 1em ; + padding: 0.2em 1em; + transform: translateX(-150%); + transition: all .3s, transfrom .5s; + transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); + } + header nav ul li:nth-of-type(1){ + margin-top: 5em; + } + /* header nav ul li:nth-of-type(1)::before{ + content: ""; + background-image: url(img/mashiro.png); + } */ + /* header nav ul li a{color: #000;} */ + #ham-menu:checked + label .buns::before, + #ham-menu:checked + label .buns::after{ + width: 130%; + } + #ham-menu:checked + label .buns .patty{ + transform: scale(0); + } + #ham-menu:checked + label .buns::before { + transform: rotate(45deg); + } + #ham-menu:checked + label .buns::after { + transform: rotate(-45deg); + } + #ham-menu:checked ~ nav ul::before { + transform: skewX(-20deg) translateX(-50%); + } + #ham-menu:checked ~ nav ul li{ + transform: translateX(0); + } + #ham-menu:checked ~ .light-dark{ + background: #000; + opacity: .5; + position: fixed; + left: 0; + top: 0; + height: 100%; + width: 100%; + } + + + /* main_visual start */ + div.title{ + width: 85%; + height: 200px; + bottom: 5%; + } + div.title p{ + font-size: 15px; + } + div.title span.t_text1{ + font-size:48px + } + div.title span.t_text2{ + font-size: 30px; + } + /* main_visual end */ + + + /* button start */ + div.content{ + position: relative; + height: 900px; + width: 100%; + background:#000000d9 ; + padding-top: 10em; + flex-direction: column; + color: #fff; + } + button.start_btn_circle{ + position: fixed; + right: 15px; + bottom: 15px; + width: 100px; + height: 100px; + border-radius: 50%; + text-align: center; + font-size: 10px; + background: linear-gradient(-45deg, rgba(246, 255, 0, .95), rgba(255, 0, 161, .95)); + z-index: 100; + transition: .2s; + } + button.start_btn_circle:hover{ + width: 90px; + height: 90px; + } + div.start_guide{ + width: 80%; + height: 280px; + font-size:19px; + line-height: 30px; + } + div.btn{ + width:100%; + height: 450px; + display: flex; + justify-content: center; + } + button.start_btn{ + position: absolute; + top:0; + background: #fff; + width: 80%; + height: 150px; + border-radius: 15px; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + font-size: 20px; + color: #000; + box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3); + border-bottom:solid 5px #111; + transition: .3s; + } + button.start_btn img{ + width: 65px; + height: 70px; + } + + button.stamp_btn, + button.map_btn{ + position: absolute; + bottom: 0; + width: 47%; + height: 150px; + border-radius: 15px; + font-size: 20px; + display: flex; + align-items: center; + justify-content: center; + } + button.stamp_btn{ + left: 10px; + } + + button.map_btn{ + right: 10px; + } + /* button end */ + + + /* content2 start */ + section.content2{ + width: 100%; + height: 700px; + padding-top: 100px; + display: flex; + flex-direction: column-reverse; + align-items: center; + justify-content: space-evenly; + color: #fff; + /* background: aqua; */ + } + section.content2 img{ + width: 280px; + height: 360px; + } + /* content2 end */ + + /* content3 start */ + section.content3{ + width: 100%; + height: 500px; + padding-top: 100px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + color: #fff; + } + section.content3 img{ + width: 300px; + height: 300px; + } + /* content end */ + +} \ No newline at end of file diff --git a/stamp/stamp.html b/stamp/stamp.html new file mode 100644 index 0000000..fd632c2 --- /dev/null +++ b/stamp/stamp.html @@ -0,0 +1,110 @@ + + + + + + + AR- + + + + +
+ + + + ロゴ + + +
+ +
+
+ img +
+

+

ス タ ン プ ラ リ ー
+

AR Stamp Rally

+ +

in松ヶ丘開墾場

+
+
+ +
+
+ 松ヶ丘開墾場の至るところに
+ キャタクターである「ましろちゃん」がARで登場します。
+ ましろちゃんを探してスタンプを貯めよう。 +
+
+ + + +
+
+ +
+ +
+ 
+            aaaaaaaaaaaaaaaaaaa
+            aaaaaaa
+            aaaaaaaaaaaaaaaa 
+            aaaaaaaaaaaaaaaaaaa
+            aaaaaaa
+            aaaaaaaaaaaaaaaa
+
+
+
+ +
+
+ 
+            aaaaaaaaaaaaaaaaaaa
+            aaaaa
+            aaaaaaaaaaaaaaaaaa 
+            aaaaaaaaaaaaaaaaaaaa
+            aaaa
+            aaaaaaaaaaaaaaaaaa
+
+
+ +
+
+ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/stamp/style.css b/stamp/style.css new file mode 100644 index 0000000..ffea4f4 --- /dev/null +++ b/stamp/style.css @@ -0,0 +1,244 @@ +*,*::before,*::after { + box-sizing: border-box; + font-family: serif; + margin: 0; + padding: 0; +} + +body{ + height: 100%; + width: 100%; +} + +/* header start*/ +header{ + position: fixed; + width: 100%; + height: 100px; + background: #000000d9; + display: flex; + flex-direction: row; + justify-content: left; + z-index: 100; +} +img.rogo_img{ + height: 84.27px; + width: 92.39px; + margin-left: 5%; +} +div.main_visual>img{ + width: 100%; + height: 700px; + object-fit: cover; +} +ul{ + position: absolute; + height: 100px; + display: flex; + align-items: center; +} +li.menu{ + list-style: none; + width: 150px; + height: 28px; + text-align: center; +} +li a{ + text-decoration: none; + font-size:24px; + color: #fff; +} +li a:hover{ + border-bottom:solid 1px #fff ; +} +#ham-menu{ + opacity: 0; +} +button.start_btn_circle{ + position: fixed; + right: 15px; + bottom: 15px; + width: 130px; + height: 130px; + border-radius: 50%; + text-align: center; + font-size: 13px; + background: linear-gradient(-45deg, rgba(246, 255, 0, .95), rgba(255, 0, 161, .95)); + z-index: 100; + transition: .2s; +} +button.start_btn_circle:hover{ + width: 140px; + height: 140px; +} +button.start_btn_circle img{ + width: 55px; + height: 60px; +} +/* header end */ + + + + +/* main start */ +div.main_visual{ + width: 100%; + height: 700px; + position: relative; + z-index: -1; +} + +div.title{ + height: 250px; + width: 550px; + position: absolute; + bottom: 0%; + left: 15%; + color: #fff; +} +div.title p{ + position: relative; +} + +div.title h1{ + font-size:64px +} +div.title span.t_text2{ + font-size: 40px; +} + + +/* button start */ +div.content{ + position: relative; + height: 500px; + width: 100%; + background:#000000d9 ; + padding-top: 4em; + display: flex; + align-items: center; + justify-content: space-evenly; + color: #fff; +} +div.start_guide{ + width: 370px; + height: 280px; + font-size: 20px; + line-height: 50px; +} + +div.btn{ + position: relative; + width:400px; + height: 300px; +} + +button.start_btn{ + background: #fff; + width: 400px; + height: 125px; + border-radius: 15px; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + font-size: 24px; + color: #000; + box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3); + border-bottom:solid 5px #111; + transition: .3s; +} +button.start_btn img{ + width: 85px; + height: 90px; +} +button.start_btn:hover{ + box-shadow: 0px 8px 15px #ffffff4d; + transform: translateY(-1px); +} +button.start_btn:active{ + transform: translateY(1px); + transition: .1s; + border-bottom:solid 0px #111; +} + + +button.stamp_btn, +button.map_btn{ + position:absolute; + width: 160px; + height: 110px; + border-radius: 15px; + background: #fff; + text-align: center; + color: #000; + border-bottom:solid 5px #111; + margin: 2.5em 0; + font-size: 24px; +} +button.stamp_btn{ + left: 0; +} +button.map_btn{ + right: 0; +} + +button.stamp_btn:hover, +button.map_btn:hover{ + box-shadow: 0px 8px 15px #ffffff4d; + transform: translateY(-1px); + transition: .3s; +} +button.stamp_btn:active, +button.map_btn:active{ + transform: translateY(1px); + transition: .1s; + border-bottom:solid 0px #111; +} +/* button end */ + +/* content2 start */ +section.content2{ + width: 100%; + height: 500px; + position: relative; + display: flex; + align-items: center; + justify-content: space-evenly; + color: #fff; +} +section.content2 img{ + /* position: absolute; + left: -20%; + height: 1300px; + width: 1000px; + z-index: -1; */ + width: 380px; + height: 480px; +} +/* content2 end */ + +/* content3 start */ +section.content3{ + width: 100%; + height: 500px; + position: relative; + display: flex; + align-items: center; + justify-content: space-evenly; + color: #fff; + /* background: #000000d9; */ +} + +section.content3 img{ + /* position:absolute; + right: -20%; + width: 1000px; + height: 1000px; */ + width: 500px; + height: 500px; +} + +/* content3 end */ + +/* main end */ \ No newline at end of file