oosong2711

<pre class="hljs"><code class="language-javascript">$(function(){
  /* Include html Files */
  $('.gnb-include').load('/include/gnb.html')
  $('.main-header-include').load('/include/main-header.html')
  $('.goods-detail-header-include').load('/include/goods-detail-header.html')

  /* Category - Accordion */
  $('.category-accordion .detail').eq(0).show()
  $('.category-accordion .title').click(function(){
    $(this).next().stop().slideDown()
    $(this).siblings('.category-accordion .title').next().stop().slideUp()
    $(this).addClass('active')
    $(this).siblings('.category-accordion .title').removeClass('active')
  })

  /* Recent Search Result */
  $('.search-recent .btn-clear').click(function(){
    $(this).parent().hide()
  })
  $('.search-recent .btn-all-clear').click(function(){
    $('.search-recent .item').hide()
  })

  /* Cart Items */
  $('.cart-content .btn-all-clear').click(function(){
    $('.cart-item').hide()
  })
  $('.cart-content .btn-clear').click(function(){
    $(this).parent().parent().hide()
  })

  /* Front Slider */
  $('.front-slider').slick({
    slidesToShow: 1,
    dots: false,
    arrows: true,
    autoplay: false,
  });
  /* Goods Suggestion Slider */
  $('.goods-suggestion-items').slick({
    slidesToShow: 3,
    dots: false,
    arrows: true,
    autoplay: false,
    slidesToScroll: 2,
  });
  /* Goods Accordion */
  $('.goods-accordion .detail').eq(0).show()
  $('.goods-accordion .title').click(function(){
    $(this).toggleClass('active')
    $(this).next().toggle()
    $(this).siblings('.goods-accordion .title').removeClass('active')
  })
  /* Goods Order Info */
  $('.btn-order-choice').click(function(){
    $('.goods-order-choice').hide()
    $('.goods-order-final').slideDown(250)
    $('.overlay-fold').show()
  })
  $('.btn-fold, .overlay-fold').click(function(){
    $('.goods-order-choice').show()
    $('.goods-order-final').slideUp(250)
    $('.overlay-fold').hide()
  })
  /* Wish */
  $('.wish').click(function(){
    $(this).toggleClass('active')
  })

  /* Front Footer */
  $('.btn-view-more').click(function(){
    $('.company-info-more').toggle()
  })

  /* Goods Detail Slider */
  $('.goods-detail-slider').slick({
    slidesToShow: 1,
    dots: true,
    arrows: false,
    autoplay: true,
    slidesToScroll: 1,
  });
})</code></pre>

상품 상세페이지 아코디언 부분

<pre class="hljs"><code class="language-css">/* ##### Goods Detail html ##### */
.goods-detail {}
.goods-detail-inner {}
.goods-detail-content {
  padding: 0;
}
/* Goods Slider CSS */
.goods-detail-slider-outer {
  position: relative;
}

