Skip to content

Commit d5c3d2e

Browse files
mounikaperimounikaperi
committed
SCSS Additions
1 parent ca295ad commit d5c3d2e

File tree

7 files changed

+188
-2
lines changed

7 files changed

+188
-2
lines changed

‎Project-Trillio/css/style.css

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
:root {
2+
--color-primary: #eb2f64;
3+
--color-primary-light: #FF3366;
4+
--color-primary-dark: #BA265D;
5+
--color-grey-light-1: #faf9f9;
6+
--color-grey-light-2: #f4f2f2;
7+
--color-grey-light-3: #f0eeee;
8+
--color-grey-light-4: #ccc;
9+
--color-grey-dark-1: #333;
10+
--color-grey-dark-2: #777;
11+
--color-grey-dark-3: #999;
12+
--shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3); }
13+
14+
* {
15+
margin: 0;
16+
padding: 0; }
17+
18+
*,
19+
*::before,
20+
*::after {
21+
box-sizing: inherit; }
22+
23+
html {
24+
box-sizing: border-box;
25+
font-size: 62.5%; }
26+
27+
body {
28+
font-family: 'Open Sans', sans-serif;
29+
font-weight: 400;
30+
line-height: 1.6;
31+
background-image: linear-gradient(to right bottom, var(--color-primary-light), var(--color-primary-dark));
32+
background-size: cover;
33+
background-repeat: no-repeat;
34+
min-height: 100vh;
35+
color: var(--color-grey-dark-2); }
36+
37+
.container {
38+
max-width: 120rem;
39+
margin: 8rem auto;
40+
background-color: var(--color-grey-light-2);
41+
box-shadow: var(--shadow-dark);
42+
min-height: 50rem; }
43+
44+
.header {
45+
height: 7rem;
46+
background-color: #fff;
47+
border-bottom: var(--color-grey-light-2); }
48+
49+
.content {
50+
display: flex; }
51+
52+
.sidebar {
53+
background-color: var(--color-grey-dark-1);
54+
flex: 0 0 18%; }
55+
56+
.hotel-view {
57+
background-color: #fff;
58+
background-color: orangered;
59+
flex: 1; }
60+
61+
.logo {
62+
height: 3.25rem; }
63+
64+
.search__icon {
65+
height: 2rem;
66+
width: 2rem; }

‎Project-Trillio/css/styles.css

Whitespace-only changes.

‎Project-Trillio/index.html

+38-2
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,47 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500">
8-
<link rel="stylesheet" href="styles.css">
8+
<link rel="stylesheet" href="style.css">
99
<link rel="shortcut icon" href="image/png" href="images/favicon.png">
1010
<title>Trillio &mdash; Your all-in-one booking app</title>
1111
</head>
1212
<body>
13-
13+
<div class="container">
14+
<header class="header">
15+
<img src="images/logo.png" alt="Trillio Logo" class="logo" />
16+
<form action="#" class="search">
17+
<input type="text" class="search__input" placeholder="Search Hotels" />
18+
<button class="search__button">
19+
<svg class="search__icon">
20+
<use xlink:href="images/sprite.svg#icon-magnifying-glass"></use>
21+
</svg>
22+
</button>
23+
</form>
24+
<nav class="user-nav">
25+
<div class="user-nav__icon-box">
26+
<svg class="user-nav__icon">
27+
<use xlink:href="images/sprite.svg#icon-bookmark"></use>
28+
</svg>
29+
<span class="user-nav__notification">7</span>
30+
<svg class="user-nav__icon">
31+
<use xlink:href="images/sprite.svg#icon-bookmark"></use>
32+
</svg>
33+
<span class="user-nav__notification">13</span>
34+
<div class="user-nav__user">
35+
<img src="images/user.jpg" alt="User" class="user-nav__user-photo">
36+
<span class="user-nav__user-name">User</span>
37+
</div>
38+
</div>
39+
</nav>
40+
</header>
41+
<div class="content">
42+
<nav class="sidebar">
43+
44+
</nav>
45+
<main class="hotel-view">
46+
47+
</main>
48+
</div>
49+
</div>
1450
</body>
1551
</html>

‎Project-Trillio/sass/_base.scss

+20
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
1+
:root {
2+
--color-primary : #eb2f64;
3+
--color-primary-light: #FF3366;
4+
--color-primary-dark: #BA265D;
5+
--color-grey-light-1: #faf9f9;
6+
--color-grey-light-2: #f4f2f2;
7+
--color-grey-light-3: #f0eeee;
8+
--color-grey-light-4: #ccc;
9+
--color-grey-dark-1: #333;
10+
--color-grey-dark-2: #777;
11+
--color-grey-dark-3: #999;
12+
--shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3);
13+
}
114
* {
215
margin: 0;
316
padding: 0;
@@ -13,4 +26,11 @@ html {
1326
}
1427
body {
1528
font-family: 'Open Sans', sans-serif;
29+
font-weight: 400;
30+
line-height: 1.6;
31+
background-image: linear-gradient(to right bottom, var(--color-primary-light), var(--color-primary-dark));
32+
background-size: cover;
33+
background-repeat: no-repeat;
34+
min-height: 100vh;
35+
color: var(--color-grey-dark-2);
1636
}

‎Project-Trillio/sass/_components.scss

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
// Logo
2+
.logo {
3+
height: 3.25rem;
4+
}
5+
//Search Box
6+
.search {
7+
&__input {
8+
9+
}
10+
&__button {
11+
12+
}
13+
&__icon {
14+
height: 2rem;
15+
width: 2rem;
16+
}
17+
}
18+
//User Navigation
19+
.user-nav {
20+
&__icon-box {
21+
22+
}
23+
&__icon {
24+
height: 2rem;
25+
width: 2rem;
26+
}
27+
&__notification {
28+
29+
}
30+
&__user {
31+
32+
}
33+
&__user-photo {
34+
height: 3.75rem;
35+
border-radius: 50%;
36+
}
37+
&__user-name {
38+
39+
}
40+
}

‎Project-Trillio/sass/_layout.scss

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.container {
2+
max-width: 120rem;
3+
margin: 8rem auto;
4+
background-color: var(--color-grey-light-2);
5+
box-shadow: var(--shadow-dark);
6+
min-height: 50rem;
7+
}
8+
.header {
9+
height: 7rem;
10+
background-color: #fff;
11+
border-bottom: var(--color-grey-light-2);
12+
}
13+
.content {
14+
display: flex;
15+
}
16+
.sidebar {
17+
background-color: var(--color-grey-dark-1);
18+
flex: 0 0 18%;
19+
}
20+
.hotel-view {
21+
background-color: #fff;
22+
background-color: orangered;
23+
flex: 1;
24+
}

‎Project-Trillio/styles.css

Whitespace-only changes.

0 commit comments

Comments
 (0)