20.11.14

1. about html

   <section class="discover-our-story">
        <div class="container">
            <div class="restaurant-info">
                <div class="restaurant-description padding-right animate-left">
                    <div class="global-headline">
                        <h2 class="sub-headline">
                            <span class="first-letter">A</span>bout
                        </h2>
                        <h1 class="headline headline-dark">The Tasty Food</h1>
                        <div class="asterisk"><i class="fas fa-asterisk"></i></div>
                    </div>
                    <p>
                        설명부분
                    </p>
                    <a href="#" class="btn body-btn">About us</a>
                </div>
                <div class="restaurant-info-img animate-right">
                    <img src="img/foodiesfeed.jpg" alt="info-img">
                </div>
            </div>
        </div>
    </section>

 

2. discover html

    <section class="tasteful-recipes between">
        <div class="container">
            <div class="global-headline">
                <div class="animate-top">
                    <h2 class="sub-headline">
                        <span class="first-letter">T</span>asteful
                    </h2>
                </div>
                <div class="animate-bottom">
                    <h1 class="headline">Our Menu</h1>
                </div>
            </div>
        </div>
    </section>
    <!-- Tasteful recipes ends  -->
    <section class="discover-our-menu">
        <div class="container">
            <div class="restaurant-info">
                <div class="image-group padding-right animate-left">
                    <img src="img/menu1.jpg" alt="menu1">
                    <img src="img/menu2.jpg" alt="menu2">
                    <img src="img/menu3.jpg" alt="menu3">
                    <img src="img/menu4.jpg" alt="menu4">
                </div>
                <div class="restaurant-description animate-right">
                    <div class="global-headline">
                        <h2 class="sub-headline">
                            <span class="first-letter">O</span>verview
                        </h2>
                        <h1 class="headline headline-dark">Menu</h1>
                        <div class="asterisk"><i class="fas fa-asterisk"></i></div>
                    </div>
                    <p>설명부분</p>
                    <a href="#" class="btn body-btn">View the full menu</a>
                </div>
            </div>
        </div>
    </section>

 

3. perfect blend html

    <section class="perfect-blend between">
        <div class="container">
            <div class="global-headline">
                <div class="animate-top">
                    <h2 class="sub-headline">
                        <span class="first-letter">T</span>he perfect
                    </h2>
                </div>
                <div class="animate-bottom">
                    <h1 class="headline">Vision</h1>
                </div>
            </div>
        </div>
    </section>
    <!-- perfect blend ends -->

 

4. culinary html 부분

    <section class="culinary-delight">
        <div class="container">
            <div class="restaurant-info">
                <div class="restaurant-description padding-right animate-left">
                    <div class="global-headline">
                        <h2 class="sub-headline">
                            <span class="first-letter">B</span>est
                        </h2>
                        <h1 class="headline headline-dark">Safety</h1>
                        <div class="asterisk"><i class="fas fa-asterisk"></i></div>
                    </div>
                    <p>
                        설명부분
                    </p>
                    <a href="#" class="btn body-btn">Make a reservation</a>
                </div>
                <div class="image-group">
                    <img class="animate-top" src="img/delight1.jpg" alt="delight1">
                    <img class="animate-bottom" src="img/delight2.jpg" alt="delight2">
                </div>
            </div>
        </div>
    </section>
    <!-- culinary delight ends -->

 

5. footer html

   <footer>
        <div class="container">
            <div class="back-to-top">
                <a href="#hero"><i class="fas fa-chevron-up"></i></a>
            </div>
            <div class="footer-content">
                <div class="footer-content-about animate-up">
                    <h4>CONTACT US</h4>
                    <div class="asterisk"><i class="fas fa-asterisk"></i></div>
                        <p>서울특별시 OO구 OO대로 | 대표 : 지니지니 <br>
                            사업자 등록번호: 000-00-00000 <br>
                            문의 : uhj1993@naver.com <br>
                            Copyright ⓒ All rights reserved.<br>
                        </p>
                    </div>
                    <div class="footer-content-divier">
                        <div class="social-media">
                            <h4>Follow TASTY FOOD</h4>
                            <ul class="social-icons">
                                <li>
                                    <a href="#"><i class="fab fa-twitter"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="fab fa-facebook-square"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="fab fa-pinterest"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="fab fa-linkedin-in"></i></a>
                                </li>
                                <li>
                                    <a href="#"><i class="fab fa-tripadvisor"></i></a>
                                </li>
                            </ul>
                        </div>
                        <div class="newsletter-container">
                            <h4>News letter</h4>
                            <form action="" class="newsletter-form">
                                <input type="text" class="newsletter-input" placeholder="Your Email address">
                                <button class="newsletter-btn" type="submit">
                                    <i class="fas fa-envelope"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
    </footer>

 