.goods-detail-slider.slick-dotted.slick-slider {
  margin-bottom: 0;
}
.goods-detail-slider a {
  width: 100%;
  height: 350px;
}
.goods-detail-slider a img {
  width: inherit;
  height: inherit;
  object-fit: cover;
}
/* Goods Slider Custom CSS */
.goods-detail-slider .slick-dots {
  bottom: 15px;
}
.goods-detail-slider .slick-dots li {
  width: 15px;
  height: 15px;
  margin: 0 -3px;
}
.goods-detail-slider .slick-dots li button:before {
  color: white;
  opacity: 1;
}
.goods-detail-slider .slick-dots li.slick-active button:before {
  color: var(--crimson);
}
/* Goods Info */
.goods-info {
  padding: 20px;
}
.goods-rating {
  display: flex;
  justify-content: flex-end;
}
.stars {}
.stars .bi {
  color: var(--gold);
}
.stars em {
  font-style: normal;
  font-size: 13px;
  color: var(--royalblue);
}
.goods-info .goods-title h3 {
  font-size: 16px;
  margin: 10px 0;
}
.goods-info .goods-title div {
  justify-content: flex-start;
  font-size: 20px;
  gap: 15px;
  margin-top: 15px;
}
.goods-info .goods-title div span {
  margin-right: auto;
}
.goods-delivery-info {
  display: flex;
  margin: 25px 0;
  border-top: 1px solid var(--gloudy-gray);
  border-bottom: 1px solid var(--gloudy-gray);
  padding-top: 20px 0;
  gap: 10px;
}
.goods-delivery-info b {}
.goods-delivery-info div {}
.goods-delivery-info div span {
  display: block;
}
.goods-delivery-info div span em {
  font-style: normal;
  color: var(--silver-gray);
}
/* Goods Detail */
.good-detail img {
  width: 100%;
}
.good-detail p {
  padding: 0 20px;
  text-align: center;
}
/* Goods Accordion */
.goods-accordion {}
.goods-accordion .title {
  border-bottom: 1px solid var(--gloudy-gray);
  height: 40px;
  font-weight: normal;
  padding-left: 20px;
  display: flex;
  align-items: center;
  position: relative;
}
.goods-accordion .title:after {
  content: '\F64D';
  position: absolute;
  font-family: bootstrap-icons;
  right: 20px;
}
.goods-accordion .title.active {
  color: var(--crimson);
  background-color: yellowgreen;
}
.goods-accordion .title.active:after {
  content: '\F63B';
}
.goods-accordion .detail {
  display: none;
}
/* Goods Order Info */
.goods-order-info {
  background-color: white;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.05);
  padding: 20px;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
}
.goods-order-choice {
  display: flex;
  align-items: center;
  gap: 15px;
}
.goods-order-choice .wish {
  transform: scale(1.5);
  flex: 1;
}
.btn-order-choice {
  background-color: var(--royalblue);
  flex: 6;
}
.goods-order-final {
  display: none;
  z-index: 3;
}
.goods-order-final-info .goods-title {
  margin: 20px 0;
}
.goods-order-final-info .goods-title h3 {
  font-size: 16px;
}
.goods-order-final-info .goods-title > div {
  font-size: 20px;
  margin-top: 15px;
}
.btn-fold {
  background-color: transparent;
  width: 50px;
  position: absolute;
  border: none;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
}
.overlay-fold {
  position: fixed;
  width: 375px;
  height: 100vh;
  top: 0;
  left: 0;
  display: none;
}
.payment-benefit {
  font-size: 13px;
  margin-top: 20px 0;
}
.payment-benefit b {
  font-weight: 400;
}
.payment-benefit p {
  color: var(--light-gray);
}
.payment-benefit p a {
  text-decoration: underline;
}
.good-order-btns {
  display: flex;
  gap: 10px;
}
.btn-cart {
  border: 1px solid var(--royalblue);
  color: var(--royalblue);
  background-color: white;
}
.btn-now-order {
  background-color: var(--royalblue);
}</code></pre>

<pre class="hljs"><code class="language-html"><!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title><Source></Source>Goods Detail - Today's Meal Kit</title>
  
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  
  <script src="/js/slick/slick.js"></script>
  <link rel="stylesheet" href="/js/slick/slick-theme.css"></link>
  <link rel="stylesheet" href="/js/slick/slick.css"></link>
  
  <link rel="stylesheet" href="/css/style.css">
  <script src="/js/custom.js"></script>
