Skip to content

Commit 493e0b0

Browse files
0xMMelvin0xMMelvin
committed
first commit
0 parents  commit 493e0b0

File tree

9 files changed

+183
-0
lines changed

9 files changed

+183
-0
lines changed

‎.gitignore

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Created by https://www.gitignore.io/api/visualstudiocode
2+
3+
### VisualStudioCode ###
4+
.vscode/*
5+
!.vscode/settings.json
6+
!.vscode/tasks.json
7+
!.vscode/launch.json
8+
!.vscode/extensions.json
9+
.history
10+
11+
12+
# End of https://www.gitignore.io/api/visualstudiocode

‎assets/css/styles.css

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
/* General Styles */
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
html {
10+
font: normal 16px sans-serif;
11+
color: 555;
12+
}
13+
14+
nav {
15+
list-style: none;
16+
}
17+
18+
a {
19+
text-decoration: none;
20+
opacity: 0.75;
21+
color: #fff;
22+
}
23+
24+
a:hover {
25+
opacity: 1;
26+
}
27+
28+
a.btn {
29+
border-radius: 4px;
30+
text-transform: uppercase;
31+
font-weight: bold;
32+
text-align: center;
33+
background-color: #3f51b5;
34+
opacity: 1;
35+
}
36+
37+
section {
38+
display: flex;
39+
flex-direction: column;
40+
align-items: center;
41+
padding: 100px 80px;
42+
}
43+
44+
/* Header Styles */
45+
46+
header {
47+
position: absolute;
48+
width: 100%;
49+
display: flex;
50+
justify-content: space-between;
51+
align-items: center;
52+
padding: 35px 100px 0;
53+
animation: 1s fadein 0.5s forwards;
54+
opacity: 0;
55+
color: #fff;
56+
}
57+
58+
@keyframes fadein {
59+
100% {
60+
opacity: 1;
61+
}
62+
}
63+
64+
header h2 {
65+
font-family: "Quicksand", sans-serif;
66+
}
67+
68+
header nav {
69+
display: flex;
70+
margin-right: -15px;
71+
}
72+
73+
header nav li {
74+
margin: 0 15px;
75+
}
76+
77+
/* Hero Styles */
78+
79+
.hero {
80+
position: relative;
81+
justify-content: center;
82+
text-align: center;
83+
min-height: 100vh;
84+
color: #fff;
85+
}
86+
87+
.hero .background-image {
88+
position: absolute;
89+
top: 0;
90+
left: 0;
91+
width: 100%;
92+
height: 100%;
93+
background-size: cover;
94+
z-index: -1;
95+
background-color: #80a3db;
96+
}
97+
98+
.hero h1 {
99+
font: bold 60px "Open Sans", sans-serif;
100+
margin-bottom: 15px;
101+
}
102+
103+
.hero h3 {
104+
font: normal 28px "Open Sans", sans-serif;
105+
margin-bottom: 40px;
106+
}
107+
108+
.hero a.btn {
109+
padding: 20px 46px;
110+
}
111+
112+
.hero-content-area {
113+
opacity: 0;
114+
margin-top: 100px;
115+
animation: 1s slidefade 1s forwards;
116+
}
117+
118+
@keyframes slidefade {
119+
100% {
120+
opacity: 1;
121+
margin: 0;
122+
}
123+
}

‎assets/img/main.jpg

736 KB
Loading

‎assets/img/mountain1.jpg

2.43 MB
Loading

‎assets/img/mountain2.jpg

4.36 MB
Loading

‎assets/img/mountain3.jpg

3.57 MB
Loading

‎assets/img/mountain4.jpg

6.89 MB
Loading

‎assets/img/mountain5.jpg

2.1 MB
Loading

‎index.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Mountain Travel</title>
8+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Quicksand">
10+
<link rel="stylesheet" href="assets/css/styles.css">
11+
</head>
12+
<body>
13+
<header>
14+
<h2>
15+
<a href="#">Mountain Travel</a>
16+
</h2>
17+
<nav>
18+
<li><a href="#">Tours</a></li>
19+
<li><a href="#">About</a></li>
20+
<li><a href="#">Contact</a></li>
21+
</nav>
22+
</header>
23+
24+
<section class="hero">
25+
<div class="background-image" style="background-image: url(assets/img/main.jpg);"></div>
26+
<div class="hero-content-area">
27+
<h1>Mountain Travel</h1>
28+
<h3>Unmissable Adventure Tours Around the World</h3>
29+
<a href="#" class="btn">Contact Us Now</a>
30+
</div>
31+
</section>
32+
33+
<section class="destinations">
34+
<h3 class="title">Some of our destinations:</h3>
35+
<p>Tired of the ocean? Are the plains too plain? Come along with us on one of our
36+
mountain adventures. Here are some pictures from people who have had elevated
37+
experiences with us.</p>
38+
<hr>
39+
40+
<ul class="grid">
41+
<li class="small" style="background-image: url(assets/img/mountain1.jpg);"></li>
42+
<li class="large" style="background-image: url(assets/img/mountain2.jpg);"></li>
43+
<li class="large" style="background-image: url(assets/img/mountain3.jpg);"></li>
44+
<li class="small" style="background-image: url(assets/img/mountain4.jpg);"></li>
45+
</ul>
46+
</section>
47+
</body>
48+
</html>

0 commit comments

Comments
 (0)