Skip to content

Commit aa53ce0

Browse files
MainaGeorgeMainaGeorge
committed
added navigation
1 parent dadeab9 commit aa53ce0

File tree

2 files changed

+297
-2
lines changed

2 files changed

+297
-2
lines changed

‎index.html‎

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,40 @@
2222
</head>
2323
<body class="container">
2424
<!--******* Header ******* -->
25-
<header id="header">Header</header>
25+
<header id="header">
26+
<!-- navigation -->
27+
<nav class="header__main-nav">
28+
<input type="checkbox">
29+
<div class="header__main-nav--hamburger"><div></div></div>
30+
<div class="header__main-nav--menu">
31+
<div>
32+
<div>
33+
<ul>
34+
<li><a href="#">Home</a></li>
35+
<li><a href="#">Villas</a></li>
36+
<li><a href="#">About</a></li>
37+
<li><a href="#">Contact</a></li>
38+
</ul>
39+
</div>
40+
</div>
41+
</div>
42+
</nav>
43+
44+
<!-- logo and content container -->
45+
<div class="header__logo__content">
46+
<a href="#" class="header__logo__content--logo">
47+
<span>V</span>
48+
<span>L</span>
49+
<span>V</span>
50+
</a>
51+
52+
<div class="header__logo__content--content">
53+
<h1 class="header__logo__content--content__title">Relax your soul</h1>
54+
<p class="header__logo__content--content__para">The team of VLV welcomes you. Start relaxing your soul and enjoy your stay.</p>
55+
<a href="#" class="header__logo__content--content__link">Discover More</a>
56+
</div>
57+
</div>
58+
</header>
2659

2760
<!--******* Booking ******* -->
2861
<section id="booking-content">Booking Content</section>

‎style.css‎

Lines changed: 263 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,272 @@ body {
4646
grid-template-rows: 100vh repeat(8, min-content);
4747
}
4848