---

1. our story css

/*our story*/
.global-headline {
  text-align: center;
  margin-top: 3.9rem;
}

.discover-our-story .global-headline {
  margin-top: 6.9rem;
}

.global-headline .asterisk {
  color: var(--body-font-color);
  margin: 2.4rem 0;
}

.headline-dark {
  color: var(--main-font-color);
  letter-spacing: 0.4rem;
  margin-right: 0.7rem;
}

.global-headline .sub-headline {
  letter-spacing: -0.1rem;
  line-height: 0.42;
}

.restaurant-info {
  text-align: center;
}

.restaurant-description {
  margin-bottom: 3rem;
}

.restaurant-description p {
  line-height: 1.6;
  margin-bottom: 2.4rem;
}

.body-btn {
  font-size: 1.5rem;
  color: var(--second-font-color);
  position: relative;
  transition: color 0.5s;
}

/*body-btn에 relative 를 주고 transition으로 글씨 자연스러운 효과 줌*/

.body-btn::before {
  width: 100%;
  height: 2px;
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  background-color: var(--second-font-color);
  transition: background-color 0.5s;
}

/*버튼 아래, 밑줄 작업 absolute를 주고 바텀 -3px을 주어 자연스러운 밑줄 효과*/

.body-btn:hover,
.body-btn:focus {
  color: var(--main-font-color);
}

/*hover, focus 주면 색변화를 줌*/

.body-btn:hover::before,
.body-btn:focus::before {
  background-color: var(--main-font-color);
}

/*hover, focus before에 줘서 색변화를 줌*/

 

2. tasteful css

/* tasteful recipes */
.tasteful-recipes {
  background: url("img/tasteful.jpg") left/cover no-repeat;
}

.between {
  min-height: 65vh;
  display: flex;
  align-items: center;
}

배경에 이미지를 넣고 왼쪽, 커버, 반복효과 없게 이미지를 주고나서 반응형처럼 보이게 함.

between class를 주어서 가운데 정렬을 꾀함

높이를 제한하여 반응형 안에서도 배경이 확실히 보이게 함.

 

 

3.  discover our menu css

/* Discover our menu */
.image-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1.5rem;
}

.discover-our-menu .restaurant-description {
  padding-top: 3rem;
  margin-bottom: 0;
}

 

 

 

4.footer css

/* footer */
footer {
  padding: 7.9rem 0;
  background-color: #121212;
  color: #fff;
  text-align: center;
  position: relative;
}

/*가운데 정렬을 위해 text-align: center 을 주고 footer에 relative를 줌.*/

.back-to-top {
  width: 7rem;
  height: 7rem;
  background-color: #121212;
  position: absolute;
  top: -3rem;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}

/*맨 위로 기능. 동그란 구형을 만들고 위치조정을 해준다*/

.back-to-top i {
  display: block;
  color: #fff;
  font-size: 2rem;
  padding: 2rem;
  animation: up 2s infinite;
}

/*구형 안 화살표. animation 기능 추가. 반복적으로 위로 올라가는 기능*/

.footer-content {
  /* overflow: hidden; */
}

.footer-content h4 {
  font-size: 1.9rem;
  text-transform: uppercase;
  font-weight: 100;
  letter-spacing: 3px;
  margin-bottom: 3rem;
}

.footer-content .asterisk {
  margin: 2.4rem 0;
}

.footer-content-about {
  margin-bottom: 5.4rem;
}

.footer-content-about p {
  line-height: 2;
}

.social-icons {
  list-style: none;
  margin-bottom: 5.4rem;
  display: flex;
  justify-content: center;
}

.social-icons i {
  font-size: 2rem;
  color: #fff;
  padding: 0.8rem 2rem;
  opacity: 0.5;
  transition: color 0.5s;
}

.social-icons i:hover,
.social-icons i:focus {
  color: var(--second-font-color);
}

.newsletter-form {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
}

