본문 바로가기
Programming/HTMLCSS

Foodforest 홈페이지 및 로그인 페이지

MrLazyDev 2022. 4. 25. 17:08
반응형

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyFirstWebsite</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <div class="hero-img"></div>
    <div class="wrapper">
        <header>
            <a href="#" class="logo">Food<span>Forest</span></a>

            <nav> 
                <svg class="close" viewBox="0 0 30 30" style=" fill:#000000;">    
                    <path d="M 7 4 C 6.744125 4 6.4879687 4.0974687 6.2929688 4.2929688 L 4.2929688 6.2929688 C 3.9019687 6.6839688 3.9019687 7.3170313 4.2929688 7.7070312 L 11.585938 15 L 4.2929688 22.292969 C 3.9019687 22.683969 3.9019687 23.317031 4.2929688 23.707031 L 6.2929688 25.707031 C 6.6839688 26.098031 7.3170313 26.098031 7.7070312 25.707031 L 15 18.414062 L 22.292969 25.707031 C 22.682969 26.098031 23.317031 26.098031 23.707031 25.707031 L 25.707031 23.707031 C 26.098031 23.316031 26.098031 22.682969 25.707031 22.292969 L 18.414062 15 L 25.707031 7.7070312 C 26.098031 7.3170312 26.098031 6.6829688 25.707031 6.2929688 L 23.707031 4.2929688 C 23.316031 3.9019687 22.682969 3.9019687 22.292969 4.2929688 L 15 11.585938 L 7.7070312 4.2929688 C 7.5115312 4.0974687 7.255875 4 7 4 z"></path>
                </svg>
                <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Recipes</a></li>
                <li><a href="#">Gardening</a></li>
                <li><a href="./signin/signin.html">Login</a></li>
                </ul>
              
        </nav>

        <svg class="menu" width="48" height="32" viewBox="0 0 48 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M24 32H0V26.6667H24V32ZM48 18.6667H0V13.3333H48V18.6667ZM48 5.33333H24V0H48V5.33333Z" fill="white"/>
        </svg>
        </header>

           <section class="hero">
               <h1>Be healthy with Natural Recipes.</h1>

               <p class="subhead">Recipes with purpose and to take you to the another level.</p>
               <svg class="down-arrow" width="16" height="132" viewBox="0 0 16 132" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.29289 131.707C7.68341 132.098 8.31658 132.098 8.7071 131.707L15.0711 125.343C15.4616 124.953 15.4616 124.319 15.0711 123.929C14.6805 123.538 14.0474 123.538 13.6568 123.929L7.99999 129.586L2.34314 123.929C1.95262 123.538 1.31945 123.538 0.928927 123.929C0.538402 124.319 0.538402 124.953 0.928927 125.343L7.29289 131.707ZM7 -4.37114e-08L6.99999 131L8.99999 131L9 4.37114e-08L7 -4.37114e-08Z" fill="black"/>
                </svg>
                
           </section>

           <section class="more-info">
               <div class="feature">
                    <div class="content">
                        <p class="title">Healthy</p>
                        <p class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quas aliquam, placeat necessitatibus aliquid facilis atque explicabo rem? Commodi nulla saepe perspiciatis qui, autem praesentium cum doloribus eum illo sunt.</p>
                    </div>
                    <img src="images/vegetarian1.jpg" alt="another photo">
               </div>
               <div class="feature left">
                <div class="content">
                    <p class="title">Healthy</p>
                    <p class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quas aliquam, placeat necessitatibus aliquid facilis atque explicabo rem? Commodi nulla saepe perspiciatis qui, autem praesentium cum doloribus eum illo sunt.</p>
                </div>
                <img src="images/vegetarian2.jpg" alt="another photo">
           </div>
           <div class="feature">
            <div class="content">
                <p class="title">Healthy</p>
                <p class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt quas aliquam, placeat necessitatibus aliquid facilis atque explicabo rem? Commodi nulla saepe perspiciatis qui, autem praesentium cum doloribus eum illo sunt.</p>
            </div>
            <img src="images/vegetarian3.jpg" alt="another photo">
       </div>
           </section>


       

    </div>

    <script>
        const menu = document.querySelector('.menu')
        const close = document.querySelector('.close')
        const nav = document.querySelector('nav')

        menu.addEventListener('click', () => {
            nav.classList.add('open-nav') // 메뉴 버튼 눌렀을 때 클래스 생성
        })
        
        close.addEventListener('click', () => {
            nav.classList.remove('open-nav') // 클로즈버튼을 눌렀을 때 클래스 삭제
        })
    
    </script>

</body>

</html>

 

index.css

@charset "UTF-8";
@import url("reset.css");
/* ////////////////////////////////////////////////////// */
#header>.wrap{
	height: 80px;
}
#logo>.wrap a{
	font-size: 32px;
	font-weight: bold;
	color: #c50aac;
}
#menu>.wrap ul li a{
	padding: 0.5em 1em;
}
#user-menu>.wrap{
	height: 100%;
}
#user-menu>.wrap ul{
	width: 120px;
}
body {
    margin: 3em;
    font-family:  'Poppins', sans-serif;
}

a {
    text-decoration: none;
    font-size: 1.3rem;
}

.hero-img {
    position: absolute;
    top: 0;
    left: 0;
    background: url('../images/vegetarian.jpg');
    background-size: cover;
    background-position-x: 20%;
    background-position-y: 20%;
    width: 100%;
    height:100vh;
    z-index: -1;
    animation: introLoad 2s forwards; // repeat하고 싶지 않기 때문
    // overflow: hidden;
}

