반응형
Icon font 보다 svg img가 더 나은 대안으로 사용되고 있다.
icomoon.com
아이콘을 무료로 사용할 수 있는 유용한 웹사이트다
_components.scss
////////////////////////////////////////////////
/// LOGO
.logo {
height: 3.25rem;
}
////////////////////////////////////////////////
/// SEARCH
.search {
&__input {
}
&__button {
}
&__icon {
height: 2rem;
width: 2rem;
}
}
/// ////////////////////////////////////////////////
/// USER NAVIGATION
.user-nav {
&__icon-box {
}
&__icon {
height: 2.25rem;
width: 2.25rem;
}
&__notification {
}
&__user {
}
&__user-photo {
height: 3.75rem;
border-radius: 50%;
}
&__user-name {
}
}
layout.scss
.container {
max-width: 120rem;
margin: 8rem auto;
background-color: var(--color-grey-light-1);
box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.3);
min-height: 50rem;
}
.header {
height: 7rem;
background-color: #fff;
border-bottom: var(--color-grey-light-2);
}
.content {
display: flex;
}
.sidebar {
background-color: var(--color-grey-dark-1);
flex: 0 0 18%;
}
.hotel-view {
background-color: #fff;
background-color: orange;
flex: 1;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
<title>trillo — Your all-in-one booking app</title>
</head>
<body>
<div class="container">
<header class="header">
<img src="img/logo.png" alt="" class="logo" />
<form action="#" class="search">
<input type="text" class="search_input" placeholder="Search hotels" />
<button class="search__button">
<svg class="search__icon">
<use xlink:href="img/sprite.svg#icon-magnifying-glass"></use>
</svg>
</button>
</form>
<nav class="user-nav">
<div class="user-nav__icon-box">
<svg class="user-nav__icon">
<use xlink:href="img/sprite.svg#icon-bookmark"></use>
</svg>
<span class="user-nav__notification">7</span>
</div>
<div class="user-nav__icon-box">
<svg class="user-nav__icon">
<use xlink:href="img/sprite.svg#icon-chat"></use>
</svg>
<span class="user-nav__notification">13</span>
</div>
<div class="user-nav__user">
<img
src="./img/user.jpg"
alt="User photo"
class="user-nav__user-photo"
/>
<span class="user-nav__user-name">Yujin</span>
</div>
</nav>
</header>
<div class="content">
<nav class="sidebar">Navigation</nav>
<main class="hotel-view">Hotel view</main>
</div>
</div>
</body>
</html>반응형
'온라인 강의 > Advanced CSS and Sass [Udemy]' 카테고리의 다른 글
| 77. Building the Header - Part 3 (0) | 2023.08.03 |
|---|---|
| 76. Building the Header - Part 2 (0) | 2023.08.03 |
| 74. Building the Overall Layout (0) | 2023.08.03 |
| 73. Defining Project Settings and Custom Properties (0) | 2023.08.02 |
| 72. Project Overview (0) | 2023.08.02 |