申し込みページ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>モバイルに特化したwebサイト|お申込み入力ページ</title> <link rel="stylesheet" href="../css/style.css"> </head> <body class="input"> <header> <h1 class="pc-title">Sweet Box</h1> <p class="tag-1">enjoy sweet at home</p> </header> <div class="container"> <h2>入力画面</h2> <form id="g-form" class="h-adr" action="" method="post"> <span class="p-country-name" style="display:none;">Japan</span> <dl> <dt>お名前</dt> <dd><input type="text" name="onamae" autocomplete="name" required placeholder="お名前を入力して下さい"></dd> <dt>メールアドレス</dt> <dd><input type="email" name="email" autocomplete="email" required placeholder="メールアドレスを入力して下さい"></dd> <dt>ご希望のコースをお選び下さい</dt> <dd class="radio-btn"> <label for="item-1"> <input type="radio" name="course" id="item-1" required checked>お試し3回コース5,940円(税込) </label> <label for="item-2"> <input type="radio" name="course" id="item-2" required>お得な年間12回コース21,780円(税込) </label> </dd> <dt>〒</dt> <dd> <input type="text" name="postal-code" class="p-postal-code" maxlength="8" required autocomplete="postal-code" inputmode="decimal"> </dd> <dt>住所1</dt> <dd> <input type="text" name="address-1" class="p-region p-locality p-street-address p-extended-address" required> </dd> <dt>住所2</dt> <dd> <input type="text" name="address-2" required placeholder="以降の住所を入力して下さい"> </dd> <dt>ビル/建物名<span>任意</span></dt> <dd> <input type="text" name="address-3" placeholder="例:池袋ビル405号室"> </dd> <dt>備考欄<span>任意</span></dt> <dd><textarea name="message"></textarea></dd> </dl> <input class="button02" type="submit" value="確認画面へ"> </form> </div><!-- /.container --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script> </body> </html>
style.scss
@use "_reset.scss"; @import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&family=Marhey&display=swap'); //フォントの登録 $font_en:'Marhey', sans-serif; $font_ja:'Kiwi Maru', serif; //ブレイクポイントを登録 $tab_point:900px; $sp_point:640px; //関数の登録 @mixin tab{ @media (max-width:$tab_point){ @content; } } @mixin sp{ @media (max-width:$sp_point){ @content; } } //スムーススクロールの設定 html{ scroll-behavior: smooth; } body{ padding-top: 50px; @include tab(){ padding-top: 70px; } } //固定の背景 .bg-wrapper{ width: 100%; height: 100vh; background: url(../img/bg.webp) no-repeat center center/cover; position: fixed; top: 0; left: 0; z-index: -2; } .bg-inner{ width: 100%; height: 100%; background-color: #ffffff88; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); padding-top: 100px; } header{ width: 30%; padding: 20px; position: fixed; top: 50px; left: 50px; @include tab(){ display: none; } } h1.pc-title{ font-family: $font_en; font-size: 42px; } .tag-1{ font-family: $font_en; margin-bottom: 30px; font-size: 20px; } //pc用ナビゲーション .pc-nav li{ margin-bottom: 10px; overflow: hidden; >a{ color: #111; font-size: 18px; padding: 4px 10px; font-family: $font_ja; position: relative; &::after{ content: ""; display: block; width: 100%; height: 10px; background-color: #d9d8ba; position: absolute; left: 0; bottom: 4px; z-index: -1; translate: -110% 0; transition: 0.2s; } &:hover::after{ translate: 0 0; } } } //テキストアニメーション .txt-anime{ position: fixed; z-index: -1; left: 0; bottom: 0; font-size: 40px; white-space: nowrap; text-indent: 4em; animation: txt 10s linear infinite; font-weight: bold; font-family: $font_en; >span{ margin-left: 4em; } } @keyframes txt{ 0%{translate: 0 0;} 100%{translate: -21em 0;} } //枠内 .container{ max-width: 600px; background-color: #f3e8d9; margin: 0 50px 100px 50%; box-shadow: 0 0 10px #666; position: relative; @include tab(){ margin: 0 auto 100px; } } //spレイアウトで使用するパーツ .sp-header{ display: none; @include tab(){ display:flex; max-width: 600px; height: 70px; background-color: #c0c0a2; justify-content: space-between; padding: 0 10px; align-items: center; position: fixed; z-index: 20; top: 0; right: 0; left: 0; margin: auto; .sp-title{ font-family: $font_en; } #ham-btn{ width: 44px; height: 44px; background-color: #868585; position: relative; >span{ display: block; width: 24px; height: 3px; background-color: #FFF; position: absolute; inset: 0; margin: auto; top: -12px; transition: 0.2s; &::after{ display: block; content: ""; width: 24px; height: 3px; background-color: #FFF; position: absolute; top: 12px; transition: 0.2s; } &.is-active{ top:0; rotate: 45deg; &::after{ top:0; rotate: 270deg; } } } } } } #sp-nav{ display: none; @include tab(){ display: block; position: fixed; z-index: 20; max-width: 600px; top: 70px; left: 0; right: 0; margin: auto; height: calc(100vh - 70px); background-color: #675240; padding: 40px; li{ margin-bottom: 10px; >a{ display: block; color: #FFF; padding: 6px 0; border-bottom: 2px solid #FFF; } } } } .main-visual{ width: 100%; height: 80vh; background: url(../img/main.webp) no-repeat 30% 60%/cover; display: flex; flex-direction: row-reverse; padding: 50px 50px 0 0; margin-bottom: 340px; } .tag-2{ /* font-family: $font_ja; */ font-size: 20px; writing-mode: vertical-rl; background-color: #FFF; padding:6px 4px; height: fit-content; } //お知らせ部分 .news{ width: 80%; padding: 20px; background-color: #ffffffcd; position: absolute; top: 75vh; left: 10%; border-radius: 10px; >h2{ margin-bottom: 10px; font-family: $font_ja; } dt{ font-weight: bold; } dd{ margin-bottom: 20px; } } //メインコピー .main-copy{ padding: 60px; text-align: center; font-size: 22px; margin-bottom: 80px; line-height: 2.4; } //セクションと見出し section{ margin: 100px 0; scroll-margin-top: 100px; } section>h2{ text-align: center; padding: 30px 0; font-size: 28px; font-family: $font_ja; } //商品紹介部分 .item-wrapper{ display: flex; flex-wrap: wrap; border-top: 1px solid #444; border-bottom: 1px solid #444; } .item-box{ width: 50%; padding: 40px 14px; &:nth-of-type(odd){ border-right: 1px solid #444; } &:nth-of-type(n+3){ border-top: 1px solid #444; } } .item-photo{ width: 100%; aspect-ratio: 1 / 1; margin: 10px 0; >img{ object-fit: cover; width: 100%; height: 100%; } } //ご利用の流れ部分 .step-box{ width: 60%; aspect-ratio: 1 / 1; border-radius: 50%; background-color: #FFF; margin: 50px auto; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px; >h3{ font-size: 24px; margin:-60px 0 20px 0; } >p{ text-align: center; line-height: 2; } } //申し込み方法部分 .to-form-text{ font-size: 20px; text-align: center; line-height: 1.7; margin-bottom: 50px; } .to-form-outer{ background-color: #ead6b9; width: 90%; margin: 50px auto; padding: 50px; } .to-form-wrapper>p{ border-radius: 10px; background-color: #868585; margin-top: 30px; >a{ display: block; padding: 20px 10px; color: #FFF; text-align: center; font-size: 18px; border-radius: 10px; transition: 0.2s; &:hover{ background-color: #a78d8d; } } } //よくある質問部分 .faq-wrapper{ width: 90%; margin: 50px auto; >details{ margin-bottom: 50px; >summary{ padding: 20px; background-color: #cbb7b7; font-size: 20px; cursor: pointer; list-style: none;//黒い三角を消す &::before{ content: attr(data-q); display: inline-block; color: #3c2020; margin-right: 10px; font-size: 24px; font-weight: bold; } } >summary::-webkit-details-marker{ list-style: none;//iOS用のリセット } .answer{ background-color: #e9e9e9; padding: 20px; padding-left: 2.5em; font-size: 18px; text-indent: -0.6em; &::before{ content: attr(data-a); display: inline-block; margin-right: 0.5em; color: #0c2c96; font-size: 20px; } } } } /* フッター部分 */ footer>p{ text-align: center; padding: 20px 0; background-color: #675240; color: #FFF; } .sns{ display: flex; justify-content: center; padding: 20px 0; background-color: #666; >li{ margin: 0 10px; >a{ display: block; width: 50px; height: 50px; background: url(../img/instagram.svg) no-repeat center center/40px; white-space: nowrap;//文字の改行を無くす text-indent: 100%;//1個分右にずらす overflow: hidden;//はみ出した文字を隠す } &:nth-of-type(2)>a{ background: url(../img/x-twitter.svg) no-repeat center center/40px; } &:nth-of-type(3)>a{ background: url(../img/line.svg) no-repeat center center/40px; } } } //お申込み入力ページ .input{ h2{ text-align: center; font-family: $font_ja; font-size: 28px; padding: 20px 0; } } #g-form{ padding: 50px 10px; dt{ font-size: 20px; font-weight: bold; margin-bottom: 10px; >span{ font-size: 13px; padding: 3px; background-color: #766868; color: #FFF; margin-left: 10px; } } dd{ margin-bottom: 30px; } [name="onamae"],[name="email"],[name="address-1"],[name="address-2"],[name="address-3"]{ border: 1px solid #333; padding: 4px; border-radius: 6px; width: 50%; } [name="course"]{ scale: 1.8; accent-color: #786060; margin-right: 20px; } .radio-btn>label{ display: block; margin-bottom: 20px; background-color: #d5cfcf; width: 80%; padding: 10px; border-radius: 6px; } [name="postal-code"]{ border: 1px solid #333; border-radius: 6px; width: 8em; padding: 4px; } textarea{ width: 80%; height: 140px; border: 1px solid #333; border-radius: 6px; padding: 4px; } } //ボタンのスニペット .button02 { display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: 1em 2em; width: 300px; color: #333; font-size: 18px; font-weight: 700; background-color: #cccccc; border-radius: 50vh; } .button02::after { content: ''; width: 5px; height: 5px; border-top: 3px solid #333333; border-right: 3px solid #333333; transform: rotate(45deg); } .button02:hover { text-decoration: none; background-color: #bbbbbb; }