49+
/** COMMON STYLES **/
50+
a:link,
51+
a:visited {
52+
color: var(--color-quartenary);
53+
text-decoration: none;
54+
font-size: calc(0.5rem + 1vw);
55+
padding: 1rem 2rem;
56+
position: relative;
57+
border-radius: 0.3rem;
58+
z-index: 1;
59+
transition: all var(--transition-duration) cubic-bezier(1,0,0,1);
60+
}
61+
62+
p {
63+
color: white;
64+
font-size: calc(1rem + 1vw);
65+
font-weight: 300;
66+
}
67+
68+
li {
69+
list-style: none;
70+
margin-bottom: 4rem;
71+
}
72+
73+
i {
74+
font-size: var(--font-size-title);
75+
color: var(--color-secondary)
76+
}
77+
4978
/* header section */
5079
header#header {
51-
background-color: var(--color-primary);
5280
grid-column: container-start / container-end;
81+
background: linear-gradient(var(--color-primary-m-light), var(--color-primary-m-light)), url('img/hero.jpg');
82+
background-repeat: no-repeat;
83+
background-position: center;
84+
background-size: cover;
85+
}
86+
87+
.header__main-nav {
88+
position: fixed;
89+
top: 0;
90+
left: 0;
91+
z-index: 2;
92+
}
93+
94+
.header__main-nav input[type=checkbox] {
95+
position: absolute;
96+
top: 3rem;
97+
left: 3rem;
98+
height: 5rem;
99+
width: 5rem;
100+
cursor: pointer;
101+
z-index: 3;
102+
opacity: 0;
103+
}
104+
105+
.header__main-nav--hamburger {
106+
position: absolute;
107+
top: 3rem;
108+
left: 3rem;
109+
width: 5rem;
110+
height: 5rem;
111+
background-color: var(--color-secondary);
112+
z-index: 2;
113+
padding: 1rem;
114+
115+
display: grid;
116+
place-items: center;
117+
118+
animation: main-nav 2s;
119+
}
120+
121+
@keyframes main-nav {
122+
0% {
123+
transform: translateX(150rem) rotate(1800deg);
124+
opacity: 0;
125+
}
126+
127+
100% {
128+
transform: translateX(0) rotate(0);
129+
opacity: 1;
130+
}
131+
}
132+
133+
.header__main-nav--hamburger > div {
134+
position: relative;
135+
height: 0.3rem;
136+
width: 100%;
137+
background-color: var(--color-quartenary);
138+
139+
display: grid;
140+
place-items: center;
141+
transition: all var(--transition-duration) ease-in-out;
142+
}
143+
144+
.header__main-nav--hamburger > div::after,
145+
.header__main-nav--hamburger > div::before {
146+
content: "";
147+
height: inherit;
148+
width: 60%;
149+
position: absolute;
150+
background-color: inherit;
151+
z-index: inherit;
152+
}
153+
154+
.header__main-nav--hamburger > div::after {
155+
right: 0;
156+
top: 1rem;
157+
}
158+
159+
.header__main-nav--hamburger > div::before {
160+
top: -1rem;
161+
left: 0;
162+
}
163+
164+
.header__main-nav input[type=checkbox]:checked + .header__main-nav--hamburger > div{
165+
transform: rotate(135deg);
166+
}
167+
168+
.header__main-nav input[type=checkbox]:checked + .header__main-nav--hamburger > div::after {
169+
opacity: 0;
170+
}
171+
172+
.header__main-nav input[type=checkbox]:checked + .header__main-nav--hamburger > div::before {
173+
left: 0;
174+
top: 0;
175+
width: 100%;
176+
transform: rotate(270deg);
177+
}
178+
179+
.header__main-nav input[type=checkbox]:checked:hover + .header__main-nav--hamburger > div {
180+
transform: rotate(405deg);
181+
}
182+
183+
.header__main-nav--menu {
184+
position: fixed;
185+
top: 0;
186+
left: 0;
187+
height: 100%;
188+
width: 100%;
189+
overflow: hidden;
190+
visibility: hidden;
191+
192+
display: grid;
193+
place-items: center;
194+
}
195+
196+
.header__main-nav--menu > div {
197+
background-color: var(--color-secondary-m-dark);
198+
width: 200%;
199+
height: 200%;
200+
display: grid;
201+
place-items: center;
202+
203+
transition: all var(--transition-duration) ease-in-out;
204+
transform: scaleX(0);
205+
}
206+
207+
.header__main-nav--menu > div > div {
208+
max-width: 90vw;
209+
max-height: 100vh;
210+
text-align: center;
211+
212+
opacity: 0;
213+
transition: opacity 1s ease-in-out;
214+
}
215+
216+
.header__main-nav input[type=checkbox]:checked ~ .header__main-nav--menu {
217+
visibility: visible;
218+
}
219+
220+
.header__main-nav input[type=checkbox]:checked ~ .header__main-nav--menu > div {
221+
transform: scaleX(1);
222+
transition-duration: .5s;
223+
}
224+
225+
.header__main-nav input[type=checkbox]:checked ~ .header__main-nav--menu > div > div {
226+
opacity: 1;
227+
}
228+
229+
.header__main-nav--menu li a:link,
230+
.header__main-nav--menu li a:visited{
231+
z-index: 5;
232+
font-size: calc(1.5rem + 0.5vw);
233+
}
234+
235+
.header__main-nav--menu li a:link::before,
236+
.header__main-nav--menu li a:visited::before {
237+
content: "";
238+
position: absolute;
239+
top: 0;
240+
left: 0;
241+
z-index: -1;
242+
height: 100%;
243+
width: 100%;
244+
transform: scaleY(0);
245+
background-color: var(--color-primary-m-dark);
246+
transition: transform var(--transition-duration) ease-in-out;
247+
}
248+
249+
.header__main-nav--menu li a:hover::before,
250+
.header__main-nav--menu li a:active::before{
251+
transform: scaleY(1);
252+
}
253+
254+
.header__logo__content {
255+
display: grid;
256+
grid-template-columns: 1fr minmax(30rem, 1fr) 1fr;
257+
grid-template-rows: min-content;
258+
height: 90%;
259+
justify-items: center;
260+
}
261+
262+
.header__logo__content--logo {
263+
grid-column: 2 / 3;
264+
letter-spacing: 0.2rem;
265+
}
266+
267+
.header__logo__content--logo span {
268+
color: var(--color-tertiary);
269+
font-size: 3rem;
270+
font-family: "Times New Roman", 'Times New Roman', Times, serif;
271+
}
272+
273+
.header__logo__content--content {
274+
grid-column: 1 / -1;
275+
align-self: center;
276+
}
277+
278+
.header__logo__content--content__title {
279+
padding: 0 2rem 0 var(--font-size-title);
280+
text-transform: uppercase;
281+
color: white;
282+
font-weight: 300;
283+
font-size: calc(4rem + 4vw);
284+
}
285+
286+
.header__logo__content--content__para {
287+
font-size: calc(1rem + 2vw);
288+
font-weight: 500;
289+
padding: 2vh 2rem 6vh var(--font-size-title);
290+
}
291+
292+
.header__logo__content--content__link:visited,
293+
.header__logo__content--content__link:link {
294+
margin-left: var(--font-size-title);
295+
border: 0.2rem solid var(--color-tertiary);
296+
}
297+
298+
.header__logo__content--content__link:visited::before,
299+
.header__logo__content--content__link:link::before {
300+
content: "";
301+
position: absolute;
302+
top: 0;
303+
left: 0;
304+
width: 100%;
305+
height: 100%;
306+
background-color: var(--color-tertiary);
307+
transition: transform .45s cubic-bezier(1, 0, 0, 1);
308+
z-index: -1;
309+
transform: scaleX(0);
310+
}
311+
312+
.header__logo__content--content__link:hover::before,
313+
.header__logo__content--content__link:active::before {
314+
transform: scaleX(1);
53315
}
54316

55317
section#booking-content {

0 commit comments

Comments
 (0)