Skip to content

Commit ab8246f

Browse files
mmmaaattttttmmmaaatttttt
committed
adding CSS project solution scaffolding
1 parent a92fd6b commit ab8246f

File tree

35 files changed

+1306
-0
lines changed

35 files changed

+1306
-0
lines changed

‎css-project/01-starter-code/assets/css/styles.css

Whitespace-only changes.

‎css-project/01-starter-code/assets/img/main.jpg

104 KB
Loading

‎css-project/01-starter-code/assets/img/mountain1.jpg

403 KB
Loading

‎css-project/01-starter-code/assets/img/mountain2.jpg

216 KB
Loading

‎css-project/01-starter-code/assets/img/mountain3.jpg

176 KB
Loading

‎css-project/01-starter-code/assets/img/mountain4.jpg

167 KB
Loading

‎css-project/01-starter-code/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Mountain Travel</title>
7+
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
9+
<link rel="stylesheet" href="assets/css/styles.css">
10+
</head>
11+
<body>
12+
<!-- Forked from a template on Tutorialzine: https://tutorialzine.com/2016/06/freebie-landing-page-template-with-flexbox -->
13+
</body>
14+
</html>

‎css-project/02-nav-and-header/assets/css/styles.css

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
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+
}
124+
125+
126+
127+
128+
129+
130+
131+
132+
133+
134+
135+
136+
137+
138+

‎css-project/02-nav-and-header/assets/img/main.jpg

104 KB
Loading

‎css-project/02-nav-and-header/assets/img/mountain1.jpg

403 KB
Loading

‎css-project/02-nav-and-header/assets/img/mountain2.jpg

216 KB
Loading

‎css-project/02-nav-and-header/assets/img/mountain3.jpg

176 KB
Loading

‎css-project/02-nav-and-header/assets/img/mountain4.jpg

167 KB
Loading

‎css-project/02-nav-and-header/index.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Mountain Travel</title>
7+
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
9+
<link rel="stylesheet" href="assets/css/styles.css">
10+
</head>
11+
<body>
12+
<!-- Forked from a template on Tutorialzine: https://tutorialzine.com/2016/06/freebie-landing-page-template-with-flexbox -->
13+
<header>
14+
<h2><a href="#">Mountain Travel</a></h2>
15+
<nav>
16+
<li><a href="#">Tours</a></li>
17+
<li><a href="#">About</a></li>
18+
<li><a href="#">Contact</a></li>
19+
</nav>
20+
</header>
21+
22+
<section class="hero">
23+
<div class="background-image" style="background-image: url(assets/img/main.jpg);"></div>
24+
<div class="hero-content-area">
25+
<h1>Mountain Travel</h1>
26+
<h3>Unmissable Adventure Tours Around The World</h3>
27+
<a href="#" class="btn">Contact Us Now</a>
28+
</div>
29+
</section>
30+
31+
</body>
32+
</html>