</head>
<body>

  <div class="container goods-detail">
    <div class="goods-detail-inner">
      
      <div class="goods-detail-header-include"></div>
      
      <div class="goods-detail-content">
        <div class="goods-detail-slider-outer">
          <div class="goods-detail-slider">
            <a href="#none"><img src="/images/goods-detail-01.jpg"></a>
            <a href="#none"><img src="/images/goods-detail-02.jpg"></a>
            <a href="#none"><img src="/images/goods-detail-03.jpg"></a>
            <a href="#none"><img src="/images/goods-detail-04.jpg"></a>
          </div>
          <button class="btn-share"><i class="bi bi-share-fill"></i></button>
        </div>
        <div class="goods-info">
          <div class="goods-rating">
            <div class="stars">
              <i class="bi bi-star-fill"></i>
              <i class="bi bi-star-fill"></i>
              <i class="bi bi-star-fill"></i>
              <i class="bi bi-star-fill"></i>
              <i class="bi bi-star-fill"></i>
              <em>(53)</em>
            </div>
          </div>
          <div class="goods-badge">
            <span class="badge new">new</span>
            <span class="badge hot">hot</span>
          </div>
          <div class="goods-title">
            <h3>바다향 가득! 해산물 씨키트 해물 스파게티 밀키트</h3>
            <div>
              <span>30%</span><b>11,760원</b><s>16,800원</s>
            </div>
          </div>
          <div class="goods-delivery-info">
            <b>배송정보</b>
            <div>
              <span>5만원 이상 구매시 무료 배송</span>
              <span>8/24(목) 도착 예정 <em>(평균 배송 소요 2~3일)</em></span>
              <span>제주, 도서, 산간 지역 15,000원 추가</span>
            </div>
          </div>
        </div>
        <div class="good-detail">
          <img src="/images/goods-detail-focus-01.png">
          <p>입 안에 가득 퍼지는 풍부한 바다 향과 스파케티의 다채로운 2가지 맛의 콤비네이션</p>
          <img src="/images/goods-detail-01.jpg">
          <p>우스터소스, 간장, 꿀, 레드 와인 식초로 맛을 낸 마리네이드 소사는 풍미를 더해줄 뿐만 아니라 오징어의식감을 더욱 부드럽게 만들어줍니다.</p>
          <img src="/images/goods-detail-03.jpg">
          <p>오늘 메뉴는 아이들이 좋아하는 오징어 토마토 스파게티를 만들어 주세요. 입에서 살살 녹는 Today's Meal Kit 토마토 오징어 스파게티</p>
        </div>
        <div class="goods-accordion">
          <div class="title">상품후기(45)</div>
          <div class="detail">
            <img src="/images/goods-detail-accordion-content-01.png">
          </div>
          <div class="title">상품문의</div>
          <div class="detail">
            <img src="/images/goods-detail-accordion-content-02.png">
          </div>
          <div class="title">배송안내</div>
          <div class="detail">
            <img src="/images/goods-detail-accordion-content-03.png">
          </div>
          <div class="title">교환 및 반품안내</div>
          <div class="detail">
            <img src="/images/goods-detail-accordion-content-04.png">
          </div>
        </div>
        <div class="goods-order-info">
          <div class="goods-order-choice">
            <span class="wish"></span>
            <button class="btn-primary btn-order-choice">구매하기</button>
          </div>
          <div class="goods-order-final">
            <button class="btn-fold"><i class="bi bi-chevron-down"></i></button>
            <div class="goods-order-final-info">
              <span class="info-badge arrival">내일도착</span>
              <div class="goods-title">
                <h3>바다향 가득! 해산물 씨키트 해물 스파게티 밀키트(2인) 1300g</h3>
                <div>
                  <span>30%</span><b>11,760원</b><s>16,800원</s>
                  <div class="custom-select">
                    <select>
                      <option value="">1</option>
                      <option value="">2</option>
                      <option value="">3</option>
                      <option value="">4</option>
                      <option value="">5</option>
                    </select>
                  </div>
                </div>

              </div>
            </div>
            <div class="payment-benefit">
              <b>결제 혜택</b>
              <p>
                하나카드 5만원 결제 시 최대 8개월 무이자 할부,
                PAYCO 생애 첫 결제 시 2,000원 즉시 할인
                <br><a href="#none">더보기</a>
              </p>
            </div>
            <div class="good-order-btns">
              <button class="btn-primary btn-cart">장바구니 담기</button>
              <button class="btn-primary btn-now-order">바로구매</button>
            </div>
          </div>
        </div>
        <div class="overlay-fold"></div>
      </div>
    </div>
  </div>
  