.newsletter-input {
  width: 100%;
  max-width: 25rem;
  padding: 1rem;
  border-radius: 0.4rem;
}

.newsletter-btn {
  background-color: transparent;
  border: none;
  color: var(--main-font-color);
  cursor: pointer;
  font-size: 1.6rem;
  padding: 1px 0.6rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 20rem;
}

 

5. animation

/* animations */
@keyframes fadeUp {
  0% {
    transform: translateY(4rem);
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeDown {
  0% {
    transform: translateY(-1rem);
  }
  100% {
    opacity: 1;
  }
}

@keyframes scale {
  0% {
    transform: scale(2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/*scale animation을 줄 때 width가 오버플로우 되기 때문에 hidden 태그를 준다. 
body {overflow-x: hidden;} x축의 overflow를 숨긴다*/


@keyframes grow {
  0% {
    width: 0;
  }
  100% {
    opacity: 1;
    width: 100%;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    opacity: 1;
    transform: rotate(-160deg);
  }
}

@keyframes up {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-1rem);
  }
}

@keyframes scale {
  0% {
    transform: scale(2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

scale animation을 줄 때 width가 오버플로우 되기 때문에 body에 hidden 태그를 준다. 
body {

  overflow-x: hidden;

} 

 

:x축의 overflow를 숨긴다

 

 

6. media query css

/* media queries */
@media screen and (min-width: 900px) {
  .section {
    padding: 7.9rem;
  }

  .menu-toggle {
    display: none;
  }

  .nav {
    justify-content: space-between;
  }

  .nav-list {
    position: initial;
    width: initial;
    height: initial;
    background-color: transparent;
    padding: 0;
    justify-content: initial;
    flex-direction: row;
    transform: initial;
    transition: initial;
  }
  
  /*initial은 여러모로 불안정한 키워드이므로 대체할 것을 찾는다*/

  .nav-item {
    margin: 0 2.4rem;
    border: none;
  }

  .nav-item:last-child {
    margin-right: 0;
  }

  .nav-link {
    font-size: 1.3rem;
  }

  .active {
    position: relative;
  }

  .active::before {
    content: "";
    position: absolute;
    width: 100%;
    background-color: #fff;
    height: 2px;
    left: 0;
    bottom: -3px;
  }

  .sub-headline {
    font-size: 10rem;
  }

  .first-letter {
    font-size: 12.2rem;
  }

  .headline {
    font-size: 4.7rem;
    letter-spacing: 0.8rem;
  }

  .line {
    max-width: 11.4rem;
  }

  .restaurant-info {
    display: flex;
    align-items: center;
  }

  .restaurant-info > div {
    flex: 1;
  }
  
  /*https://developer.mozilla.org/ko/docs/Web/CSS/flex 참조*/

  .restaurant-description p {
    line-height: 1.6;
    margin-bottom: 2.4rem;
    text-align: left;
  }

  .padding-right {
    padding-right: 7rem;
  }

  .footer-content {
    max-width: 77.5rem;
    margin: auto;
  }

  .footer-content-about {
    max-width: 51.3rem;
    margin: 0 auto 5.4rem;
  }

  .footer-content-divier {
    display: flex;
    justify-content: space-between;
  }

  .social-media,
  .newsletter-form {
    width: 100%;
    max-width: 27.3rem;
    margin: 0 1rem;
  }

  .social-icons i {
    opacity: 1;
  }

  .newsletter-btn {
    margin-left: 18.5rem;
  }
}

flex: 1

하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성

developer.mozilla.org/ko/docs/Web/CSS/flex

flex

 

1. js

 

// Scroll reveal

window.sr = ScrollReveal();

sr.reveal('.animate-left', {
    origin: 'left',
    duration: 1000,
    distance: '25rem',
    delay: 300
});

sr.reveal('.animate-right', {
    origin: 'right',
    duration: 1000,
    distance: '25rem',
    delay: 600
});

sr.reveal('.animate-top', {
    origin: 'top',
    duration: 1000,
    distance: '25rem',
    delay: 600
});

sr.reveal('.animate-bottom', {
    origin: 'bottom',
    duration: 1000,
    distance: '25rem',
    delay: 600
});

 

js를 이용한 라이브러리이므로 바닐라 js를 고려해서 스크롤 효과를 주도록 해본다.

scrollrevealjs.org/