‎css-project/03-destinations-and-features/assets/css/styles.css

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
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+
ul,
15+
nav {
16+
list-style: none;
17+
}
18+
19+
a {
20+
text-decoration: none;
21+
opacity: 0.75;
22+
color: #fff;
23+
}
24+
25+
a:hover {
26+
opacity: 1;
27+
}
28+
29+
a.btn {
30+
border-radius: 4px;
31+
text-transform: uppercase;
32+
font-weight: bold;
33+
text-align: center;
34+
background-color: #3f51b5;
35+
opacity: 1;
36+
}
37+
38+
section {
39+
display: flex;
40+
flex-direction: column;
41+
align-items: center;
42+
padding: 100px 80px;
43+
}
44+
45+
section:not(.hero):nth-child(even) {
46+
background-color: #f5f5f5;
47+
}
48+
49+
.grid {
50+
width: 100%;
51+
display: flex;
52+
flex-wrap: wrap;
53+
justify-content: center;
54+
}
55+
56+
hr {
57+
width: 250px;
58+
height: 3px;
59+
background-color: #3f51b5;
60+
border: 0;
61+
margin-bottom: 50px;
62+
}
63+
64+
section h3.title {
65+
text-transform: capitalize;
66+
font: bold 32px "Open Sans", sans-serif;
67+
margin-bottom: 30px;
68+
text-align: center;
69+
}
70+
71+
section p {
72+
max-width: 775px;
73+
line-height: 2;
74+
padding: 0 20px;
75+
margin-bottom: 30px;
76+
text-align: center;
77+
}
78+
79+
/*Header Styles*/
80+
81+
header {
82+
position: absolute;
83+
width: 100%;
84+
display: flex;
85+
justify-content: space-between;
86+
align-items: center;
87+
padding: 35px 100px 0;
88+
animation: 1s fadein 0.5s forwards;
89+
opacity: 0;
90+
color: #fff;
91+
}
92+
93+
@keyframes fadein {
94+
100% {
95+
opacity: 1;
96+
}
97+
}
98+
99+
header h2 {
100+
font-family: "Quicksand", sans-serif;
101+
}
102+
103+
header nav {
104+
display: flex;
105+
margin-right: -15px;
106+
}
107+
108+
header nav li {
109+
margin: 0 15px;
110+
}
111+
112+
/*Hero Styles*/
113+
114+
.hero {
115+
position: relative;
116+
justify-content: center;
117+
text-align: center;
118+
min-height: 100vh;
119+
color: #fff;
120+
}
121+
122+
.hero .background-image {
123+
position: absolute;
124+
top: 0;
125+
left: 0;
126+
width: 100%;
127+
height: 100%;
128+
background-size: cover;
129+
z-index: -1;
130+
background-color: #80a3db;
131+
}
132+
133+
.hero h1 {
134+
font: bold 60px "Open Sans", sans-serif;
135+
margin-bottom: 15px;
136+
}
137+
138+
.hero h3 {
139+
font: normal 28px "Open Sans", sans-serif;
140+
margin-bottom: 40px;
141+
}
142+
143+
.hero a.btn {
144+
padding: 20px 46px;
145+
}
146+
147+
.hero-content-area {
148+
opacity: 0;
149+
margin-top: 100px;
150+
animation: 1s slidefade 1s forwards;
151+
}
152+
153+
@keyframes slidefade {
154+
100% {
155+
opacity: 1;
156+
margin: 0;
157+
}
158+
}
159+
160+
/*Destinations Section*/
161+
162+
.destinations .grid li {
163+
height: 350px;
164+
padding: 20px;
165+
background-clip: content-box;
166+
background-size: cover;
167+
background-position: center;
168+
}
169+
170+
.destinations .grid li.small {
171+
flex-basis: 30%;
172+
}
173+
174+
.destinations .grid li.large {
175+
flex-basis: 70%;
176+
}
177+
178+
/*Packages Section*/
179+
180+
.packages .grid li {
181+
padding: 50px;
182+
flex-basis: 50%;
183+
text-align: center;
184+
}
185+
186+
.packages .grid li i {
187+
color: #8c9eff;
188+
}
189+
190+
.packages .grid li h4 {
191+
font-size: 30px;
192+
margin: 25px 0;
193+
}
194+
195+
196+
197+
198+
199+
200+
201+
202+
203+
204+

‎css-project/03-destinations-and-features/assets/img/main.jpg

104 KB
Loading

‎css-project/03-destinations-and-features/assets/img/mountain1.jpg

403 KB
Loading

‎css-project/03-destinations-and-features/assets/img/mountain2.jpg

216 KB
Loading

‎css-project/03-destinations-and-features/assets/img/mountain3.jpg

176 KB
Loading

‎css-project/03-destinations-and-features/assets/img/mountain4.jpg

167 KB
Loading

0 commit comments

Comments
 (0)