1편 Omnifood header

HTML-CSS

by nata_developer 2020. 8. 30. 12:58

1.HTML

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

<head>


    <link rel="stylesheet" href="public/css/grid.css">
    <link rel="stylesheet" href="public/css/normalize.css">
    <link rel="stylesheet" href="public/css/style.css ">
    <link rel="stylesheet" href="public/css/quries.css ">

    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,300&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Omnifood</title>

    <link rel="stylesheet" type="text/css" href="./public/css/style.css">
</head>

<body>
    <header>
        <nav>
            <div class="row">
                <img src="./public/img/logo-white.png" alt="Omnifood" class="logo">
                
                <ul class="main-nav">
                    <li><a href=#>Food delivery</a></li>
                    <li><a href=#>How it works</a></li>
                    <li><a href=#>Our cities</a></li>
                    <li><a href=#>Sign up</a></li>
                </ul>
            </div>
        </nav>

        <div class="hero-text-box">
            <h1>Goodbye junk food. <br> Hello super healthy meals</h1>
            <a class="btn btn-full" href="#">I'm hungry</a>
            <a class="btn btn-ghost" href="#">Show me more</a>
       
        </div>
    </header>

    <section class="section-features">

    </section>

    <section class="section-meals">

    </section>

    <section class="section-steps">

    </section>

    <section class="section-cities">

    </section>

    <section class="section-testimonials">

    </section>

    <section class="section-form">

    </section>

    <footer>

    </footer>


    <script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
</body>

</html>

2.CSS

/*
Orange color: #e67e22
*/

/*---------------------------*/
/*BASIC SETUP*/
/*---------------------------*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    background-color: #fff;
    color: #555;
    font-family: "Lato", "Arial";
    font-weight: 300;
    font-size: 20px;
    text-rendering: optimizeLegibility;
}

/*--------- HEADEINGS ---------*/

h1 {
    margin-top: 0;
    margin-bottom:20px;
    color: #fff;
    font-size: 240%;
    font-weight: 300;
    text-decoration: none;
    word-spacing: 4px;
    letter-spacing: 1px;
    text-transform: uppercase   
}

/*---------------------------*/
/*REUSABLE COMPONENTS*/
/*---------------------------*/

.row {
    max-width: 1140px;
    margin: 0 auto;
}

header {
    background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(../img/hero.jpg);
    background-size: cover;
    background-position: center;
    height: 100vh;
}

/*--------- MAIN-NAV ---------*/


.main-nav {
    float: right;
    list-style: none;
    margin-top: 55px;
}

.main-nav li {
  display: inline-block;
  margin-left: 40px;
}

.main-nav li a:link,
.main-nav li a:visited {
    padding: 8px 0;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 90%;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.2s;

}

.main-nav li a:hover,
.main-nav li a:active {
    border-bottom: 2px solid #e67e22;
}


/*--------- BUTTONS ---------*/


.btn:link,
.btn:visited {
    display: inline-block;
    padding: 10px 30px;
    font-weight: 300px;
    text-decoration: none;
    border-radius: 200px;
    transition: background-color 0.2s;
}

.btn-full:link, 
.btn-full:visited {
    background-color: #e67e22;
    border: 1px solid #e67e22;
    color: #fff;
    margin-right: 15px;
}

.btn-ghost:link,
.btn-ghost:visited {
    border: 1px solid #e67e22;
    color: #e67e22
}

.btn:hover,
.btn:active {
    background-color: #cf6d17;
}

.btn-full:hover,
.btn-full:active {
    border: 1px solid #cf6d17;
}

.btn-ghost:hover,
.btn-ghost:active {
    border: 1px solid #cf6d17;
    color: #fff
}
/*---------------------------*/
/*SECTION1.HEADER*/
/*---------------------------*/

.hero-text-box {
    position: absolute;
    width: 1140px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.logo {
    height: 100px;
    width: auto;
    float: left;
    margin-top: 20px;
}

word-spacing

띄어쓰기 간격

letter-spacing

글자 간의 간격

text-rendering: optimizeLegibility

가독성 향상

display:inline-block

요소들을 나란히 배치한다.

background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(../img/hero.jpg)

그라데이션 넣기, 배경에 이미지 넣기

transform: translate(-50%, -50%)

해당 요소의 위치를 변환한다.

.btn-full:hover, .btn-full:active

해당 요소 위에 마우스를 가져다 대었을때, 클릭했을 때

.btn-full:link, .btn-full:visited

해당 요소의 링크 속성, 그 링크에 방문했을 때

'HTML-CSS' 카테고리의 다른 글

3편 Omnifood section-meals (0)	2020.08.30
2편 Omnifood section-features (0)	2020.08.30
웹 디자인 원칙 (0)	2020.08.30
웹 디자인에서 컬러의 의미 (0)	2020.08.30
HTML CSS (0)	2020.08.29