</body>
</html></code></pre>

<p>js    (글자수 제한이 있어서 따로따로 올립니다 감사합니다!)</p><pre class="hljs"><code>$(function(){
  /* Trigger */
  $('.trigger').click(function(){
    $(this).toggleClass('active')
    $('.gnb').toggleClass('active')
  })
  $('section, .menu a').click(function(){
    $('.gnb').removeClass('active')
    $('.trigger').removeClass('active')
  })

	/* Smooth Scrolling */
  $('.menu a, .gototop').click(function(e){
    $.scrollTo(this.hash || 0, 900)
  })

  // Change CSS with Scroll
  $(window).scroll(function(){
    if($(window).scrollTop() > 50) {
      $('header, .gototop').addClass('active')
    }
    else {
      $('header, .gototop').removeClass('active')
    }
  })

   // Slick.js history
  $('.history-slider').slick({
    dots: true,
    infinite: false,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 2,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: true
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
      // You can unslick at a given breakpoint now by adding:
      // settings: "unslick"
      // instead of a settings object
    ]
  })

  // Slick.js project photo
  $('.project-photo').slick({
    dots: true,
    infinite: true,
    speed: 500,
    fade: true,
    autoplay: true,
    autoplaySpeed: 2000,
    cssEase:'linear'
  })

})</code></pre>

개발자도구

