프로젝트/스타벅스 클론코딩
-
스타벅스 클론코딩-10 (FOOTER)프로젝트/스타벅스 클론코딩 2021. 5. 20. 09:27
FOOTER 영역 개인정보처리방침 영상정보처리기기 운영관리 방침 홈페이지 이용약관 위치정보 이용약관 스타벅스 카드 이용약관 윤리경영 핫라인 찾아오시는길 신규입점제의 사이트 맵 사업자등록번호 201-81-21515 (주)스타벅스 코리아 대표이사 이석구 TEL : 02) 3015-1100 / FAX : 02) 3015-1106 개인정보 책임자 : 강기원 © Starbucks Coffee Company. All Rights Reserved. /* FOOTER */ footer { background-color: #272727; border-top: 1px solid #333; } footer .inner { padding: 40px 0 60px 0; } footer .menu { display: flex; j..
-
스타벅스 클론코딩-9 (AWARDS)프로젝트/스타벅스 클론코딩 2021. 5. 19. 23:37
MAIN CONTENT - AWARDS 특징 - 수평 슬라이드 형태로 보여짐 - 왼쪽과 오른쪽에 화살표 아이콘을 통해서 슬라이드처럼 이동 arrow_back arrow_forward /* AWARDS */ .awards { background-color: #272727; } .awards .inner { padding: 40px 0; } .awards .swiper-container { width: 100%; height: 40px; } .awards .swiper-prev, .awards .swiper-next { width: 42px; height: 42px; border: 2px solid #fff; border-radius: 50%; outline: none; color: #fff; opacity..
-
스타벅스 클론코딩-8 (MAIN CONTENT~ 애니메이션)프로젝트/스타벅스 클론코딩 2021. 5. 19. 19:40
MAIN CONTENT~ 애니메이션 특징 - 각 section이 화면에서 80% 지점에 보이면 좌 또는 우측에서 날라오는 애니메이션 자세히 보기 자세히 보기 자세히 보기 매장안내 매장찾기 .back-to-position { opacity: 0; transition: 1s; } .back-to-position.to-right { /* 지정 요소 X축으로 이동 */ transform: translateX(-150px); } .back-to-position.to-left { transform: translateX(150px); } .show .back-to-position { opacity: 1; transform: translateX(0); } .show .back-to-position.delay-0 { /..
-
스타벅스 클론코딩-7 (MAIN CONTENT~)프로젝트/스타벅스 클론코딩 2021. 5. 16. 20:42
MAIN CONTENT - SEASON PRODUCT - RESERVE COFFEE - PICK YORU FAVORITE - RESERVE STORE - FIND STORE MAIN CONTENT - SEASON PRODUCT 자세히 보기 /* SEASON PRODUCT */ .season-product { background-image: url("../images/season_product_bg.jpg"); } .season-product .inner { height: 400px; } .season-product .floating3 { position: absolute; top: -200px; right: 0; } .season-product .text-group { position: absolute;..
-
스타벅스 클론코딩-6 (YOUTUBE)프로젝트/스타벅스 클론코딩 2021. 5. 16. 12:43
MAIN CONTENT - YOUTUBE 클론코딩 YOUTUBE 특징 - 자동 재생, 음소거, 무한 반복 - 외부에 있는 유튜브 영상을 가져옴 /* YOUTUBE VIDEO CSS*/ .youtube { position: relative; height: 700px; background-color: #333; overflow: hidden; } .youtube .youtube__area { width: 1920px; background-color: orange; position: absolute; left: 50%; margin-left: calc(1920px / -2); top: 50%; margin-top: calc(1920px * 9 / 16 / -2); } .youtube .youtube__area..
-
스타벅스 클론코딩-5 (PROMOTION 및 REWARDS)프로젝트/스타벅스 클론코딩 2021. 5. 14. 00:13
MAIN CONTENT - NOTICE - PROMOTION 클론코딩 PROMOTION 특징 - 프로모션은 수평 슬라이드 형태로 보여짐 - 활성화(active) 된 프로모션이 중앙으로 위치, 다른 프로모션은 반투명 처리 - 사용자가 페이지 번호를 제어 가능함 - 토글 버튼(파란색 동그라미)으로 프로모션 가려짐과 보여짐을 제어 자세히 보기 자세히 보기 자세히 보기 자세히 보기 자세히 보기 arrow_back arrow_forward .notice .promotion { height: 693px; background-color: #f6f5ef; position: relative; transition: height .4s; overflow: hidden; } .notice .promotion.hide { he..
-
스타벅스 클론코딩-4 (NOTICE)프로젝트/스타벅스 클론코딩 2021. 5. 12. 21:31
MAIN CONTENT - NOTICE 클론코딩 예제 NOTICE 특징 - 공지사항이 수직 슬라이드 형태로 보여짐 - 공지사항 내용들이 순서대로 자동으로 재생됨 공지사항 크리스마스 & 연말연시 스타벅스 매장 영업시간 변경 안내 [당첨자 발표] 2021 스타벅스 플래너 영수증 이벤트 스타벅스커피 코리아 애플리케이션 버전 업데이트 안내 [당첨자 발표] 뉴이어 전자영수증 이벤트 add_circle 스타벅스 프로모션 upload .inner { /* 가로 너비 */ width: 1100px; /* 외부 여백, 가운데 정렬 효과 */ margin: 0 auto; position: relative; } /* NOTICE CSS */ .notice .notice-line { position: relative; } ...
-
스타벅스 클론코딩-3 (전역 배지 및 VISUAL)프로젝트/스타벅스 클론코딩 2021. 5. 9. 22:44
HEADER - 전역 배지 클론코딩 예제 배지 특징 - 화면에서 스크롤을 일정 부분 내리면 천천히 사라짐, 올리면 다시 천천히 보여짐 /* CSS */ header { width: 100%; position: fixed; top: 0; } header .badges { position: absolute; top: 132px; right: 12px; } header .badges .badge{ border-radius: 10px; overflow: hidden; margin-bottom: 12px; /* 그림자 추가 */ box-shadow: 4px 4px 10px rgba(0,0,0,.15); cursor: pointer; } // 자바 스크립트 // 배지 요소 변수에 저장 const badgeEl = ..