架空の農園サイト

Chihiro Suga
Webサイト制作/コーディング

制作内容

架空の農園について

　※デザインカンプより、コーディングのみ対応しています。

サイトURL

https://chihiro-hiro.conohawing.com/tateshina-goto-farm/

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

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

　　　ユーザー名 : chihiro

　　　パスワード : chihiro-hiro92

制作概要

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

使用スキル

  • HTML

  • CSS

  • JavaScript/jQuery

  • レスポンシブ対応

実装内容・工夫した点

cssにて実装

  • Googleマップを埋め込んでいます。
    ※イメージ画像：アクセス PC画面右、スマートフォン画面下、空白部分

JavaScript/jQueryにて実装

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

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

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

  • 各コンテンツが、スライドとともにふわっと出てくるようにしました。

  • 製品一覧を、Sliderにて実装しました。

  • 質問内容をアコーディオンにて開閉できるようにしています。

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

  • お問い合わせ完了後、文字の出現とともに、送信ボタンを非表示にしました。

イメージ画像

PC画面


スマートフォン画面