Skip to content

Commit f500e2b

Browse files
mounikaperimounikaperi
committed
The Sidebar section
1 parent 73de9f8 commit f500e2b

File tree

8 files changed

+159
-4
lines changed

8 files changed

+159
-4
lines changed

‎Project-Trillio/css/style.css

Lines changed: 55 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,15 @@ body {
5555

5656
.sidebar {
5757
background-color: var(--color-grey-dark-1);
58-
flex: 0 0 18%; }
58+
flex: 0 0 18%;
59+
display: flex;
60+
flex-direction: column;
61+
justify-content: space-between; }
5962

6063
.hotel-view {
6164
background-color: #fff;
62-
flex: 1; }
65+
flex: 1;
66+
height: 80rem; }
6367

6468
.logo {
6569
height: 3.25rem;
@@ -77,7 +81,7 @@ body {
7781
color: inherit;
7882
background-color: var(--color-grey-light-2);
7983
border: none;
80-
padding: 0.7rem 0.2rem;
84+
padding: 0.7rem 2.0rem;
8185
border-radius: 100px;
8286
width: 90%;
8387
transition: all 0.2s;
@@ -138,3 +142,51 @@ body {
138142
height: 3.75rem;
139143
border-radius: 50%;
140144
margin-right: 1rem; }
145+
146+
.side-nav {
147+
font-size: 1.4rem;
148+
list-style: none;
149+
margin-top: 3.5rem; }
150+
.side-nav__item {
151+
position: relative; }
152+
.side-nav__item:not(:last-child) {
153+
margin-bottom: 0.5rem; }
154+
.side-nav__item::before {
155+
content: "";
156+
position: absolute;
157+
top: 0;
158+
left: 0;
159+
height: 100%;
160+
width: 3px;
161+
background-color: var(--color-primary);
162+
transform: scaleY(0);
163+
transition: transform 0.2s, width 0.4s cubic-bezier(1, 0, 0, 1) 0.2s, background-color 0.1s; }
164+
.side-nav__item:hover::before, .side-nav__item--active::before {
165+
transform: scaleY(1);
166+
width: 100%; }
167+
.side-nav__item:active::before {
168+
background-color: var(--color-primary-light); }
169+
.side-nav__link:link, .side-nav__link:visited {
170+
color: var(--color-grey-light-1);
171+
text-decoration: none;
172+
text-transform: uppercase;
173+
display: block;
174+
padding: 1.5rem 3rem;
175+
display: flex;
176+
align-items: center;
177+
position: relative;
178+
z-index: 10; }
179+
.side-nav__link:hover {
180+
color: #fff;
181+
cursor: pointer; }
182+
.side-nav__icon {
183+
filter: brightness(0) invert(1);
184+
width: 1.75rem;
185+
height: 1.75rem;
186+
margin-right: 2rem;
187+
fill: white; }
188+
.side-nav .legal {
189+
font-size: 1.2rem;
190+
text-align: center;
191+
padding: 2.5rem;
192+
color: var(--color-grey-light-4); }

‎Project-Trillio/images/icon-aircraft.png

385 Bytes
Loading

‎Project-Trillio/images/icon-carrental.png

405 Bytes
Loading

‎Project-Trillio/images/icon-home.png

266 Bytes
Loading

‎Project-Trillio/images/icon-map.png

303 Bytes
Loading

‎Project-Trillio/index.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,42 @@
3939
</div>
4040
</nav>
4141
</header>
42+
<div class="content">
43+
<nav class="sidebar">
44+
<ul class="side-nav">
45+
<li class="side-nav__item side-nav__item--active">
46+
<a href="#" class="side-nav__link">
47+
<img src="images/icon-home.png" alt="Home" class="side-nav__icon" />
48+
<span>Hotel</span>
49+
</a>
50+
</li>
51+
<li class="side-nav__item">
52+
<a href="#" class="side-nav__link">
53+
<img src="images/icon-aircraft.png" alt="Home" class="side-nav__icon" />
54+
<span>Flight</span>
55+
</a>
56+
</li>
57+
<li class="side-nav__item">
58+
<a href="#" class="side-nav__link">
59+
<img src="images/icon-carrental.png" alt="Home" class="side-nav__icon" />
60+
<span>Car Rental</span>
61+
</a>
62+
</li>
63+
<li class="side-nav__item">
64+
<a href="#" class="side-nav__link">
65+
<img src="images/icon-map.png" alt="Home" class="side-nav__icon" />
66+
<span>Tours</span>
67+
</a>
68+
</li>
69+
</ul>
70+
<div class="legal">
71+
&copy; 2017 by Trillio. All rights reserved.
72+
</div>
73+
</nav>
74+
<main class="hotel-view">
75+
76+
</main>
77+
</div>
4278
</div>
4379
</body>
4480

‎Project-Trillio/sass/_components.scss

Lines changed: 64 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
color: inherit;
1717
background-color: var(--color-grey-light-2);
1818
border: none;
19-
padding: 0.7rem 0.2rem;
19+
padding: 0.7rem 2.0rem;
2020
border-radius: 100px;
2121
width: 90%;
2222
transition: all 0.2s;
@@ -92,4 +92,67 @@
9292
border-radius: 50%;
9393
margin-right: 1rem;
9494
}
95+
}
96+
97+
//Side Navigation
98+
.side-nav {
99+
font-size: 1.4rem;
100+
list-style: none;
101+
margin-top: 3.5rem;
102+
&__item {
103+
position: relative;
104+
&:not(:last-child){
105+
margin-bottom: 0.5rem;
106+
}
107+
}
108+
&__item::before {
109+
content: "";
110+
position: absolute;
111+
top: 0;
112+
left: 0;
113+
height: 100%;
114+
width: 3px;
115+
background-color: var(--color-primary);
116+
transform: scaleY(0); //Element scales in Y direction only
117+
transition: transform 0.2s, width 0.4s cubic-bezier(1,0,0,1) .2s, background-color 0.1s;
118+
}
119+
&__item:hover::before,
120+
&__item--active::before {
121+
transform: scaleY(1);
122+
width: 100%;
123+
}
124+
&__item:active::before {
125+
background-color: var(--color-primary-light);
126+
}
127+
&__link:link ,
128+
&__link:visited {
129+
color: var(--color-grey-light-1);
130+
text-decoration: none;
131+
text-transform: uppercase;
132+
display: block;
133+
padding: 1.5rem 3rem;
134+
display: flex;
135+
align-items: center;
136+
position: relative;
137+
z-index: 10;
138+
}
139+
&__link:hover {
140+
color: #fff;
141+
cursor: pointer;
142+
}
143+
&__icon {
144+
filter: brightness(0) invert(1);
145+
width: 1.75rem;
146+
height: 1.75rem;
147+
margin-right: 2rem;
148+
fill: white;
149+
}
150+
151+
//Legal Text
152+
.legal {
153+
font-size: 1.2rem;
154+
text-align: center;
155+
padding: 2.5rem;
156+
color: var(--color-grey-light-4);
157+
}
95158
}

‎Project-Trillio/sass/_layout.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,12 @@
2020
.sidebar {
2121
background-color: var(--color-grey-dark-1);
2222
flex: 0 0 18%;
23+
display: flex;
24+
flex-direction: column;
25+
justify-content: space-between;
2326
}
2427
.hotel-view {
2528
background-color: #fff;
2629
flex: 1;
30+
height: 80rem;
2731
}

0 commit comments

Comments
 (0)