架空の保護犬カフェサイト（LP）

ｍ.watanabe
Webコーダー（勉強中）


制作内容

架空の保護犬カフェサイト

デザインカンプからのコーディング課題を元に架空のオリジナルサイトを作成しまし た。セクション構成は課題と一緒です。


サイトURL

URL：https://miki-log.conohawing.com/rescuedog_cafe/

※Basic認証をかけております。

　お手数をおかけしますが、下記ID・パスワードをご入力ください。

　　　ユーザー名 : miki 

　　　パスワード : miki@1212 


制作概要

  • 制作時期：2023年11月
  • 制作時間：総計約30時間
  • ページ数：1ページ
  • 使用ツール：VScode・Figma

使用スキル

  • HTML

  • CSS

  • JavaScript/jQuery

  • レスポンシブ対応

実装内容・工夫した点

＜css＞

  • Googleマップを埋め込んでいます。

＜JavaScript/jQuery＞

  • ローディング画面を作成しました。

  • SP画面でハンバーガーメニューを実装しています。

  • ページ内リンククリックで、該当セクションにスムーススクロールします。

  • 「カフェの仲間たち」を、Sliderにて実装しました。

  • 「FAQ」をアコーディオンにて開閉できるようにしています。

  • 「予約メールフォーム」にバリデーションをかけ、必須項目が未記入の場合はエントリーボタンを非活性にしています。

  •  「予約メールフォーム」をGoogleフォームと連携させて、送信ボタンを押すとテキストの表示画面に遷移するようにしました。

WEBSITE