Panteon

パンテオン

プロジェクトの説明

Patreon は、ユーザーが自分のスキル レベルに基づいてコーチを選択し、フィードバックを提供できるインタラクティブなページです。

機能:

• スライダー;
• フィードバックを含むポップアップ フォーム。
• ユーザーエクスペリエンス (UX);
• さまざまなデバイスに適応するインターフェース。

テクノロジースタック:

• HTML5;
• CSS3:
  • フレックスボックス;
  • ポジショニング。
  • アダプティブ UI;
  • メディアクエリ。
• CSS のベンダープレフィックス。
• プリプロセッサ: SASS/SCSS/LESS;
• BEM 方法論。
• メディア ファイル (HTML ビデオ、iframe) の操作。
• Figma のレイアウトに従ってレイアウトします。
• JavaScript:
  • キャメルケーススタイル。
  • プラグインのインストールと構成。
• ゴクゴク。

プロジェクトのインストールと起動:

リポジトリのクローンを作成します。

 git clone https://github.com/maksimyou/Panteon.git

依存関係をインストールします。

 npm install

プロジェクトを実行します。

 npx gulp

言語:

• JavaScript

ライブラリ:

• jQuery は、JavaScript と HTML の相互作用に焦点を当てた JavaScript フレームワークです。
• PHPMailer は、Web サーバーから PHP コードを使用して安全かつ簡単に電子メールを送信するためのライブラリです。新しい Gmail SMTP 設定を使用した手動。
• Animate.css は、CSS アニメーションを追加するためのクロスブラウザー ライブラリです。

プラグイン:

• Swiper JS は、応答性の高いスライダーを作成するためのプラグインです。
• jQuery Validation Plugin は、フォーム要素の検証を支援するプラグインです。
• jQuery Masked Input は、数値入力のマスクを作成するプラグインです。

Figma のレイアウト:

• パンテオンのレイアウト

スクリーンショット:

拡大する

(https://maksimyou.github.io/Panteon/)

ウェブサイトのリンク:

https://maksimyou.github.io/Panteon/