<p>반응형 CSS</p><pre class="hljs"><code>@media (max-width: 768px) {
  /* Entire Layout */
  .cd-section {
    height: auto;
  }
  .cd-section > div {
    height: auto;
  }
  .content {
    position: static;
    width: 100%;
    height: 100%;
  }
  /* Header */
  header {
    transition: 0.5s;
    z-index: 1;
  }
  header.active {
    background: white;
    border-bottom: 1px solid #ddd;
  }
  .menu {
    display: block;
  }
  .slogan {
    display: none;
  }
  .gnb {
    background-color: #fff;
    position: fixed;
    top: 0;
    right: -270px;
    width: 250px;
    height: 100vh;
    box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
    transition: 0.5s;
  }
  .gnb.active {
    right: 0;
  }
  .menu {
    line-height: 40px;
    margin-top: 60px;
  }
  .menu a {
    display: block;
    text-align: right;
    padding-right: 20px;
    color: black;
    font-size: 20px;
  }
  /* Trigger */
  .trigger {
    display: block;
    width: 24px;
    height: 14px;
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .trigger span {
    position: absolute;
    height: 1px;
    width: 100%;
    background-color: black;
    transition: 0.5s;
  }
  .trigger span:nth-child(1) {
    top: 0;
  }
  .trigger span:nth-child(2) {
    top: 50%;
    width: 80%;
  }
  .trigger span:nth-child(3) {
    top: 100%;
  }
  .trigger.active span:nth-child(1) {
    top: 50%;
    transform: rotate(45deg);
  }
  .trigger.active span:nth-child(2) {
    top: 50%;
    width: 80%;
    opacity: 0;
  }
  .trigger.active span:nth-child(3) {
    top: 50%;
    transform: rotate(-45deg);
  }
  /* Gototop */
  .gototop {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 2;
    border: 1px solid white;
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 52px;
    transform: translateY(30px);
    opacity: 0;
    transition: 0.5s;
  }
  .gototop.active {
    opacity: 1;
    transform: translateY(0);
  }
  /* Hiring Button */
  .btn-hiring {
    right: 20px;
    bottom: 20px;
  }
  .cd-vertical-nav {
    display: none;
  }

  /* ### Section : home ### */
  .home-inner {
    height: 100vh;
  }
  .welcome-text {
    transform: translate(-50%, -50%) scale(0.7);
    width: 100%;
  }
  .home-heading {
    left: 20px;
  }
  .home-heading span {
    font-size: 50px;
  }

/* ### Section : about ### */
  .about-inner {
    height: auto;
    padding: 20px;
    background: #0dace3;
  }
  .about-items {
    width: 100%;
    position: static;
    margin-left: 0;
    transform: none;
    text-align: center;
  }
  .item img {
    float: none;
  }

/* ### Section : plan ### */
  .plan-inner {
    height: auto;
    padding: 20px;
  }
  .plan-feature {
    width: 100%;
    position: static;
    transform: none;
  }
  .plan-feature > div {
    height: auto;
  }
  .plan-info {
    margin-bottom: 40px;
  }
  .plan-info div {
    float: none;
    width: 100%;
  }
  .plan-heading {
    padding-right: 0;
  }
  .plan-photo img {
    width: 100%;
    height: auto;
  }

  /* ### Section : awards winner ### */
  .awards-inner {
    height: auto;
  }
  .awards-inner > div {
    float: none;
    width: 100%;
  }
  .about-heading,
  .victory-jump img {
    position: static;
    transform: none;
    padding: 40px 20px;
  }
  .about-heading {
    width: 100%;
  }
  .victory-jump img {
    text-align: center;
  }

  /* ### Section : location winner ### */
  .location-inner {
    height: auto;
  }
  .feature {
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    transform: none;
  }
  .feature > div {
    float: none;
    width: 100%;
    padding: 20px;
  }

  /* ### Section : contact ### */
  .contact-inner {
    height: auto;
  }
  .contact-feature {
    width: 100%;
    position: static;
    transform: none;
  }
  .contact-feature > div {
    float: none;
    width: 100%;
  }

  /* ### Section : project ### */
  .project-inner {
    height: auto;
    border: none;
  }
  .tab > div {
    width: 100%;
    float: none;
  }
  .view-project {
    width: 100%;
  }
  .project-info {
    padding: 20px;
  }
  .detail div {
    font-size: 13px;
  }
  .btn {
    width: 100%;
    bottom: -10px;
  }
  .project-info p {
    position: relative;;
  }

  /* ##### SubPage : Hiring ##### */
  .hiring-info {
    padding: 20px;
  }
  .hiring-main {
    height: 300px;
  }
  .hiring-heading {
    width: 100%;
    top: 60%;
  }
  .hiring-heading h1 {
    font-size: 32px;
    margin-top: 10px;
  }
  .hiring-heading span:before,
  .hiring-heading span:after {
    background-color: #141414;
  }
  .hiring-info > div {
    float: none;
    width: 100%;
    height: auto;
  }
  .center-child {
    position: static;
    transform: none;
    width: 100%;
  }
  .hiring-slogan {
    padding: 50px 0;
  }
  .hiring-slogan p {
    font-size: 26px;
  }
  .hiring-slogan p:before {
    top: -72px;
    left: -60px;
  }
  .hiring-contact ul {
    display: block;
    width: 100%;
  }
  .center-child h2 {
    font-size: 28px;
  }

  /* Featherlight Mobile CSS */
  .featherlight .featherlight-close-icon {
    font-size: 25px;
    right: 30px;
  }

  /* ##### SubPage : Project ##### */
  .hiring-main.project-main1,
  .hiring-main.project-main2,
  .hiring-main.project-main3 {
    height: 70vh;
  }
  .hiring-main.project-main1 .hiring-heading h1,
  .hiring-main.project-main2 .hiring-heading h1,
  .hiring-main.project-main3 .hiring-heading h1 {
    font-size: 40px;
  }
  .photo.project-info {
    font-size: 19px;
  }



}</code></pre>

<p>스타일 CSS</p><pre class="hljs"><code>/* Google Web Font : Montserrat */
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Manrope:300,400,500,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Overpass&display=swap');
/* FontAwesome CDN 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

/* Reset CSS */
* { box-sizing: border-box; }
ul { list-style: none; padding: 0;}
a { text-decoration: none; }

/* Default CSS */
body {
  font-family: 'Montserrat', sans-serif;
  color: #222;
  font-size: 15px;
  margin: 0;
  height: 100vh;
  background: white;
}

/* Entire Layout */
.cd-section {
  height: 100vh;
}
.cd-section > div {
  height: 100%;
  position: relative;
}
.content {
  background-color: white;
  position: absolute;
  width: calc(100% - 40px);
  height: calc(100% - 80px);
  left: 20px;
  bottom: 20px;
  overflow: hidden;
}
/* Header */
header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}
.gnb-inner {
  width: calc(100% - 40px);
  height: 60px;
  margin: auto;
  line-height: 60px;
}
.logo {
  float: left;
}
.logo img {
  padding-top: 17px;
}
.gnb {
  float: right;
}
.menu {
  display: none;
}
.slogan {
  font-size: 16px;
  font-style: italic;
}
.trigger {
  display: none;
}
/* Hiring Button */
.btn-hiring {
  position: fixed;
  right: 50px;
  bottom: 50px;
  color: white;
  background-color: black;
  padding: 10px 20px;
  border-radius: 20px;
  box-shadow: 5px 5px 20px #00000017;
  transition: 0.5s;
}
.btn-hiring .fa {
  transform: rotateY(180deg);
  margin-right: 5px;
}
.btn-hiring:active {
  transform: scale(80%);
}

