資料をダウンロード
無料カウンセリング
無料カウンセリング

WithCodeMedia-1-pc
WithCodeMedia-2-pc
WithCodeMedia-3-pc
WithCodeMedia-4-pc
previous arrowprevious arrow
next arrownext arrow

WithCodeMedia-1-sp
WithCodeMedia-2-sp
WithCodeMedia-3-sp
WithCodeMedia-4-sp
previous arrowprevious arrow
next arrownext arrow

【ソースコード】入門編：ペットページ

未分類
目次

ディレクトリ構造

site1
 ├─img
 │  └─画像ファイル etc...
 │
 ├─css
 │  ├─reset.css
 │  └─style.css
 │
 └─index.html

HTML

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>FlyingPaws</title>
    <meta name="description" content="FlyingPaws-ペットの海外渡航サポート">
    <meta name="keywords" content="Pet,service,airplane">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex">
    <!-- OGP -->
    <meta property="og:url" content="">
    <meta property="og:type" content="website">
    <meta property="og:title" content="FlyingPaws">
    <meta property="og:description" content="FlyingPaws-ペットの海外渡航サポート">
    <meta property="og:site_name" content="FlyingPaws">
    <meta property="og:image" content="../img/logo.png">
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <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=Noto+Sans+JP:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
  </head>
  <body>
    <main>
      <section class="top" id="top">
        <div class="top-wrap">
          <div class="top-wrap__txt">
            <p>ペットとの海外渡航を<span>完全</span>サポート</p>
          </div>
          <div class="top-wrap__logo">
            <img src="img/fv-logo.png" alt="ロゴ画像">
          </div>
          <div class="top-wrap__btn">
            <a class="cta-btn" href="#con">
              無料相談はこちらから
            </a>
          </div>
        </div>
      </section>
      <section class="wor" id="wor">
        <div class="wor-wrap">
          <div class="wor-wrap__ttl">
            <p>ペットとの海外渡航 <span>お困りではありませんか？</span></p>
          </div>
          <div class="wor-wrap__con">
            <div class="wor-wrap__con__block">
              <img src="img/worries_1.png" alt="画像">
              <p>海外へ引っ越したい<br>
              どうやってペットを<br>
              連れていくの？</p>
            </div>
            <div class="wor-wrap__con__block">
              <img class="img__2" src="img/worries_2.png" alt="画像">
              <p>急な海外赴任<br>
              ペットの渡航準備<br>
              間に合うか心配</p>
            </div>
            <div class="wor-wrap__con__block">
              <img class="img__3" src="img/worries_3.png" alt="画像">
              <p>渡航先から求められた<br>
              複雑な英文書類<br>
              どうやって用意するの？</p>
            </div>
          </div>
          <div class="wor-wrap__arrow">
            <img src="img/Polygon2.svg" alt="矢印">
          </div>
        </div>
      </section>
      <section class="service" id="service">
        <div class="service-wrap">
          <div class="service-wrap__ttl">
            <p>ペットの海外渡航スペシャリスト<br>
            <span>FlyingPaws</span>にお任せください！</p>
          </div>
          <div class="service-wrap__con">
            <div class="service-wrap__con__block">
              <div class="service-wrap__con__block__txt">
                <div class="service-wrap__con__block__txt__sub">
                  <p>特徴</p>
                </div>
                <div class="service-wrap__con__block__txt__main">
                  <div class="service-wrap__con__block__txt__main__no">
                    <p>01</p>
                  </div>
                  <div class="service-wrap__con__block__txt__main__ttl">
                  <p>渡航前準備を完全サポート</p>
                  </div>
                </div>
                <div class="service-wrap__con__block__txt__txt">
                  <p>渡航のための検疫準備・申請・政府機関への問い合わせ…<br>時間がかかるのに不備があれば出入国ができないことも。<br>FlyingPawsは渡航に関わる全ての手続きをサポートします！<br><br>
                  ❶  愛犬・愛猫の状況に合わせて、最適なスケジュールを作成<br>
                  ❷ 海外渡航に必要な各種証明書の取得をサポート<br>
                  ❸ 出入国予定の空港動物検疫所・航空会社とのやり取りを代行<br>
                  ❹ かかりつけ獣医様とも連携し、円滑な渡航準備を実現</p>
                </div>
              </div>
              <div class="service-wrap__con__block__img">
                <img class="service-img-1" src="img/service_01.png" alt="サービス画像">
              </div>
            </div>
            <div class="service-wrap__con__block __rev">
              <div class="service-wrap__con__block__img __rev">
                <img class="service-img-3" src="img/service_3.png" alt="サービス画像">
              </div>
              <div class="service-wrap__con__block__txt">
                <div class="service-wrap__con__block__txt__sub">
                  <p>特徴</p>
                </div>
                <div class="service-wrap__con__block__txt__main">
                  <div class="service-wrap__con__block__txt__main__no">
                    <p>02</p>
                  </div>
                  <div class="service-wrap__con__block__txt__main__ttl">
                    <p>渡航先の空港での検疫サポート</p>
                  </div>
                </div>
                <div class="service-wrap__con__block__txt__txt">
                  <p>
                    渡航先の輸入検疫までサポートがあるから入国まで安心！<br><br>            
                    日本語を話せるスタッフが入国まで完全サポートします。<br>
                    言語が不安…帰国用の書類を発行してくれるか不安…<br>
                    到着後すぐに対応してくれるか不安…といったお悩みも<br>
                    知識のあるスタッフがサポートするので、安心いただけます。</p>
                </div>
              </div>
            </div>
            <div class="service-wrap__con__block">
              <div class="service-wrap__con__block__txt">
                <div class="service-wrap__con__block__txt__sub">
                  <p>特徴</p>
                </div>
                <div class="service-wrap__con__block__txt__main">
                  <div class="service-wrap__con__block__txt__main__no">
                    <p>03</p>
                  </div>
                  <div class="service-wrap__con__block__txt__main__ttl">
                    <p>17ヶ国に対応・過去50件の実績</p>
                  </div>
                </div>
                <div class="service-wrap__con__block__txt__txt">
                  <p>
                    これまでに50件以上、毎年20件のサポート実績！<br>
                    下記以外の国についてもお気軽にお問い合わせください。<br><br></p>
                  <div class="service-wrap__con__block__txt__txt__block">
                    <div class="service-wrap__con__block__txt__txt__left">
                      <p>ア　ジ　ア</p>
                    </div>
                    <div class="service-wrap__con__block__txt__txt__right">
                      <p>中国・韓国・香港・台湾・モンゴル</p>
                    </div>
                  </div>
                  <div class="service-wrap__con__block__txt__txt__block">
                    <div class="service-wrap__con__block__txt__txt__left">
                      <p>東南アジア</p>
                    </div>
                    <div class="service-wrap__con__block__txt__txt__right">
                      <p>ベトナム・タイ・マレーシア・シンガポール</p>
                    </div>
                  </div>
                  <div class="service-wrap__con__block__txt__txt__block">
                    <div class="service-wrap__con__block__txt__txt__left">
                      <p>オセアニア</p>
                    </div>
                    <div class="service-wrap__con__block__txt__txt__right">
                      <p>オーストラリア・ニュージーランド</p>
                    </div>
                  </div>
                  <div class="service-wrap__con__block__txt__txt__block">
                    <div class="service-wrap__con__block__txt__txt__left">
                      <p>ヨーロッパ</p>
                    </div>
                    <div class="service-wrap__con__block__txt__txt__right">
                      <p>スペイン・フランス・イタリア・イギリス</p>
                    </div>
                  </div>
                  <div class="service-wrap__con__block__txt__txt__block">
                    <div class="service-wrap__con__block__txt__txt__left">
                      <p>北　　　米</p>
                    </div>
                    <div class="service-wrap__con__block__txt__txt__right">
                      <p>アメリカ(ハワイ以外)・カナダ</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="service-wrap__con__block__img">
                <img class="service-img-4" src="img/service_4.png" alt="サービス画像">
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="voice" id="voice">
        <div class="voice-wrap">
          <div class="voice-wrap__ttl">
            <p>\<span>お客様の<b>声</b></span>/</p>
          </div>
          <div class="voice-wrap__con">
            <div class="voice-wrap__con__block">
              <div class="voice-wrap__con__block__img">
                <img src="img/voice_1.jpg" alt="お客様からの写真">
              </div>
              <div class="voice-wrap__con__block__txt">
                <p>愛犬とタイに引っ越しました。無事入国できました！ありがとうございました。Mさん(2020.05)
                </p>
              </div>
            </div>
            <div class="voice-wrap__con__block">
              <div class="voice-wrap__con__block__img">
                <img src="img/voice_2.jpg" alt="お客様からの写真">
              </div>
              <div class="voice-wrap__con__block__txt">
                <p>香港に無事到着しました。到着した空港での検疫までサポート頂き助かりました。Sさん(2020.06)          
                </p>
              </div>
            </div>
            <div class="voice-wrap__con__block">
              <div class="voice-wrap__con__block__img">
                <img src="img/voice_3.jpg" alt="お客様からの写真">
              </div>
              <div class="voice-wrap__con__block__txt">
                <p>突然米国赴任が決まり焦っていましたが、手厚いサポートで無事入国できました。Rさん(2020.08)          
                </p>
              </div>
            </div>
            <div class="voice-wrap__con__block">
              <div class="voice-wrap__con__block__img">
                <img src="img/voice_4.jpg" alt="お客様からの写真">
              </div>
              <div class="voice-wrap__con__block__txt">
                <p>自力での準備に限界を感じ、依頼しました。無事ベトナムに到着しました！　　Hさん(2020.11)          
                </p>
              </div>
            </div>
            <div class="voice-wrap__con__block">
              <div class="voice-wrap__con__block__img">
                <img src="img/voice_5.jpg" alt="お客様からの写真">
              </div>
              <div class="voice-wrap__con__block__txt">
                <p>愛猫2匹と台湾に移住するにあたり、何から始めるべきか分からず依頼しました。Eさん(2021.3)          
                </p>
              </div>
            </div>
            <div class="voice-wrap__con__block">
              <div class="voice-wrap__con__block__img">
                <img src="img/voice_6.jpg" alt="お客様からの写真">
              </div>
              <div class="voice-wrap__con__block__txt">
                <p>スペインに引っ越しました。輸送環境も十分確認いただき安心して渡航できました。Nさん(2021.7)          
                </p>
              </div>
            </div>
            <div class="voice-wrap__con__block">
              <div class="voice-wrap__con__block__img">
                <img src="img/voice_7.jpg" alt="お客様からの写真">
              </div>
              <div class="voice-wrap__con__block__txt">
                <p>入国先の条件が分からず困り果てていた時にこちらを発見。お願いして正解でした。Fさん(2021.10)          
                </p>
              </div>
            </div>
            <div class="voice-wrap__con__block">
              <div class="voice-wrap__con__block__img">
                <img src="img/voice_8.jpg" alt="お客様からの写真">
              </div>
              <div class="voice-wrap__con__block__txt">
                <p>中国に無事到着しました。中国語が話せないので、輸入検疫サポート助かりました！Mさん(2022.3)          
                </p>
              </div>
            </div>
          </div>
          <div class="voice-wrap__btn">
            <a class="cta-btn" href="#con">無料相談はこちらから</a>
          </div> 
        </div>
      </section>
      <section class="fee" id="fee">
        <div class="fee-wrap">
          <div class="fee-wrap__ttl">
            <p>ペット海外渡航サポート費用</p>
          </div>
          <div class="fee-wrap__con">
            <div class="fee-wrap__con__block">
              <div class="fee-wrap__con__block__item">
                <p>狂犬病清浄国・指定地域以外</p>
              </div>
              <div class="fee-wrap__con__block__price">
                <p>88,000円<span>(税込)</span></p>
              </div>
            </div>
            <div class="fee-wrap__con__block">
              <div class="fee-wrap__con__block__item">
                <p>狂犬病清浄国・指定地域</p>
              </div>
              <div class="fee-wrap__con__block__price">
                <p>66,000円<span>(税込)</span></p>
              </div>
            </div>
          </div>
          <div class="fee-wrap__txt">
            <p>狂犬病清浄国・指定地域（2023年9月現在）<br>
            アイスランド、オーストラリア、ニュージーランド、フィジー諸島、ハワイ、グアム</p>
          </div>
        </div>
      </section>
      <section class="con" id="con">
        <div class="con-wrap">
          <div class="con-wrap__ttl">
            <div class="con-wrap__ttl__main">
              <p>お問い合わせ</p>
            </div>
            <div class="con-wrap__ttl__txt">
              <p>ペットとの海外渡航について、何でもお気軽にお問い合わせください。<br>
              お問い合せ内容確認後、メールまたは電話にて連絡させて頂きます。</p>
            </div>
          </div>
          <div class="con-wrap__con">
            <form class="con-wrap__con__form" method="post">
              <div class="con-wrap__con__form__block">
                <label class="con-wrap__con__form__block__left">お名前</label>
                <div class="con-wrap__con__form__block__right">
                  <input type="text" id="name" name="name" placeholder="山田 花子">
                </div>
              </div>
              <div class="con-wrap__con__form__block">
                <label class="con-wrap__con__form__block__left">メールアドレス</label>
                <div class="con-wrap__con__form__block__right">
                  <input type="email" id="email" name="email" placeholder="flyingpaws@gmail.com">
                </div>
              </div>
              <div class="con-wrap__con__form__block">
                <label class="con-wrap__con__form__block__left">
                  電話番号</label>
                <div class="con-wrap__con__form__block__right">
                  <input type="tel" id="tel" name="tel" placeholder="080-1234-5678">
                </div>
              </div>
              <div class="con-wrap__con__form__block">
                <label class="con-wrap__con__form__block__left">お問い合わせ内容</label>
                <div class="con-wrap__con__form__block__right">
                  <textarea id="text" name="text" placeholder="渡航先や渡航時期が分かりましたらご記入ください。また、当社からの連絡方法(メールか電話)にご希望ございましたらご記入ください。"></textarea>
                </div>
              </div>
              <div class="con-wrap__con__form__block__btn">
                <button type="submit">送信する</button>
              </div>
            </form>
          </div>
        </div>
      </section>
    </main>
    <footer class="footer" id="footer">
      <div class="footer-wrap">
        <p>©2024 FLYINGPAWS ALL RIGHTS RESERVED</p>
      </div>
    </footer>
  </body>