.logo {
    color: white;
    font-weight: bold;

}
nav {
   	position: fixed;
   	right: 0;
    top: 0;
    background: white;
    height: 100vh;
    width: 50%; // 화면의 절반
    z-index: 999; // 항상 위에 있게 하기 위해서
    text-transform: uppercase;
    transform: translateX(100%); // 현재 보이지 않게 만든 이 상태에 있는 것을
    transition: transform .5s ease-in-out;   // 사용자가 어떤 행동을 함으로써 javascript를 이용해 0%로 만든다.

    ul {
        list-style-type: none;
        padding: 0; // 글자를 좌측으로 항상 밀어줌
        margin-top: 8em; // 석삼자 메뉴가 위에 있어야 하기 때문

        a {
            color: black;
            padding: 0.75em 2em;
            display: block; 
            width: 100%;

            &:hover { // 마우스 커서를 놓으면
                background: rgb(236, 236, 236);

            }
        }

    }
    .close { // 메뉴의 클로즈 버튼
        float: right;
        margin: 2em;
        width: 2.5em;
    }
   	
}

header {
    display: flex;
    justify-content: space-between;

    svg {
        width: 2.3em;
        margin-top: -0.6em;
        cursor: pointer;
    }
}

h1 {
    font-size: 3rem;
    margin-top: 2em;
    line-height: 3.3rem;
}

section.hero {
    color: white;
    font-size: 1.2em;
    height: 90vh;
    animation: moveDown 1s ease-in-out forwards;
    opacity: 0; // 애니매이션 초기값


    .down-arrow { // 화살표
        stroke: white;
        position: absolute;
        bottom: 2em;
        width: 1em;
        animation: moveArrow 1s alternate-reverse infinite; // backandforth infinite
        margin-top: 2em;
        margin-bottom: 2em;

        path {
            fill: white;
        }
    }
}

.more-info {
    img {
        width: 100%; // responsive하는 것
        object-fit: cover; // 이게 없으면 이미지가 왜곡된다.
        height: 11em; // 크기 설정
    }
    .title {
        font-weight: bold;
        font-size: 1.25rem;
    }

    .desc {
        line-height: 1.5rem;

    }

}

.open-nav {
    transform: translateX(0%)
}

// 680px 아래가 되는 스크린에 대해서만 아래 ruleset이 적용된다. : 모바일
// 현재는 모바일 first 디자인이기 때문에 min으로 하고
// 데스크탑 first일 경우는 이것이 max가 된다.
// @ 오버라이딩 개념이다.
@media only screen and (min-width: 680px) {
    body {
        margin: 1.5em 5em; // 이미지 겹칠 때 조정
        font-family:  'Poppins', sans-serif;
    }



}

// 아래의 경우는 920px이 넘어갈 경우 : 데스크탑
// 메뉴를 없애는 기능이다.
@media only screen and (min-width: 920px) {

    .menu {
        display: none;
    }

    nav {
        transform: translateX(0);
        position: unset;
        display: block;
        height: auto;
        background: none;


        svg.close {
            display: none;
        }

        ul {
            display: flex; // column형태로 만들기
            margin: 0; // 위에서 정의내렸던 위 여백 없애기

             a {
                color: white;
                padding: .5em 1.5em;
                font-size: .9em;

                &:hover {
                    background: none;
                    text-decoration: underline;
            }
        }
        
    }
    

    }
    .hero-img {
    left: unset;
    right: 0;
    width: 50%;
    height: 42em;
    }
    .logo{
        color: black;

        span {
            color: rgb(0, 197, 49);

        }
    }

    section.hero {
        color: black;
        height: auto;
        width: 40%;
        margin-bottom: 8em;

        svg.down-arrow {
            stroke: black;
            position: unset;

            path {
                fill:black;
            }
        }
    }

    .feature {
        display: grid; // 박스형태로 다룰 것이기 때문에
        grid-template-columns: repeat(2, auto); // 행을 두 개로 하고, auto는 열을 자동
        gap: 3em;
        margin-bottom: 8em;

        img {
            width: 25em;
        }

        .content {
            text-align: right;
            width:25em;
        }
        
    }
    .feature.left {
        grid-template-areas: 
           "left right";

           img {
               grid-area: left;
           }

           .content {
               text-align: left;
               width: 25em;
               justify-self: left;
           }
    }

}

// 화면이 1200px 이상으로 늘어나더라도 더 이상 늘어나지 않도록 고정
@media only screen and (min-width: 1200px) {
    .wrapper {
        width: 1200px;
        margin: 0 auto; // centering

    }
    
    .feature {
        gap: 0; // 칼럼사이 갭?
    }

}

// 키프레임 애니메이션 정의하는 법
@keyframes introLoad {
    from { // 애니메이션 from to
        clip-path: polygon(0 0, 100% 0%, 100% 0, 0 0); // https://bennettfeely.com/clippy/
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes moveArrow {
    from { // 애니메이션 from to
        transform: translateY(-30px);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes moveDown {
    from { // 애니메이션 from to
        transform: translateY(-100px);
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

 

자바스크립트

const sign_in_btn = document.querySelector('#sign-in-button');
const sign_up_btn = document.querySelector('#sign-up-button');
const container = document.querySelector('.container');

sign_up_btn.addEventListener('click', () => {
	container.classList.add('sign-up-mode');
});
sign_in_btn.addEventListener('click', () => {
	container.classList.remove('sign-up-mode');
});

 

 

결과물

반응형
저작자표시 비영리 변경금지

'Programming > HTMLCSS' 카테고리의 다른 글

Xml 파일이란 무엇인가?  (0) 2022.04.21
HTML CSS 로 사이트 만들기  (0) 2022.03.17
HTML CSS 연습  (0) 2022.03.17
티스토리에 TOC(Table of Contents) 목차 만들기  (1) 2021.12.29
티스토리 단축키  (0) 2021.12.29

'Programming/HTMLCSS' Related Articles