/* ### Section : project ### */
.project-inner {
  height: 100%;
  overflow: hidden;
  border: 1px solid #ddd;
}
.tabs {
  height: 100%;
  width: 300%;
  transition: 0.5s;
}
.tab {
  width: calc(100% / 3);
  height: 100%;
  float: left;
}
.tab > div {
  height: 100%;
  float: left;
}
.project-info {
  width: 25%;
}
.project-photo {
  width: 75%;
  overflow: hidden;
}
input[name='tabmenu'] {
  display: none;
}
.btn {
  position: absolute;
  left: 0;
  bottom: 30px;
  width: 25%;
  text-align: center;
}
.btn label{
  cursor: pointer;
  width: 5px;
  height: 5px;
  background-color: black;
  display: inline-block;
  border-radius: 50%;
  margin: 8px;
  position: relative;
}
.btn label:before {
  content: '';
  display: inline-block;
  border: 1px solid transparent;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  position: absolute;
  left: -6px;
  top: -6px;
  transition: 0.3s;
}
.btn label:hover:before {
  border: 1px solid #bbb;
}
input[id='tab1']:checked ~ .btn label[for='tab1']:before,
input[id='tab2']:checked ~ .btn label[for='tab2']:before, 
input[id='tab3']:checked ~ .btn label[for='tab3']:before {
  border: 1px solid #bbb;
}
input[id='tab1']:checked ~ .tabs {
  margin-left: 0;
}
input[id='tab2']:checked ~ .tabs {
  margin-left: -100%;
}
input[id='tab3']:checked ~ .tabs {
  margin-left: -200%;
}
/* Project info */
.project-info {
  padding: 50px;
  position: relative;
}
.project-info:before {
  content: attr(data-text);
  font-size: 130px;
  color: #eee;
  position: absolute;
  top: -10px;
  left: 10px;
}
.project-info h3 {
  font-size: 20px;
  position: relative;
}
.project-info p {
  font-size: 16px;
  line-height: 1.6em;
}
.project-info ul {
  line-height: 2em;
  margin: 50px 0;
}
.project-info ul li:before {
  content:"\f105";
  font-family: fontawesome;
  margin-right: 10px;
}
.detail {
  margin-bottom: 50px;
}
.detail div {
  display: inline-block;
  text-align: center;
  width: 32.5%;
  color: #999;
}
.detail div span {
  font-size: 36px;
  font-weight: bold;
  display: block;
  color: black;
  margin-bottom: 10px;
}
.view-project {
  background: #3f3f3f;
  color: white;
  text-transform: uppercase;
  font-size: 13px;
  display: inline-block;
  width: 250px;
  padding: 10px;
  text-align: center;
  transition: 0.3s;
  position: relative;
}
.view-project:hover {
  background-color: black;
}
.view-project .fa {
  transition: 0.3s;
}
.view-project:hover .fa {
  margin-left: 10px;
}

