Panteon

판테온

프로젝트 설명

Patreon은 사용자가 자신의 기술 수준에 따라 코치를 선택하고 피드백을 제공할 수 있는 대화형 페이지입니다.

기능:

• 슬라이더;
• 피드백이 포함된 팝업 양식
• 사용자 경험(UX);
• 다양한 장치에 대한 적응형 인터페이스.

기술 스택:

• HTML5;
• CSS3:
  • 플렉스박스;
  • 포지셔닝;
  • 적응형 UI;
  • 미디어 쿼리;
• CSS의 공급업체 접두사
• 전처리기: SASS/SCSS/LESS;
• BEM 방법론;
• 미디어 파일 작업(HTML-비디오, iframe)
• Figma의 레이아웃에 따른 레이아웃;
• 자바스크립트:
  • CamelCase 스타일;
  • 플러그인 설치 및 구성
• 꿀꺽.

프로젝트 설치 및 시작:

클론 저장소:

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

종속성을 설치합니다.

 npm install

프로젝트를 실행합니다.

 npx gulp

언어:

• 자바스크립트

라이브러리:

• jQuery는 JavaScript와 HTML의 상호 작용에 초점을 맞춘 JavaScript 프레임워크입니다.
• PHPMailer는 웹 서버에서 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/