💐 花屋ページ

📝 課題の説明

技術スタック

💻 機能実装

🗂 バー

	<section id="banner-section">
        <article class="left-banner"> 
          <span class="banner-bg"></span>
          <div class="banner-text">
            <p class="banner-name">꾸까 브랜드 이야기</p>
            <span class="banner-desc">
              꽃으로 라이프스타일을 만들어가는 <br />
              kukka의 문화를 소개해요.
            </span>
            <p class="banner-more">Brand story</p>
          </div>
        </article>
        <article class="right-banner"> 
          <span class="banner-bg"></span>
          <div class="banner-text">
            <button class="banner-name">꾸까 오프라인 쇼룸</button>
            <span class="banner-desc">
              꽃을 가까이서 만져보고 향기도 맡아보고, <br />
              꽃 속에서 작은 휴식을 누릴 수 있는 kukka의 오프라인 쇼룸
            </span>
            <button class="banner-more">꾸까 쇼룸 안내</button>
          </div>
        </article>
      </section>

@mixin bgPosition($position, $url) {
  background-size: cover;
  background-position: $position;
  background-repeat: no-repeat;
  background-image: url($url);
}

🔐 ポップアップウィンドウ

document.addEventListener('DOMContentLoaded', function () {
  checkCookie();
});    // 화면을 불러올 때 checkCookie 함수를 실행시킨다.

function checkCookie() {
  if (getCookie('maindiv') == 'done') {
    document.getElementById('modal').style.display = 'none';
  } else {
    document.getElementById('modal').style.display = 'block';
  }
}

function closeWin() {
  if (document.getElementById('popup_close_check').checked) {
    setCookie('maindiv', 'done', 1);
  }
  document.getElementById('modal').style.display = 'none';
}

function setCookie(name, value, expiredays) {
  const todayDate = new Date();
  todayDate.setDate(todayDate.getDate() + expiredays);
  document.cookie =
    name +
    '=' +
    escape(value) +
    '; path=/; expires=' +
    todayDate.toGMTString() +
    ';';
}

function getCookie(name) {
  const nameOfCookie = name + '=';
  let x = 0;
  while (x <= document.cookie.length) {
    const y = x + nameOfCookie.length;
    let endOfCookie = '';
    if (document.cookie.substring(x, y) == nameOfCookie) {
      if ((endOfCookie = document.cookie.indexOf(';', y)) == -1)
        endOfCookie = document.cookie.length;
      return unescape(document.cookie.substring(y, endOfCookie));
    }
    x = document.cookie.indexOf(' ', x) + 1;
    if (x == 0) break;
  }
  return '';
}

🌅 最終実施