/* ### Section : home ### */
.home-inner {
  background-color: white;
  height: 100%;
}
.home-inner:before {
  content: '';
  background-color: black;
  position: absolute;
  top: 0;
  left: 0;
  width: 10;
  height: 100%;
  animation: overlay 1s 2s ease-in-out both;
}
.welcome-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  font-weight: 300;
  text-align: center;
  line-height: 1.2em;
  margin: 0;
  font-family: 'Source Code Pro';
  animation: sliderup 2s 0s linear both;
}
.welcome-text span {
  display: block;
  font-size: 20px;
}
.welcome-text span .fa {
  color: crimson;
}
.opacity-image {
  background: url(/images/section-bg-01.jpg) no-repeat center center;
  background-size: cover;
  height: 100%;
  opacity: 0;
  animation: opacity-image 1s 2.5s ease-in-out both;
}
.home-heading {
  position: absolute;
  top: 50%;
  left: 300px;
  transform: translateY(-50%);
}
.home-heading span {
  display: block;
  font-size: 115px;
  color: white;
  font-weight: 600;
  width: 0%;
  overflow: hidden;
  animation: reveal 0.5s 3s ease-in both;
}
.home-heading span:nth-child(1) {
  animation-delay: 3s;
}
.home-heading span:nth-child(2) {
  animation-delay: 3.2s;
}
.home-heading span:nth-child(3) {
  animation-delay: 3.4s;
}