</html>

CSS

reset.css

@charset "UTF-8";

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
nav ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
/* change colors to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}
/* change colors to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
del {
  text-decoration: line-through;
}
abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* change border color to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}
input,
select {
  vertical-align: middle;
}

CSS

style.css

@charset "UTF-8";

html {
  font-size: 62.5%;
}
body {
  line-height: 1.8;
  word-break: break-all;
  background-color: #fbf7f1;
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}
.top {
  background-image: url(../img/fv-bg.jpg);
  background-size: cover;
  background-position: 50%;
  width: 100%;
  height: 694px;
  position: relative;
}
.top-wrap {
  width: 500px;
  position: absolute;
  left: 103px;
  top: 183px;
  text-align: center;
}
.top-wrap__txt p {
  font-size: 28px;
  letter-spacing: 1.6px;
}
.top-wrap__txt span {
  color: #ff7714;
  font-size: 35px;
  font-weight: bold;
  letter-spacing: 4.5px;
}
.top-wrap__logo img {
  width: 300px;
  margin-top: 59px;
}
.top-wrap__btn {
  width: 320px;
  margin: 125px auto 0;
}
.cta-btn {
  display: block;
  color: #fff;
  letter-spacing: 1.7px;
  font-weight: 600;
  font-size: 20px;
  padding: 5% 0;
  text-decoration: none;
  background-color: #ff7714;
  border-radius: 50px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  transition: all 0.3s;
}
.top-wrap__btn a:hover {
  opacity: 0.7;
}
.wor-wrap {
  width: 880px;
  margin: 40px auto 0;
  text-align: center;
}
.wor-wrap__ttl p {
  font-size: 25px;
  letter-spacing: 0.9px;
}
.wor-wrap__ttl p span {
  font-size: 30px;
  letter-spacing: 1.75px;
}
.wor-wrap__con {
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
}
.wor-wrap__con__block {
  width: 250px;
}
.wor-wrap__con__block p {
  font-size: 16px;
  letter-spacing: 0.63px;
  margin-top: 30px;
}
.wor-wrap__con__block img {
  width: 185px;
}
.wor-wrap__con__block img.img__2 {
  width: 112px;
  height: 140px;
}
.wor-wrap__con__block img.img__3 {
  width: 168px;
  height: 140px;
}
.wor-wrap__arrow {
  text-align: center;
  margin-top: 40px;
}
.wor-wrap__arrow img {
  width: 35px;
  height: 58px;
}
.service {
  clip-path: polygon(0 0, 50% 4%, 100% 0, 100% 100%, 0 100%);
  background-color: #ff7714;
  padding-top: 100px;
  padding-bottom: 30px;
}
.service-wrap {
  width: 900px;
  margin: 0 auto;
}
.service-wrap__ttl p {
  color: #fff;
  font-size: 25px;
  letter-spacing: 1.75px;
  text-align: center;
}
.service-wrap__ttl p span {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 2px;
}
.service-wrap__con {
  margin: 40px auto;
}
.service-wrap__con__block {
  background-color: #fbf7f1;
  border-radius: 60px;
  margin-bottom: 40px;
  padding: 3% 10%;
  height: 320px;
  display: flex;
  justify-content: space-between;
}
.service-wrap__con__block.__rev {
  height: 260px;
}
.service-wrap__con__block__txt {
  width: 70%;
}
.service-wrap__con__block__txt__main {
  display: flex;
  align-items: center;
}
.service-wrap__con__block__txt__main__no {
  line-height: 0;
  width: 55px;
  color: #ff7714;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 3px;
}
.service-wrap__con__block__txt__main__ttl {
  font-weight: 500;
  letter-spacing: 1.05px;
  font-size: 25px;
  margin-left: 20px;
}
.service-wrap__con__block__txt__sub {
  width: 55px;
  line-height: 1;
  text-align: center;
  color: #ff7714;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.6px;
}
.service-wrap__con__block__txt__txt {
  font-size: 16px;
  line-height: 27px;
  margin-top: 20px;
  letter-spacing: 0.95px;
}
.service-wrap__con__block__txt__txt__block {
  display: flex;
  text-align: left;
}
.service-wrap__con__block__txt__txt__left {
  width: 25%;
}
.service-wrap__con__block__txt__txt__left p {
  font-size: 16px;
}
.service-wrap__con__block__txt__txt__right p {
  font-size: 16px;
}
.service-wrap__con__block__img {
  width: 30%;
  text-align: center;
}
.service-wrap__con__block__img.__rev {
  text-align: left;
}
.service-img-1 {
  width: 160px;
  margin-top: 80px;
}
.service-img-3 {
  width: 160px;
  margin-top: 70px;
}
.service-img-4 {
  width: 170px;
  margin-top: 120px;
}
.voice-wrap {
  width: 900px;
  margin: 40px auto 0;
}
.voice-wrap__ttl p {
  font-size: 30px;
  letter-spacing: 3.6px;
  text-align: center;
}
.voice-wrap__ttl p span {
  font-size: 25px;
  letter-spacing: 2.8px;
}
.voice-wrap__ttl p span b {
  color: #ff7714;
  font-size: 30px;
}
.voice-wrap__con {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 40px;
}
.voice-wrap__con__block {
  width: 200px;
  background-color: #fbf7f1;
  box-shadow: 1px 3px 3px 1px rgba(0, 0, 0, 0.25);
  border-radius: 30px;
  text-align: center;
  margin-bottom: 30px;
}
.voice-wrap__con__block__img img {
  width: 150px;
  height: 150px;
  border-radius: 349px;
}
.voice-wrap__con__block__txt {
  text-align: left;
  width: 150px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1.15px;
  margin: 20px auto 20px;
}
.voice-wrap__btn {
  width: 300px;
  margin: 20px auto 70px;
  text-align: center;
}
.voice-wrap__btn a:hover {
  opacity: 0.7;
}
.fee {
  background-color: #ff7714;
  text-align: center;
  padding-top: 40px;
  padding-bottom: 40px;
}
.fee-wrap {
  margin: 0 auto;
  width: 900px;
}
.fee-wrap__ttl {
  color: #fff;
  font-size: 25px;
  letter-spacing: 1.7px;
}
.fee-wrap__con {
  display: flex;
  justify-content: space-around;
  margin: 30px auto 30px;
}
.fee-wrap__con__block {
  width: 335px;
  background-color: #fbf7f1;
  border-radius: 100px;
  padding: 25px 40px;
}
.fee-wrap__con__block__item {
  font-size: 24px;
  letter-spacing: 1.7px;
}
.fee-wrap__con__block__price {
  color: #ff7714;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 2px;
}
.fee-wrap__con__block__price p span {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1.5px;
}
.fee-wrap__txt {
  color: #fff;
  font-size: 16px;
  letter-spacing: 1.25px;
}
.con-wrap {
  width: 800px;
  margin: 40px auto;
  text-align: center;
}
.con-wrap__ttl__main {
  background-image: url(../img/ribbon-big_rev.png);
  background-position: 50%;
  background-size: cover;
  width: 350px;
  height: 70px;
  margin: 20px auto;
  position: relative;
}
.con-wrap__ttl__main p {
  color: #fff;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 1.5px;
  position: absolute;
  top: 5px;
  left: 97px;
}
.con-wrap__ttl__txt p {
  margin-top: 40px;
  font-size: 16px;
  letter-spacing: 0.75px;
}
.con-wrap__con {
  margin-top: 25px;
}
.con-wrap__con__form__block {
  display: flex;
  justify-content: space-around;
}
.con-wrap__con__form__block__left {
  width: 30%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.con-wrap__con__form__block__left {
  font-size: 16px;
}
.con-wrap__con__form__block__right {
  width: 55%;
  padding: 2%;
}
.con-wrap__con__form__block__right input {
  height: 50px;
  width: 100%;
  font-size: 16px;
  border: none;
}
.con-wrap__con__form__block__right textarea {
  height: 150px;
  width: 100%;
  border: none;
  font-size: 16px;
}
.con-wrap__con__form__block__btn {
  width: 32.5%;
  margin: 0 auto;
  margin-top: 3.5%;
}
.con-wrap__con__form__block__btn button {
  width: 100%;
  cursor: pointer;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 2px;
  background-color: #ff7714;
  border-radius: 50px;
  color: #fff;
  padding: 6.25% 0;
  border: unset;
  box-shadow: 4px 3px 7px rgb(0 0 0 / 40%);
  transition: all 0.3s;
}
.con-wrap__con__form__block__btn button:hover {
  opacity: 0.5;
}
::placeholder {
  color: #bab5b5;
  line-height: 1.5em;
}
.footer {
  text-align: center;
  font-size: 14px;
  margin: 15px auto 0;
  padding: 1.5% 0;
  background-color: #555;
}
.footer p {
  color: #fff;
}
未分類

この記事を書いた人

WithCode 編集部のアバター WithCode 編集部

WithCode(ウィズコード)は「目指すなら稼げる人材」というコンセンプトを掲げ、累計300名以上の卒業生を輩出してきたプログラミングスクールです。Web制作・Webデザインに関する役立つ情報や有意義な情報を発信していきます。

関連記事

  1. ホーム
  2. 未分類
  3. 【ソースコード】入門編：ペットページ

– service –WithCodeの運営サービス

  • WithCode
    - ウィズコード -

    スクール

    「未経験」から
    現場で通用する
    スキルを身に付けよう！

    詳細はこちら

  • WithFree
    - ウィズフリ -

    実案件サポート

    制作会社のサポート下で
    実務経験を積んでいこう！

    詳細はこちら

  • WithCareer
    - ウィズキャリ -

    就転職サポート

    大手エージェントのサポート下で
    キャリアアップを目指そう！

    詳細はこちら

公式サイト より
今すぐ
無料カウンセリング
を予約！

無料カウンセリングを予約する
目次