섹션 안에 버튼 삽입

1. Rewards Section (section 배경은 왼쪽 오른쪽 나눠서)

높이 241px

left : width 50% / #272727

right : width 50% / #d5c798

 

2. btn그룹 안에 다음 3개의 버튼 추가

  1) 회원가입, 로그인, e-gift 선물하기

  2) btn그룹 : 가로 250px / 줄바꿈 / bottom 24, right 0에 위치

  3) 버튼 : 가로 너비 110px / margin right 10px

  4) 기프트 버튼 : margin top 10px / 증가비율 1

 

---

 

 <!-- REWARDS -->
 <section class="rewards">
  
  <div class="bg-left"></div>
  <div class="bg-right"></div>
  <div class="inner">
    <div class="btn-group">
      <div class="btn btn--reverse sign-up">회원가입</div>
      <div class="btn sign-in">로그인</div>
      <div class="btn gift">e-Gift 선물하기</div>
    </div>
  </div>

 </section>

/* REWARDS SECTION */
.rewards {
  position: relative;
}

.rewards .bg-left {
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background-color: #272727;
}

.rewards .bg-right {
  width: 50%;
  height: 100%;
  top: 0;
  right: 0;
  position: absolute;
  background-color: #d5c798;
}

.rewards .inner {
  background-image: url("../images/rewards.jpg");
  height: 241px;
}

.rewards .btn-group {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  width:250px;
  bottom: 24px;
  right:0;
}

.rewards .btn-group .btn.sign-up {
  margin-right: 10px;
}

.rewards .btn-group .btn.sign-in {
  width: 110px;
}

.rewards .btn-group .btn.gift {
  margin-top: 10px;
  flex-grow: 1;
}