@keyframes sliderup {
  0% {
    opacity: 0;
    margin-top: 50px;
  }
  20% {
    opacity: 1;
    margin-top: 0;
  }
  40% {
    opacity: 1;
    margin-top: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes overlay {
  0% {
    width: 0;
    left: 0;
  }
  50% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 0%;
    left: 100%;
  }
}
@keyframes opacity-image {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes reveal {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

/* ### Section : about ### */
.about-inner {
  background: #0dace3 url(/images/line-drawing.png)no-repeat right bottom;
  height: 100%;
}
.about-items {
  width: 50%;
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 100px;
}
.item {
  overflow: hidden;
  margin-bottom: 40px;
}
.item:hover img {
  filter: invert(0);
  transition: 0.5s;
}
.item img {
  height: 120px;
  float: left;
  margin-right: 20px;
  filter: invert(1);
}
.item h3 {
  font-size: 28px;
  font-weight: 500;
  margin: 0;
  transition: 0.5s;
  letter-spacing: -1px;
}
.item:hover h3 {
  color: black;
}
.item p {
  overflow: hidden;
  font-size: 18px;
}

/* Slick.js Custom CSS */
.history-slider .slick-arrow {
  display: none !important;
}
.history-slider .slick-dots li button:before {
  font-size: 40px;
  color: white;
}
.history-slider .slick-dots li {
  margin: 0;
}


/* Featherlight Custom CSS */
.featherlight .featherlight-content {
  position: relative;
  text-align: left;
  vertical-align: middle;
  display: inline-block;
  overflow: auto;
  padding: 0;
  border-bottom: 25px solid transparent;
  margin-left: 0;
  margin-right: 0;
  max-height: 100%;
  background: #fff;
  cursor: auto;
  white-space: normal;
  width: 100%;
  height: 100%;
}
.featherlight iframe {
  border: none;
  width: 100%;
  height: 100%;
}
.featherlight .featherlight-close-icon {
    position: absolute;
    z-index: 9999;
    top: 30px;
    right: 70px;
    line-height: 25px;
    width: 25px;
    cursor: pointer;
    text-align: center;
    font-family: Arial, sans-serif;
    background: #fff;
    background: rgba(255, 255, 255, 0.3);
    color: #000;
    border: none;
    padding: 0;
    font-size: 40px;
    outline: none;
}</code></pre>

<p>html (10000자 이하로 적으라고 해서 about섹션까지만 적었어요!)</p><pre class="hljs"><code><!doctype html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>DesignWorks Architecture Agency</title>
	<link rel="icon" href="/images/favicon.png">
	<script src="/js/jquery-2.1.4.js"></script>
	
	<script src="js/velocity/modernizr.js"></script>
	<script src="js/velocity/velocity.min.js"></script>
	<script src="js/velocity/velocity.ui.min.js"></script>
  <script src="js/velocity/main.js"></script>
	<link rel="stylesheet" href="/js/velocity/velocity.css">
	
	<script src="js/jquery.scrollTo.min.js"></script>
	
	<script src="/js/slick/slick.min.js"></script>
	<link rel="stylesheet" href="js/slick/slick-theme.css">
	<link rel="stylesheet" href="js/slick/slick.css">
	
	<script src="/js/featherlight/featherlight.js"></script>
	<link rel="stylesheet" href="/js/featherlight/featherlight.css">
	
	<script src="/custom.js"></script>
	<link rel="stylesheet" href="/style.css">
	<link rel="stylesheet" href="/reponsive.css">
</head>

<body data-hijacking="on" data-animation="scaleDown">
	<div class="container">
		<section class="cd-section visible" id="home">
			<div>
				<div class="content">
					<div class="home-inner">
						<h3 class="welcome-text">You can do it
							<span>with CodingWorks <i class="fa fa-heart"></i></span>
						</h3>
						<div class="opacity-image"></div>
						<div class="home-heading">
							<span>Creative</span>
							<span>Architecture</span>
							<span>Specialists</span>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section class="cd-section" id="about">
			<div>
				<div class="content">
					<div class="about-inner">
						<div class="about-items">
							<div class="item">
								<img src="/images/careers-main-01.png" alt="">
								<span>
									<h3>Together we can make an impact</h3>
									<p>
										Design Works the excitement of an entrepreneurial environment with the stability of an established practice. Principals and senior leadership work side-by-side with junior designers to create innovative, workable designs.
									</p>
								</span>
							</div>
							<div class="item">
								<img src="/images/careers-main-02.png" alt="">
								<span>
									<h3>We’re always looking for talent</h3>
									<p>
										If you don’t see an open position that fits your talents, send us your resume. We’re always looking for smart, self-starters and will reach out to you if something becomes available.
									</p>
								</span>
							</div>
							<div class="item">
								<img src="/images/careers-main-03.png" alt="">
								<span>
									<h3>Fellowship</h3>
									<p>
										Every summer we offer a Fellowship to a select group of students in architecture, planning and landscape architecture. Read about our 2019 Fellowship winners and learn more about what the Fellowship has to offer.
									</p>
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<header>
			<div class="gnb-inner">
				<div class="logo">
					<a href="#none"><img src="/images/logo.png"></a>
				</div>
				<div class="gnb">
					<div class="menu">
						<a href="#home">Home</a>
						<a href="#about">About</a>
						<a href="#project">Project</a>
						<a href="#plan">Plan & History</a>
						<a href="#awards">Awards</a>
						<a href="#location">Location</a>
						<a href="#contact">Contact</a>
					</div>
					<div class="slogan">We design places, not projects.</div>
				</div>
				<div class="trigger">
					<span></span>
					<span></span>
					<span></span>
				</div>
			</div>
		</header>
	</div>

	<a href="#" class="gototop"><img src="/images/gototop.png" alt=""></a>
	<a href="/hiring.html" class="btn-hiring" data-featherlight="iframe">
		<i class="fa fa-commenting"></i>
		Hiring
	</a>

	<nav>
		<ul class="cd-vertical-nav">
			<li><a href="#0" class="cd-prev inactive">Next</a></li>
			<li><a href="#0" class="cd-next">Prev</a></li>
		</ul>
	</nav>
</body>

</html></code></pre>

oosong2711

投稿