스타벅스 클론코딩-7 (MAIN CONTENT~)

 

MAIN CONTENT
- SEASON PRODUCT
- RESERVE COFFEE
- PICK YORU FAVORITE
- RESERVE STORE
- FIND STORE

 

 

MAIN CONTENT - SEASON PRODUCT

 

 

  <!-- SEASON PRODUCT -->
  <section class="season-product">
    <div class="inner">

      <img src="./images/floating3.png" alt="Icon" class="floating floating3" />
      <img src="./images/season_product_image.png" alt="" class="product" />

      <div class="text-group">
        <img src="./images/season_product_text1.png" alt="" class="title" />
        <img src="./images/season_product_text2.png" alt="" class="description" />
        <div class="more">
          <a href="javascript:void(0)" class="btn">자세히 보기</a>
        </div>
      </div>

    </div>
  </section>

 

/* 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;
  top: 110px;
  right: 100px;
}
.season-product .text-group .title {
  margin-bottom: 10px;
}
.season-product .text-group .description {
  margin-bottom: 15px;
}

 

MAIN CONTENT - RESERVE COFFEE

 

 

  <!-- RESERVE COFFEE -->
  <section class="reserve-coffee">
    <div class="inner">

      <img src="./images/reserve_logo.png" alt="" class="reserve-logo" />

      <div class="text-group">
        <img src="./images/reserve_text.png" alt="" class="description" />
        <div class="more">
          <a href="javascript:void(0)" class="btn btn--gold">자세히 보기</a>
        </div>
      </div>
      
      <img src="./images/reserve_image.png" alt="" class="product" />

    </div>
  </section>

 

/* RESERVE COFFEE */
.reserve-coffee {
  background-image: url("../images/reserve_bg.jpg");
}
.reserve-coffee .inner {
  height: 400px;
}
.reserve-coffee .reserve-logo {
  position: absolute;
  top: 110px;
  left: 0;
}
.reserve-coffee .text-group {
  position: absolute;
  top: 124px;
  left: 208px;
}
.reserve-coffee .product {
  position: absolute;
  top: 0;
  right: 0;
}

 

MAIN CONTENT - PICK YOUR FAVORITE

 

특징

- 배경을 고정시켜서 스크롤에 따라 배경이 올라가거나 내려가는 효과를 적용 (패럴렉스(parallax) 효과)

 

  <!-- PICK YOUR FAVORITE -->
  <section class="pick-your-favorite">
    <div class="inner">

      <div class="text-group">
        <img src="./images/favorite_text1.png" alt="" class="title" />
        <img src="./images/favorite_text2.png" alt="" class="description" />
        <div class="more">
          <a href="javascript:void(0)" class="btn btn--white">자세히 보기</a>
        </div>

      </div>
    </div>
  </section>

 

/* PICK YOUR FAVORITE */
.pick-your-favorite {
  background-image: url("../images/favorite_bg.jpg");
  /* 배경 반복 사용 안함 */
  background-repeat: no-repeat;
  /* 배경의 위치 */
  background-position: center;
  /* 배경 이미지 고정 방식 */
  background-attachment: fixed;
  background-size: cover;
}
.pick-your-favorite .inner {
  padding: 110px 0;
}
.pick-your-favorite .text-group {
  margin-left: 100px;
  width: 362px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.pick-your-favorite .text-group .title {
  margin-bottom: 40px;
}
.pick-your-favorite .text-group .description {
  margin-bottom: 40px;
}

 

MAIN CONTENT - RESERVE STORE

 

특징

- 가운데 동그라미 문양(메달)에 마우스를 올리면 180도로 돌아가면서 뒷면을 보여준다

- 마우스를 내리면 다시 원래대로 돌아간다

- 배경에 패럴렉스 효과 적용

 

  <!-- RESERVE STORE -->
  <section class="reserve-store">
    <div class="inner">

      <div class="medal">
        <div class="front">
          <img src="./images/reserve_store_medal_front.png" alt="" />
        </div>
        <div class="back">
          <img src="./images/reserve_store_medal_back.png" alt="" />
          <a href="javascript:void(0)" class="btn">매장안내</a>
        </div> 
      </div>

    </div>
  </section>

 

/* RESERVE STORE */
.reserve-store {
  background-image: url("../images/reserve_store_bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}
.reserve-store .inner {
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.reserve-store .medal {
  width: 334px;
  height: 334px;
  perspective: 600px;
}
.reserve-store .medal .front,
.reserve-store .medal .back {
  width: 334px;
  height: 334px;
  position: absolute;
  backface-visibility: hidden;
  transition: 1s;
}
.reserve-store .medal .front {
  transform: rotateY(0deg);
}
.reserve-store .medal:hover .front {
  transform: rotateY(180deg);
}
.reserve-store .medal .back {
  transform: rotateY(-180deg);
}
.reserve-store .medal:hover .back {
  transform: rotateY(0deg);
}
.reserve-store .medal .back .btn {
  position: absolute;
  top: 240px;
  left: 0px;
  right: 0;
  margin: auto;
}

 

MAIN CONTENT - Find STORE

 

 

  <!-- Find STORE -->
  <section class="find-store">
    <div class="inner">

      <img src="./images/find_store_texture1.png" alt="" class="texture1" />
      <img src="./images/find_store_texture2.png" alt="" class="texture2" />
      <img src="./images/find_store_picture1.jpg" alt="" class="picture picture1" />
      <img src="./images/find_store_picture2.jpg" alt="" class="picture picture2" />

      <div class="text-group">
        <img src="./images/find_store_text1.png" alt="" class="title" />
        <img src="./images/find_store_text2.png" alt="" class="description" />
        <div class="more">
          <a href="javascript:void(0)" class="btn">매장찾기</a>
        </div>
      </div>
    </div>
  </section>

 

/* FIND STORE */
.find-store {
  background-image: url("../images/find_store_bg.jpg");
}
.find-store .inner {
  height: 400px;
}
.find-store .texture1 {
  position: absolute;
  top: 0;
  left: 400px;
}
.find-store .texture2 {
  position: absolute;
  bottom: 0;
  right: 0;
}
.find-store .picture {
  border-radius: 50%;
  box-shadow: 2px 2px 8px rgba(0,0,0,.5);
  position: absolute;
}
.find-store .picture1 {
  top: -60px;
  left: 0;
}
.find-store .picture2 {
  top: 150px;
  left: 250px;
}
.find-store .text-group {
  position: absolute;
  top: 120px;
  left: 550px;
}
.find-store .text-group .title {
  margin-bottom: 20px;
}
.find-store .text-group .description {
  margin-bottom: 20px;
}