3月20日作業データ（sweet-box）
お問い合わせ入力画面
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sweet Box|トップページ</title>
<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=Caveat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">
</head>
<body>
<header>
<h1>Sweet Box</h1>
<p class="tag-line pc">おうちで楽しむ新しいスイーツ体験</p>
<p id="ham-btn"><span></span></p>
</header>
<nav id="g-nav">
<ul>
<li><a href="#">トップ</a></li>
<li><a href="#item">商品情報</a></li>
<li><a href="#flow">ご登録の流れ</a></li>
<li><a href="#shop">スイーツ店の紹介</a></li>
<li><a href="#news">お知らせ</a></li>
<li><a href="question/">よくある質問</a></li>
<li><a href="form/">お申し込み</a></li>
</ul>
</nav>
<div class="main-visual">
<img src="img/main.jpg" alt="">
<p class="tag-line sp">おうちで楽しむ新しいスイーツ体験</p>
</div>
<p class="to-form"><a href="form/">ご登録はこちらから</a></p>
<div id="item">
<div class="lead">
<h2>毎月届く<span>Sweet Box</span>のスイーツセット</h2>
<p>全国の選りすぐりのお店から<br>
自慢のスイーツセットを毎月1回お届け<br>
このサービスでしか味わえないスイーツを<br>
自宅で堪能しませんか？</p>
</div><!-- /.lead -->
<ul id="item-photo">
<li><img src="img/sweet01.jpg" alt=""></li>
<li><img src="img/sweet02.jpg" alt=""></li>
<li><img src="img/sweet03.jpg" alt=""></li>
<li><img src="img/sweet04.jpg" alt=""></li>
<li><img src="img/sweet05.jpg" alt=""></li>
<li><img src="img/sweet06.jpg" alt=""></li>
</ul>
</div><!-- /#item -->
<div class="bg-1"></div>
<div id="flow">
<div id="particles-js"></div>
<div class="price">
<a href="question/">
<p>毎月異なるケーキがが届く<br>
おうちカフェの定期便。</p>
<p><span>月々</span>2,980<span>円(税込)</span></p>
<p>毎月の月初めに冷凍で配送</p>
<p>詳しくはこちら</p>
</a>
</div><!-- /.price -->
<div class="flow-step">
<h2>ご登録の流れ</h2>
<div class="step-wrapper">
<div class="step-box">
<h3>step1</h3>
<p>登録ボタンから名前と<br>
メールアドレスを入力</p>
</div><!-- /.step-box -->
<div class="step-box">
<h3>step2</h3>
<p>来たメールのURLから<br>
お届け先とお支払い方法を入力</p>
</div><!-- /.step-box -->
<div class="step-box">
<h3>step3</h3>
<p>登録完了ページが<br>
表示されたら完了</p>
</div><!-- /.step-box -->
</div><!-- /.step-wrapper -->
</div><!-- /.flow-step -->
<p class="to-question"><a href="question/">よくあるご質問はこちら</a></p>
</div><!-- /#flow -->
<div class="bg-2"></div>
<div id="shop">
<h2>お届けするスイーツ店のご紹介</h2>
<p>毎月こちらのお店のケーキを月替わりでお届けします。<br>
新しい店舗が入りましたら随時お知らせ致します。</p>
<div class="shop-wrapper">
<div class="shop-box">
<h3>東京都<br>
「Tatle 洋菓子店」</h3>
<p><img src="https://placehold.jp/300x300.png" alt=""></p>
</div><!-- /.shop-box -->
<div class="shop-box">
<h3>神奈川県<br>
「GATE HARTS DOCUSWEET」</h3>
<p><img src="https://placehold.jp/300x300.png" alt=""></p>
</div><!-- /.shop-box -->
<div class="shop-box">
<h3>愛知県<br>
「LE MAISON VIVIEMNE」」</h3>
<p><img src="https://placehold.jp/300x300.png" alt=""></p>
</div><!-- /.shop-box -->
<div class="shop-box">
<h3>東京都<br>
「Patisserie Tokyo」</h3>
<p><img src="https://placehold.jp/300x300.png" alt=""></p>
</div><!-- /.shop-box -->
<div class="shop-box">
<h3>東京都<br>
「SWEETS PEASERS」</h3>
<p><img src="https://placehold.jp/300x300.png" alt=""></p>
</div><!-- /.shop-box -->
</div><!-- /.shop-wrapper -->
</div><!-- /#shop -->
<div id="news">
<div class="news-inner">
<h2>お知らせ</h2>
<dl id="news-list">
<dt>2月24日</dt>
<dd>3月のケーキについて</dd>
<dt>2月16日</dt>
<dd>Amazon Pay・あと払い（ペイディ）決済導入のお知らせ</dd>
<dt>2月15日</dt>
<dd>webサイトリニューアルのお知らせ</dd>
<dt>1月15日</dt>
<dd>配送方法について</dd>
</dl>
</div><!-- /.news-inner -->
<div class="carousel">
<ul class="bxslider">
<li><img src="img/sweet01.jpg" alt=""></li>
<li><img src="img/sweet02.jpg" alt=""></li>
<li><img src="img/sweet03.jpg" alt=""></li>
<li><img src="img/sweet04.jpg" alt=""></li>
<li><img src="img/sweet05.jpg" alt=""></li>
<li><img src="img/sweet06.jpg" alt=""></li>
<li><img src="img/sweet07.jpg" alt=""></li>
<li><img src="img/sweet08.jpg" alt=""></li>
</ul>
</div><!-- /.carousel -->
</div><!-- /#news -->
<footer>
<p><small>© <span id="this-year"></span> Sweet Box</small></p>
</footer>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js'></script>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script src="js/script.js"></script>
<script src="js/particles.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>
$(function(){
//bxsliderの設定
$('.bxslider').bxSlider({
ticker: true,
speed: 80000,
minSlides: 1,
maxSlides: 7,
slideWidth: 400,
});
//スクロールアニメーション
$(window).on('scroll resize',function(){
let scroll = $(this).scrollTop();
let winH = $(this).outerHeight();
$('#item-photo>li').each(function(){
let objH = $(this).outerHeight();
let objTop = $(this).offset().top;
console.log();
if(scroll > objTop - winH + objH){
$(this).addClass('move');
}else{
$(this).removeClass('move');
}
});
});
});
</script>
</body>
</html>
@use "reset";
//変数の登録
//カラーの登録
$color_1:#e4dbc7;
$color_2:#f1ead9;
$color_3:#baaf9e;
$color_4:#ffe7c4;
$to_form:#eecdc3;
$color_txt:#817b78;
//フォントの登録
$font_1:'Caveat', cursive;
//ブレイクポイントの登録
$point-1:960px;
$tablet-point:767px;
$sp-point:500px;
//mixinの登録
@mixin p1{
@media (max-width:$point-1){
@content;
}
}
@mixin tab{
@media (max-width:$tablet-point){
@content;
}
}
@mixin sp{
@media (max-width:$sp-point){
@content;
}
}
//pcレイアウト
body{
color: $color_txt;
}
header{
width: 100%;
height: 100px;
background-color: $color_1;
display: flex;
align-items: center;
padding: 0 40px;
position: sticky;//stickyだと下の要素が潜り込まない
top: 0;
left: 0;
z-index: 10000;
h1{
font-family: $font_1;
font-size: 46px;
margin-right: 30px;
}
#ham-btn{
width: 60px;
height: 60px;
background-color: #FFF;
border-radius: 50%;
margin-left: auto;
position: relative;
span{
display: block;
width: 30px;
height: 3px;
background-color: $color_txt;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border-radius: 3px;
transition: 0.1s;
&::before{
display: block;
content: "";
width: 30px;
height: 3px;
background-color: $color_txt;
position: absolute;
top: -16px;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border-radius: 3px;
transition: 0.2s;
}
&::after{
display: block;
content: "";
width: 30px;
height: 3px;
background-color: $color_txt;
position: absolute;
top: 0;
right: 0;
bottom: -16px;
left: 0;
margin: auto;
border-radius: 3px;
transition: 0.2s;
}
}
}
#ham-btn.is-active>span{
background-color: transparent;
&::before{
top: 0;
transform: rotate(45deg);
}
&::after{
bottom: 0;
transform: rotate(135deg);
}
}
@include tab{
height: 80px;
h1{
font-size: 34px;
}
.tag-line{
display: none;
}
}
}
//headerここまで
//ナビゲーション部分
#g-nav{
display: none;
width: 100%;
height: calc(100vh - 100px);
background-color: $color_4;
position: fixed;
top: 100px;
left: 0;
z-index: 10000;
padding: 3% 20%;
li{
margin-bottom: 30px;
a{
display: block;
color: $color_txt;
border-bottom: 2px solid $color_txt;
padding:6px 0 6px 50px;
&:hover{
color: #000;
font-weight: bold;
border-bottom: 2px solid #000;
}
}
&:nth-of-type(6)>a{
background: url(../img/question-icon.svg) no-repeat 10px 0/30px;
}
&:nth-of-type(7)>a{
background: url(../img/mail-icon.svg) no-repeat 10px 0/26px;
}
}
}//ここまでナビゲーション部分
/* to-formボタン部分 */
.to-form{
width: 260px;
height: 50px;
background-color: $color_4;
border-radius: 100px;
position: fixed;
right: 0;
left: 0;
bottom: 50px;
margin: auto;
z-index: 9999;
box-shadow: 0 0 6px #6a6a6a;
a{
display: block;
text-align: center;
line-height: 50px;
color: $color_txt;
&::before{
display: inline-block;
content: "";
width: 26px;
height: 26px;
background: url(../img/mail-icon.svg) no-repeat center center/contain;
margin-right: 10px;
position: relative;
top: 7px;
}
}
}
//main-visual部分
.main-visual{
width: 100%;
height: 80vh;
position: relative;
img{
object-fit: cover;
object-position: center top;
width: 100%;
height: 100%;
}
.tag-line-sp{
display: none;
@include tab{
display: block;
position: absolute;
left: 0;
right: 0;
top: 200px;
margin: auto;
z-index: 100;
background-color: #f3cfb9cd;
color: #282626;
font-size: 18px;
font-weight: bold;
padding: 10px;
width: fit-content;
}
}
}//ここまでmain-visual部分
//アイテム部分
#item{
position: relative;
&::before{
display: block;
content: "";
background: url(../img/header.svg) no-repeat center center/cover;
width: 100%;
height: 170px;
position: absolute;
top: -170px;
}
}
.lead{
text-align: center;
padding:20px 60px 120px;
@include sp(){
padding:120px 10px;
}
h2{
//最大34pxで500px以下から22px
//22÷500x100=4.4
font-size: clamp(22px,4.4vw,34px);
margin-bottom: 30px;
span{
font-family: $font_1;
margin-right: .4em;
}
}
p{
line-height: 3;
@include sp(){
line-height: 2;
}
}
}
/* ギャラリー部分 */
#item-photo{
width: 80%;
margin: 0 auto 100px;
display: flex;
gap: 120px 40px;//縦、横の余白
flex-wrap: wrap;
li{
width: calc((100% - 80px) / 3);
height: 240px;
position: relative;
overflow: hidden;
&:nth-of-type(3n+1){
margin-top: -50px;
}
&:nth-of-type(3n){
margin-top: 50px;
}
img{
object-fit: cover;
width: 100%;
height: 100%;
border-radius: 20px;
}
&::after{
display: block;
content: "";
width: 100%;
height: 240px;
background-color: $color_1;
border-radius: 20px;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
@include p1{
width: calc((100% - 20px) / 2);
height: 160px;
&:nth-of-type(3n+1){
margin-top: 0;
}
&:nth-of-type(3n){
margin-top: 0;
}
}
}
li.move::after{
transform: translate(100%,0);
transition: 0.4s;
}
@include p1{
width: 96%;
gap:40px 20px;//縦、横の余白
}
}//ここまで#item-photo
//背景画像をattachment
.bg-1{
width: 100%;
height: 80vh;
background: url(../img/bg01-2.jpg) no-repeat center center/cover fixed;
@include p1{
height: 50vh;
background: url(../img/bg01-2.jpg) no-repeat center center/cover scroll;//スマホ時はfixedをscrollに変更
}
}
.bg-2{
width: 100%;
height: 80vh;
background: url(../img/bg02-2.jpg) no-repeat center center/cover fixed;
}
//料金部分
#flow{
background-color: $color_2;
padding:100px 10px;
position: relative;
overflow: hidden;
.price{
max-width: 420px;
margin: 0 auto 160px;
background-color: #ffffffb1;
padding: 40px;
text-align: center;
position: relative;
z-index: 2;
a{
color: $color_txt;
&:hover>p:nth-of-type(4){
text-decoration: underline 6px #e66b1a;
text-underline-offset: 4px;
}
}
p:nth-of-type(1){
font-size: 24px;
color: #cd5d12;
margin-bottom: 20px;
}
p:nth-of-type(2){
font-size: 38px;
font-weight: bold;
margin-bottom: 20px;
span{
font-size: 24px;
margin: 0 6px;
}
}
p:nth-of-type(3){
font-size: 20px;
margin-bottom: 20px;
}
}
.flow-step{
position: relative;
z-index: 2;
h2{
text-align: center;
font-size: 30px;
margin-bottom: 50px;
}
.step-wrapper{
width: 80%;
display: flex;
justify-content: space-between;
margin: 0 auto 100px;
.step-box{
width: 29%;
padding: 80px 20px 20px;
aspect-ratio: 1 / 1;
background-color: #FFF;
border-radius: 50%;
text-align: center;
h3{
font-size: 28px;
margin-bottom: 16px;
}
}
@include p1{
width: 96%;
display: block;
.step-box{
width: 220px;
padding:40px 20px 0;
margin: 30px auto;
}
}
}
}//ここまで.flow-step
.to-question{
width: 320px;
height: 60px;
margin: 0 auto;
background-color: #f48941;
border-radius: 10px;
position: relative;
z-index: 2;
a{
text-align: center;
display: block;
line-height: 60px;
color: #FFF;
border-radius: 10px;
transition: 0.2s;
&:hover{
box-shadow: 0 0 10px #999;
}
}
}
}//ここまで#flow
//パーティクル部分
#particles-js{
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
top: 0;
left: 0;
}
#shop{
padding: 100px 20px;
text-align: center;
h2{
font-size: 30px;
margin-bottom: 20px;
}
>p{
font-size: 20px;
margin-bottom: 100px;
}
.shop-wrapper{
display: flex;
overflow: auto;
scroll-snap-type: x mandatory;
margin: 0 0 100px 10%;
gap:40px;
.shop-box{
flex: 0 0 30%;
background-color: $color_1;
padding: 10px;
margin-bottom: 30px;
}
@include p1{
margin: 0 0 100px 20px;
.shop-box{
flex: 0 0 80%;
}
}
}
}//ここまで#shop
//news部分
#news{
background-color: $color_2;
padding: 100px 10px 250px;
.news-inner{
width: 80%;
margin: 0 auto 100px;
h2{
font-size: 28px;
margin-bottom: 20px;
}
}
}
#news-list{
display: flex;
flex-wrap: wrap;
dt{
width: 20%;
margin-bottom: 20px;
}
dd{
width: 80%;
margin-bottom: 20px;
}
@include sp{
display: block;
dt{
width: 100%;
margin-bottom: 10px;
}
dd{
width: 100%;
margin-bottom: 40px;
}
}
}
//カルーセル部分
.carousel{
width: 80%;
margin: 0 auto;
li{
width: 100%;
aspect-ratio: 1 / 0.8;
img{
object-fit: cover;
width: 100%;
height: 100%;
}
}
@include p1{
width: 100%;
}
}
//フッター部分
footer{
width: 100%;
height: 100px;
background-color: $color_1;
position: relative;
p{
width: 80%;
margin: 0 auto;
line-height: 100px;
}
&::before{
width: 100%;
height: 160px;
display: block;
content: "";
background: url(../img/footer.svg) no-repeat center center/cover;
position: absolute;
top: -160px;
left: 0;
}
}
//スムーススクロールの設定
html{
scroll-behavior: smooth;
}
#item,#flow,#shop,#news{
scroll-margin-top: 100px;
}
/* 質問ページ部分 */
.question-wrapper{
width: 80%;
margin: 100px auto 300px;
h2{
text-align: center;
margin-bottom: 50px;
font-size: 30px;
}
details{
background-color: $color_2;
padding: 20px;
margin-bottom: 60px;
summary>h3{
font-size: 24px;
margin-left: 18px;
cursor: pointer;
&::before{
content: "Q";
color: #d90d4a;
font-size: 28px;
margin-right: 10px;
}
}
summary:hover>h3{
text-decoration: underline 2px;
text-underline-offset: 3px;
}
summary:hover>h3::before{
text-decoration: none;
display: inline-block;/* inlineだとダメ */
}
.answer{
background-color: #FFF;
padding: 10px 40px;
font-size: 18px;
line-height: 2;
margin-top: 30px;
&::before{
content: "A";
color: #3887b4;
font-size: 28px;
margin: 0 10px 0 -18px;
font-weight: bold;
}
}
}
}//ここまで.question-wrapper
//黒い三角形を消す
summary{
list-style: none;
}
summary::-webkit-details-marker {
display: none;/* iOS仕様 */
}
//申し込みページ部分
.form-wrapper{
max-width: 800px;
margin: 100px auto 300px;
h2{
text-align: center;
font-size: 32px;
margin-bottom: 50px;
}
}
.form-step{
display: flex;
justify-content: space-between;
margin-bottom: 100px;
li{
width: 24%;
aspect-ratio: 1 / 1;
background-color: $color_2;
border-radius: 50%;
text-align: center;
padding-top: 6%;
font-size: 18px;
span{
display: block;
font-size: 20px;
margin-top: 8px;
}
}
li.current{
background-color: #8f7a63;
color: #FFF;
}
@include p1{
padding: 0 20px;
}
@include tab{
display: block;
li{
width: 90%;
aspect-ratio: 4 / 1.2;
border-radius: 8px;
margin: 0 auto 20px;
padding-top: 5%;
}
}
}
/* form部分 */
form{
padding: 0 10px;
dl{
display: flex;
flex-wrap: wrap;
border: 1px solid $color_3;
dt{
width: 25%;
background-color:#625b58;
padding: 30px 20px;
color: #FFF;
.any{
font-size: 14px;
font-weight: bold;
display: inline-block;
margin-left: 16px;
}
}
dd{
width: 75%;
padding:30px 20px;
&:nth-of-type(n+2){
border-top: 1px solid $color_3;
}
}
}
@include tab{
dl{
display: block;
dt{
width: 100%;
padding:10px 20px;
}
dd{
width: 100%;
}
}
}
}
[type="text"],[type="email"]{
border: 1px solid $color_3;
padding: 6px;
width: 60%;
@include tab{
width: 100%;
}
}
[type="radio"]{
scale: 1.8;
margin: 0 12px;
accent-color: #937867;
}
@include tab{
form dd:nth-of-type(3)>label{
display: block;
margin-bottom: 20px;
background-color: #e4dbc7;
padding: 14px;
border-radius: 8px;
}
}
textarea{
border: 1px solid $color_3;
width: 80%;
height: 140px;
padding: 6px;
@include tab{
width: 100%;
}
}
[type="submit"]{
display: block;
width: 240px;
line-height: 60px;
background-color: $to_form;
margin: 40px auto 0;
&:hover{
background-color: #f2c1a0;
}
}
//完了ページ部分
.thanks-wrapper{
padding: 100px 10px 300px;
h2{
text-align: center;
font-size: 30px;
margin-bottom: 40px;
}
p{
text-align: center;
line-height: 2;
font-size: 18px;
margin-bottom: 80px;
}
.sns-wrapper{
max-width:740px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 40px 80px;
.sns-box{
width: calc((100% - 80px) / 2);
a{
display: block;
padding: 34px 0;
background: #ede9e2 url(../img/twitter.svg) no-repeat 15% center/50px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #56adf0;
}
&:nth-of-type(2)>a{
background: #ede9e2 url(../img/facebook-f.svg) no-repeat 15% center/26px;
color: #3a5d93;
}
&:nth-of-type(3)>a{
background: #ede9e2 url(../img/instagram.svg) no-repeat 15% center/50px;
color: #c53490;
}
&:nth-of-type(4)>a{
background: #ede9e2 url(../img/line.svg) no-repeat 15% center/50px;
color: #1da51a;
}
}
}
}