架空の表参道カフェ風のサイト（LP）

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

サイトURL

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

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

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

　　　ユーザー名 : miki 

　　　パスワード : miki@1212 

制作概要

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

使用スキル

  • HTML

  • CSS

  • Scss

  • JavaScript/jQuery

  • レスポンシブ対応

実装内容・工夫した点

＜CSS＞

  • トップのタイトルが下からぬるっと表示するように実装しています。

  • ナビメニューをホバー時に緑色の下線が左から右へ表示するように実装しています。

  • menuセクションの画像をホバー時に拡大するように実装しています。

  • フッターのSNSのアイコンをホバー時に反転するようにしています。

  • AboutセクションとMenuセクションの下の画像にパララックスを実装しています。

  • 地図にのピンに店舗のオリジナルロゴを設置しています。

  • お問い合わせフォームをカスタマイズしています。（inputタグをホバー・フォーカス時に色を変える。チェックボックスをカスタマイズ）

＜JavaScript/jQuery＞

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

  • 右下にトップへ戻るアイコンを設定しています。

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

  • タイトルやコンテンツ等、フェードインのアニメーションを実装しています。

  • プライバシーポリシーをモーダルウィンドウで表示できるように実装しています。


WEBSITE