├── 01. Acme Web Design
    ├── about.html
    ├── css
    │   └── styles.css
    ├── img
    │   ├── logo_brush.png
    │   ├── logo_css.png
    │   ├── logo_html.png
    │   └── showcase.jpg
    ├── index.html
    └── services.html
├── 02. Elegant Blur Landing
    ├── css
    │   └── styles.css
    ├── img
    │   ├── logo.png
    │   └── showcase.jpeg
    └── index.html
├── 03. Responsive Product Landing (+jQuery)
    ├── css
    │   └── styles.css
    ├── favicon.ico
    ├── img
    │   ├── cards.png
    │   ├── logo.png
    │   ├── mockup1.png
    │   ├── mockup2.png
    │   ├── section-bg.jpg
    │   └── showcase.jpg
    ├── index.html
    └── js
    │   └── main.js
├── 04. Bootstrap Landing
    ├── .DS_Store
    ├── img
    │   ├── .DS_Store
    │   ├── b.png
    │   ├── background.jpg
    │   ├── bootstrap.png
    │   ├── bootstrap2.png
    │   ├── less.png
    │   ├── mountains.jpeg
    │   ├── sass.png
    │   └── w3newbie.png
    ├── index.html
    └── style.css
├── 05. Parallax Effect Website
    ├── css
    │   └── styles.css
    ├── img
    │   ├── photo1.jpeg
    │   ├── photo2.jpg
    │   └── photo3.jpeg
    └── index.html
├── 06. Coming Soon
    ├── css
    │   └── styles.css
    ├── img
    │   └── background.jpg
    ├── index.html
    └── js
    │   └── script.js
├── 07. Fade Out Effect
    ├── css
    │   └── styles.css
    ├── img
    │   ├── bg1.jpg
    │   ├── bg2.jpeg
    │   └── bg3.jpeg
    └── index.html
├── 08. Split Landing
    ├── css
    │   └── styles.css
    ├── img
    │   ├── bg1.png
    │   └── bg2.jpeg
    ├── index.html
    └── scripts
    │   └── main.js
├── 09. HTML5 Forms
    ├── css
    │   └── styles.css
    ├── img
    │   ├── checks.png
    │   ├── inputs.png
    │   ├── logo.png
    │   ├── select.png
    │   └── tick.png
    └── index.html
├── 10. CSS3 Pricing Tables
    ├── css
    │   └── styles.css
    └── index.html
├── 11. Fullscreen Video Background
    ├── code.mov
    ├── index.html
    └── styles.css
├── 12. Pluralsight Clone
    ├── css
    │   └── styles.css
    └── index.html
├── 13. Materialize CSS Travel Agency
    ├── css
    │   └── styles.css
    └── index.html
├── 14. OOP Booklist
    ├── css
    │   └── styles.css
    ├── index.html
    └── js
    │   └── script.js
├── 15. Natours Project
    ├── .gitignore
    ├── css
    │   ├── fonts
    │   │   ├── linea-basic-10.eot
    │   │   ├── linea-basic-10.svg
    │   │   ├── linea-basic-10.ttf
    │   │   └── linea-basic-10.woff
    │   ├── icon-font.css
    │   ├── style.comp.css
    │   ├── style.concat.css
    │   ├── style.css
    │   └── style.prefix.css
    ├── img
    │   ├── favicon.png
    │   ├── hero-small.jpg
    │   ├── hero.jpg
    │   ├── logo-green-1x.png
    │   ├── logo-green-2x.png
    │   ├── logo-green-small-1x.png
    │   ├── logo-green-small-2x.png
    │   ├── logo-white.png
    │   ├── nat-1-large.jpg
    │   ├── nat-1.jpg
    │   ├── nat-10.jpg
    │   ├── nat-2-large.jpg
    │   ├── nat-2.jpg
    │   ├── nat-3-large.jpg
    │   ├── nat-3.jpg
    │   ├── nat-4.jpg
    │   ├── nat-5.jpg
    │   ├── nat-6.jpg
    │   ├── nat-7.jpg
    │   ├── nat-8.jpg
    │   ├── nat-9.jpg
    │   ├── video.mp4
    │   └── video.webm
    ├── index.html
    ├── package-lock.json
    ├── package.json
    └── sass
    │   ├── abstracts
    │       ├── _functions.scss
    │       ├── _mixins.scss
    │       └── _variables.scss
    │   ├── base
    │       ├── _animations.scss
    │       ├── _base.scss
    │       ├── _typography.scss
    │       └── _utilities.scss
    │   ├── components
    │       ├── _bg-video.scss
    │       ├── _button.scss
    │       ├── _card.scss
    │       ├── _composition.scss
    │       ├── _feature-box.scss
    │       ├── _form.scss
    │       ├── _popup.scss
    │       └── _story.scss
    │   ├── layout
    │       ├── _footer.scss
    │       ├── _grid.scss
    │       ├── _header.scss
    │       └── _navigation.scss
    │   ├── main.scss
    │   └── pages
    │       └── _home.scss
├── 16. Trillo
    ├── .gitignore
    ├── css
    │   └── style.css
    ├── img
    │   ├── SVG
    │   │   ├── aircraft.svg
    │   │   ├── bookmark.svg
    │   │   ├── chat.svg
    │   │   ├── chevron-thin-right.svg
    │   │   ├── home.svg
    │   │   ├── key.svg
    │   │   ├── location-pin.svg
    │   │   ├── magnifying-glass.svg
    │   │   ├── map.svg
    │   │   └── star.svg
    │   ├── chevron-thin-right.svg
    │   ├── favicon.png
    │   ├── hotel-1.jpg
    │   ├── hotel-2.jpg
    │   ├── hotel-3.jpg
    │   ├── logo.png
    │   ├── sprite.svg
    │   ├── text.txt
    │   ├── user-1.jpg
    │   ├── user-2.jpg
    │   ├── user-3.jpg
    │   ├── user-4.jpg
    │   ├── user-5.jpg
    │   ├── user-6.jpg
    │   └── user.jpg
    ├── index.html
    ├── package-lock.json
    ├── package.json
    └── sass
    │   ├── _base.scss
    │   ├── _components.scss
    │   ├── _layout.scss
    │   └── main.scss
└── README.md


/01. Acme Web Design/about.html:
--------------------------------------------------------------------------------
 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
 7 | 			name="keywords"
 8 | 			content="web design, professional web design, affordable web design"
 9 | 		/>
10 | 		<meta name="author" content="Nick Rudenko" />
11 | 		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
12 | 		<link rel="stylesheet" href="./css/styles.css" />
13 | 		<title>Acme Web Design | About</title>
14 | 	</head>
15 | 	<body>
16 | 		<header>
17 | 			<div class="container">
18 | 				<div id="branding">
19 | 					<h2><span class="highlight">Acme</span> Web Design</h2>
20 | 				</div>
21 | 				<nav>
22 | 					<ul>
23 | 						<li><a href="index.html">Home</a></li>
24 | 						<li class="current"><a href="about.html">About</a></li>
25 | 						<li><a href="services.html">Services</a></li>
26 | 					</ul>
27 | 				</nav>
28 | 			</div>
29 | 		</header>
30 | 
31 | 		<section id="newsletter">
32 | 			<div class="container">
33 | 				<h2>Subscribe To Our Newsletter</h2>
34 | 				<form action="#">
35 | 					<input type="email" name="" placeholder="Enter email" />
36 | 					<button type="submit" class="btn_1">Subscribe</button>
37 | 				</form>
38 | 			</div>
39 | 		</section>
40 | 
41 | 		<section id="main">
42 | 			<div class="container">
43 | 				<article id="main-col">
44 | 					<h1 class="page-title">About Us</h1>
45 | 					<p>
46 | 						Lorem ipsum dolor sit amet consectetur, adipisicing elit. Optio
47 | 						neque aut nam nisi animi ea sint, soluta quisquam. Ab tempora
48 | 						adipisci ut. Ad non earum dignissimos odit dolorem delectus
49 | 						voluptas. Explicabo dignissimos totam molestiae exercitationem
50 | 						possimus eveniet non dolorem voluptas quam nam cum modi expedita
51 | 						temporibus, omnis illo asperiores sunt! Laborum laudantium veniam
52 | 						quod similique quaerat alias deserunt ab dolor. Nobis suscipit
53 | 						consectetur ducimus voluptates mollitia facere illum aperiam.
54 | 						Maxime, rerum corporis cupiditate itaque asperiores similique natus
55 | 						iste saepe in repudiandae aut incidunt provident reprehenderit
56 | 						nostrum. Aliquid unde ducimus officia. Voluptatem, pariatur quidem?
57 | 					</p>
58 | 					<p>
59 | 						Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam dolorum
60 | 						officia perspiciatis reprehenderit debitis laudantium. Quos at
61 | 						consectetur voluptatibus, voluptates hic recusandae laudantium quas
62 | 						nam maxime cumque rem, exercitationem ab? Cum ipsa iure, non debitis
63 | 						magnam vitae iusto ut illum nisi, culpa esse explicabo! Atque,
64 | 						maxime deleniti minima cupiditate ipsam earum vero aspernatur!
65 | 						Consequuntur earum eligendi repellat assumenda. Rem, laborum!
66 | 						Blanditiis esse, expedita consequatur debitis corrupti optio
67 | 						inventore non labore, neque voluptatem vel, et fuga molestiae
68 | 						quibusdam enim cupiditate. Sagnam omnis, eius molestiae reiciendis
69 | 						dolore error iusto inventore.
70 | 					</p>
71 | 				</article>
72 | 
73 | 				<aside id="sidebar">
74 | 					<div class="dark">
75 | 						<h3>What We Do</h3>
76 | 						<p>
77 | 							Rem, laborum! Blanditiis esse, expedita consequatur debitis
78 | 							corrupti optio inventore non labore, neque voluptatem vel, et fuga
79 | 							molestiae quibusdam enim cupiditate. Lorem ipsum dolor sit amet
80 | 							consectetur adipisicing elit. Nam dolorum officia perspiciatis
81 | 							reprehenderit debitis laudantium. Cum ipsa iure, non debitis
82 | 							magnam vitae iusto ut illum nisi, culpa esse explicabo!
83 | 						</p>
84 | 					</div>
85 | 				</aside>
86 | 			</div>
87 | 		</section>
88 | 
89 | 		<footer><p>Acme Web Design, Copyright &copy; 2018</p></footer>
90 | 	</body>
91 | </html>
92 | 


--------------------------------------------------------------------------------
/01. Acme Web Design/css/styles.css:
--------------------------------------------------------------------------------
  1 | body {
  2 | 	/* font-family: Arial, Helvetica, sans-serif;
  3 | 	font-size: 15px;
  4 |   line-height: 1.5; */
  5 | 	font: 15px/1.5 Arial, Helvetica, sans-serif;
  6 | 	padding: 0;
  7 | 	margin: 0;
  8 | 	background: #f4f4f4;
  9 | }
 10 | 
 11 | /* Global */
 12 | .container {
 13 | 	width: 80%;
 14 | 	margin: auto;
 15 | 	overflow: hidden;
 16 | }
 17 | 
 18 | ul {
 19 | 	margin: 0;
 20 | 	padding: 0;
 21 | }
 22 | 
 23 | .btn_1 {
 24 | 	height: 38px;
 25 | 	background: #e8491d;
 26 | 	border: none;
 27 | 	padding-left: 20px;
 28 | 	padding-right: 20px;
 29 | 	color: #ffffff;
 30 | }
 31 | 
 32 | .dark {
 33 | 	padding: 15px;
 34 | 	background: #35424a;
 35 | 	color: #ffffff;
 36 | 	margin-top: 10px;
 37 | 	margin-bottom: 10px;
 38 | }
 39 | 
 40 | /* Header */
 41 | header {
 42 | 	background: #35424a;
 43 | 	color: #ffffff;
 44 | 	padding-top: 30px;
 45 | 	min-height: 70px;
 46 | 	border-bottom: #e8491d 3px solid;
 47 | }
 48 | 
 49 | header a {
 50 | 	color: #ffffff;
 51 | 	text-decoration: none;
 52 | 	text-transform: uppercase;
 53 | 	font-size: 14px;
 54 | }
 55 | 
 56 | header li {
 57 | 	display: inline;
 58 | 	padding: 0 20px 0 20px;
 59 | }
 60 | 
 61 | header #branding {
 62 | 	float: left;
 63 | }
 64 | 
 65 | header #branding h2 {
 66 | 	margin: 0;
 67 | }
 68 | 
 69 | header nav {
 70 | 	float: right;
 71 | 	margin-top: 10px;
 72 | }
 73 | 
 74 | header .highlight,
 75 | header .current a {
 76 | 	color: #e8491d;
 77 | 	font-weight: bold;
 78 | }
 79 | 
 80 | header a:hover {
 81 | 	color: #cccccc;
 82 | }
 83 | 
 84 | /* Showcase */
 85 | #showcase {
 86 | 	min-height: 400px;
 87 | 	background: url('../img/showcase.jpg') no-repeat -400px;
 88 | 	text-align: center;
 89 | 	color: #ffffff;
 90 | }
 91 | 
 92 | #showcase h1 {
 93 | 	margin-top: 100px;
 94 | 	font-size: 50px;
 95 | 	margin-bottom: 10px;
 96 | }
 97 | 
 98 | #showcase p {
 99 | 	font-size: 20px;
100 | }
101 | 
102 | /* Newsletter */
103 | #newsletter {
104 | 	padding: 15px;
105 | 	color: #ffffff;
106 | 	background: #35424a;
107 | }
108 | 
109 | #newsletter h2 {
110 | 	float: left;
111 | }
112 | 
113 | #newsletter form {
114 | 	float: right;
115 | 	margin-top: 15px;
116 | }
117 | 
118 | #newsletter input[type='email'] {
119 | 	padding: 4px;
120 | 	height: 25px;
121 | 	width: 250px;
122 | }
123 | 
124 | /* Boxes */
125 | #boxes {
126 | 	margin-top: 20px;
127 | }
128 | 
129 | #boxes .box {
130 | 	float: left;
131 | 	text-align: center;
132 | 	width: 30%;
133 | 	padding: 10px;
134 | }
135 | 
136 | #boxes .box img {
137 | 	width: 90px;
138 | }
139 | 
140 | /* Sidebar */
141 | aside#sidebar {
142 | 	float: right;
143 | 	width: 30%;
144 | 	margin-top: 10px;
145 | }
146 | 
147 | aside#sidebar .quote input,
148 | aside#sidebar .quote textarea {
149 | 	width: 90%;
150 | 	padding: 5px;
151 | }
152 | 
153 | /* Main-col */
154 | article#main-col {
155 | 	float: left;
156 | 	width: 65%;
157 | }
158 | 
159 | /* Services */
160 | ul#services li {
161 | 	list-style: none;
162 | 	padding: 20px;
163 | 	border: #cccccc solid 1px;
164 | 	margin-bottom: 5px;
165 | 	background: #e6e6e6;
166 | }
167 | 
168 | footer {
169 | 	padding: 20px;
170 | 	margin-top: 20px;
171 | 	color: #ffffff;
172 | 	background: #35424a;
173 | 	text-align: center;
174 | }
175 | 
176 | /* Media Queries*/
177 | 
178 | @media (max-width: 700px) {
179 | 	header #branding,
180 | 	header nav,
181 | 	header nav li,
182 | 	#newsletter h2,
183 | 	#newsletter form,
184 | 	#boxes .box,
185 | 	article#main-col,
186 | 	aside#sidebar {
187 | 		float: none;
188 | 		text-align: center;
189 | 		width: 100%;
190 | 	}
191 | 
192 | 	header {
193 | 		padding: 20px;
194 | 	}
195 | 
196 | 	#showcase h1 {
197 | 		margin-top: 40px;
198 | 	}
199 | 
200 | 	#newsletter button,
201 | 	.quote button {
202 | 		display: block;
203 | 		width: 100%;
204 | 	}
205 | 
206 | 	#newsletter form input[type='email'],
207 | 	.quote input,
208 | 	.quote textarea {
209 | 		width: 100%;
210 | 		margin-bottom: 5px;
211 | 	}
212 | }
213 | 


--------------------------------------------------------------------------------
/01. Acme Web Design/img/logo_brush.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/01. Acme Web Design/img/logo_brush.png


--------------------------------------------------------------------------------
/01. Acme Web Design/img/logo_css.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/01. Acme Web Design/img/logo_css.png


--------------------------------------------------------------------------------
/01. Acme Web Design/img/logo_html.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/01. Acme Web Design/img/logo_html.png


--------------------------------------------------------------------------------
/01. Acme Web Design/img/showcase.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/01. Acme Web Design/img/showcase.jpg


--------------------------------------------------------------------------------
/01. Acme Web Design/index.html:
--------------------------------------------------------------------------------
 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
 7 | 			name="keywords"
 8 | 			content="web design, professional web design, affordable web design"
 9 | 		/>
10 | 		<meta name="author" content="Nick Rudenko" />
11 | 		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
12 | 		<link rel="stylesheet" href="./css/styles.css" />
13 | 		<title>Acme Web Design | Welcome</title>
14 | 	</head>
15 | 	<body>
16 | 		<header>
17 | 			<div class="container">
18 | 				<div id="branding">
19 | 					<h2><span class="highlight">Acme</span> Web Design</h2>
20 | 				</div>
21 | 				<nav>
22 | 					<ul>
23 | 						<li class="current"><a href="index.html">Home</a></li>
24 | 						<li><a href="about.html">About</a></li>
25 | 						<li><a href="services.html">Services</a></li>
26 | 					</ul>
27 | 				</nav>
28 | 			</div>
29 | 		</header>
30 | 
31 | 		<section id="showcase">
32 | 			<div class="container">
33 | 				<h1>Afordable Professional Web Design</h1>
34 | 				<p>
35 | 					Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit enim
36 | 					officiis repellat voluptatibus veritatis cum distinctio debitis id
37 | 					cupiditate
38 | 				</p>
39 | 			</div>
40 | 		</section>
41 | 
42 | 		<section id="newsletter">
43 | 			<div class="container">
44 | 				<h2>Subscribe To Our Newsletter</h2>
45 | 				<form action="#">
46 | 					<input type="email" name="" placeholder="Enter email" />
47 | 					<button type="submit" class="btn_1">Subscribe</button>
48 | 				</form>
49 | 			</div>
50 | 		</section>
51 | 
52 | 		<section id="boxes">
53 | 			<div class="container">
54 | 				<div class="box">
55 | 					<img src="./img/logo_html.png" alt="logo_html" />
56 | 					<h3>HTML5 Markup</h3>
57 | 					<p>
58 | 						Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
59 | 						enim officiis repellat voluptatibus veritatis cum distinctio debitis
60 | 						id cupiditate
61 | 					</p>
62 | 				</div>
63 | 				<div class="box">
64 | 					<img src="./img/logo_css.png" alt="logo_css" />
65 | 					<h3>CSS3 Styling</h3>
66 | 					<p>
67 | 						Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
68 | 						enim officiis repellat voluptatibus veritatis cum distinctio debitis
69 | 						id cupiditate
70 | 					</p>
71 | 				</div>
72 | 				<div class="box">
73 | 					<img src="./img/logo_brush.png" alt="logo_brush" />
74 | 					<h3>Graphic Design</h3>
75 | 					<p>
76 | 						Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
77 | 						enim officiis repellat voluptatibus veritatis cum distinctio debitis
78 | 						id cupiditate
79 | 					</p>
80 | 				</div>
81 | 			</div>
82 | 		</section>
83 | 
84 | 		<footer><p>Acme Web Design, Copyright &copy; 2018</p></footer>
85 | 	</body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/01. Acme Web Design/services.html:
--------------------------------------------------------------------------------
  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
  7 | 			name="keywords"
  8 | 			content="web design, professional web design, affordable web design"
  9 | 		/>
 10 | 		<meta name="author" content="Nick Rudenko" />
 11 | 		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
 12 | 		<link rel="stylesheet" href="./css/styles.css" />
 13 | 		<title>Acme Web Design | Services</title>
 14 | 	</head>
 15 | 	<body>
 16 | 		<header>
 17 | 			<div class="container">
 18 | 				<div id="branding">
 19 | 					<h2><span class="highlight">Acme</span> Web Design</h2>
 20 | 				</div>
 21 | 				<nav>
 22 | 					<ul>
 23 | 						<li><a href="index.html">Home</a></li>
 24 | 						<li><a href="about.html">About</a></li>
 25 | 						<li class="current"><a href="services.html">Services</a></li>
 26 | 					</ul>
 27 | 				</nav>
 28 | 			</div>
 29 | 		</header>
 30 | 
 31 | 		<section id="newsletter">
 32 | 			<div class="container">
 33 | 				<h2>Subscribe To Our Newsletter</h2>
 34 | 				<form action="#">
 35 | 					<input type="email" name="" placeholder="Enter email" />
 36 | 					<button type="submit" class="btn_1">Subscribe</button>
 37 | 				</form>
 38 | 			</div>
 39 | 		</section>
 40 | 
 41 | 		<section id="main">
 42 | 			<div class="container">
 43 | 				<article id="main-col">
 44 | 					<h1 class="page-title">Services</h1>
 45 | 					<ul id="services">
 46 | 						<li>
 47 | 							<h3>Website Design</h3>
 48 | 							<p>
 49 | 								Rem, laborum! Blanditiis esse, expedita consequatur debitis
 50 | 								corrupti optio inventore non labore, neque voluptatem vel, et
 51 | 								fuga molestiae quibusdam enim cupiditate!
 52 | 							</p>
 53 | 							<p>Pricing: $1,000 - $3,000</p>
 54 | 						</li>
 55 | 						<li>
 56 | 							<h3>Website Maintenance</h3>
 57 | 							<p>
 58 | 								Rem, laborum! Blanditiis esse, expedita consequatur debitis
 59 | 								corrupti optio inventore non labore, neque voluptatem vel, et
 60 | 								fuga molestiae quibusdam enim cupiditate!
 61 | 							</p>
 62 | 							<p>Pricing: $250 per month</p>
 63 | 						</li>
 64 | 						<li>
 65 | 							<h3>Website Hosting</h3>
 66 | 							<p>
 67 | 								Rem, laborum! Blanditiis esse, expedita consequatur debitis
 68 | 								corrupti optio inventore non labore, neque voluptatem vel, et
 69 | 								fuga molestiae quibusdam enim cupiditate!
 70 | 							</p>
 71 | 							<p>Pricing: $25 per month</p>
 72 | 						</li>
 73 | 					</ul>
 74 | 				</article>
 75 | 
 76 | 				<aside id="sidebar">
 77 | 					<div class="dark">
 78 | 						<h3>Get A Quote</h3>
 79 | 						<form class="quote">
 80 | 							<div>
 81 | 								<label>Name</label><br />
 82 | 								<input type="text" placeholder="Name" />
 83 | 							</div>
 84 | 							<div>
 85 | 								<label>Email</label><br />
 86 | 								<input type="email" placeholder="Emial Address" />
 87 | 							</div>
 88 | 							<div>
 89 | 								<label>Message</label><br />
 90 | 								<textarea placeholder="Message"></textarea>
 91 | 							</div>
 92 | 							<button class="btn_1" type="submit">Send</button>
 93 | 						</form>
 94 | 					</div>
 95 | 				</aside>
 96 | 			</div>
 97 | 		</section>
 98 | 
 99 | 		<footer><p>Acme Web Design, Copyright &copy; 2018</p></footer>
100 | 	</body>
101 | </html>
102 | 


--------------------------------------------------------------------------------
/02. Elegant Blur Landing/css/styles.css:
--------------------------------------------------------------------------------
  1 | body {
  2 | 	background: rgba(0, 0, 0, 0.9);
  3 | 	margin: 0;
  4 | 	color: #ffffff;
  5 | 	font-family: 'Segoe UI', Verdana, sans-serif;
  6 | }
  7 | 
  8 | .showcase::after {
  9 | 	content: '';
 10 | 	height: 100vh;
 11 | 	width: 100%;
 12 | 	background-image: url('../img/showcase.jpeg');
 13 | 	background-size: cover;
 14 | 	background-repeat: no-repeat;
 15 | 	background-position: center;
 16 | 	display: block;
 17 | 	filter: blur(10px);
 18 | 	transition: all 1000ms;
 19 | }
 20 | 
 21 | .showcase:hover::after {
 22 | 	display: block;
 23 | 	filter: blur(0px);
 24 | }
 25 | 
 26 | .showcase:hover .content {
 27 | 	filter: blur(2px);
 28 | }
 29 | 
 30 | .content {
 31 | 	position: absolute;
 32 | 	z-index: 1;
 33 | 	top: 10%;
 34 | 	left: 50%;
 35 | 	margin-top: 105px;
 36 | 	margin-left: -145px;
 37 | 	width: 300px;
 38 | 	height: 350px;
 39 | 	text-align: center;
 40 | 	transition: all 1000ms;
 41 | }
 42 | 
 43 | .content .logo {
 44 | 	height: 180px;
 45 | 	width: 180px;
 46 | }
 47 | 
 48 | .content .title {
 49 | 	font-size: 2.2rem;
 50 | 	margin-top: 1rem;
 51 | }
 52 | 
 53 | .content .text {
 54 | 	line-height: 1.7;
 55 | 	margin-top: 1rem;
 56 | }
 57 | 
 58 | .container {
 59 | 	max-width: 960px;
 60 | 	margin: auto;
 61 | 	overflow: hidden;
 62 | 	padding: 4rem 1rem;
 63 | }
 64 | 
 65 | .grid-3 {
 66 | 	display: grid;
 67 | 	grid-gap: 20px;
 68 | 	grid-template-columns: repeat(3, 1fr);
 69 | }
 70 | 
 71 | .grid-2 {
 72 | 	display: grid;
 73 | 	grid-gap: 20px;
 74 | 	grid-template-columns: repeat(2, 1fr);
 75 | }
 76 | 
 77 | .center {
 78 | 	text-align: center;
 79 | 	margin: auto;
 80 | }
 81 | 
 82 | .bg-light {
 83 | 	background: #f4f4f4;
 84 | 	color: #333;
 85 | }
 86 | 
 87 | .bg-dark {
 88 | 	background: #333;
 89 | 	color: #f4f4f4;
 90 | }
 91 | 
 92 | footer {
 93 | 	padding: 2.2rem;
 94 | }
 95 | 
 96 | footer p {
 97 | 	margin: 0;
 98 | }
 99 | 
100 | @media (max-width: 560px) {
101 | 	.showcase::after {
102 | 		height: 50vh;
103 | 	}
104 | 	.content {
105 | 		top: 5%;
106 | 		margin-top: 5px;
107 | 	}
108 | 	.content .logo {
109 | 		height: 140px;
110 | 		width: 140px;
111 | 	}
112 | 
113 | 	.content .text {
114 | 		display: none;
115 | 	}
116 | 
117 | 	.grid-3,
118 | 	.grid-2 {
119 | 		grid-template-columns: 1fr;
120 | 	}
121 | 
122 | 	.services div {
123 | 		border-bottom: 1px dashed #333;
124 | 		padding: 1.2rem 1rem;
125 | 	}
126 | }
127 | 
128 | @media (max-height: 500px) {
129 | 	.content .title,
130 | 	.content .text {
131 | 		display: none;
132 | 	}
133 | 	.content {
134 | 		top: 0;
135 | 	}
136 | }
137 | 


--------------------------------------------------------------------------------
/02. Elegant Blur Landing/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/02. Elegant Blur Landing/img/logo.png


--------------------------------------------------------------------------------
/02. Elegant Blur Landing/img/showcase.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/02. Elegant Blur Landing/img/showcase.jpeg


--------------------------------------------------------------------------------
/02. Elegant Blur Landing/index.html:
--------------------------------------------------------------------------------
 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 | 		<link rel="stylesheet" href="./css/styles.css" />
 8 | 		<link
 9 | 			rel="stylesheet"
10 | 			href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
11 | 			integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
12 | 			crossorigin="anonymous"
13 | 		/>
14 | 
15 | 		<title>Landing Page</title>
16 | 	</head>
17 | 	<body>
18 | 		<header class="showcase">
19 | 			<div class="content">
20 | 				<img src="./img/logo.png" class="logo" alt="logo" />
21 | 				<div class="title">Welcome To Our Company</div>
22 | 				<div class="text">
23 | 					Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, iure.
24 | 				</div>
25 | 			</div>
26 | 		</header>
27 | 		<section class="services">
28 | 			<div class="container grid-3 center">
29 | 				<div>
30 | 					<i class="fab fa-youtube fa-3x"></i>
31 | 					<h3>YouTube</h3>
32 | 					<p>
33 | 						Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum,
34 | 						maxime.
35 | 					</p>
36 | 				</div>
37 | 				<div>
38 | 					<i class="fas fa-chalkboard-teacher fa-3x"></i>
39 | 					<h3>Services</h3>
40 | 					<p>
41 | 						Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum,
42 | 						maxime.
43 | 					</p>
44 | 				</div>
45 | 				<div>
46 | 					<i class="fas fa-briefcase fa-3x"></i>
47 | 					<h3>Freelance</h3>
48 | 					<p>
49 | 						Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum,
50 | 						maxime.
51 | 					</p>
52 | 				</div>
53 | 			</div>
54 | 		</section>
55 | 
56 | 		<section class="about bg-light">
57 | 			<div class="container grid-2">
58 | 				<div>
59 | 					<div class="center"><i class="fas fa-laptop-code fa-10x"></i></div>
60 | 				</div>
61 | 				<div>
62 | 					<h3>About Us</h3>
63 | 					<p>
64 | 						Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati
65 | 						quos ab rem provident hic voluptates soluta aliquid veritatis
66 | 						dolorum itaque deserunt iste iusto, a cupiditate, voluptate
67 | 						voluptatum repudiandae at eligendi nisi magni porro! Ipsam a ducimus
68 | 						dolor modi eveniet aliquam.
69 | 					</p>
70 | 				</div>
71 | 			</div>
72 | 		</section>
73 | 
74 | 		<footer class="center bg-dark"><p>Landing Page &copy; 2018</p></footer>
75 | 	</body>
76 | </html>
77 | 


--------------------------------------------------------------------------------
/03. Responsive Product Landing (+jQuery)/css/styles.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=PT+Sans');
  2 | 
  3 | /* CSS Variables */
  4 | 
  5 | :root {
  6 | 	--primary-color: #b90415;
  7 | 	--primary-color-hover: #d3071b;
  8 | 	--secondary-color: #103063;
  9 | 	--secondary-color-hover: #104f85;
 10 | 	--light-color: #f4f4f4;
 11 | }
 12 | 
 13 | body {
 14 | 	font-family: 'PT Sans', sans-serif;
 15 | 	background-color: #252529;
 16 | 	margin: 0;
 17 | 	color: #fff;
 18 | }
 19 | 
 20 | img {
 21 | 	width: 100%;
 22 | }
 23 | 
 24 | a {
 25 | 	text-decoration: none;
 26 | 	color: #ccc;
 27 | }
 28 | 
 29 | /* Section */
 30 | 
 31 | .section {
 32 | 	padding: 2rem 0;
 33 | }
 34 | 
 35 | .section-head {
 36 | 	font-size: 2.5rem;
 37 | 	margin: 0;
 38 | }
 39 | 
 40 | .section h3 {
 41 | 	font-size: 2rem;
 42 | }
 43 | 
 44 | section#entertainment {
 45 | 	background: url('../img/section-bg.jpg') no-repeat bottom/cover;
 46 | 	padding: 10rem 0;
 47 | }
 48 | 
 49 | .gift-cards {
 50 | 	display: grid;
 51 | 	grid-gap: 20px;
 52 | 	grid-template-columns: 1fr 1fr;
 53 | 	text-align: left;
 54 | }
 55 | 
 56 | /* Showcase */
 57 | 
 58 | #showcase {
 59 | 	margin: 0;
 60 | 	padding: 0;
 61 | 	background: url('../img/showcase.jpg') no-repeat center/cover;
 62 | 	width: 100%;
 63 | 	height: 100vh;
 64 | 	position: relative;
 65 | 	overflow-y: hidden;
 66 | }
 67 | 
 68 | #showcase .container {
 69 | 	margin-top: 25vh;
 70 | }
 71 | 
 72 | #showcase h1 {
 73 | 	font-size: 4rem;
 74 | 	margin-bottom: 0;
 75 | }
 76 | 
 77 | #showcase h2 {
 78 | 	font-size: 2rem;
 79 | }
 80 | 
 81 | /* Footer */
 82 | 
 83 | footer .footer-cols {
 84 | 	display: grid;
 85 | 	grid-gap: 20px;
 86 | 	grid-template-columns: repeat(4, 1fr);
 87 | 	padding: 2rem;
 88 | 	text-align: left;
 89 | 	font-size: 14px;
 90 | }
 91 | 
 92 | footer .footer-cols ul {
 93 | 	list-style: none;
 94 | }
 95 | 
 96 | footer .footer-cols ul li:first-child {
 97 | 	font-size: 1.2rem;
 98 | 	padding-bottom: 0.5rem;
 99 | 	border-bottom: #444 solid 1px;
100 | 	margin-bottom: 1rem;
101 | }
102 | 
103 | footer .footer-bottom {
104 | 	background: #333;
105 | 	padding: 1rem;
106 | }
107 | 
108 | /* Utility Classes */
109 | 
110 | .container {
111 | 	max-width: 1180px;
112 | 	text-align: center;
113 | 	margin: 0 auto;
114 | 	padding: 0 3rem;
115 | }
116 | 
117 | .lead {
118 | 	font-size: 1.3;
119 | }
120 | 
121 | .text-center {
122 | 	text-align: center;
123 | }
124 | 
125 | /* Buttons */
126 | 
127 | .btn {
128 | 	padding: 1rem;
129 | 	color: #fff;
130 | 	display: inline-block;
131 | }
132 | 
133 | .btn-primary {
134 | 	background: var(--primary-color);
135 | }
136 | 
137 | .btn-primary:hover {
138 | 	background: var(--primary-color-hover);
139 | }
140 | 
141 | .btn-secondary {
142 | 	background: var(--secondary-color);
143 | }
144 | 
145 | .btn-secondary:hover {
146 | 	background: var(--secondary-color-hover);
147 | }
148 | 
149 | /* Text Colors */
150 | 
151 | .text-primary {
152 | 	color: var(--primary-color);
153 | }
154 | 
155 | .text-secondary {
156 | 	color: var(--secondary-color);
157 | }
158 | 
159 | .text-light {
160 | 	color: var(--light-color);
161 | }
162 | 
163 | .light-bg {
164 | 	background: var(--light-color);
165 | 	color: #333;
166 | }
167 | 
168 | .mb {
169 | 	margin-bottom: 1.3rem;
170 | }
171 | 
172 | .mt {
173 | 	margin-top: 1rem;
174 | }
175 | 
176 | /* Navigation */
177 | 
178 | nav {
179 | 	height: 40px;
180 | 	width: 100%;
181 | 	background-color: #333;
182 | 	color: #eee;
183 | 	position: fixed;
184 | }
185 | nav ul {
186 | 	padding: 0;
187 | 	margin: 0;
188 | }
189 | nav li {
190 | 	display: inline-block;
191 | }
192 | nav a {
193 | 	display: inline-block;
194 | 	width: 100px;
195 | 	text-align: center;
196 | 	text-decoration: none;
197 | 	padding: 10px 0;
198 | 	color: #eee;
199 | 	text-decoration: none;
200 | }
201 | nav li:hover {
202 | 	background-color: #444;
203 | }
204 | nav a#openup {
205 | 	display: none;
206 | }
207 | 
208 | @media screen and (max-width: 580px) {
209 | 	.hide-on-small {
210 | 		display: none;
211 | 	}
212 | 
213 | 	#showcase {
214 | 		height: 50vh;
215 | 	}
216 | 
217 | 	#showcase .container {
218 | 		margin-top: 15vh;
219 | 	}
220 | 
221 | 	#showcase h1 {
222 | 		font-size: 3rem;
223 | 	}
224 | 
225 | 	#showcase h2 {
226 | 		font-size: 1.5rem;
227 | 	}
228 | 
229 | 	nav {
230 | 		height: auto;
231 | 		border-bottom: 0;
232 | 	}
233 | 	nav ul {
234 | 		display: none;
235 | 		height: auto;
236 | 	}
237 | 	nav li {
238 | 		width: 100%;
239 | 		float: left;
240 | 		position: relative;
241 | 	}
242 | 	nav a {
243 | 		text-align: left;
244 | 		width: 100%;
245 | 		text-indent: 25px;
246 | 		background: #333;
247 | 		border-bottom: 1px solid #555;
248 | 	}
249 | 	nav a:hover {
250 | 		background: #444;
251 | 	}
252 | 	nav a#openup:after {
253 | 		content: '|||';
254 | 		transform: rotate(-90deg);
255 | 		-ms-transform: rotate(-90deg);
256 | 		/* IE 9 */
257 | 		-webkit-transform: rotate(-90deg);
258 | 		/* Safari and Chrome */
259 | 		width: 30px;
260 | 		height: 30px;
261 | 		display: inline-block;
262 | 		position: absolute;
263 | 		right: 5px;
264 | 		top: 20px;
265 | 	}
266 | 	nav a#openup {
267 | 		display: block;
268 | 		background-color: #333;
269 | 		width: 100%;
270 | 		position: relative;
271 | 	}
272 | }
273 | .cf:before,
274 | .cf:after {
275 | 	content: '';
276 | 	display: table;
277 | }
278 | 
279 | .cf:after {
280 | 	clear: both;
281 | }
282 | 
283 | .cf {
284 | 	zoom: 1;
285 | }
286 | 
287 | /* For IE 6/7 (trigger hasLayout) */
288 | 
289 | @media screen and (max-width: 780px) {
290 | 	.gift-cards {
291 | 		grid-template-columns: 1fr;
292 | 	}
293 | 
294 | 	footer .footer-cols {
295 | 		display: none;
296 | 	}
297 | }
298 | 
299 | @media screen and (max-height: 580px) {
300 | 	#showcase p.lead {
301 | 		display: none;
302 | 	}
303 | }
304 | 


--------------------------------------------------------------------------------
/03. Responsive Product Landing (+jQuery)/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/03. Responsive Product Landing (+jQuery)/favicon.ico


--------------------------------------------------------------------------------
/03. Responsive Product Landing (+jQuery)/img/cards.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/03. Responsive Product Landing (+jQuery)/img/cards.png


--------------------------------------------------------------------------------
/03. Responsive Product Landing (+jQuery)/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/03. Responsive Product Landing (+jQuery)/img/logo.png


--------------------------------------------------------------------------------
/03. Responsive Product Landing (+jQuery)/img/mockup1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/03. Responsive Product Landing (+jQuery)/img/mockup1.png


--------------------------------------------------------------------------------
/03. Responsive Product Landing (+jQuery)/img/mockup2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/03. Responsive Product Landing (+jQuery)/img/mockup2.png


--------------------------------------------------------------------------------
/03. Responsive Product Landing (+jQuery)/img/section-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/03. Responsive Product Landing (+jQuery)/img/section-bg.jpg


--------------------------------------------------------------------------------
/03. Responsive Product Landing (+jQuery)/img/showcase.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/03. Responsive Product Landing (+jQuery)/img/showcase.jpg


--------------------------------------------------------------------------------
/03. Responsive Product Landing (+jQuery)/index.html:
--------------------------------------------------------------------------------
  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 | 		<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
  8 | 		<link
  9 | 			rel="stylesheet"
 10 | 			href="https://use.fontawesome.com/releases/v5.6.0/css/all.css"
 11 | 			integrity="sha384-aOkxzJ5uQz7WBObEZcHvV5JvRW3TUc2rNPA7pe3AwnsUohiw1Vj2Rgx2KSOkF5+h"
 12 | 			crossorigin="anonymous"
 13 | 		/>
 14 | 		<link rel="stylesheet" href="./css/styles.css" />
 15 | 		<title>Welcome to myTunes</title>
 16 | 	</head>
 17 | 	<body>
 18 | 		<!-- Showcase & Nav -->
 19 | 		<div id="showcase">
 20 | 			<header>
 21 | 				<nav class="cf">
 22 | 					<ul class="cf">
 23 | 						<li class="hide-on-small"><a href="#showcase">myTunes</a></li>
 24 | 						<li><a href="#showcase">Overview</a></li>
 25 | 						<li><a href="#music">Music</a></li>
 26 | 						<li><a href="#video">Video</a></li>
 27 | 						<li><a href="#gift-cards">Gift Cards</a></li>
 28 | 					</ul>
 29 | 					<a href="#" id="openup">myTunes</a>
 30 | 				</nav>
 31 | 			</header>
 32 | 			<div class="section-main container">
 33 | 				<h1>myTunes.</h1>
 34 | 				<h2>Your music, movies, and TV shows take center stage.</h2>
 35 | 				<p class="lead hide-on-small">
 36 | 					myTunes is the best way to organize and enjoy the music, movies, and
 37 | 					TV shows you already have — and shop for the ones you want. Enjoy all
 38 | 					the entertainment myTunes has to offer on your Mac and PC.
 39 | 				</p>
 40 | 			</div>
 41 | 		</div>
 42 | 
 43 | 		<!-- Music Section -->
 44 | 
 45 | 		<section id="music" class="section">
 46 | 			<div class="container">
 47 | 				<h2 class="section-head"><i class="fas fa-music"></i> Music</h2>
 48 | 				<h3>45 million songs. Zero ads.</h3>
 49 | 				<p class="lead">
 50 | 					Stream over 45 million songs, ad-free. Or download albums and tracks
 51 | 					to listen to offline. All the music in your personal myTunes library —
 52 | 					no matter where it came from — lives right alongside the Orange Music
 53 | 					catalog. Start your free three-month trial with no commitment, and
 54 | 					cancel anytime.
 55 | 				</p>
 56 | 				<a href="#" class="btn btn-primary mb">Start Your Trial Now</a>
 57 | 				<p class="text-light">
 58 | 					Orange Music is available in myTunes, and for iOS and Android devices.
 59 | 				</p>
 60 | 				<img src="img/mockup1.png" alt="" />
 61 | 			</div>
 62 | 		</section>
 63 | 
 64 | 		<!-- Video Section -->
 65 | 
 66 | 		<section id="video" class="section light-bg">
 67 | 			<div class="container">
 68 | 				<h3>The movie and TV collection you always wished for. Granted.</h3>
 69 | 				<p class="lead">
 70 | 					With over 100,000 movies and TV shows to choose from, there’s always
 71 | 					something great to watch on myTunes and if you watch on Orange TV 4K,
 72 | 					you’ll be able to enjoy a tremendous selection of your favorite
 73 | 					content in 4K HDR. So get ready to enjoy episodes of your favorite TV
 74 | 					shows or hit movies you’ve been waiting to see — anytime, anywhere.
 75 | 					Just tap to play, or even download if you’re going somewhere you won’t
 76 | 					have Wi-Fi.
 77 | 				</p>
 78 | 				<a href="#" class="btn btn-secondary">Read More</a>
 79 | 				<img src="img/mockup2.png" alt="" />
 80 | 			</div>
 81 | 		</section>
 82 | 
 83 | 		<!-- Entertainment Section -->
 84 | 
 85 | 		<section id="entertainment" class="section">
 86 | 			<div class="container">
 87 | 				<h3>A world of entertainment. Available wherever you are.</h3>
 88 | 				<p class="lead">
 89 | 					Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem
 90 | 					veniam nobis, nisi ut expedita, doloribus reprehenderit explicabo non
 91 | 					velit repellat alias saepe inventore repellendus? Molestias suscipit
 92 | 					eos tempora? Quae quaerat cumque in veritatis impedit dolorum sapiente
 93 | 					recusandae minima quo aperiam quam, excepturi quasi totam ad quas?
 94 | 					Ipsam laudantium soluta delectus!
 95 | 				</p>
 96 | 			</div>
 97 | 		</section>
 98 | 
 99 | 		<!-- Giftcard Section -->
100 | 
101 | 		<section id="gift-cards" class="section light-bg">
102 | 			<div class="container">
103 | 				<div class="gift-cards">
104 | 					<div><img src="img/cards.png" alt="" /></div>
105 | 					<div>
106 | 						<h2>Gift Cards</h2>
107 | 						<p>
108 | 							Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque
109 | 							expedita tempore quasi omnis a aut et totam illo fuga accusamus
110 | 							dolorum vero, ut harum consectetur. Minima molestias officiis
111 | 							culpa non sed dicta itaque. Et aliquam illo obcaecati molestias
112 | 							veritatis porro.
113 | 						</p>
114 | 						<p>Already have an Orange MyTunes Music Gift Card?</p>
115 | 						<hr />
116 | 						<a href="#" class="text-secondary">
117 | 							<i class="fas fa-chevron-right"></i> Redeem
118 | 						</a>
119 | 					</div>
120 | 				</div>
121 | 			</div>
122 | 		</section>
123 | 
124 | 		<!-- Footer -->
125 | 
126 | 		<footer>
127 | 			<div class="container">
128 | 				<div class="footer-cols">
129 | 					<ul>
130 | 						<li>Shop & Learn</li>
131 | 						<li><a href="#">Music</a></li>
132 | 						<li><a href="#">Movies</a></li>
133 | 						<li><a href="#">Shows</a></li>
134 | 						<li><a href="#">Apps</a></li>
135 | 						<li><a href="#">Gift Cards</a></li>
136 | 					</ul>
137 | 
138 | 					<ul>
139 | 						<li>Orange Store</li>
140 | 						<li><a href="#">Find a Store</a></li>
141 | 						<li><a href="#">Today at Orange</a></li>
142 | 						<li><a href="#">Orange Camp</a></li>
143 | 						<li><a href="#">Financing</a></li>
144 | 						<li><a href="#">Order Status</a></li>
145 | 					</ul>
146 | 
147 | 					<ul>
148 | 						<li>Education & Business</li>
149 | 						<li><a href="#">Orange & Education</a></li>
150 | 						<li><a href="#">Shop For College</a></li>
151 | 						<li><a href="#">Orange & Business</a></li>
152 | 						<li><a href="#">Shop For Business</a></li>
153 | 						<li><a href="#">Jobs</a></li>
154 | 					</ul>
155 | 
156 | 					<ul>
157 | 						<li>About Orange</li>
158 | 						<li><a href="#">Newsroom</a></li>
159 | 						<li><a href="#">Orange Leadership</a></li>
160 | 						<li><a href="#">Investors</a></li>
161 | 						<li><a href="#">Events</a></li>
162 | 						<li><a href="#">Contact Orange</a></li>
163 | 					</ul>
164 | 				</div>
165 | 			</div>
166 | 			<div class="footer-bottom text-center">
167 | 				Copyright &copy; 2018 Orange myTunes
168 | 			</div>
169 | 		</footer>
170 | 
171 | 		<script
172 | 			src="https://code.jquery.com/jquery-3.3.1.min.js"
173 | 			integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
174 | 			crossorigin="anonymous"
175 | 		></script>
176 | 		<script src="./js/main.js"></script>
177 | 	</body>
178 | </html>
179 | 


--------------------------------------------------------------------------------
/03. Responsive Product Landing (+jQuery)/js/main.js:
--------------------------------------------------------------------------------
 1 | // Responsive Menu
 2 | 
 3 | $(function() {
 4 | 	menu = $('nav ul');
 5 | 
 6 | 	$('#openup').on('click', function(e) {
 7 | 		e.preventDefault();
 8 | 		menu.slideToggle();
 9 | 	});
10 | 
11 | 	$(window).resize(function() {
12 | 		var w = $(this).width();
13 | 		if (w > 580 && menu.is(':hidden')) {
14 | 			menu.removeAttr('style');
15 | 		}
16 | 	});
17 | 
18 | 	$('nav li').on('click', function(e) {
19 | 		var w = $(window).width();
20 | 		if (w < 580) {
21 | 			menu.slideToggle();
22 | 		}
23 | 	});
24 | 	$('.open-menu').height($(window).height());
25 | });
26 | 
27 | // Smooth Scrolling
28 | $('.cf a').on('click', function(event) {
29 | 	if (this.hash !== '') {
30 | 		event.preventDefault();
31 | 
32 | 		const hash = this.hash;
33 | 
34 | 		$('html, body').animate(
35 | 			{
36 | 				scrollTop: $(hash).offset().top
37 | 			},
38 | 			800,
39 | 			function() {
40 | 				window.location.hash = hash;
41 | 			}
42 | 		);
43 | 	}
44 | });
45 | 


--------------------------------------------------------------------------------
/04. Bootstrap Landing/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/04. Bootstrap Landing/.DS_Store


--------------------------------------------------------------------------------
/04. Bootstrap Landing/img/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/04. Bootstrap Landing/img/.DS_Store


--------------------------------------------------------------------------------
/04. Bootstrap Landing/img/b.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/04. Bootstrap Landing/img/b.png


--------------------------------------------------------------------------------
/04. Bootstrap Landing/img/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/04. Bootstrap Landing/img/background.jpg


--------------------------------------------------------------------------------
/04. Bootstrap Landing/img/bootstrap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/04. Bootstrap Landing/img/bootstrap.png


--------------------------------------------------------------------------------
/04. Bootstrap Landing/img/bootstrap2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/04. Bootstrap Landing/img/bootstrap2.png


--------------------------------------------------------------------------------
/04. Bootstrap Landing/img/less.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/04. Bootstrap Landing/img/less.png


--------------------------------------------------------------------------------
/04. Bootstrap Landing/img/mountains.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/04. Bootstrap Landing/img/mountains.jpeg


--------------------------------------------------------------------------------
/04. Bootstrap Landing/img/sass.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/04. Bootstrap Landing/img/sass.png


--------------------------------------------------------------------------------
/04. Bootstrap Landing/img/w3newbie.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/04. Bootstrap Landing/img/w3newbie.png


--------------------------------------------------------------------------------
/04. Bootstrap Landing/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 	<head>
  4 | 		<title>Bootstrap Landing Page Website</title>
  5 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
  6 | 		<link
  7 | 			rel="stylesheet"
  8 | 			href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
  9 | 		/>
 10 | 		<link
 11 | 			rel="stylesheet"
 12 | 			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
 13 | 		/>
 14 | 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 15 | 		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 16 | 		<link href="style.css" rel="stylesheet" />
 17 | 	</head>
 18 | 
 19 | 	<body>
 20 | 		<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
 21 | 			<div class="container-fluid">
 22 | 				<div class="navbar-header">
 23 | 					<button
 24 | 						type="button"
 25 | 						class="navbar-toggle"
 26 | 						data-toggle="collapse"
 27 | 						data-target="#navbar-collapse-main"
 28 | 					>
 29 | 						<span class="sr-only">Toggle Navigation</span>
 30 | 						<span class="icon-bar"></span> <span class="icon-bar"></span>
 31 | 						<span class="icon-bar"></span>
 32 | 					</button>
 33 | 					<a href="#" class="navbar-brand"
 34 | 						><img src="./img/w3newbie.png" alt="W3Nlogo"
 35 | 					/></a>
 36 | 				</div>
 37 | 				<div class="collapse navbar-collapse" id="navbar-collapse-main">
 38 | 					<ul class="nav navbar-nav navbar-right">
 39 | 						<li><a class="active" href="#">Home</a></li>
 40 | 						<li><a href="#">About</a></li>
 41 | 						<li><a href="#">Services</a></li>
 42 | 						<li><a href="#">Testimonials</a></li>
 43 | 						<li><a href="#">Contact</a></li>
 44 | 					</ul>
 45 | 				</div>
 46 | 			</div>
 47 | 		</nav>
 48 | 
 49 | 		<div id="home">
 50 | 			<div class="landing-text">
 51 | 				<h1>BOOTSTRAP</h1>
 52 | 				<h3>Learn the basic building blocks.</h3>
 53 | 				<a href="#" class="btn btn-default btn-lg">Get Started</a>
 54 | 			</div>
 55 | 		</div>
 56 | 
 57 | 		<div class="padding">
 58 | 			<div class="container">
 59 | 				<div class="row">
 60 | 					<div class="col-sm-6"><img src="./img/bootstrap.png" alt="" /></div>
 61 | 					<div class="col-sm-6 text-center">
 62 | 						<h2>All About Using Bootstrap</h2>
 63 | 						<p class="lead">
 64 | 							Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 65 | 							Consequuntur nulla harum ipsam cumque quod eligendi iusto
 66 | 							molestias maiores dicta rerum quasi facere quaerat recusandae
 67 | 							nobis quae repellendus qui magni, vitae sit minus blanditiis quam
 68 | 							nam voluptatem esse? Saepe, voluptatem magnam?
 69 | 						</p>
 70 | 						<p class="lead">
 71 | 							Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 72 | 							Consequuntur nulla harum ipsam cumque quod eligendi iusto
 73 | 							molestias maiores dicta rerum quasi facere quaerat recusandae
 74 | 							nobis quae repellendus qui magni, vitae sit minus blanditiis quam
 75 | 							nam voluptatem esse? Saepe, voluptatem magnam?
 76 | 						</p>
 77 | 					</div>
 78 | 				</div>
 79 | 			</div>
 80 | 		</div>
 81 | 
 82 | 		<div class="padding">
 83 | 			<div class="container">
 84 | 				<div class="row">
 85 | 					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
 86 | 						<h4>Built with Sass</h4>
 87 | 						<p>
 88 | 							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi,
 89 | 							similique atque vel distinctio iusto dignissimos quidem non
 90 | 							aspernatur ipsum error obcaecati molestias adipisci, culpa
 91 | 							asperiores impedit. Voluptas cupiditate rerum nesciunt voluptatem
 92 | 							fugiat? Hic sunt impedit sint illum vitae dolorem porro.
 93 | 						</p>
 94 | 					</div>
 95 | 					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
 96 | 						<img class="img-responsive" src="./img/sass.png" alt="sass-logo" />
 97 | 					</div>
 98 | 					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
 99 | 						<h4>And Less</h4>
100 | 						<p>
101 | 							Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione
102 | 							nihil ullam consequuntur fugiat perspiciatis. Consequatur, tempora
103 | 							architecto explicabo incidunt quos itaque sed magni perferendis
104 | 							nostrum aliquid, laboriosam veniam, saepe hic quidem sit voluptate
105 | 							repellendus? Exercitationem adipisci mollitia soluta? Modi, nisi!
106 | 						</p>
107 | 					</div>
108 | 					<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
109 | 						<img class="img-responsive" src="./img/less.png" alt="less-logo" />
110 | 					</div>
111 | 				</div>
112 | 			</div>
113 | 		</div>
114 | 
115 | 		<div id="fixed"></div>
116 | 
117 | 		<div class="padding">
118 | 			<div class="container">
119 | 				<div class="row">
120 | 					<div class="col-sm-6 text-center">
121 | 						<h4>Here's a cool thing about Bootstrap...</h4>
122 | 						<p>
123 | 							Lorem ipsum dolor sit amet, consectetur adipisicing elit.
124 | 							Consequuntur nulla harum ipsam cumque quod eligendi iusto
125 | 							molestias maiores dicta rerum quasi facere quaerat recusandae
126 | 							nobis quae repellendus qui magni, vitae sit minus blanditiis quam
127 | 							nam voluptatem esse? Saepe, voluptatem magnam?
128 | 						</p>
129 | 						<p>
130 | 							Lorem ipsum dolor sit amet, consectetur adipisicing elit.
131 | 							Consequuntur nulla harum ipsam cumque quod eligendi iusto
132 | 							molestias maiores dicta rerum quasi facere quaerat recusandae
133 | 							nobis quae repellendus qui magni, vitae sit minus blanditiis quam
134 | 							nam voluptatem esse? Saepe, voluptatem magnam?
135 | 						</p>
136 | 					</div>
137 | 					<div class="col-sm-6"><img src="./img/bootstrap2.png" alt="" /></div>
138 | 				</div>
139 | 			</div>
140 | 		</div>
141 | 
142 | 		<footer class="container-fluid text-center">
143 | 			<div class="row">
144 | 				<div class="col-sm-4">
145 | 					<h3>Contact Us</h3>
146 | 					<br />
147 | 					<h4>Our address and contact info here</h4>
148 | 				</div>
149 | 				<div class="col-sm-4">
150 | 					<h3>Connect</h3>
151 | 					<a href="#" class="fa fa-facebook"></a>
152 | 					<a href="#" class="fa fa-twitter"></a>
153 | 					<a href="#" class="fa fa-google"></a>
154 | 					<a href="#" class="fa fa-linkedin"></a>
155 | 					<a href="#" class="fa fa-youtube"></a>
156 | 				</div>
157 | 				<div class="col-sm-4">
158 | 					<img src="./img/b.png" class="icon" alt="b" />
159 | 				</div>
160 | 			</div>
161 | 		</footer>
162 | 	</body>
163 | </html>
164 | 


--------------------------------------------------------------------------------
/04. Bootstrap Landing/style.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 | 	height: 100%;
 4 | 	width: 100%;
 5 | }
 6 | 
 7 | .navbar {
 8 | 	background-color: #23415c;
 9 | 	padding: 1% 0;
10 | 	font-size: 1.2em;
11 | }
12 | 
13 | .navbar-brand {
14 | 	min-height: 55px;
15 | 	padding: 0 15px 5px;
16 | }
17 | 
18 | .navbar-default .navbar-nav li a {
19 | 	color: #d5d5d5;
20 | }
21 | 
22 | .navbar-default .navbar-nav li a:hover,
23 | .navbar-default .navbar-nav li a.active {
24 | 	color: #fff;
25 | }
26 | 
27 | #home {
28 | 	background: url('./img/mountains.jpeg') no-repeat center center fixed;
29 | 	display: table;
30 | 	height: 100%;
31 | 	position: relative;
32 | 	width: 100%;
33 | 	background-size: cover;
34 | }
35 | 
36 | .landing-text {
37 | 	display: table-cell;
38 | 	text-align: center;
39 | 	vertical-align: middle;
40 | }
41 | 
42 | .landing-text h1 {
43 | 	font-size: 5em;
44 | 	font-weight: 700;
45 | }
46 | 
47 | .padding {
48 | 	padding: 80px 0;
49 | }
50 | 
51 | .padding img {
52 | 	width: 100%;
53 | }
54 | 
55 | #fixed {
56 | 	background: url('./img/background.jpg') no-repeat center center fixed;
57 | 	display: table;
58 | 	height: 60%;
59 | 	position: relative;
60 | 	width: 100%;
61 | 	background-size: cover;
62 | }
63 | 
64 | footer {
65 | 	width: 100%;
66 | 	background: #23415c;
67 | 	padding: 5% 5% 10% 5%;
68 | 	color: #fff;
69 | }
70 | 
71 | .fa {
72 | 	padding: 15px;
73 | 	font-size: 25px;
74 | 	color: #fff;
75 | }
76 | 
77 | .fa:hover {
78 | 	color: #d5d5d5;
79 | 	text-decoration: none;
80 | }
81 | 
82 | .icon {
83 | 	max-width: 200px;
84 | }
85 | 
86 | @media (max-width: 768px) {
87 | 	.landing-text h1 {
88 | 		font-size: 300%;
89 | 	}
90 | 	.fa {
91 | 		font-size: 20px;
92 | 		padding: 10px;
93 | 	}
94 | 	.icon {
95 | 		padding-top: 5%;
96 | 		max-width: 100px;
97 | 	}
98 | }
99 | 


--------------------------------------------------------------------------------
/05. Parallax Effect Website/css/styles.css:
--------------------------------------------------------------------------------
 1 | body,
 2 | html {
 3 | 	height: 100%;
 4 | 	margin: 0;
 5 | 	font-size: 16px;
 6 | 	font-family: 'Lato', sans-serif;
 7 | 	font-weight: 400;
 8 | 	line-height: 1.8;
 9 | 	color: #666;
10 | }
11 | 
12 | .pimg1,
13 | .pimg2,
14 | .pimg3 {
15 | 	position: relative;
16 | 	opacity: 0.7;
17 | 	background-position: center;
18 | 	background-size: cover;
19 | 	background-repeat: no-repeat;
20 | 	/* Parallax Effect */
21 | 	background-attachment: fixed;
22 | }
23 | 
24 | .pimg1 {
25 | 	background-image: url('../img/photo1.jpeg');
26 | 	min-height: 100%;
27 | }
28 | 
29 | .pimg2 {
30 | 	background-image: url('../img/photo2.jpg');
31 | 	min-height: 400px;
32 | }
33 | 
34 | .pimg3 {
35 | 	background-image: url('../img/photo3.jpeg');
36 | 	min-height: 400px;
37 | }
38 | 
39 | .section {
40 | 	text-align: center;
41 | 	padding: 50px 80px;
42 | }
43 | 
44 | .section-light {
45 | 	background-color: #f4f4f4;
46 | 	color: #666;
47 | }
48 | 
49 | .section-dark {
50 | 	background-color: #282e34;
51 | 	color: #ddd;
52 | }
53 | 
54 | .ptext {
55 | 	position: absolute;
56 | 	top: 50%;
57 | 	width: 100%;
58 | 	text-align: center;
59 | 	color: #000;
60 | 	font-size: 27px;
61 | 	letter-spacing: 8px;
62 | 	text-transform: uppercase;
63 | }
64 | 
65 | .ptext .border {
66 | 	background-color: #111;
67 | 	color: #fff;
68 | 	padding: 20px;
69 | }
70 | 
71 | @media (max-width: 568px) {
72 | 	.pimg1,
73 | 	.pimg2,
74 | 	.pimg3 {
75 | 		background-attachment: scroll;
76 | 	}
77 | 	.ptext {
78 | 		font-size: 1.1rem;
79 | 	}
80 | 	.section {
81 | 		padding: 40px 40px;
82 | 	}
83 | }
84 | 


--------------------------------------------------------------------------------
/05. Parallax Effect Website/img/photo1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/05. Parallax Effect Website/img/photo1.jpeg


--------------------------------------------------------------------------------
/05. Parallax Effect Website/img/photo2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/05. Parallax Effect Website/img/photo2.jpg


--------------------------------------------------------------------------------
/05. Parallax Effect Website/img/photo3.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/05. Parallax Effect Website/img/photo3.jpeg


--------------------------------------------------------------------------------
/05. Parallax Effect Website/index.html:
--------------------------------------------------------------------------------
 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 | 		<link rel="stylesheet" href="./css/styles.css" />
 8 | 		<title>Paralax Website</title>
 9 | 	</head>
10 | 	<body>
11 | 		<div class="pimg1">
12 | 			<div class="ptext"><span class="border"> Parallax Website </span></div>
13 | 		</div>
14 | 
15 | 		<section class="section section-light">
16 | 			<h2>Section 1</h2>
17 | 			<p>
18 | 				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima eum
19 | 				ipsum laboriosam voluptatibus deserunt ad optio tempore. Dignissimos
20 | 				eius qui excepturi nobis molestias quisquam distinctio quaerat autem,
21 | 				facere minima, odit fugit architecto animi incidunt minus esse deleniti
22 | 				veritatis itaque vel unde modi sit labore amet optio! Vero eligendi
23 | 				corporis hic animi laborum quisquam sequi vitae assumenda labore,
24 | 				ratione explicabo reiciendis? Earum cum pariatur provident esse atque?
25 | 				Soluta facilis, quod quisquam veritatis repudiandae odio architecto quia
26 | 				rerum maxime blanditiis laudantium id autem officia at nesciunt quam
27 | 				officiis quae iusto. Quos facilis, necessitatibus nemo eius quibusdam
28 | 				praesentium numquam quasi soluta error pariatur?
29 | 			</p>
30 | 		</section>
31 | 
32 | 		<div class="pimg2">
33 | 			<div class="ptext"><span class="border"> Image 2 Text </span></div>
34 | 		</div>
35 | 
36 | 		<section class="section section-dark">
37 | 			<h2>Section 2</h2>
38 | 			<p>
39 | 				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima eum
40 | 				ipsum laboriosam voluptatibus deserunt ad optio tempore. Dignissimos
41 | 				eius qui excepturi nobis molestias quisquam distinctio quaerat autem,
42 | 				facere minima, odit fugit architecto animi incidunt minus esse deleniti
43 | 				veritatis itaque vel unde modi sit labore amet optio! Vero eligendi
44 | 				corporis hic animi laborum quisquam sequi vitae assumenda labore,
45 | 				ratione explicabo reiciendis? Earum cum pariatur provident esse atque?
46 | 				Soluta facilis, quod quisquam veritatis repudiandae odio architecto quia
47 | 				rerum maxime blanditiis laudantium id autem officia at nesciunt quam
48 | 				officiis quae iusto. Quos facilis, necessitatibus nemo eius quibusdam
49 | 				praesentium numquam quasi soluta error pariatur?
50 | 			</p>
51 | 		</section>
52 | 
53 | 		<div class="pimg3">
54 | 			<div class="ptext"><span class="border"> Image 3 Text </span></div>
55 | 		</div>
56 | 
57 | 		<section class="section section-dark">
58 | 			<h2>Section 3</h2>
59 | 			<p>
60 | 				Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima eum
61 | 				ipsum laboriosam voluptatibus deserunt ad optio tempore. Dignissimos
62 | 				eius qui excepturi nobis molestias quisquam distinctio quaerat autem,
63 | 				facere minima, odit fugit architecto animi incidunt minus esse deleniti
64 | 				veritatis itaque vel unde modi sit labore amet optio! Vero eligendi
65 | 				corporis hic animi laborum quisquam sequi vitae assumenda labore,
66 | 				ratione explicabo reiciendis? Earum cum pariatur provident esse atque?
67 | 				Soluta facilis, quod quisquam veritatis repudiandae odio architecto quia
68 | 				rerum maxime blanditiis laudantium id autem officia at nesciunt quam
69 | 				officiis quae iusto. Quos facilis, necessitatibus nemo eius quibusdam
70 | 				praesentium numquam quasi soluta error pariatur?
71 | 			</p>
72 | 		</section>
73 | 
74 | 		<div class="pimg1">
75 | 			<div class="ptext"><span class="border"> Parallax Website </span></div>
76 | 		</div>
77 | 	</body>
78 | </html>
79 | 


--------------------------------------------------------------------------------
/06. Coming Soon/css/styles.css:
--------------------------------------------------------------------------------
 1 | * {
 2 | 	font-family: 'montserrat', sans-serif;
 3 | }
 4 | 
 5 | body {
 6 | 	margin: 0;
 7 | 	padding: 0;
 8 | }
 9 | 
10 | .page {
11 | 	background: #d3d9e6;
12 | 	display: flex;
13 | 	flex-wrap: wrap;
14 | }
15 | 
16 | .col {
17 | 	flex: 1;
18 | 	height: 100vh;
19 | 	position: relative;
20 | }
21 | 
22 | .countdown-col {
23 | 	background: url('../img/background.jpg') no-repeat center;
24 | 	background-size: cover;
25 | 	opacity: 0.8;
26 | }
27 | 
28 | .time {
29 | 	color: #fff;
30 | 	text-transform: uppercase;
31 | 	width: 90%;
32 | 	display: flex;
33 | 	justify-content: center;
34 | }
35 | .middle {
36 | 	position: absolute;
37 | 	top: 50%;
38 | 	left: 50%;
39 | 	transform: translate(-50%, -50%);
40 | 	text-align: center;
41 | }
42 | 
43 | .time span {
44 | 	padding: 0 14px;
45 | 	font-size: 10px;
46 | }
47 | 
48 | .time span div {
49 | 	font-size: 40px;
50 | }
51 | 
52 | .newsletter {
53 | 	width: 90%;
54 | }
55 | 
56 | .newsletter h4 {
57 | 	font-style: italic;
58 | 	text-transform: lowercase;
59 | 	font-size: 1rem;
60 | }
61 | 
62 | .newsletter input {
63 | 	display: block;
64 | 	margin: 12px auto;
65 | 	width: 100%;
66 | 	max-width: 400px;
67 | 	padding: 14px 20px;
68 | 	border-radius: 30px;
69 | 	border: 1px solid #ddd;
70 | 	outline: none;
71 | }
72 | 
73 | .newsletter-btn {
74 | 	background: linear-gradient(125deg, #3498db, #34495e);
75 | 	color: #fff;
76 | 	cursor: pointer;
77 | 	text-transform: uppercase;
78 | 	letter-spacing: 4px;
79 | 	font-size: 0.8rem;
80 | 	font-weight: 900;
81 | }
82 | 
83 | .newsletter-btn:hover {
84 | 	opacity: 0.7;
85 | }
86 | 
87 | @media screen and (max-width: 900px) {
88 | 	.col {
89 | 		flex: 100%;
90 | 	}
91 | }
92 | 


--------------------------------------------------------------------------------
/06. Coming Soon/img/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/06. Coming Soon/img/background.jpg


--------------------------------------------------------------------------------
/06. Coming Soon/index.html:
--------------------------------------------------------------------------------
 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 | 		<link rel="stylesheet" href="./css/styles.css" />
 8 | 		<title>Coming Soon</title>
 9 | 	</head>
10 | 	<body>
11 | 		<div class="page">
12 | 			<div class="countdown-col col">
13 | 				<div class="time middle">
14 | 					<span>
15 | 						<div id="d">00</div>
16 | 						Days
17 | 					</span>
18 | 					<span>
19 | 						<div id="h">00</div>
20 | 						Hours
21 | 					</span>
22 | 					<span>
23 | 						<div id="m">00</div>
24 | 						Minutes
25 | 					</span>
26 | 					<span>
27 | 						<div id="s">00</div>
28 | 						Seconds
29 | 					</span>
30 | 				</div>
31 | 			</div>
32 | 			<div class="newsletter-col col">
33 | 				<div class="newsletter middle">
34 | 					<h2>We Will Be Coming Soon</h2>
35 | 					<h4>Subscribe for notification</h4>
36 | 					<form action="">
37 | 						<input type="text" placeholder="Enter Your Email" />
38 | 						<input class="newsletter-btn" type="button" value="Subscribe" />
39 | 					</form>
40 | 				</div>
41 | 			</div>
42 | 		</div>
43 | 
44 | 		<script src="./js/script.js"></script>
45 | 	</body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/06. Coming Soon/js/script.js:
--------------------------------------------------------------------------------
 1 | let comingdate = new Date('Jan 1, 2019 00:00:00');
 2 | 
 3 | const d = document.getElementById('d');
 4 | const h = document.getElementById('h');
 5 | const m = document.getElementById('m');
 6 | const s = document.getElementById('s');
 7 | 
 8 | const countdown = setInterval(() => {
 9 | 	const now = new Date();
10 | 	const des = comingdate.getTime() - now.getTime();
11 | 	const days = Math.floor(des / (1000 * 60 * 60 * 24));
12 | 	const hours = Math.floor((des % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
13 | 	const mins = Math.floor((des % (1000 * 60 * 60)) / (1000 * 60));
14 | 	const secs = Math.floor((des % (1000 * 60)) / 1000);
15 | 
16 | 	d.innerHTML = getTrueNumber(days);
17 | 	h.innerHTML = getTrueNumber(hours);
18 | 	m.innerHTML = getTrueNumber(mins);
19 | 	s.innerHTML = getTrueNumber(secs);
20 | 
21 | 	if (x <= 0) clearInterval(x);
22 | }, 1000);
23 | 
24 | const getTrueNumber = x => (x < 10 ? '0' + x : x);
25 | 


--------------------------------------------------------------------------------
/07. Fade Out Effect/css/styles.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 | 	margin: 0;
 4 | 	padding: 0;
 5 | 	font-family: sans-serif;
 6 | 	width: 100%;
 7 | 	height: 100%;
 8 | }
 9 | 
10 | .section-top {
11 | 	width: 100%;
12 | 	height: 100%;
13 | 	overflow: hidden;
14 | 	position: relative;
15 | 	background: url('../img/bg1.jpg');
16 | 	background-repeat: no-repeat;
17 | 	background-size: cover;
18 | 	animation: slide 10s infinite;
19 | }
20 | 
21 | .content {
22 | 	position: absolute;
23 | 	top: 50%;
24 | 	left: 50%;
25 | 	transform: translate(-50%, -50%);
26 | 	text-transform: uppercase;
27 | 	text-align: center;
28 | }
29 | 
30 | .content h1 {
31 | 	color: #fff;
32 | 	font-size: 3rem;
33 | }
34 | 
35 | .content a {
36 | 	background: #098;
37 | 	color: #fff;
38 | 	padding: 10px 24px;
39 | 	text-decoration: none;
40 | 	font-size: 1.2rem;
41 | 	border-radius: 10px;
42 | }
43 | 
44 | article {
45 | 	font-size: 1.1rem;
46 | 	padding: 10px;
47 | 	line-height: 24px;
48 | }
49 | 
50 | @keyframes slide {
51 | 	0% {
52 | 		background-image: url('../img/bg1.jpg');
53 | 	}
54 | 	33% {
55 | 		background-image: url('../img/bg2.jpeg');
56 | 	}
57 | 	66% {
58 | 		background-image: url('../img/bg3.jpeg');
59 | 	}
60 | }
61 | 


--------------------------------------------------------------------------------
/07. Fade Out Effect/img/bg1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/07. Fade Out Effect/img/bg1.jpg


--------------------------------------------------------------------------------
/07. Fade Out Effect/img/bg2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/07. Fade Out Effect/img/bg2.jpeg


--------------------------------------------------------------------------------
/07. Fade Out Effect/img/bg3.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/07. Fade Out Effect/img/bg3.jpeg


--------------------------------------------------------------------------------
/07. Fade Out Effect/index.html:
--------------------------------------------------------------------------------
 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 | 		<link rel="stylesheet" href="./css/styles.css" />
 8 | 		<title>Fade Out</title>
 9 | 	</head>
10 | 	<body>
11 | 		<section class="section-top">
12 | 			<div class="content">
13 | 				<h1>Hello World!</h1>
14 | 				<a href="#">Sign Up Now</a>
15 | 			</div>
16 | 		</section>
17 | 		<section>
18 | 			<article>
19 | 				Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque non
20 | 				aliquid cupiditate rerum dolores dolore dicta doloribus praesentium
21 | 				laudantium id! Pariatur sunt dolores delectus quibusdam tempore
22 | 				blanditiis vel iusto corrupti fugit, dicta ullam velit accusamus
23 | 				mollitia recusandae reprehenderit quam perspiciatis ut sapiente nobis
24 | 				laborum officia. Repellat, fugit? Facere sit quas rerum deserunt error
25 | 				dicta magni repellendus, velit culpa, ut optio repellat dolorum,
26 | 				consequatur hic voluptatibus molestiae pariatur laborum voluptatum
27 | 				ducimus delectus commodi non nihil libero ipsa. Reiciendis, consectetur
28 | 				odit. Nemo repellat earum amet non ullam dolorum ad velit voluptas,
29 | 				suscipit maxime blanditiis pariatur. Id repudiandae voluptatum
30 | 				consectetur laudantium, tempore corporis! Quis veritatis quam nesciunt,
31 | 				aut dignissimos natus dolores recusandae cumque, quisquam quod est
32 | 				temporibus, incidunt nemo quas eligendi ut vel?
33 | 			</article>
34 | 		</section>
35 | 	</body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/08. Split Landing/css/styles.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 | 	--container-bg-color: #333;
  3 | 	--left-bg-color: rgba(223, 39, 39, 0.7);
  4 | 	--left-button-hover-color: rgba(161, 11, 11, 0.3);
  5 | 	--right-bg-color: rgba(43, 43, 43, 0.8);
  6 | 	--right-button-hover-color: rgba(92, 92, 92, 0.3);
  7 | 	--hover-width: 75%;
  8 | 	--other-width: 25%;
  9 | 	--speed: 1000ms;
 10 | }
 11 | 
 12 | html,
 13 | body {
 14 | 	padding: 0;
 15 | 	margin: 0;
 16 | 	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 17 | 	width: 100%;
 18 | 	height: 100%;
 19 | 	overflow-x: hidden;
 20 | }
 21 | 
 22 | h1 {
 23 | 	font-size: 4rem;
 24 | 	color: #fff;
 25 | 	position: absolute;
 26 | 	left: 50%;
 27 | 	top: 20%;
 28 | 	transform: translateX(-50%);
 29 | 	white-space: nowrap;
 30 | }
 31 | 
 32 | .button {
 33 | 	display: block;
 34 | 	position: absolute;
 35 | 	left: 50%;
 36 | 	top: 40%;
 37 | 	height: 2.5rem;
 38 | 	padding-top: 1.3rem;
 39 | 	width: 15rem;
 40 | 	text-align: center;
 41 | 	color: #fff;
 42 | 	border: #fff solid 0.2rem;
 43 | 	font-size: 1rem;
 44 | 	font-weight: bold;
 45 | 	text-transform: uppercase;
 46 | 	text-decoration: none;
 47 | 	transform: translateX(-50%);
 48 | }
 49 | 
 50 | .split.left .button:hover {
 51 | 	background-color: var(--left-button-hover-color);
 52 | 	border-color: var(--left-button-hover-color);
 53 | }
 54 | 
 55 | .split.right .button:hover {
 56 | 	background-color: var(--right-button-hover-color);
 57 | 	border-color: var(--right-button-hover-color);
 58 | }
 59 | 
 60 | .container {
 61 | 	position: relative;
 62 | 	width: 100%;
 63 | 	height: 100%;
 64 | 	background: var(--container-bg-color);
 65 | }
 66 | 
 67 | .split {
 68 | 	position: absolute;
 69 | 	width: 50%;
 70 | 	height: 100%;
 71 | 	overflow: hidden;
 72 | }
 73 | 
 74 | .split.left {
 75 | 	left: 0;
 76 | 	background: url('../img/bg2.jpeg') center center no-repeat;
 77 | 	background-size: cover;
 78 | }
 79 | 
 80 | .split.left:before {
 81 | 	position: absolute;
 82 | 	content: '';
 83 | 	width: 100%;
 84 | 	height: 100%;
 85 | 	background: var(--left-bg-color);
 86 | }
 87 | 
 88 | .split.right {
 89 | 	right: 0;
 90 | 	background: url('../img/bg1.png') center center no-repeat;
 91 | 	background-size: cover;
 92 | }
 93 | 
 94 | .split.right:before {
 95 | 	position: absolute;
 96 | 	content: '';
 97 | 	width: 100%;
 98 | 	height: 100%;
 99 | 	background: var(--right-bg-color);
100 | }
101 | 
102 | .split.left,
103 | .split.right,
104 | .split.right:before,
105 | .split.left:before {
106 | 	transition: var(--speed) all ease-in-out;
107 | }
108 | 
109 | .hover-left .left {
110 | 	width: var(--hover-width);
111 | }
112 | 
113 | .hover-left .right {
114 | 	width: var(--other-width);
115 | }
116 | 
117 | .hover-left .right:before {
118 | 	z-index: 2;
119 | }
120 | 
121 | .hover-right .right {
122 | 	width: var(--hover-width);
123 | }
124 | 
125 | .hover-right .left {
126 | 	width: var(--other-width);
127 | }
128 | 
129 | .hover-right .left:before {
130 | 	z-index: 2;
131 | }
132 | 
133 | @media (max-width: 800px) {
134 | 	h1 {
135 | 		font-size: 2rem;
136 | 	}
137 | 
138 | 	.button {
139 | 		width: 12rem;
140 | 	}
141 | }
142 | 
143 | @media (max-height: 700px) {
144 | 	.button {
145 | 		top: 70%;
146 | 	}
147 | }
148 | 


--------------------------------------------------------------------------------
/08. Split Landing/img/bg1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/08. Split Landing/img/bg1.png


--------------------------------------------------------------------------------
/08. Split Landing/img/bg2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/08. Split Landing/img/bg2.jpeg


--------------------------------------------------------------------------------
/08. Split Landing/index.html:
--------------------------------------------------------------------------------
 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 | 		<link rel="stylesheet" href="./css/styles.css" />
 8 | 		<title>Split</title>
 9 | 	</head>
10 | 	<body>
11 | 		<div class="container">
12 | 			<div class="split left">
13 | 				<h1>The Designer</h1>
14 | 				<a href="#" class="button">Read More</a>
15 | 			</div>
16 | 			<div class="split right">
17 | 				<h1>The Programmer</h1>
18 | 				<a href="#" class="button">Read More</a>
19 | 			</div>
20 | 		</div>
21 | 		<script src="./scripts/main.js"></script>
22 | 	</body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/08. Split Landing/scripts/main.js:
--------------------------------------------------------------------------------
 1 | const left = document.querySelector('.left');
 2 | const right = document.querySelector('.right');
 3 | const container = document.querySelector('.container');
 4 | 
 5 | left.addEventListener('mouseenter', () => {
 6 | 	container.classList.add('hover-left');
 7 | });
 8 | 
 9 | left.addEventListener('mouseleave', () => {
10 | 	container.classList.remove('hover-left');
11 | });
12 | 
13 | right.addEventListener('mouseenter', () => {
14 | 	container.classList.add('hover-right');
15 | });
16 | 
17 | right.addEventListener('mouseleave', () => {
18 | 	container.classList.remove('hover-right');
19 | });
20 | 


--------------------------------------------------------------------------------
/09. HTML5 Forms/css/styles.css:
--------------------------------------------------------------------------------
  1 | /* 1 - BASE FORM STYLES */
  2 | 
  3 | body {
  4 | 	background: #141414;
  5 | 	margin: 0;
  6 | 	font-family: arial;
  7 | }
  8 | 
  9 | header {
 10 | 	background: #0d0d0d;
 11 | 	padding: 20px;
 12 | 	text-align: center;
 13 | }
 14 | 
 15 | form {
 16 | 	margin: 20px;
 17 | 	color: #eee;
 18 | }
 19 | 
 20 | form p {
 21 | 	font-size: 18px;
 22 | 	letter-spacing: 0.1em;
 23 | }
 24 | 
 25 | /* 2 - RADIO BOX STYLES */
 26 | 
 27 | input[type='radio'] {
 28 | 	opacity: 0;
 29 | 	width: 0;
 30 | 	margin: 0;
 31 | }
 32 | 
 33 | label[for='male'],
 34 | label[for='female'] {
 35 | 	margin-bottom: 10px;
 36 | 	display: inline-block;
 37 | 	padding-left: 26px;
 38 | 	background: url('../img/checks.png') no-repeat;
 39 | 	background-position: 0 -32px;
 40 | 	line-height: 24px;
 41 | 	cursor: pointer;
 42 | }
 43 | 
 44 | input:checked + label[for='male'],
 45 | input:checked + label[for='female'] {
 46 | 	background-position: 0 0;
 47 | 	color: #ce1010;
 48 | }
 49 | 
 50 | /* 3 - CHECKBOX STYLES  */
 51 | 
 52 | input[type='checkbox'] {
 53 | 	opacity: 0;
 54 | 	width: 0;
 55 | 	margin: 0;
 56 | }
 57 | 
 58 | label[for='web'],
 59 | label[for='photoshop'],
 60 | label[for='madonna'] {
 61 | 	display: inline-block;
 62 | 	margin-bottom: 10px;
 63 | 	padding-left: 26px;
 64 | 	background: url('../img/checks.png') no-repeat;
 65 | 	background-position: 0 -98px;
 66 | 	line-height: 24px;
 67 | 	cursor: pointer;
 68 | }
 69 | 
 70 | input:checked + label[for='web'],
 71 | input:checked + label[for='photoshop'],
 72 | input:checked + label[for='madonna'] {
 73 | 	background-position: 0 -65px;
 74 | 	color: #ce1010;
 75 | }
 76 | 
 77 | /* 4 - TEXT INPUT STYLES & FIELDSETS */
 78 | 
 79 | fieldset {
 80 | 	padding: 20px;
 81 | 	margin: 20px 0;
 82 | 	border: 3px solid #222;
 83 | }
 84 | 
 85 | legend {
 86 | 	padding: 10px;
 87 | 	font-size: 18px;
 88 | 	letter-spacing: 0.1em;
 89 | }
 90 | 
 91 | input[type='email'],
 92 | input[type='telephone'] {
 93 | 	display: block;
 94 | 	margin-bottom: 20px;
 95 | 	padding: 10px 10px 10px 50px;
 96 | 	border: 2px solid #222;
 97 | 	border-radius: 4px;
 98 | 	background: url('../img/inputs.png') no-repeat;
 99 | 	background-color: #222;
100 | 	font-size: 16px;
101 | 	color: #fff;
102 | 	float: left;
103 | 	clear: both;
104 | }
105 | 
106 | input[type='email'] {
107 | 	background-position: 7px 8px;
108 | }
109 | 
110 | input[type='telephone'] {
111 | 	background-position: 7px -58px;
112 | }
113 | 
114 | /* 5 - SELECT BOXES */
115 | 
116 | select {
117 | 	-webkit-appearance: none;
118 | 	-moz-appearance: none;
119 | 	-o-appearance: none;
120 | 	-ms-appearance: none;
121 | 	appearance: none;
122 | 
123 | 	display: block;
124 | 	margin: 30px 0;
125 | 	padding: 10px 50px 10px 10px;
126 | 	background: url('../img/select.png') no-repeat 95% center;
127 | 	background-color: #222;
128 | 	color: #fff;
129 | 	border-radius: 4px;
130 | 	border: 2px solid #fff;
131 | 	width: 280px;
132 | }
133 | 
134 | input[type='submit'] {
135 | 	background: #b61111;
136 | 	padding: 15px;
137 | 	color: white;
138 | 	font-size: 20px;
139 | 	letter-spacing: 0.1em;
140 | 	border-radius: 4px;
141 | 	border: 0;
142 | 	box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.5);
143 | 	width: 280px;
144 | }
145 | 
146 | /* 6 - INPUT VALIDATION STYLES */
147 | 
148 | input[type='email']:valid,
149 | input[type='telephone']:valid {
150 | 	border: 2px solid #fff;
151 | }
152 | 
153 | input[type='email']:valid {
154 | 	background-position: 7px -22px;
155 | }
156 | 
157 | input[type='telephone']:valid {
158 | 	background-position: 7px -97px;
159 | }
160 | 
161 | input[type='email']:valid + .tick,
162 | input[type='telephone']:valid + .tick {
163 | 	background: url('../img/tick.png') center;
164 | 	background-size: 100%;
165 | 	display: block;
166 | 	width: 20px;
167 | 	height: 20px;
168 | 	float: left;
169 | 	margin: 10px;
170 | }
171 | 


--------------------------------------------------------------------------------
/09. HTML5 Forms/img/checks.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/09. HTML5 Forms/img/checks.png


--------------------------------------------------------------------------------
/09. HTML5 Forms/img/inputs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/09. HTML5 Forms/img/inputs.png


--------------------------------------------------------------------------------
/09. HTML5 Forms/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/09. HTML5 Forms/img/logo.png


--------------------------------------------------------------------------------
/09. HTML5 Forms/img/select.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/09. HTML5 Forms/img/select.png


--------------------------------------------------------------------------------
/09. HTML5 Forms/img/tick.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/09. HTML5 Forms/img/tick.png


--------------------------------------------------------------------------------
/09. HTML5 Forms/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 	<head>
 3 | 		<link href="./css/styles.css" rel="stylesheet" type="text/css" />
 4 | 	</head>
 5 | 	<body>
 6 | 		<header><img src="img/logo.png" /></header>
 7 | 		<form>
 8 | 			<!-- Gender -->
 9 | 			<p>You are a...</p>
10 | 			<input type="radio" id="male" name="gender" />
11 | 			<label for="male">Male</label><br />
12 | 			<input type="radio" id="female" name="gender" />
13 | 			<label for="female">Female</label>
14 | 
15 | 			<!-- Interests -->
16 | 			<p>Who is interested in...</p>
17 | 			<input type="checkbox" id="web" /> <label for="web">Web development</label
18 | 			><br />
19 | 			<input type="checkbox" id="photoshop" />
20 | 			<label for="photoshop">Photoshop</label><br />
21 | 			<input type="checkbox" id="madonna" />
22 | 			<label for="madonna">Singing Madonna Songs</label>
23 | 
24 | 			<!-- Contact details -->
25 | 			<fieldset>
26 | 				<legend>Contact Info</legend>
27 | 				<input type="email" placeholder="Email" required />
28 | 				<span class="tick"></span>
29 | 				<input type="telephone" placeholder="Phone number" required />
30 | 				<span class="tick"></span>
31 | 			</fieldset>
32 | 			<!-- Preferred -->
33 | 			<p>How would you like to be contacted?</p>
34 | 			<select>
35 | 				<option>By email</option>
36 | 				<option>By telephone</option>
37 | 			</select>
38 | 			<input type="submit" value="Become a Ninja" />
39 | 		</form>
40 | 	</body>
41 | </html>
42 | 


--------------------------------------------------------------------------------
/10. CSS3 Pricing Tables/css/styles.css:
--------------------------------------------------------------------------------
 1 | body {
 2 | 	font-family: 'Tahoma', sans-serif;
 3 | 	background: #333;
 4 | 	color: #fff;
 5 | }
 6 | 
 7 | h2 {
 8 | 	text-align: center;
 9 | }
10 | 
11 | .col {
12 | 	float: left;
13 | 	width: 33.3%;
14 | 	padding: 8px;
15 | 	box-sizing: border-box;
16 | }
17 | 
18 | .price-box {
19 | 	background: #fff;
20 | 	color: #555;
21 | 	list-style-type: none;
22 | 	border: 1px solid #555;
23 | 	margin: 0;
24 | 	padding: 0;
25 | 	transition: 0.3s;
26 | }
27 | 
28 | .price-box:hover,
29 | .price-box.best {
30 | 	box-shadow: 0 10px 15px 0 #000;
31 | }
32 | 
33 | .price-box .header {
34 | 	background-color: #111;
35 | 	color: #fff;
36 | 	font-size: 25px;
37 | }
38 | 
39 | .price-box .header.header-green {
40 | 	background-color: #4caf50;
41 | }
42 | 
43 | .price-box li {
44 | 	padding: 20px;
45 | 	border-bottom: 1px solid #eee;
46 | 	text-align: center;
47 | }
48 | 
49 | .price-box .emph {
50 | 	background-color: #f4f4f4;
51 | 	font-size: 20px;
52 | }
53 | 
54 | .button {
55 | 	background-color: #4caf50;
56 | 	border: none;
57 | 	color: #fff;
58 | 	padding: 10px 15px;
59 | 	text-align: center;
60 | 	text-decoration: none;
61 | 	font-size: 18px;
62 | }
63 | 
64 | @media (max-width: 700px) {
65 | 	.col {
66 | 		width: 100%;
67 | 	}
68 | }
69 | 


--------------------------------------------------------------------------------
/10. CSS3 Pricing Tables/index.html:
--------------------------------------------------------------------------------
 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 | 		<link rel="stylesheet" href="./css/styles.css" />
 8 | 		<title>Document</title>
 9 | 	</head>
10 | 	<body>
11 | 		<h2>Responsive CSS3 Pricing Tables</h2>
12 | 		<div class="col">
13 | 			<ul class="price-box">
14 | 				<li class="header">Simple</li>
15 | 				<li class="emph"><strong>$ 5.99</strong> / Month</li>
16 | 				<li><strong>20GB</strong> Disk Space</li>
17 | 				<li><strong>10GB</strong> Data Transfer</li>
18 | 				<li><strong>2</strong> Domains</li>
19 | 				<li><strong>50</strong> Email Accounts</li>
20 | 				<li><strong>2</strong> FTP Accounts</li>
21 | 				<li class="emph"><a href="#" class="button">Sign Up</a></li>
22 | 			</ul>
23 | 		</div>
24 | 
25 | 		<div class="col">
26 | 			<ul class="price-box best">
27 | 				<li class="header header-green">Standard</li>
28 | 				<li class="emph"><strong>$ 15.99</strong> / Month</li>
29 | 				<li><strong>75GB</strong> Disk Space</li>
30 | 				<li><strong>50GB</strong> Data Transfer</li>
31 | 				<li><strong>10</strong> Domains</li>
32 | 				<li><strong>100</strong> Email Accounts</li>
33 | 				<li><strong>Unlimited</strong> FTP Accounts</li>
34 | 				<li class="emph"><a href="#" class="button">Sign Up</a></li>
35 | 			</ul>
36 | 		</div>
37 | 
38 | 		<div class="col">
39 | 			<ul class="price-box">
40 | 				<li class="header">Simple</li>
41 | 				<li class="emph"><strong>$ 25.99</strong> / Month</li>
42 | 				<li><strong>120GB</strong> Disk Space</li>
43 | 				<li><strong>100GB</strong> Data Transfer</li>
44 | 				<li><strong>Unlimited</strong> Domains</li>
45 | 				<li><strong>Unlimited</strong> Email Accounts</li>
46 | 				<li><strong>UNlimited</strong> FTP Accounts</li>
47 | 				<li class="emph"><a href="#" class="button">Sign Up</a></li>
48 | 			</ul>
49 | 		</div>
50 | 	</body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/11. Fullscreen Video Background/code.mov:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/11. Fullscreen Video Background/code.mov


--------------------------------------------------------------------------------
/11. Fullscreen Video Background/index.html:
--------------------------------------------------------------------------------
 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 | 		<link rel="stylesheet" href="styles.css" />
 8 | 		<title>Video Background</title>
 9 | 	</head>
10 | 	<body>
11 | 		<div class="v-header container">
12 | 			<div class="fullscreen-video-wrap">
13 | 				<video src="code.mov" autoplay="true" loop="true"></video>
14 | 			</div>
15 | 			<div class="header-overlay"></div>
16 | 			<div class="header-content">
17 | 				<h1>Hello Everyone</h1>
18 | 				<p>
19 | 					Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt velit
20 | 					tempora, quod dolore impedit eius saepe provident beatae accusamus
21 | 					quidem dolorem accusantium alias optio obcaecati magni consectetur,
22 | 					aspernatur numquam voluptatibus neque ut. Consectetur quasi sint
23 | 					numquam placeat non repellat explicabo, labore eos eligendi
24 | 					repudiandae. Itaque ea molestiae harum laboriosam earum.
25 | 				</p>
26 | 				<a class="btn" href="#">Read More</a>
27 | 			</div>
28 | 		</div>
29 | 	</body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/11. Fullscreen Video Background/styles.css:
--------------------------------------------------------------------------------
 1 | * {
 2 | 	box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 | 	margin: 0;
 7 | 	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 8 | 	font-size: 1rem;
 9 | 	font-weight: normal;
10 | 	line-height: 1.5;
11 | 	color: #333;
12 | 	overflow-x: hidden;
13 | }
14 | 
15 | .v-header {
16 | 	height: 100vh;
17 | 	display: flex;
18 | 	align-items: center;
19 | 	color: #fff;
20 | }
21 | 
22 | .container {
23 | 	max-width: 960px;
24 | 	padding-left: 1rem;
25 | 	padding-right: 1rem;
26 | 	margin: auto;
27 | 	text-align: center;
28 | }
29 | 
30 | .fullscreen-video-wrap {
31 | 	position: absolute;
32 | 	top: 0;
33 | 	left: 0;
34 | 	width: 100%;
35 | 	height: 100vh;
36 | 	overflow: hidden;
37 | }
38 | 
39 | .fullscreen-video-wrap video {
40 | 	min-height: 100%;
41 | 	min-width: 100%;
42 | }
43 | 
44 | .header-overlay {
45 | 	height: 100vh;
46 | 	position: absolute;
47 | 	top: 0;
48 | 	left: 0;
49 | 	width: 100vw;
50 | 	z-index: 1;
51 | 	background: #225470;
52 | 	opacity: 0.85;
53 | }
54 | 
55 | .header-content {
56 | 	z-index: 2;
57 | }
58 | 
59 | .header-content h1 {
60 | 	font-size: 50px;
61 | 	margin-bottom: 0;
62 | }
63 | 
64 | .header-content p {
65 | 	font-size: 1.5rem;
66 | 	display: block;
67 | 	padding-bottom: 2rem;
68 | }
69 | 
70 | .btn {
71 | 	background: #34b3a0;
72 | 	color: #fff;
73 | 	font-size: 1.2rem;
74 | 	padding: 1rem 2rem;
75 | 	text-decoration: none;
76 | }
77 | 
78 | .section {
79 | 	padding: 20px 0;
80 | }
81 | 
82 | .section-b {
83 | 	background: #333;
84 | 	color: #fff;
85 | }
86 | 
87 | @media (max-width: 960px) {
88 | 	.container {
89 | 		padding-right: 3rem;
90 | 		padding-left: 3rem;
91 | 	}
92 | }
93 | 


--------------------------------------------------------------------------------
/12. Pluralsight Clone/css/styles.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css?family=Roboto:300');
  2 | 
  3 | * {
  4 | 	box-sizing: border-box;
  5 | }
  6 | 
  7 | body {
  8 | 	font-family: 'Roboto', sans-serif;
  9 | 	font-weight: 300;
 10 | 	background: #181818;
 11 | 	color: #fff;
 12 | 	overflow: hidden;
 13 | }
 14 | 
 15 | h1,
 16 | h2,
 17 | h3,
 18 | h4,
 19 | h5,
 20 | h6 {
 21 | 	font-weight: 300;
 22 | }
 23 | 
 24 | #wrapper {
 25 | 	display: flex;
 26 | 	flex-direction: row;
 27 | }
 28 | 
 29 | #left {
 30 | 	display: flex;
 31 | 	flex-direction: column;
 32 | 	flex: 1;
 33 | 	align-items: center;
 34 | 	justify-content: center;
 35 | 	height: 100vh;
 36 | }
 37 | 
 38 | #right {
 39 | 	flex: 1;
 40 | }
 41 | 
 42 | /* Sign In */
 43 | #signin {
 44 | 	display: flex;
 45 | 	flex-direction: column;
 46 | 	justify-content: center;
 47 | 	align-items: center;
 48 | 	width: 80%;
 49 | 	padding-bottom: 1rem;
 50 | }
 51 | 
 52 | #signin form {
 53 | 	width: 80%;
 54 | 	padding-bottom: 3rem;
 55 | }
 56 | 
 57 | #signin .logo {
 58 | 	margin-bottom: 8vh;
 59 | }
 60 | 
 61 | #signin .logo img {
 62 | 	width: 300px;
 63 | }
 64 | 
 65 | #signin label {
 66 | 	font-size: 0.9rem;
 67 | 	line-height: 2rem;
 68 | 	font-weight: 500;
 69 | }
 70 | 
 71 | #signin .text-input {
 72 | 	margin-bottom: 1.3rem;
 73 | 	width: 100%;
 74 | 	border-radius: 2px;
 75 | 	background: #181818;
 76 | 	border: 1px solid #555;
 77 | 	color: #ccc;
 78 | 	padding: 0.5rem 1rem;
 79 | 	line-height: 1.3rem;
 80 | }
 81 | 
 82 | #signin .primary-btn {
 83 | 	width: 100%;
 84 | }
 85 | 
 86 | #signin .secondary-btn,
 87 | .or,
 88 | .links {
 89 | 	width: 60%;
 90 | }
 91 | 
 92 | #signin .links a {
 93 | 	display: block;
 94 | 	color: #fff;
 95 | 	text-decoration: none;
 96 | 	margin-bottom: 1rem;
 97 | 	text-align: center;
 98 | 	font-size: 0.9rem;
 99 | }
100 | 
101 | #signin .or {
102 | 	display: flex;
103 | 	flex-direction: row;
104 | 	margin-bottom: 1.2rem;
105 | 	align-items: center;
106 | }
107 | 
108 | #signin .or .bar {
109 | 	flex: auto;
110 | 	border: none;
111 | 	height: 1px;
112 | 	background: #aaa;
113 | }
114 | 
115 | #signin .or span {
116 | 	color: #ccc;
117 | 	padding: 0 0.8rem;
118 | }
119 | 
120 | /* Showcase */
121 | #showcase {
122 | 	display: flex;
123 | 	justify-content: center;
124 | 	align-items: center;
125 | 	background: url('https://image.ibb.co/cO9Lxq/login-bg.jpg') no-repeat center
126 | 		center / cover;
127 | 	height: 100vh;
128 | 	text-align: center;
129 | }
130 | 
131 | #showcase .showcase-text {
132 | 	font-size: 3rem;
133 | 	width: 100%;
134 | 	color: #fff;
135 | 	margin-bottom: 1.5rem;
136 | }
137 | 
138 | #showcase .secondary-btn {
139 | 	width: 60%;
140 | 	margin: auto;
141 | }
142 | 
143 | /* Footer */
144 | #main-footer {
145 | 	color: #ccc;
146 | 	text-align: center;
147 | 	font-size: 0.8rem;
148 | 	max-width: 80%;
149 | 	padding-top: 5rem;
150 | }
151 | 
152 | #main-footer a {
153 | 	color: #f96816;
154 | 	text-decoration: underline;
155 | }
156 | 
157 | /* Button */
158 | .primary-btn {
159 | 	padding: 0.7rem 1rem;
160 | 	height: 2.7rem;
161 | 	display: block;
162 | 	border: 0;
163 | 	border-radius: 2px;
164 | 	font-weight: 500;
165 | 	background: #f96816;
166 | 	color: #fff;
167 | 	text-decoration: none;
168 | 	cursor: pointer;
169 | 	text-align: center;
170 | 	transition: all 0.5s;
171 | }
172 | 
173 | .primary-btn:hover {
174 | 	background-color: #ff7b39;
175 | }
176 | 
177 | .secondary-btn {
178 | 	padding: 0.7rem 1rem;
179 | 	height: 2.7rem;
180 | 	display: block;
181 | 	border: 1px solid #f4f4f4;
182 | 	border-radius: 2px;
183 | 	font-weight: 500;
184 | 	background: none;
185 | 	color: #fff;
186 | 	text-decoration: none;
187 | 	cursor: pointer;
188 | 	text-align: center;
189 | 	transition: all 0.5s;
190 | }
191 | 
192 | .secondary-btn:hover {
193 | 	border-color: #ff7b39;
194 | 	color: #ff7b39;
195 | }
196 | 
197 | /* Media Queries */
198 | @media (min-width: 1200px) {
199 | 	#left {
200 | 		flex: 4;
201 | 	}
202 | 
203 | 	#right {
204 | 		flex: 6;
205 | 	}
206 | }
207 | 
208 | @media (max-width: 768px) {
209 | 	body {
210 | 		overflow: auto;
211 | 	}
212 | 
213 | 	#right {
214 | 		display: none;
215 | 	}
216 | 
217 | 	#left {
218 | 		justify-content: start;
219 | 		margin-top: 4vh;
220 | 	}
221 | 
222 | 	#signin .logo {
223 | 		margin-bottom: 2vh;
224 | 	}
225 | 
226 | 	#signin .text-input {
227 | 		margin-bottom: 0.7rem;
228 | 	}
229 | 
230 | 	#main-footer {
231 | 		padding-top: 1rem;
232 | 	}
233 | }
234 | 


--------------------------------------------------------------------------------
/12. Pluralsight Clone/index.html:
--------------------------------------------------------------------------------
 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 | 		<link rel="stylesheet" href="./css/styles.css" />
 8 | 		<title>Sluralpright</title>
 9 | 	</head>
10 | 	<body>
11 | 		<div id="wrapper">
12 | 			<div id="left">
13 | 				<div id="signin">
14 | 					<div class="logo">
15 | 						<img
16 | 							src="https://image.ibb.co/hW1YHq/login-logo.png"
17 | 							alt="Sluralpright"
18 | 						/>
19 | 					</div>
20 | 					<form>
21 | 						<div>
22 | 							<label>Email or username</label>
23 | 							<input type="text" class="text-input" />
24 | 						</div>
25 | 						<div>
26 | 							<label>Password</label>
27 | 							<input type="password" class="text-input" />
28 | 						</div>
29 | 						<button type="submit" class="primary-btn">Sign In</button>
30 | 					</form>
31 | 					<div class="links">
32 | 						<a href="#">Forgot Password</a>
33 | 						<a href="#">Sign in with company or school</a>
34 | 					</div>
35 | 					<div class="or">
36 | 						<hr class="bar" />
37 | 						<span>OR</span>
38 | 						<hr class="bar" />
39 | 					</div>
40 | 					<a href="#" class="secondary-btn">Create an account</a>
41 | 				</div>
42 | 				<footer id="main-footer">
43 | 					<p>Copyright &copy; 2018, Sluralpright All Rights Reserved</p>
44 | 					<div>
45 | 						<a href="#">terms of use</a> | <a href="#">Privacy Policy</a>
46 | 					</div>
47 | 				</footer>
48 | 			</div>
49 | 			<div id="right">
50 | 				<div id="showcase">
51 | 					<div class="showcase-content">
52 | 						<h1 class="showcase-text">
53 | 							Let's create the future <strong>together</strong>
54 | 						</h1>
55 | 						<a href="#" class="secondary-btn">Start a FREE 10-day trial</a>
56 | 					</div>
57 | 				</div>
58 | 			</div>
59 | 		</div>
60 | 	</body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/13. Materialize CSS Travel Agency/css/styles.css:
--------------------------------------------------------------------------------
 1 | .section-search input {
 2 | 	padding: 5px !important;
 3 | 	font-size: 18px;
 4 | 	width: 90% !important;
 5 | 	border: #f4f4f4 3px solid !important;
 6 | }
 7 | 
 8 | .section-follow .fa-4x {
 9 | 	margin: 5px 10px;
10 | }
11 | 


--------------------------------------------------------------------------------
/13. Materialize CSS Travel Agency/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 	<head>
  4 | 		<link
  5 | 			href="https://fonts.googleapis.com/icon?family=Material+Icons"
  6 | 			rel="stylesheet"
  7 | 		/>
  8 | 		<link
  9 | 			rel="stylesheet"
 10 | 			href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
 11 | 		/>
 12 | 		<link
 13 | 			rel="stylesheet"
 14 | 			href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
 15 | 			integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
 16 | 			crossorigin="anonymous"
 17 | 		/>
 18 | 		<link rel="stylesheet" href="css/styles.css" />
 19 | 
 20 | 		<title>Travelville</title>
 21 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 22 | 	</head>
 23 | 	<body id="home" class="scrollspy">
 24 | 		<!-- Navbar -->
 25 | 		<div class="navbar-fixed">
 26 | 			<nav class="teal">
 27 | 				<div class="container">
 28 | 					<div class="nav-wrapper">
 29 | 						<a href="#" class="brand-logo">TravelVille</a>
 30 | 						<a href="#" data-target="mobile-demo" class="sidenav-trigger"
 31 | 							><i class="material-icons">menu</i></a
 32 | 						>
 33 | 						<ul class="right hide-on-med-and-down">
 34 | 							<li><a href="#home">Home</a></li>
 35 | 							<li><a href="#search">Search</a></li>
 36 | 							<li><a href="#popular">Popular Places</a></li>
 37 | 							<li><a href="#gallery">Gallery</a></li>
 38 | 							<li><a href="#contact">Contact</a></li>
 39 | 						</ul>
 40 | 					</div>
 41 | 				</div>
 42 | 			</nav>
 43 | 		</div>
 44 | 		<ul class="sidenav" id="mobile-demo">
 45 | 			<li><a href="#home">Home</a></li>
 46 | 			<li><a href="#search">Search</a></li>
 47 | 			<li><a href="#popular">Popular Places</a></li>
 48 | 			<li><a href="#gallery">Gallery</a></li>
 49 | 			<li><a href="#contact">Contact</a></li>
 50 | 		</ul>
 51 | 
 52 | 		<!-- Slider -->
 53 | 
 54 | 		<section class="slider">
 55 | 			<ul class="slides">
 56 | 				<li>
 57 | 					<img src="https://image.ibb.co/hbEMux/resort1.jpg" alt="" />
 58 | 					<div class="caption center-align">
 59 | 						<h2>Take Your Dream Vacation</h2>
 60 | 						<h5 class="light grey-text text-lighten-3 hide-on-small-only">
 61 | 							Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam
 62 | 							non illo earum cumque id est!
 63 | 						</h5>
 64 | 						<a href="#" class="btn btn-large">Learn More</a>
 65 | 					</div>
 66 | 				</li>
 67 | 				<li>
 68 | 					<img src="https://image.ibb.co/mn1egc/resort2.jpg" alt="" />
 69 | 					<div class="caption left-align">
 70 | 						<h2>We Work With All Budgets</h2>
 71 | 						<h5 class="light grey-text text-lighten-3 hide-on-small-only">
 72 | 							Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam
 73 | 							non illo earum cumque id est!
 74 | 						</h5>
 75 | 						<a href="#" class="btn btn-large">Learn More</a>
 76 | 					</div>
 77 | 				</li>
 78 | 				<li>
 79 | 					<img src="https://image.ibb.co/mbCVnH/resort3.jpg" alt="" />
 80 | 					<div class="caption right-align">
 81 | 						<h2>Group & Individual Getaways</h2>
 82 | 						<h5 class="light grey-text text-lighten-3 hide-on-small-only">
 83 | 							Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam
 84 | 							non illo earum cumque id est!
 85 | 						</h5>
 86 | 						<a href="#" class="btn btn-large">Learn More</a>
 87 | 					</div>
 88 | 				</li>
 89 | 			</ul>
 90 | 		</section>
 91 | 
 92 | 		<!-- Section: search -->
 93 | 
 94 | 		<section
 95 | 			class="section section-search teal darken-1 white-text center scrollspy"
 96 | 			id="search"
 97 | 		>
 98 | 			<div class="container">
 99 | 				<div class="row">
100 | 					<div class="col s12">
101 | 						<h3>Search Destinations</h3>
102 | 						<div class="input-field">
103 | 							<input
104 | 								type="text"
105 | 								class="white grey-text autocomplete"
106 | 								id="autocomplete-input"
107 | 								placeholder="Aruba, Cancun, etc..."
108 | 							/>
109 | 						</div>
110 | 					</div>
111 | 				</div>
112 | 			</div>
113 | 		</section>
114 | 
115 | 		<section class="section section-icons grey lighten-4 center">
116 | 			<div class="container">
117 | 				<div class="row">
118 | 					<div class="col s12 m4">
119 | 						<div class="card-panel">
120 | 							<i class="material-icons large teal-text">room</i>
121 | 							<h4>Pick Where</h4>
122 | 							<p>
123 | 								Lorem ipsum dolor sit amet consectetur, adipisicing elit.
124 | 								Quidem, velit.
125 | 							</p>
126 | 						</div>
127 | 					</div>
128 | 					<div class="col s12 m4">
129 | 						<div class="card-panel">
130 | 							<i class="material-icons large teal-text">store</i>
131 | 							<h4>Travel Shop</h4>
132 | 							<p>
133 | 								Lorem ipsum dolor sit amet consectetur, adipisicing elit.
134 | 								Quidem, velit.
135 | 							</p>
136 | 						</div>
137 | 					</div>
138 | 					<div class="col s12 m4">
139 | 						<div class="card-panel">
140 | 							<i class="material-icons large teal-text">airplanemode_active</i>
141 | 							<h4>Fly Cheap</h4>
142 | 							<p>
143 | 								Lorem ipsum dolor sit amet consectetur, adipisicing elit.
144 | 								Quidem, velit.
145 | 							</p>
146 | 						</div>
147 | 					</div>
148 | 				</div>
149 | 			</div>
150 | 		</section>
151 | 
152 | 		<!-- Section: Popular -->
153 | 		<section id="popular" class="section section-popular scrollspy">
154 | 			<div class="container">
155 | 				<div class="row">
156 | 					<h4 class="center"><span class="teal-text">Popular</span> Places</h4>
157 | 					<div class="col s12 m4">
158 | 						<div class="card">
159 | 							<div class="card-image">
160 | 								<img src="https://image.ibb.co/hbEMux/resort1.jpg" alt="" />
161 | 								<span class="card-title">Cancun, Mexico</span>
162 | 							</div>
163 | 							<div class="card-content">
164 | 								<p>
165 | 									Lorem ipsum dolor, sit amet consectetur adipisicing elit.
166 | 									Voluptas aliquid fugiat corporis laudantium, architecto
167 | 									delectus?
168 | 								</p>
169 | 							</div>
170 | 						</div>
171 | 					</div>
172 | 					<div class="col s12 m4">
173 | 						<div class="card">
174 | 							<div class="card-image">
175 | 								<img src="https://image.ibb.co/mn1egc/resort2.jpg" alt="" />
176 | 								<span class="card-title">The Bahamas</span>
177 | 							</div>
178 | 							<div class="card-content">
179 | 								<p>
180 | 									Lorem ipsum dolor, sit amet consectetur adipisicing elit.
181 | 									Voluptas aliquid fugiat corporis laudantium, architecto
182 | 									delectus?
183 | 								</p>
184 | 							</div>
185 | 						</div>
186 | 					</div>
187 | 					<div class="col s12 m4">
188 | 						<div class="card">
189 | 							<div class="card-image">
190 | 								<img src="https://image.ibb.co/mbCVnH/resort3.jpg" alt="" />
191 | 								<span class="card-title">Nova Scotia</span>
192 | 							</div>
193 | 							<div class="card-content">
194 | 								<p>
195 | 									Lorem ipsum dolor, sit amet consectetur adipisicing elit.
196 | 									Voluptas aliquid fugiat corporis laudantium, architecto
197 | 									delectus?
198 | 								</p>
199 | 							</div>
200 | 						</div>
201 | 					</div>
202 | 				</div>
203 | 				<div class="row">
204 | 					<div class="col s12 center">
205 | 						<a href="#contact" class="btn btn-large grey darken-3">
206 | 							<i class="material-icons left">send</i> Contact For Booking
207 | 						</a>
208 | 					</div>
209 | 				</div>
210 | 			</div>
211 | 		</section>
212 | 
213 | 		<!-- Section: Follow -->
214 | 		<section class="section section-follow teal darken-2 white-text center">
215 | 			<div class="container">
216 | 				<div class="row">
217 | 					<div class="col s12">
218 | 						<h4>Follow Travelville</h4>
219 | 						<p>Follow us on social media for special offers</p>
220 | 						<a href="htttps://facebook.com" target="_blank" class="white-text">
221 | 							<i class="fab fa-facebook fa-4x"></i>
222 | 						</a>
223 | 						<a href="htttps://twitter.com" target="_blank" class="white-text">
224 | 							<i class="fab fa-twitter fa-4x"></i>
225 | 						</a>
226 | 						<a href="htttps://linkedin.com" target="_blank" class="white-text">
227 | 							<i class="fab fa-linkedin fa-4x"></i>
228 | 						</a>
229 | 						<a
230 | 							href="htttps://googleplus.com"
231 | 							target="_blank"
232 | 							class="white-text"
233 | 						>
234 | 							<i class="fab fa-google-plus fa-4x"></i>
235 | 						</a>
236 | 						<a href="htttps://pinterest.com" target="_blank" class="white-text">
237 | 							<i class="fab fa-pinterest fa-4x"></i>
238 | 						</a>
239 | 					</div>
240 | 				</div>
241 | 			</div>
242 | 		</section>
243 | 
244 | 		<!-- Section: Gallery -->
245 | 		<section id="gallery" class="section section-gallery scrollspy">
246 | 			<div class="container">
247 | 				<h4 class="center"><span class="teal-text">Photo </span> Gallery</h4>
248 | 				<div class="row">
249 | 					<div class="col s12 m3">
250 | 						<img
251 | 							class="materialboxed responsive-img"
252 | 							src="https://source.unsplash.com/1600x900/?beach"
253 | 							alt=""
254 | 						/>
255 | 					</div>
256 | 					<div class="col s12 m3">
257 | 						<img
258 | 							class="materialboxed responsive-img"
259 | 							src="https://source.unsplash.com/1600x900/?travel"
260 | 							alt=""
261 | 						/>
262 | 					</div>
263 | 					<div class="col s12 m3">
264 | 						<img
265 | 							class="materialboxed responsive-img"
266 | 							src="https://source.unsplash.com/1600x900/?nature"
267 | 							alt=""
268 | 						/>
269 | 					</div>
270 | 					<div class="col s12 m3">
271 | 						<img
272 | 							class="materialboxed responsive-img"
273 | 							src="https://source.unsplash.com/1600x900/?beach, travel"
274 | 							alt=""
275 | 						/>
276 | 					</div>
277 | 				</div>
278 | 
279 | 				<div class="row">
280 | 					<div class="col s12 m3">
281 | 						<img
282 | 							class="materialboxed responsive-img"
283 | 							src="https://source.unsplash.com/1600x900/?beaches"
284 | 							alt=""
285 | 						/>
286 | 					</div>
287 | 					<div class="col s12 m3">
288 | 						<img
289 | 							class="materialboxed responsive-img"
290 | 							src="https://source.unsplash.com/1600x900/?traveling"
291 | 							alt=""
292 | 						/>
293 | 					</div>
294 | 					<div class="col s12 m3">
295 | 						<img
296 | 							class="materialboxed responsive-img"
297 | 							src="https://source.unsplash.com/1600x900/?bridge"
298 | 							alt=""
299 | 						/>
300 | 					</div>
301 | 					<div class="col s12 m3">
302 | 						<img
303 | 							class="materialboxed responsive-img"
304 | 							src="https://source.unsplash.com/1600x900/?boat, travel"
305 | 							alt=""
306 | 						/>
307 | 					</div>
308 | 				</div>
309 | 
310 | 				<div class="row">
311 | 					<div class="col s12 m3">
312 | 						<img
313 | 							class="materialboxed responsive-img"
314 | 							src="https://source.unsplash.com/1600x900/?water"
315 | 							alt=""
316 | 						/>
317 | 					</div>
318 | 					<div class="col s12 m3">
319 | 						<img
320 | 							class="materialboxed responsive-img"
321 | 							src="https://source.unsplash.com/1600x900/?building"
322 | 							alt=""
323 | 						/>
324 | 					</div>
325 | 					<div class="col s12 m3">
326 | 						<img
327 | 							class="materialboxed responsive-img"
328 | 							src="https://source.unsplash.com/1600x900/?trees"
329 | 							alt=""
330 | 						/>
331 | 					</div>
332 | 					<div class="col s12 m3">
333 | 						<img
334 | 							class="materialboxed responsive-img"
335 | 							src="https://source.unsplash.com/1600x900/?cruise"
336 | 							alt=""
337 | 						/>
338 | 					</div>
339 | 				</div>
340 | 			</div>
341 | 		</section>
342 | 
343 | 		<!-- Section: Contact -->
344 | 		<section id="contact" class="section section-contact scrollspy">
345 | 			<div class="container">
346 | 				<div class="row">
347 | 					<div class="col s12 m6">
348 | 						<div class="card-panel teal white-text center">
349 | 							<i class="material-icons medium">email</i>
350 | 							<h5>Contact Us For Booking</h5>
351 | 							<p>
352 | 								Lorem ipsum dolor sit amet consectetur, adipisicing elit.
353 | 								Repellendus sed praesentium delectus. Sit, mollitia quo. Veniam
354 | 								repellat voluptas ipsum doloremque?
355 | 							</p>
356 | 						</div>
357 | 						<ul class="collection with-header">
358 | 							<li class="collection-header"><h4>Location</h4></li>
359 | 							<li class="collection-item">Travelville Agency</li>
360 | 							<li class="collection-item">555 Beach rd, Suite 33</li>
361 | 							<li class="collection-item">Miami FL, 55555</li>
362 | 						</ul>
363 | 					</div>
364 | 					<div class="col s12 m6">
365 | 						<div class="card-panel grey lighten-3">
366 | 							<h5>Please fill out this form</h5>
367 | 							<div class="input-field">
368 | 								<input type="text" placeholder="Name" id="name" />
369 | 								<label for="name">Name</label>
370 | 							</div>
371 | 							<div class="input-field">
372 | 								<input type="email" placeholder="Email" id="email" />
373 | 								<label for="email">Email</label>
374 | 							</div>
375 | 							<div class="input-field">
376 | 								<input type="text" placeholder="Phone" id="phone" />
377 | 								<label for="phone">Phone</label>
378 | 							</div>
379 | 							<div class="input-field">
380 | 								<textarea
381 | 									class="materialize-textarea"
382 | 									placeholder="Enter Message"
383 | 									id="message"
384 | 								></textarea>
385 | 								<label for="message">Message</label>
386 | 							</div>
387 | 							<input type="submit" value="Submit" class="btn" />
388 | 						</div>
389 | 					</div>
390 | 				</div>
391 | 			</div>
392 | 		</section>
393 | 
394 | 		<!-- Footer -->
395 | 		<footer class="section teal darken-2 white-text center">
396 | 			<p class="flow-text">Travelville &copy; 2018</p>
397 | 		</footer>
398 | 
399 | 		<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
400 | 
401 | 		<script>
402 | 			// Sidenav
403 | 			const sideNav = document.querySelector('.sidenav');
404 | 			M.Sidenav.init(sideNav, {});
405 | 
406 | 			//Slider
407 | 			const slider = document.querySelector('.slider');
408 | 			M.Slider.init(slider, {
409 | 				indicators: false,
410 | 				height: 500,
411 | 				transition: 500,
412 | 				interval: 3000
413 | 			});
414 | 
415 | 			// Autocomplete
416 | 			const ac = document.querySelector('.autocomplete');
417 | 			M.Autocomplete.init(ac, {
418 | 				data: {
419 | 					Aruba: null,
420 | 					Cancun: null,
421 | 					Hawaii: null,
422 | 					Florida: null,
423 | 					California: null,
424 | 					Jamaica: null,
425 | 					Europe: null,
426 | 					Bahamas: null
427 | 				}
428 | 			});
429 | 
430 | 			const ss = document.querySelectorAll('.scrollspy');
431 | 			M.ScrollSpy.init(ss, {});
432 | 
433 | 			// Material Boxed
434 | 			const mb = document.querySelectorAll('.materialboxed');
435 | 			M.Materialbox.init(mb, {});
436 | 		</script>
437 | 	</body>
438 | </html>
439 | 


--------------------------------------------------------------------------------
/14. OOP Booklist/css/styles.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/14. OOP Booklist/css/styles.css


--------------------------------------------------------------------------------
/14. OOP Booklist/index.html:
--------------------------------------------------------------------------------
 1 | <html lang="en">
 2 | 	<head>
 3 | 		<meta charset="UTF-8" />
 4 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 5 | 		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
 6 | 		<link
 7 | 			rel="stylesheet"
 8 | 			href="https://bootswatch.com/4/yeti/bootstrap.min.css"
 9 | 		/>
10 | 		<link
11 | 			rel="stylesheet"
12 | 			href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
13 | 			integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
14 | 			crossorigin="anonymous"
15 | 		/>
16 | 		<link rel="stylesheet" href="./css/styles.css" />
17 | 		<title>Booklist App</title>
18 | 	</head>
19 | 	<body>
20 | 		<div class="container mt-4">
21 | 			<h1 class="display-4 text-center">
22 | 				<i class="fas fa-book-open text-primary"></i>My<span
23 | 					class="text-primary"
24 | 					>Book</span
25 | 				>List
26 | 			</h1>
27 | 			<form id="book-form">
28 | 				<div class="form-group">
29 | 					<label for="title">Title</label>
30 | 					<input type="text" id="title" class="form-control" />
31 | 				</div>
32 | 				<div class="form-group">
33 | 					<label for="author">Author</label>
34 | 					<input type="text" id="author" class="form-control" />
35 | 				</div>
36 | 				<div class="form-group">
37 | 					<label for="isbn">ISBN#</label>
38 | 					<input type="text" id="isbn" class="form-control" />
39 | 				</div>
40 | 				<input
41 | 					type="submit"
42 | 					value="Add Book"
43 | 					class="btn btn-primary btn-block"
44 | 				/>
45 | 			</form>
46 | 			<table class="table table-striped">
47 | 				<thead>
48 | 					<tr>
49 | 						<th>Title</th>
50 | 						<th>Author</th>
51 | 						<th>ISBN#</th>
52 | 						<th></th>
53 | 					</tr>
54 | 				</thead>
55 | 				<tbody id="book-list"></tbody>
56 | 			</table>
57 | 		</div>
58 | 
59 | 		<script src="./js/script.js"></script>
60 | 	</body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/14. OOP Booklist/js/script.js:
--------------------------------------------------------------------------------
  1 | // Book Class: Represents a book
  2 | class Book {
  3 | 	constructor(title, author, isbn) {
  4 | 		this.title = title;
  5 | 		this.author = author;
  6 | 		this.isbn = isbn;
  7 | 	}
  8 | }
  9 | 
 10 | // UI Class: Handle UI Tasks
 11 | class UI {
 12 | 	static displayBooks() {
 13 | 		const books = Store.getBooks();
 14 | 
 15 | 		books.forEach(book => UI.addBookToList(book));
 16 | 	}
 17 | 
 18 | 	static addBookToList(book) {
 19 | 		const list = document.querySelector('#book-list');
 20 | 
 21 | 		const row = document.createElement('tr');
 22 | 
 23 | 		row.innerHTML = `
 24 |       <td>${book.title}</td>
 25 |       <td>${book.author}</td>
 26 |       <td>${book.isbn}</td>
 27 |       <td><a href="#" class="btn btn-danger btn-sm delete">X</a></td>
 28 |     `;
 29 | 
 30 | 		list.appendChild(row);
 31 | 	}
 32 | 
 33 | 	static deleteBook(el) {
 34 | 		if (el.classList.contains('delete')) {
 35 | 			el.parentElement.parentElement.remove();
 36 | 		}
 37 | 	}
 38 | 
 39 | 	static showAlert(message, className) {
 40 | 		const div = document.createElement('div');
 41 | 		div.className = `alert alert-${className}`;
 42 | 		div.appendChild(document.createTextNode(message));
 43 | 
 44 | 		const container = document.querySelector('.container');
 45 | 		const form = document.querySelector('#book-form');
 46 | 		container.insertBefore(div, form);
 47 | 
 48 | 		// Vanish in 3 secs
 49 | 		setTimeout(() => {
 50 | 			document.querySelector('.alert').remove();
 51 | 		}, 3000);
 52 | 	}
 53 | 
 54 | 	static clearFields() {
 55 | 		document.querySelector('#title').value = '';
 56 | 		document.querySelector('#author').value = '';
 57 | 		document.querySelector('#isbn').value = '';
 58 | 	}
 59 | }
 60 | 
 61 | // Store Class: Handles Storage
 62 | class Store {
 63 | 	static getBooks() {
 64 | 		let books;
 65 | 		if (localStorage.getItem('books') === null) {
 66 | 			books = [];
 67 | 		} else {
 68 | 			books = JSON.parse(localStorage.getItem('books'));
 69 | 		}
 70 | 
 71 | 		return books;
 72 | 	}
 73 | 
 74 | 	static addBook(book) {
 75 | 		const books = Store.getBooks();
 76 | 
 77 | 		books.push(book);
 78 | 
 79 | 		localStorage.setItem('books', JSON.stringify(books));
 80 | 	}
 81 | 
 82 | 	static removeBook(isbn) {
 83 | 		const books = Store.getBooks();
 84 | 
 85 | 		books.forEach((book, index) => {
 86 | 			if (book.isbn === isbn) {
 87 | 				books.splice(index, 1);
 88 | 			}
 89 | 		});
 90 | 
 91 | 		localStorage.setItem('books', JSON.stringify(books));
 92 | 	}
 93 | }
 94 | 
 95 | // Event: Display Books
 96 | document.addEventListener('DOMContentLoaded', UI.displayBooks);
 97 | 
 98 | // Event: Add a Book
 99 | document.querySelector('#book-form').addEventListener('submit', e => {
100 | 	e.preventDefault();
101 | 	// Get form values
102 | 	const title = document.querySelector('#title').value;
103 | 	const author = document.querySelector('#author').value;
104 | 	const isbn = document.querySelector('#isbn').value;
105 | 
106 | 	// Validate
107 | 	if (!title || !author || !isbn) {
108 | 		UI.showAlert('Please fill in all fields', 'danger');
109 | 	} else {
110 | 		const book = new Book(title, author, isbn);
111 | 
112 | 		// Add Book to UI
113 | 		UI.addBookToList(book);
114 | 
115 | 		// Add book to store
116 | 		Store.addBook(book);
117 | 
118 | 		// Show success message
119 | 		UI.showAlert('Book Added', 'success');
120 | 
121 | 		// Clear fields
122 | 		UI.clearFields();
123 | 	}
124 | });
125 | 
126 | // Event: Remove a Book
127 | document.querySelector('#book-list').addEventListener('click', e => {
128 | 	// Remove book from UI
129 | 	UI.deleteBook(e.target);
130 | 
131 | 	// Remove book from Store
132 | 	Store.removeBook(e.target.parentElement.previousElementSibling.textContent);
133 | 
134 | 	// Show success message
135 | 	UI.showAlert('Book Removed', 'success');
136 | });
137 | 


--------------------------------------------------------------------------------
/15. Natours Project/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/15. Natours Project/css/fonts/linea-basic-10.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/css/fonts/linea-basic-10.eot


--------------------------------------------------------------------------------
/15. Natours Project/css/fonts/linea-basic-10.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/css/fonts/linea-basic-10.ttf


--------------------------------------------------------------------------------
/15. Natours Project/css/fonts/linea-basic-10.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/css/fonts/linea-basic-10.woff


--------------------------------------------------------------------------------
/15. Natours Project/css/icon-font.css:
--------------------------------------------------------------------------------
  1 | @charset "UTF-8";
  2 | 
  3 | @font-face {
  4 |   font-family: "linea-basic-10";
  5 |   src:url("fonts/linea-basic-10.eot");
  6 |   src:url("fonts/linea-basic-10.eot?#iefix") format("embedded-opentype"),
  7 |     url("fonts/linea-basic-10.woff") format("woff"),
  8 |     url("fonts/linea-basic-10.ttf") format("truetype"),
  9 |     url("fonts/linea-basic-10.svg#linea-basic-10") format("svg");
 10 |   font-weight: normal;
 11 |   font-style: normal;
 12 | 
 13 | }
 14 | 
 15 | [data-icon]:before {
 16 |   font-family: "linea-basic-10" !important;
 17 |   content: attr(data-icon);
 18 |   font-style: normal !important;
 19 |   font-weight: normal !important;
 20 |   font-variant: normal !important;
 21 |   text-transform: none !important;
 22 |   speak: none;
 23 |   line-height: 1;
 24 |   -webkit-font-smoothing: antialiased;
 25 |   -moz-osx-font-smoothing: grayscale;
 26 | }
 27 | 
 28 | [class^="icon-"]:before,
 29 | [class*=" icon-"]:before {
 30 |   font-family: "linea-basic-10" !important;
 31 |   font-style: normal !important;
 32 |   font-weight: normal !important;
 33 |   font-variant: normal !important;
 34 |   text-transform: none !important;
 35 |   speak: none;
 36 |   line-height: 1;
 37 |   -webkit-font-smoothing: antialiased;
 38 |   -moz-osx-font-smoothing: grayscale;
 39 | }
 40 | 
 41 | .icon-basic-accelerator:before {
 42 |   content: "a";
 43 | }
 44 | .icon-basic-alarm:before {
 45 |   content: "b";
 46 | }
 47 | .icon-basic-anchor:before {
 48 |   content: "c";
 49 | }
 50 | .icon-basic-anticlockwise:before {
 51 |   content: "d";
 52 | }
 53 | .icon-basic-archive:before {
 54 |   content: "e";
 55 | }
 56 | .icon-basic-archive-full:before {
 57 |   content: "f";
 58 | }
 59 | .icon-basic-ban:before {
 60 |   content: "g";
 61 | }
 62 | .icon-basic-battery-charge:before {
 63 |   content: "h";
 64 | }
 65 | .icon-basic-battery-empty:before {
 66 |   content: "i";
 67 | }
 68 | .icon-basic-battery-full:before {
 69 |   content: "j";
 70 | }
 71 | .icon-basic-battery-half:before {
 72 |   content: "k";
 73 | }
 74 | .icon-basic-bolt:before {
 75 |   content: "l";
 76 | }
 77 | .icon-basic-book:before {
 78 |   content: "m";
 79 | }
 80 | .icon-basic-book-pen:before {
 81 |   content: "n";
 82 | }
 83 | .icon-basic-book-pencil:before {
 84 |   content: "o";
 85 | }
 86 | .icon-basic-bookmark:before {
 87 |   content: "p";
 88 | }
 89 | .icon-basic-calculator:before {
 90 |   content: "q";
 91 | }
 92 | .icon-basic-calendar:before {
 93 |   content: "r";
 94 | }
 95 | .icon-basic-cards-diamonds:before {
 96 |   content: "s";
 97 | }
 98 | .icon-basic-cards-hearts:before {
 99 |   content: "t";
100 | }
101 | .icon-basic-case:before {
102 |   content: "u";
103 | }
104 | .icon-basic-chronometer:before {
105 |   content: "v";
106 | }
107 | .icon-basic-clessidre:before {
108 |   content: "w";
109 | }
110 | .icon-basic-clock:before {
111 |   content: "x";
112 | }
113 | .icon-basic-clockwise:before {
114 |   content: "y";
115 | }
116 | .icon-basic-cloud:before {
117 |   content: "z";
118 | }
119 | .icon-basic-clubs:before {
120 |   content: "A";
121 | }
122 | .icon-basic-compass:before {
123 |   content: "B";
124 | }
125 | .icon-basic-cup:before {
126 |   content: "C";
127 | }
128 | .icon-basic-diamonds:before {
129 |   content: "D";
130 | }
131 | .icon-basic-display:before {
132 |   content: "E";
133 | }
134 | .icon-basic-download:before {
135 |   content: "F";
136 | }
137 | .icon-basic-exclamation:before {
138 |   content: "G";
139 | }
140 | .icon-basic-eye:before {
141 |   content: "H";
142 | }
143 | .icon-basic-eye-closed:before {
144 |   content: "I";
145 | }
146 | .icon-basic-female:before {
147 |   content: "J";
148 | }
149 | .icon-basic-flag1:before {
150 |   content: "K";
151 | }
152 | .icon-basic-flag2:before {
153 |   content: "L";
154 | }
155 | .icon-basic-floppydisk:before {
156 |   content: "M";
157 | }
158 | .icon-basic-folder:before {
159 |   content: "N";
160 | }
161 | .icon-basic-folder-multiple:before {
162 |   content: "O";
163 | }
164 | .icon-basic-gear:before {
165 |   content: "P";
166 | }
167 | .icon-basic-geolocalize-01:before {
168 |   content: "Q";
169 | }
170 | .icon-basic-geolocalize-05:before {
171 |   content: "R";
172 | }
173 | .icon-basic-globe:before {
174 |   content: "S";
175 | }
176 | .icon-basic-gunsight:before {
177 |   content: "T";
178 | }
179 | .icon-basic-hammer:before {
180 |   content: "U";
181 | }
182 | .icon-basic-headset:before {
183 |   content: "V";
184 | }
185 | .icon-basic-heart:before {
186 |   content: "W";
187 | }
188 | .icon-basic-heart-broken:before {
189 |   content: "X";
190 | }
191 | .icon-basic-helm:before {
192 |   content: "Y";
193 | }
194 | .icon-basic-home:before {
195 |   content: "Z";
196 | }
197 | .icon-basic-info:before {
198 |   content: "0";
199 | }
200 | .icon-basic-ipod:before {
201 |   content: "1";
202 | }
203 | .icon-basic-joypad:before {
204 |   content: "2";
205 | }
206 | .icon-basic-key:before {
207 |   content: "3";
208 | }
209 | .icon-basic-keyboard:before {
210 |   content: "4";
211 | }
212 | .icon-basic-laptop:before {
213 |   content: "5";
214 | }
215 | .icon-basic-life-buoy:before {
216 |   content: "6";
217 | }
218 | .icon-basic-lightbulb:before {
219 |   content: "7";
220 | }
221 | .icon-basic-link:before {
222 |   content: "8";
223 | }
224 | .icon-basic-lock:before {
225 |   content: "9";
226 | }
227 | .icon-basic-lock-open:before {
228 |   content: "!";
229 | }
230 | .icon-basic-magic-mouse:before {
231 |   content: "\"";
232 | }
233 | .icon-basic-magnifier:before {
234 |   content: "#";
235 | }
236 | .icon-basic-magnifier-minus:before {
237 |   content: "$";
238 | }
239 | .icon-basic-magnifier-plus:before {
240 |   content: "%";
241 | }
242 | .icon-basic-mail:before {
243 |   content: "&";
244 | }
245 | .icon-basic-mail-multiple:before {
246 |   content: "'";
247 | }
248 | .icon-basic-mail-open:before {
249 |   content: "(";
250 | }
251 | .icon-basic-mail-open-text:before {
252 |   content: ")";
253 | }
254 | .icon-basic-male:before {
255 |   content: "*";
256 | }
257 | .icon-basic-map:before {
258 |   content: "+";
259 | }
260 | .icon-basic-message:before {
261 |   content: ",";
262 | }
263 | .icon-basic-message-multiple:before {
264 |   content: "-";
265 | }
266 | .icon-basic-message-txt:before {
267 |   content: ".";
268 | }
269 | .icon-basic-mixer2:before {
270 |   content: "/";
271 | }
272 | .icon-basic-mouse:before {
273 |   content: ":";
274 | }
275 | .icon-basic-notebook:before {
276 |   content: ";";
277 | }
278 | .icon-basic-notebook-pen:before {
279 |   content: "<";
280 | }
281 | .icon-basic-notebook-pencil:before {
282 |   content: "=";
283 | }
284 | .icon-basic-paperplane:before {
285 |   content: ">";
286 | }
287 | .icon-basic-pencil-ruler:before {
288 |   content: "?";
289 | }
290 | .icon-basic-pencil-ruler-pen:before {
291 |   content: "@";
292 | }
293 | .icon-basic-photo:before {
294 |   content: "[";
295 | }
296 | .icon-basic-picture:before {
297 |   content: "]";
298 | }
299 | .icon-basic-picture-multiple:before {
300 |   content: "^";
301 | }
302 | .icon-basic-pin1:before {
303 |   content: "_";
304 | }
305 | .icon-basic-pin2:before {
306 |   content: "`";
307 | }
308 | .icon-basic-postcard:before {
309 |   content: "{";
310 | }
311 | .icon-basic-postcard-multiple:before {
312 |   content: "|";
313 | }
314 | .icon-basic-printer:before {
315 |   content: "}";
316 | }
317 | .icon-basic-question:before {
318 |   content: "~";
319 | }
320 | .icon-basic-rss:before {
321 |   content: "\\";
322 | }
323 | .icon-basic-server:before {
324 |   content: "\e000";
325 | }
326 | .icon-basic-server2:before {
327 |   content: "\e001";
328 | }
329 | .icon-basic-server-cloud:before {
330 |   content: "\e002";
331 | }
332 | .icon-basic-server-download:before {
333 |   content: "\e003";
334 | }
335 | .icon-basic-server-upload:before {
336 |   content: "\e004";
337 | }
338 | .icon-basic-settings:before {
339 |   content: "\e005";
340 | }
341 | .icon-basic-share:before {
342 |   content: "\e006";
343 | }
344 | .icon-basic-sheet:before {
345 |   content: "\e007";
346 | }
347 | .icon-basic-sheet-multiple:before {
348 |   content: "\e008";
349 | }
350 | .icon-basic-sheet-pen:before {
351 |   content: "\e009";
352 | }
353 | .icon-basic-sheet-pencil:before {
354 |   content: "\e00a";
355 | }
356 | .icon-basic-sheet-txt:before {
357 |   content: "\e00b";
358 | }
359 | .icon-basic-signs:before {
360 |   content: "\e00c";
361 | }
362 | .icon-basic-smartphone:before {
363 |   content: "\e00d";
364 | }
365 | .icon-basic-spades:before {
366 |   content: "\e00e";
367 | }
368 | .icon-basic-spread:before {
369 |   content: "\e00f";
370 | }
371 | .icon-basic-spread-bookmark:before {
372 |   content: "\e010";
373 | }
374 | .icon-basic-spread-text:before {
375 |   content: "\e011";
376 | }
377 | .icon-basic-spread-text-bookmark:before {
378 |   content: "\e012";
379 | }
380 | .icon-basic-star:before {
381 |   content: "\e013";
382 | }
383 | .icon-basic-tablet:before {
384 |   content: "\e014";
385 | }
386 | .icon-basic-target:before {
387 |   content: "\e015";
388 | }
389 | .icon-basic-todo:before {
390 |   content: "\e016";
391 | }
392 | .icon-basic-todo-pen:before {
393 |   content: "\e017";
394 | }
395 | .icon-basic-todo-pencil:before {
396 |   content: "\e018";
397 | }
398 | .icon-basic-todo-txt:before {
399 |   content: "\e019";
400 | }
401 | .icon-basic-todolist-pen:before {
402 |   content: "\e01a";
403 | }
404 | .icon-basic-todolist-pencil:before {
405 |   content: "\e01b";
406 | }
407 | .icon-basic-trashcan:before {
408 |   content: "\e01c";
409 | }
410 | .icon-basic-trashcan-full:before {
411 |   content: "\e01d";
412 | }
413 | .icon-basic-trashcan-refresh:before {
414 |   content: "\e01e";
415 | }
416 | .icon-basic-trashcan-remove:before {
417 |   content: "\e01f";
418 | }
419 | .icon-basic-upload:before {
420 |   content: "\e020";
421 | }
422 | .icon-basic-usb:before {
423 |   content: "\e021";
424 | }
425 | .icon-basic-video:before {
426 |   content: "\e022";
427 | }
428 | .icon-basic-watch:before {
429 |   content: "\e023";
430 | }
431 | .icon-basic-webpage:before {
432 |   content: "\e024";
433 | }
434 | .icon-basic-webpage-img-txt:before {
435 |   content: "\e025";
436 | }
437 | .icon-basic-webpage-multiple:before {
438 |   content: "\e026";
439 | }
440 | .icon-basic-webpage-txt:before {
441 |   content: "\e027";
442 | }
443 | .icon-basic-world:before {
444 |   content: "\e028";
445 | }
446 | 


--------------------------------------------------------------------------------
/15. Natours Project/img/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/favicon.png


--------------------------------------------------------------------------------
/15. Natours Project/img/hero-small.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/hero-small.jpg


--------------------------------------------------------------------------------
/15. Natours Project/img/hero.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/hero.jpg


--------------------------------------------------------------------------------
/15. Natours Project/img/logo-green-1x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/logo-green-1x.png


--------------------------------------------------------------------------------
/15. Natours Project/img/logo-green-2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/logo-green-2x.png


--------------------------------------------------------------------------------
/15. Natours Project/img/logo-green-small-1x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/logo-green-small-1x.png


--------------------------------------------------------------------------------
/15. Natours Project/img/logo-green-small-2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/logo-green-small-2x.png


--------------------------------------------------------------------------------
/15. Natours Project/img/logo-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/logo-white.png


--------------------------------------------------------------------------------
/15. Natours Project/img/nat-1-large.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/nat-1-large.jpg


--------------------------------------------------------------------------------
/15. Natours Project/img/nat-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/nat-1.jpg


--------------------------------------------------------------------------------
/15. Natours Project/img/nat-10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/nat-10.jpg


--------------------------------------------------------------------------------
/15. Natours Project/img/nat-2-large.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/nat-2-large.jpg


--------------------------------------------------------------------------------
/15. Natours Project/img/nat-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/nat-2.jpg


--------------------------------------------------------------------------------
/15. Natours Project/img/nat-3-large.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/nat-3-large.jpg


--------------------------------------------------------------------------------
/15. Natours Project/img/nat-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/nat-3.jpg


--------------------------------------------------------------------------------
/15. Natours Project/img/nat-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/nat-4.jpg


--------------------------------------------------------------------------------
/15. Natours Project/img/nat-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/nat-5.jpg


--------------------------------------------------------------------------------
/15. Natours Project/img/nat-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/nat-6.jpg


--------------------------------------------------------------------------------
/15. Natours Project/img/nat-7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/nat-7.jpg


--------------------------------------------------------------------------------
/15. Natours Project/img/nat-8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/nat-8.jpg


--------------------------------------------------------------------------------
/15. Natours Project/img/nat-9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/nat-9.jpg


--------------------------------------------------------------------------------
/15. Natours Project/img/video.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/video.mp4


--------------------------------------------------------------------------------
/15. Natours Project/img/video.webm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/img/video.webm


--------------------------------------------------------------------------------
/15. Natours Project/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "natours",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "watch:sass": "node-sass sass/main.scss css/style.css -w",
 8 |     "dev-server": "live-server",
 9 |     "start": "npm-run-all --parallel dev-server watch:sass",
10 |     "compile:sass": "node-sass sass/main.scss css/style.comp.css",
11 |     "concat:sass": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css",
12 |     "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.concat.css -o css/style.prefix.css",
13 |     "compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
14 |     "build:css": "npm-run-all compile:sass concat:sass prefix:css compress:css"
15 |   },
16 |   "author": "",
17 |   "license": "ISC",
18 |   "devDependencies": {
19 |     "autoprefixer": "^9.5.0",
20 |     "concat": "^1.0.3",
21 |     "node-sass": "^4.11.0",
22 |     "npm-run-all": "^4.1.5",
23 |     "postcss-cli": "^6.1.2"
24 |   },
25 |   "dependencies": {}
26 | }
27 | 


--------------------------------------------------------------------------------
/15. Natours Project/sass/abstracts/_functions.scss:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/15. Natours Project/sass/abstracts/_functions.scss


--------------------------------------------------------------------------------
/15. Natours Project/sass/abstracts/_mixins.scss:
--------------------------------------------------------------------------------
 1 | @mixin clearfix {
 2 | 	&::after {
 3 | 		content: '';
 4 | 		display: table;
 5 | 		clear: both;
 6 | 	}
 7 | }
 8 | 
 9 | @mixin absCenter {
10 | 	position: absolute;
11 | 	top: 50%;
12 | 	left: 50%;
13 | 	transform: translate(-50%, -50%);
14 | }
15 | 
16 | // MEDIA QUERY MANAGER
17 | /*
18 | 0 - 600px:      Phone
19 | 600 - 900px:    Tablet portrait
20 | 900 - 1200px:   Tablet landscape
21 | [1200 - 1800] is where our normal styles apply
22 | 1800px + :      Big desktop
23 | 
24 | $breakpoint arguement choices:
25 | - phone
26 | - tab-port
27 | - tab-land
28 | - big-desktop
29 | ORDER: Base + typography > general layout + grid > page layout > components
30 | 1em = 16px
31 | */
32 | @mixin respond($breakpoint) {
33 | 	@if $breakpoint == phone {
34 | 		@media only screen and (max-width: 37.5em) {
35 | 			@content;
36 | 		} //600px
37 | 	}
38 | 	@if $breakpoint == tab-port {
39 | 		@media only screen and (max-width: 56.25em) {
40 | 			@content;
41 | 		} //900px
42 | 	}
43 | 	@if $breakpoint == tab-land {
44 | 		@media only screen and (max-width: 75em) {
45 | 			@content;
46 | 		} //1200px
47 | 	}
48 | 	@if $breakpoint == big-desktop {
49 | 		@media only screen and (min-width: 112.5em) {
50 | 			@content;
51 | 		} //1800
52 | 	}
53 | }
54 | 


--------------------------------------------------------------------------------
/15. Natours Project/sass/abstracts/_variables.scss:
--------------------------------------------------------------------------------
 1 | // COLORS
 2 | $color-primary: #55c57a;
 3 | $color-primary-light: #7ed56f;
 4 | $color-primary-dark: #28b485;
 5 | 
 6 | $color-secondary-light: #ffb900;
 7 | $color-secondary-dark: #ff7700;
 8 | 
 9 | $color-tertiary-light: #2998ff;
10 | $color-tertiary-dark: #5643fa;
11 | 
12 | $color-grey-light-1: #f7f7f7;
13 | $color-grey-light-2: #eee;
14 | 
15 | $color-grey-dark: #777;
16 | $color-grey-dark-2: #999;
17 | $color-grey-dark-3: #333;
18 | 
19 | $color-white: #fff;
20 | $color-black: #000;
21 | 
22 | // FONT
23 | $default-font-size: 1.6rem;
24 | 
25 | // GRID
26 | $grid-width: 114rem;
27 | $gutter-vertical: 8rem;
28 | $gutter-vertical-small: 6rem;
29 | $gutter-horizontal: 6rem;
30 | 


--------------------------------------------------------------------------------
/15. Natours Project/sass/base/_animations.scss:
--------------------------------------------------------------------------------
 1 | @keyframes moveInLeft {
 2 | 	0% {
 3 | 		opacity: 0;
 4 | 		transform: translateX(-10rem);
 5 | 	}
 6 | 
 7 | 	80% {
 8 | 		transform: translate(1rem);
 9 | 	}
10 | 
11 | 	100% {
12 | 		opacity: 1;
13 | 		transform: translate(0);
14 | 	}
15 | }
16 | 
17 | @keyframes moveInRight {
18 | 	0% {
19 | 		opacity: 0;
20 | 		transform: translateX(10rem);
21 | 	}
22 | 
23 | 	80% {
24 | 		transform: translate(-1rem);
25 | 	}
26 | 
27 | 	100% {
28 | 		opacity: 1;
29 | 		transform: translate(0);
30 | 	}
31 | }
32 | 
33 | @keyframes moveInBottom {
34 | 	0% {
35 | 		opacity: 0;
36 | 		transform: translateY(50px);
37 | 	}
38 | 
39 | 	100% {
40 | 		opacity: 1;
41 | 		transform: translate(0);
42 | 	}
43 | }
44 | 


--------------------------------------------------------------------------------
/15. Natours Project/sass/base/_base.scss:
--------------------------------------------------------------------------------
 1 | *,
 2 | *::after,
 3 | *::before {
 4 | 	margin: 0;
 5 | 	padding: 0;
 6 | 	box-sizing: inherit;
 7 | }
 8 | 
 9 | html {
10 | 	// This defines what 1rem is
11 | 	font-size: 62.5%; // 1rem = 10px; 10px/16px = 62.5%
12 | 
13 | 	@include respond(tab-land) {
14 | 		// width < 1200?
15 | 		font-size: 56.25%; // 1rem = 9px, 9/16 = 50%
16 | 	}
17 | 
18 | 	@include respond(tab-port) {
19 | 		// width < 900?
20 | 		font-size: 50%; // 1rem = 8px, 8/16 = 50%
21 | 	}
22 | 
23 | 	@include respond(big-desktop) {
24 | 		font-size: 75%; // 1rem = 12, 12/16
25 | 	}
26 | }
27 | 
28 | body {
29 | 	box-sizing: border-box;
30 | 	padding: 3rem;
31 | 
32 | 	@include respond(tab-port) {
33 | 		padding: 0;
34 | 	}
35 | }
36 | 
37 | ::selection {
38 | 	background-color: $color-primary;
39 | 	color: $color-white;
40 | }
41 | 


--------------------------------------------------------------------------------
/15. Natours Project/sass/base/_typography.scss:
--------------------------------------------------------------------------------
 1 | body {
 2 | 	font-family: 'Lato', sans-serif;
 3 | 	font-weight: 400;
 4 | 	line-height: 1.7;
 5 | 	color: $color-grey-dark;
 6 | }
 7 | 
 8 | .heading-primary {
 9 | 	color: $color-white;
10 | 	text-transform: uppercase;
11 | 
12 | 	backface-visibility: hidden;
13 | 	margin-bottom: 6rem;
14 | 
15 | 	&--main {
16 | 		display: block;
17 | 		font-size: 6rem;
18 | 		font-weight: 400;
19 | 		letter-spacing: 3.5rem;
20 | 		animation-name: moveInLeft;
21 | 		animation-duration: 1s;
22 | 		animation-timing-function: ease-out;
23 | 
24 | 		@include respond(phone) {
25 | 			letter-spacing: 1rem;
26 | 			font-size: 5rem;
27 | 		}
28 | 	}
29 | 
30 | 	&--sub {
31 | 		display: block;
32 | 		font-size: 2rem;
33 | 		font-weight: 700;
34 | 		letter-spacing: 1rem;
35 | 		animation-name: moveInRight;
36 | 		animation-duration: 1s;
37 | 		animation-timing-function: ease-out;
38 | 
39 | 		@include respond(phone) {
40 | 			letter-spacing: 0.5rem;
41 | 		}
42 | 	}
43 | }
44 | 
45 | .heading-secondary {
46 | 	font-size: 3.5rem;
47 | 	text-transform: uppercase;
48 | 	font-weight: 700;
49 | 	display: inline-block;
50 | 	background-image: linear-gradient(
51 | 		to right,
52 | 		$color-primary-light,
53 | 		$color-primary-dark
54 | 	);
55 | 	background-clip: text;
56 | 	-webkit-background-clip: text;
57 | 	color: transparent;
58 | 	letter-spacing: 2px;
59 | 	transition: all 0.2s;
60 | 
61 | 	@include respond(tab-port) {
62 | 		font-size: 3rem;
63 | 	}
64 | 
65 | 	@include respond(phone) {
66 | 		font-size: 2.5rem;
67 | 	}
68 | 
69 | 	&:hover {
70 | 		transform: skewY(2deg) skewX(15deg) scale(1.1);
71 | 		text-shadow: 0.5rem 1rem 2rem rgba($color-black, 0.2);
72 | 	}
73 | }
74 | 
75 | .heading-tertiary {
76 | 	font-size: $default-font-size;
77 | 	font-weight: 700;
78 | 	text-transform: uppercase;
79 | }
80 | 
81 | .paragraph {
82 | 	font-size: $default-font-size;
83 | 
84 | 	&:not(:last-child) {
85 | 		margin-bottom: 3rem;
86 | 	}
87 | }
88 | 


--------------------------------------------------------------------------------
/15. Natours Project/sass/base/_utilities.scss:
--------------------------------------------------------------------------------
 1 | .u-center-text {
 2 | 	text-align: center !important;
 3 | }
 4 | 
 5 | .u-margin-bottom-big {
 6 | 	margin-bottom: 8rem !important;
 7 | 
 8 | 	@include respond(tab-port) {
 9 | 		margin-bottom: 5rem !important;
10 | 	}
11 | }
12 | 
13 | .u-margin-bottom-medium {
14 | 	margin-bottom: 4rem !important;
15 | 
16 | 	@include respond(tab-port) {
17 | 		margin-bottom: 3rem !important;
18 | 	}
19 | }
20 | 
21 | .u-margin-bottom-small {
22 | 	margin-bottom: 1.2rem !important;
23 | }
24 | 
25 | .u-margin-top-big {
26 | 	margin-top: 8rem !important;
27 | }
28 | 
29 | .u-margin-top-huge {
30 | 	margin-top: 10rem !important;
31 | }
32 | 


--------------------------------------------------------------------------------
/15. Natours Project/sass/components/_bg-video.scss:
--------------------------------------------------------------------------------
 1 | .bg-video {
 2 | 	position: absolute;
 3 | 	top: 0;
 4 | 	top: 0;
 5 | 	width: 100%;
 6 | 	height: 100%;
 7 | 	z-index: -1;
 8 | 	opacity: 0.15;
 9 | 	overflow: hidden;
10 | 
11 | 	&__content {
12 | 		width: 100%;
13 | 		height: 100%;
14 | 		object-fit: cover;
15 | 	}
16 | }
17 | 


--------------------------------------------------------------------------------
/15. Natours Project/sass/components/_button.scss:
--------------------------------------------------------------------------------
 1 | .btn {
 2 | 	&,
 3 | 	&:link,
 4 | 	&:visited {
 5 | 		text-transform: uppercase;
 6 | 		text-decoration: none;
 7 | 		padding: 1.5rem 4rem;
 8 | 		display: inline-block;
 9 | 		border-radius: 10rem;
10 | 		transition: all 0.2s;
11 | 		position: relative;
12 | 		font-size: 1.6rem;
13 | 
14 | 		// Change for the <button> element
15 | 		border: none;
16 | 		cursor: pointer;
17 | 	}
18 | 
19 | 	&:hover {
20 | 		transform: translateY(-3px);
21 | 		box-shadow: 0 1rem 2rem rgba($color-black, 0.2);
22 | 		&::after {
23 | 			transform: scale(1.5);
24 | 			opacity: 0;
25 | 		}
26 | 	}
27 | 
28 | 	&:active,
29 | 	&:focus {
30 | 		outline: none;
31 | 		transform: translateY(-1px);
32 | 		box-shadow: 0 0.5rem 1rem rgba($color-black, 0.2);
33 | 	}
34 | 
35 | 	&--white {
36 | 		background-color: $color-white;
37 | 		color: $color-grey-dark;
38 | 		&::after {
39 | 			background-color: $color-white;
40 | 		}
41 | 	}
42 | 
43 | 	&--green {
44 | 		background-color: $color-primary;
45 | 		color: $color-white;
46 | 		&::after {
47 | 			background-color: $color-primary;
48 | 		}
49 | 	}
50 | 
51 | 	&::after {
52 | 		content: '';
53 | 		display: inline-block;
54 | 		height: 100%;
55 | 		width: 100%;
56 | 		border-radius: 10rem;
57 | 		position: absolute;
58 | 		top: 0;
59 | 		left: 0;
60 | 		z-index: -1;
61 | 		transition: all 0.4s;
62 | 	}
63 | 
64 | 	&--animated {
65 | 		animation: moveInBottom 0.5s ease-out 0.75s;
66 | 		animation-fill-mode: backwards;
67 | 	}
68 | }
69 | 
70 | .btn-text {
71 | 	&:link,
72 | 	&:visited {
73 | 		font-size: $default-font-size;
74 | 		color: $color-primary;
75 | 		display: inline-block;
76 | 		text-decoration: none;
77 | 		border-bottom: 1px solid $color-primary;
78 | 		padding: 3px;
79 | 		transition: all 0.2s;
80 | 	}
81 | 	&:hover {
82 | 		background-color: $color-primary;
83 | 		color: $color-white;
84 | 		box-shadow: 0 1rem 2rem rgba($color-black, 0.15);
85 | 		transform: translateY(-2px);
86 | 	}
87 | 
88 | 	&:active {
89 | 		box-shadow: 0 1.5rem 1rem rgba($color-black, 0.15);
90 | 		transform: translateY(0);
91 | 	}
92 | }
93 | 


--------------------------------------------------------------------------------
/15. Natours Project/sass/components/_card.scss:
--------------------------------------------------------------------------------
  1 | .card {
  2 | 	// FUNCTIONALITY
  3 | 	perspective: 150rem;
  4 | 	-moz-perspective: 150rem;
  5 | 	position: relative;
  6 | 	height: 52rem;
  7 | 
  8 | 	&__side {
  9 | 		height: 52rem;
 10 | 		transition: all 0.8s ease;
 11 | 		position: absolute;
 12 | 		top: 0;
 13 | 		left: 0;
 14 | 		width: 100%;
 15 | 		-webkit-backface-visibility: hidden;
 16 | 		backface-visibility: hidden;
 17 | 		border-radius: 3px;
 18 | 		overflow: hidden;
 19 | 		box-shadow: 0 1.5rem 40px rgba($color-black, 0.15);
 20 | 
 21 | 		&--front {
 22 | 			background-color: $color-white;
 23 | 		}
 24 | 		&--back {
 25 | 			transform: rotateY(180deg);
 26 | 
 27 | 			&--1 {
 28 | 				background-image: linear-gradient(
 29 | 					to right bottom,
 30 | 					$color-secondary-light,
 31 | 					$color-secondary-dark
 32 | 				);
 33 | 			}
 34 | 			&--2 {
 35 | 				background-image: linear-gradient(
 36 | 					to right bottom,
 37 | 					$color-primary-light,
 38 | 					$color-primary-dark
 39 | 				);
 40 | 			}
 41 | 			&--3 {
 42 | 				background-image: linear-gradient(
 43 | 					to right bottom,
 44 | 					$color-tertiary-light,
 45 | 					$color-tertiary-dark
 46 | 				);
 47 | 			}
 48 | 		}
 49 | 	}
 50 | 
 51 | 	&:hover &__side--front {
 52 | 		transform: rotateY(-180deg);
 53 | 	}
 54 | 
 55 | 	&:hover &__side--back {
 56 | 		transform: rotateY(0);
 57 | 	}
 58 | 
 59 | 	// FRONT SIDE STYLING
 60 | 	&__picture {
 61 | 		background-size: cover;
 62 | 		height: 23rem;
 63 | 		background-blend-mode: screen;
 64 | 		clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
 65 | 		border-top-left-radius: 3px;
 66 | 		border-top-right-radius: 3px;
 67 | 
 68 | 		&--1 {
 69 | 			background-image: linear-gradient(
 70 | 					to right bottom,
 71 | 					$color-secondary-light,
 72 | 					$color-secondary-dark
 73 | 				),
 74 | 				url(../img/nat-5.jpg);
 75 | 		}
 76 | 
 77 | 		&--2 {
 78 | 			background-image: linear-gradient(
 79 | 					to right bottom,
 80 | 					$color-primary-light,
 81 | 					$color-primary-dark
 82 | 				),
 83 | 				url(../img/nat-6.jpg);
 84 | 		}
 85 | 
 86 | 		&--3 {
 87 | 			background-image: linear-gradient(
 88 | 					to right bottom,
 89 | 					$color-tertiary-light,
 90 | 					$color-tertiary-dark
 91 | 				),
 92 | 				url(../img/nat-7.jpg);
 93 | 		}
 94 | 	}
 95 | 
 96 | 	&__heading {
 97 | 		font-size: 2.8rem;
 98 | 		font-weight: 300;
 99 | 		text-transform: uppercase;
100 | 		text-align: right;
101 | 		color: $color-white;
102 | 		position: absolute;
103 | 		top: 12rem;
104 | 		right: 2rem;
105 | 		width: 75%;
106 | 	}
107 | 
108 | 	&__heading-span {
109 | 		padding: 1rem 1.5rem;
110 | 		-webkit-box-decoration-break: clone;
111 | 		box-decoration-break: clone;
112 | 
113 | 		&--1 {
114 | 			background-image: linear-gradient(
115 | 				to right bottom,
116 | 				rgba($color-secondary-light, 0.85),
117 | 				rgba($color-secondary-dark, 0.85)
118 | 			);
119 | 		}
120 | 
121 | 		&--2 {
122 | 			background-image: linear-gradient(
123 | 				to right bottom,
124 | 				rgba($color-primary-light, 0.85),
125 | 				rgba($color-primary-dark, 0.85)
126 | 			);
127 | 		}
128 | 
129 | 		&--3 {
130 | 			background-image: linear-gradient(
131 | 				to right bottom,
132 | 				rgba($color-tertiary-light, 0.85),
133 | 				rgba($color-tertiary-dark, 0.85)
134 | 			);
135 | 		}
136 | 	}
137 | 
138 | 	&__details {
139 | 		padding: 3rem;
140 | 
141 | 		ul {
142 | 			list-style: none;
143 | 			width: 80%;
144 | 			margin: 0 auto;
145 | 
146 | 			li {
147 | 				text-align: center;
148 | 				font-size: 1.5rem;
149 | 				padding: 1rem;
150 | 
151 | 				&:not(:last-child) {
152 | 					border-bottom: 1px solid $color-grey-light-2;
153 | 				}
154 | 			}
155 | 		}
156 | 	}
157 | 
158 | 	// BACK SIDE STYLING
159 | 	&__cta {
160 | 		position: absolute;
161 | 		top: 50%;
162 | 		left: 50%;
163 | 		transform: translate(-50%, -50%);
164 | 		width: 90%;
165 | 		text-align: center;
166 | 	}
167 | 
168 | 	&__price-box {
169 | 		text-align: center;
170 | 		color: $color-white;
171 | 		margin-bottom: 7rem;
172 | 	}
173 | 
174 | 	&__price-only {
175 | 		font-size: 1.4rem;
176 | 		text-transform: uppercase;
177 | 	}
178 | 
179 | 	&__price-value {
180 | 		font-size: 6rem;
181 | 		font-weight: 100;
182 | 	}
183 | 
184 | 	// @include respond(tab-port) {
185 | 	@media only screen and (max-width: 56.25em), only screen and (hover: none) {
186 | 		height: auto;
187 | 		border-radius: 3px;
188 | 		background-color: $color-white;
189 | 		box-shadow: 0 1.5rem 40px rgba($color-black, 0.15);
190 | 
191 | 		&__side {
192 | 			height: auto;
193 | 			position: relative;
194 | 			box-shadow: none;
195 | 
196 | 			&--back {
197 | 				transform: rotateY(0);
198 | 				clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
199 | 			}
200 | 		}
201 | 
202 | 		&:hover &__side--front {
203 | 			transform: rotateY(0);
204 | 		}
205 | 
206 | 		&__details {
207 | 			padding: 1rem 3rem;
208 | 		}
209 | 
210 | 		// BACK SIDE STYLING
211 | 		&__cta {
212 | 			position: relative;
213 | 			top: 0%;
214 | 			left: 0%;
215 | 			transform: translate(0);
216 | 			width: 100%;
217 | 			padding: 7rem 4rem 4rem 4rem;
218 | 		}
219 | 
220 | 		&__price-box {
221 | 			margin-bottom: 3rem;
222 | 		}
223 | 
224 | 		&__price-value {
225 | 			font-size: 4rem;
226 | 		}
227 | 	}
228 | }
229 | 


--------------------------------------------------------------------------------
/15. Natours Project/sass/components/_composition.scss:
--------------------------------------------------------------------------------
 1 | .composition {
 2 | 	position: relative;
 3 | 
 4 | 	&__photo {
 5 | 		width: 55%;
 6 | 		box-shadow: 0 1.5rem 4rem rgba($color-black, 40%);
 7 | 		border-radius: 2px;
 8 | 		position: absolute;
 9 | 		z-index: 10;
10 | 		transition: all 0.2s;
11 | 		outline-offset: 2rem;
12 | 
13 | 		@include respond(tab-port) {
14 | 			position: relative;
15 | 			float: left;
16 | 			width: 33.333333%;
17 | 			box-shadow: 0 1.5rem 3rem rgba($color-black, 20%);
18 | 		}
19 | 
20 | 		&--p1 {
21 | 			left: 0;
22 | 			top: -2rem;
23 | 
24 | 			@include respond(tab-port) {
25 | 				top: 0;
26 | 				transform: scale(1.2);
27 | 			}
28 | 		}
29 | 
30 | 		&--p2 {
31 | 			right: 0;
32 | 			top: 2rem;
33 | 
34 | 			@include respond(tab-port) {
35 | 				top: -1rem;
36 | 				transform: scale(1.2);
37 | 				z-index: 100;
38 | 			}
39 | 		}
40 | 
41 | 		&--p3 {
42 | 			left: 20%;
43 | 			top: 10rem;
44 | 
45 | 			@include respond(tab-port) {
46 | 				left: 0;
47 | 				top: 1rem;
48 | 				transform: scale(1.2);
49 | 			}
50 | 		}
51 | 
52 | 		&:hover {
53 | 			outline: 1.5rem solid $color-primary;
54 | 			transform: scale(1.05) translateY(-0.5rem);
55 | 			box-shadow: 0 2.5rem 4rem rgba($color-black, 0.5);
56 | 			z-index: 20;
57 | 		}
58 | 	}
59 | 
60 | 	&:hover &__photo:not(:hover) {
61 | 		transform: scale(0.95);
62 | 	}
63 | }
64 | 


--------------------------------------------------------------------------------
/15. Natours Project/sass/components/_feature-box.scss:
--------------------------------------------------------------------------------
 1 | .feature-box {
 2 | 	background: rgba($color-white, 0.8);
 3 | 	font-size: 1.5rem;
 4 | 	padding: 2.5rem;
 5 | 	text-align: center;
 6 | 	border-radius: 3px;
 7 | 	box-shadow: 0 1.5rem 4rem rgba($color-black, 0.15);
 8 | 	transition: transform 0.3s;
 9 | 
10 | 	@include respond(tab-port) {
11 | 		margin: 0 auto;
12 | 		width: 80%;
13 | 		padding: 2rem;
14 | 	}
15 | 
16 | 	&__icon {
17 | 		font-size: 6rem;
18 | 		margin-bottom: 0.5rem;
19 | 		display: inline-block;
20 | 		background-image: linear-gradient(
21 | 			to right,
22 | 			$color-primary-light,
23 | 			$color-primary-dark
24 | 		);
25 | 		background-clip: text;
26 | 		-webkit-background-clip: text;
27 | 		color: transparent;
28 | 
29 | 		@include respond(tab-port) {
30 | 			margin: 0;
31 | 		}
32 | 	}
33 | 
34 | 	&:hover {
35 | 		transform: translateY(-1.5rem) scale(1.03);
36 | 	}
37 | }
38 | 


--------------------------------------------------------------------------------
/15. Natours Project/sass/components/_form.scss:
--------------------------------------------------------------------------------
  1 | .form {
  2 | 	&__group:not(:last-child) {
  3 | 		margin-bottom: 2rem;
  4 | 	}
  5 | 
  6 | 	&__input {
  7 | 		font-size: 1.5rem;
  8 | 		font-family: inherit;
  9 | 		color: inherit;
 10 | 		padding: 1.5rem 2rem;
 11 | 		border-radius: 2px;
 12 | 		background-color: rgba($color-white, 0.5);
 13 | 		border: none;
 14 | 		border-bottom: 3px solid transparent;
 15 | 		width: 90%;
 16 | 		display: block;
 17 | 		transition: all 0.3s;
 18 | 
 19 | 		@include respond(tab-port) {
 20 | 			width: 100%;
 21 | 		}
 22 | 
 23 | 		&:focus {
 24 | 			outline: none;
 25 | 			box-shadow: 0 1rem 2rem rgba($color-black, 0.1);
 26 | 			border-bottom: 3px solid $color-primary;
 27 | 		}
 28 | 
 29 | 		&:focus:invalid {
 30 | 			border-bottom: 3px solid $color-secondary-dark;
 31 | 		}
 32 | 
 33 | 		&__::-webkit-input-placeholder {
 34 | 			color: $color-grey-dark-2;
 35 | 		}
 36 | 	}
 37 | 
 38 | 	&__label {
 39 | 		font-size: 1.2rem;
 40 | 		font-weight: 700;
 41 | 		margin-left: 2rem;
 42 | 		margin-top: 0.7rem;
 43 | 		display: block;
 44 | 		transition: all 0.3s;
 45 | 	}
 46 | 
 47 | 	&__input:placeholder-shown + &__label {
 48 | 		opacity: 0;
 49 | 		visibility: hidden;
 50 | 		transform: translateY(-4rem);
 51 | 	}
 52 | 
 53 | 	&__radio-group {
 54 | 		width: 49%;
 55 | 		display: inline-block;
 56 | 
 57 | 		@include respond(tab-port) {
 58 | 			width: 100%;
 59 | 			margin-bottom: 2rem;
 60 | 		}
 61 | 	}
 62 | 
 63 | 	&__radio-input {
 64 | 		display: none;
 65 | 	}
 66 | 
 67 | 	&__radio-label {
 68 | 		font-size: $default-font-size;
 69 | 		cursor: pointer;
 70 | 		position: relative;
 71 | 		padding-left: 4.5rem;
 72 | 	}
 73 | 
 74 | 	&__radio-button {
 75 | 		width: 3rem;
 76 | 		height: 3rem;
 77 | 		border: 5px solid $color-primary;
 78 | 		border-radius: 50%;
 79 | 		display: inline-block;
 80 | 		position: absolute;
 81 | 		left: 0;
 82 | 		top: -0.4rem;
 83 | 
 84 | 		&::after {
 85 | 			content: '';
 86 | 			display: block;
 87 | 			height: 1.3rem;
 88 | 			width: 1.3rem;
 89 | 			border-radius: 50%;
 90 | 			position: absolute;
 91 | 			top: 50%;
 92 | 			left: 50%;
 93 | 			transform: translate(-50%, -50%);
 94 | 			background-color: $color-primary;
 95 | 			opacity: 0;
 96 | 			transition: all 0.2s;
 97 | 		}
 98 | 	}
 99 | 
100 | 	&__radio-input:checked ~ &__radio-label &__radio-button:after {
101 | 		opacity: 1;
102 | 	}
103 | }
104 | 


--------------------------------------------------------------------------------
/15. Natours Project/sass/components/_popup.scss:
--------------------------------------------------------------------------------
  1 | .popup {
  2 | 	height: 100vh;
  3 | 	width: 100%;
  4 | 	position: fixed;
  5 | 	top: 0;
  6 | 	left: 0;
  7 | 	background-color: rgba($color-black, 0.8);
  8 | 	z-index: 9999;
  9 | 	opacity: 0;
 10 | 	visibility: hidden;
 11 | 	transition: all 0.3s;
 12 | 
 13 | 	&__content {
 14 | 		@include absCenter;
 15 | 
 16 | 		display: table;
 17 | 		width: 75%;
 18 | 		background-color: $color-white;
 19 | 		box-shadow: 0 2rem 4rem rgba($color-black, 0.2);
 20 | 		border-radius: 3px;
 21 | 		opacity: 0;
 22 | 		transform: translate(-50%, -50%) scale(0.25);
 23 | 		transition: all 0.4s 0.2s;
 24 | 
 25 | 		@include respond(tab-port) {
 26 | 			width: 90%;
 27 | 			text-align: center;
 28 | 		}
 29 | 	}
 30 | 
 31 | 	&__left {
 32 | 		width: 33.33333%;
 33 | 		display: table-cell;
 34 | 
 35 | 		@include respond(tab-port) {
 36 | 			display: block;
 37 | 			width: 100%;
 38 | 		}
 39 | 
 40 | 		@include respond(phone) {
 41 | 			display: none;
 42 | 		}
 43 | 	}
 44 | 
 45 | 	&__right {
 46 | 		width: 66.66667%;
 47 | 		display: table-cell;
 48 | 		vertical-align: middle;
 49 | 		padding: 3rem 5rem;
 50 | 
 51 | 		@include respond(tab-port) {
 52 | 			display: block;
 53 | 			width: 100%;
 54 | 		}
 55 | 	}
 56 | 
 57 | 	&__img {
 58 | 		display: block;
 59 | 		width: 100%;
 60 | 
 61 | 		@include respond(tab-port) {
 62 | 			display: inline;
 63 | 			max-width: 35%;
 64 | 			min-height: 200px;
 65 | 			object-fit: cover;
 66 | 			padding: 2rem;
 67 | 			border-radius: 3rem;
 68 | 		}
 69 | 	}
 70 | 
 71 | 	&__text {
 72 | 		font-size: 1.5rem;
 73 | 		margin-bottom: 4rem;
 74 | 
 75 | 		column-count: 2;
 76 | 		column-gap: 4rem;
 77 | 		column-rule: 1px solid $color-grey-light-2;
 78 | 
 79 | 		hyphens: auto;
 80 | 
 81 | 		@include respond(tab-port) {
 82 | 			text-align: left;
 83 | 			column-count: 1;
 84 | 		}
 85 | 	}
 86 | 
 87 | 	// Open states
 88 | 	&:target {
 89 | 		opacity: 1;
 90 | 		visibility: visible;
 91 | 	}
 92 | 
 93 | 	&:target &__content {
 94 | 		opacity: 1;
 95 | 		transform: translate(-50%, -50%) scale(1);
 96 | 	}
 97 | 
 98 | 	&__close {
 99 | 		&:link,
100 | 		&:visited {
101 | 			color: $color-grey-dark;
102 | 			position: absolute;
103 | 			top: 2.5rem;
104 | 			right: 2.5rem;
105 | 			font-size: 3rem;
106 | 			text-decoration: none;
107 | 			display: inline-block;
108 | 			transition: all 0.2s;
109 | 			line-height: 1;
110 | 		}
111 | 
112 | 		&:hover {
113 | 			color: $color-primary;
114 | 		}
115 | 	}
116 | }
117 | 


--------------------------------------------------------------------------------
/15. Natours Project/sass/components/_story.scss:
--------------------------------------------------------------------------------
 1 | .story {
 2 | 	width: 75%;
 3 | 	margin: 0 auto;
 4 | 	box-shadow: 0 3rem 6rem rgba($color-black, 0.1);
 5 | 	background-color: rgba($color-white, 0.6);
 6 | 	border-radius: 3px;
 7 | 	padding: 6rem;
 8 | 	padding-left: 9rem;
 9 | 	font-size: $default-font-size;
10 | 	transform: skewX(-12deg);
11 | 
12 | 	@include respond(tab-port) {
13 | 		width: 100%;
14 | 		padding: 4rem;
15 | 		padding-left: 7rem;
16 | 	}
17 | 
18 | 	@include respond(phone) {
19 | 		transform: skewX(0);
20 | 	}
21 | 
22 | 	&__shape {
23 | 		width: 15rem;
24 | 		height: 15rem;
25 | 		float: left;
26 | 		transform: translate(-3rem) skewX(12deg);
27 | 		position: relative;
28 | 		overflow: hidden;
29 | 		border-radius: 50%;
30 | 
31 | 		@supports (clip-path: polygon(0, 0)) or (-webkit-clip-path: polygon(0, 0)) {
32 | 			-webkit-shape-outside: circle(50% at 50% 50%);
33 | 			shape-outside: circle(50% at 50% 50%);
34 | 			-webkit-clip-path: circle(50% at 50% 50%);
35 | 			clip-path: circle(50% at 50% 50%);
36 | 			border-radius: none;
37 | 		}
38 | 
39 | 		@include respond(phone) {
40 | 			transform: translateX(-3rem) skewX(0);
41 | 		}
42 | 	}
43 | 
44 | 	&__image {
45 | 		height: 100%;
46 | 		transform: translateX(-4rem) scale(1.4);
47 | 		transition: all 0.5s;
48 | 	}
49 | 
50 | 	&__text {
51 | 		transform: skewX(12deg);
52 | 
53 | 		@include respond(phone) {
54 | 			transform: skewX(0);
55 | 		}
56 | 	}
57 | 
58 | 	&__caption {
59 | 		position: absolute;
60 | 		top: 50%;
61 | 		left: 50%;
62 | 		transform: translate(-50%, 20%);
63 | 		color: $color-white;
64 | 		text-transform: uppercase;
65 | 		font-size: 1.7rem;
66 | 		text-align: center;
67 | 		opacity: 0;
68 | 		transition: all 0.5s;
69 | 
70 | 		-webkit-backface-visibility: hidden;
71 | 		backface-visibility: hidden;
72 | 	}
73 | 
74 | 	&:hover &__caption {
75 | 		opacity: 1;
76 | 		transform: translate(-50%, -50%);
77 | 	}
78 | 
79 | 	&:hover &__image {
80 | 		transform: translateX(-4rem) scale(1);
81 | 		filter: blur(3px) brightness(80%);
82 | 	}
83 | }
84 | 


--------------------------------------------------------------------------------
/15. Natours Project/sass/layout/_footer.scss:
--------------------------------------------------------------------------------
 1 | .footer {
 2 | 	background-color: $color-grey-dark-3;
 3 | 	padding: 10rem 0;
 4 | 	font-size: 1.4rem;
 5 | 	color: $color-grey-light-1;
 6 | 
 7 | 	@include respond(tab-port) {
 8 | 		padding: 8rem 0;
 9 | 	}
10 | 
11 | 	&__logo-box {
12 | 		text-align: center;
13 | 		margin-bottom: 8rem;
14 | 
15 | 		@include respond(tab-port) {
16 | 			margin-bottom: 6rem;
17 | 		}
18 | 	}
19 | 
20 | 	&__logo {
21 | 		width: 15rem;
22 | 		height: auto;
23 | 	}
24 | 
25 | 	&__navigation {
26 | 		border-top: 1px solid $color-grey-dark;
27 | 		padding-top: 2rem;
28 | 		display: inline-block;
29 | 
30 | 		@include respond(tab-port) {
31 | 			width: 100%;
32 | 			text-align: center;
33 | 		}
34 | 	}
35 | 
36 | 	&__list {
37 | 		list-style: none;
38 | 	}
39 | 
40 | 	&__item {
41 | 		display: inline-block;
42 | 
43 | 		&:not(:last-child) {
44 | 			margin-right: 1.5rem;
45 | 		}
46 | 	}
47 | 
48 | 	&__link {
49 | 		&:link,
50 | 		&:visited {
51 | 			color: $color-grey-light-1;
52 | 			background-color: $color-grey-dark-3;
53 | 			text-decoration: none;
54 | 			text-transform: uppercase;
55 | 			display: inline-block;
56 | 			transition: all 0.3s;
57 | 		}
58 | 
59 | 		&:hover,
60 | 		&:active {
61 | 			color: $color-primary;
62 | 			box-shadow: 0 1rem 2rem rgba($color-black, 0.4);
63 | 			transform: rotate(5deg) scale(1.3);
64 | 		}
65 | 	}
66 | 
67 | 	&__copyright {
68 | 		border-top: 1px solid $color-grey-dark;
69 | 		padding-top: 2rem;
70 | 		width: 80%;
71 | 		float: right;
72 | 
73 | 		@include respond(tab-port) {
74 | 			width: 100%;
75 | 			float: none;
76 | 		}
77 | 	}
78 | }
79 | 


--------------------------------------------------------------------------------
/15. Natours Project/sass/layout/_grid.scss:
--------------------------------------------------------------------------------
 1 | .row {
 2 | 	max-width: $grid-width;
 3 | 	margin: 0 auto;
 4 | 
 5 | 	&:not(:last-child) {
 6 | 		margin-bottom: $gutter-vertical;
 7 | 
 8 | 		@include respond(tab-port) {
 9 | 			margin-bottom: $gutter-vertical-small;
10 | 		}
11 | 	}
12 | 
13 | 	@include respond(tab-port) {
14 | 		width: 90%;
15 | 		padding: 0 3rem;
16 | 	}
17 | 
18 | 	@include clearfix;
19 | 
20 | 	[class^='col-'] {
21 | 		float: left;
22 | 
23 | 		&:not(:last-child) {
24 | 			margin-right: $gutter-horizontal;
25 | 
26 | 			@include respond(tab-port) {
27 | 				margin-right: 0;
28 | 				margin-bottom: $gutter-vertical-small;
29 | 			}
30 | 		}
31 | 
32 | 		@include respond(tab-port) {
33 | 			width: 100% !important;
34 | 		}
35 | 	}
36 | 
37 | 	.col-1-of-2 {
38 | 		width: calc((100% - #{$gutter-horizontal}) / 2);
39 | 	}
40 | 
41 | 	.col-1-of-3 {
42 | 		width: calc((100% - 2 * #{$gutter-horizontal}) / 3);
43 | 	}
44 | 
45 | 	.col-2-of-3 {
46 | 		width: calc(
47 | 			2 * ((100% - 2 * #{$gutter-horizontal}) / 3) + #{$gutter-horizontal}
48 | 		);
49 | 	}
50 | 
51 | 	.col-1-of-4 {
52 | 		width: calc((100% - 3 * #{$gutter-horizontal}) / 4);
53 | 	}
54 | 
55 | 	.col-2-of-4 {
56 | 		width: calc(
57 | 			2 * ((100% - 3 * #{$gutter-horizontal}) / 4) + #{$gutter-horizontal}
58 | 		);
59 | 	}
60 | 
61 | 	.col-3-of-4 {
62 | 		width: calc(
63 | 			3 * ((100% - 3 * #{$gutter-horizontal}) / 4) + 2 * #{$gutter-horizontal}
64 | 		);
65 | 	}
66 | }
67 | 


--------------------------------------------------------------------------------
/15. Natours Project/sass/layout/_header.scss:
--------------------------------------------------------------------------------
 1 | .header {
 2 | 	height: 85vh;
 3 | 
 4 | 	@supports (clip-path: polygon(0, 0)) or (-webkit-clip-path: polygon(0, 0)) {
 5 | 		-webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
 6 | 		clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
 7 | 	}
 8 | 
 9 | 	background-image: linear-gradient(
10 | 			to right bottom,
11 | 			rgba($color-primary-light, 0.8),
12 | 			rgba($color-primary-dark, 0.8)
13 | 		),
14 | 		url(../img/hero-small.jpg);
15 | 	background-size: cover;
16 | 	background-position: top;
17 | 	position: relative;
18 | 
19 | 	@media only screen and (min-resolution: 192dpi) and (min-width: 37.5em),
20 | 		only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 37.5em),
21 | 		only screen and (min-width: 125em) {
22 | 		background-image: linear-gradient(
23 | 				to right bottom,
24 | 				rgba($color-primary-light, 0.8),
25 | 				rgba($color-primary-dark, 0.8)
26 | 			),
27 | 			url(../img/hero.jpg);
28 | 	}
29 | 
30 | 	@include respond(phone) {
31 | 		clip-path: polygon(0 0, 100% 0, 100% 80vh, 0 100%);
32 | 	}
33 | 
34 | 	&__logo-box {
35 | 		position: absolute;
36 | 		top: 4rem;
37 | 		left: 4rem;
38 | 	}
39 | 
40 | 	&__logo {
41 | 		height: 3.5rem;
42 | 	}
43 | 
44 | 	&__text-box {
45 | 		position: absolute;
46 | 		top: 40%;
47 | 		left: 50%;
48 | 		transform: translate(-50%, -50%);
49 | 		text-align: center;
50 | 	}
51 | }
52 | 


--------------------------------------------------------------------------------
/15. Natours Project/sass/layout/_navigation.scss:
--------------------------------------------------------------------------------
  1 | .navigation {
  2 | 	&__checkbox {
  3 | 		display: none;
  4 | 	}
  5 | 
  6 | 	&__button {
  7 | 		background-color: $color-white;
  8 | 		height: 7rem;
  9 | 		width: 7rem;
 10 | 		position: fixed;
 11 | 		top: 6rem;
 12 | 		right: 6rem;
 13 | 		border-radius: 50%;
 14 | 		z-index: 2000;
 15 | 		box-shadow: 0 1rem 3rem rgba($color-black, 0.1);
 16 | 		text-align: center;
 17 | 		cursor: pointer;
 18 | 
 19 | 		@include respond(tab-port) {
 20 | 			top: 4rem;
 21 | 			right: 4rem;
 22 | 		}
 23 | 
 24 | 		@include respond(phone) {
 25 | 			top: 3rem;
 26 | 			right: 3rem;
 27 | 		}
 28 | 	}
 29 | 
 30 | 	&__background {
 31 | 		height: 6rem;
 32 | 		width: 6rem;
 33 | 		border-radius: 50%;
 34 | 		position: fixed;
 35 | 		top: 6.5rem;
 36 | 		right: 6.5rem;
 37 | 		background-image: radial-gradient(
 38 | 			$color-primary-light,
 39 | 			$color-primary-dark
 40 | 		);
 41 | 		z-index: 1000;
 42 | 		transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1);
 43 | 
 44 | 		@include respond(tab-port) {
 45 | 			top: 4.5rem;
 46 | 			right: 4.5rem;
 47 | 		}
 48 | 
 49 | 		@include respond(phone) {
 50 | 			top: 3.5rem;
 51 | 			right: 3.5rem;
 52 | 		}
 53 | 	}
 54 | 
 55 | 	&__nav {
 56 | 		height: 100vh;
 57 | 		width: 100%;
 58 | 		position: fixed;
 59 | 		top: 0;
 60 | 		left: 0;
 61 | 		z-index: 1500;
 62 | 
 63 | 		opacity: 0;
 64 | 		width: 0;
 65 | 		transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 66 | 	}
 67 | 
 68 | 	&__list {
 69 | 		width: 100%;
 70 | 		position: absolute;
 71 | 		top: 50%;
 72 | 		left: 50%;
 73 | 		transform: translate(-50%, -50%);
 74 | 		list-style: none;
 75 | 		text-align: center;
 76 | 	}
 77 | 
 78 | 	&__item {
 79 | 		margin: 1rem;
 80 | 	}
 81 | 
 82 | 	&__link {
 83 | 		&:link,
 84 | 		&:visited {
 85 | 			display: inline-block;
 86 | 			font-size: 3rem;
 87 | 			font-weight: 300;
 88 | 			padding: 1rem 2rem;
 89 | 			color: $color-white;
 90 | 			text-decoration: none;
 91 | 			text-transform: uppercase;
 92 | 			background: linear-gradient(
 93 | 				120deg,
 94 | 				transparent 0%,
 95 | 				transparent 50%,
 96 | 				$color-white 50%
 97 | 			);
 98 | 			background-size: 220%;
 99 | 			transition: all 0.4s;
100 | 
101 | 			span {
102 | 				margin-right: 1.5rem;
103 | 				display: inline-block;
104 | 			}
105 | 		}
106 | 
107 | 		&:hover,
108 | 		&:active {
109 | 			background-position: 100%;
110 | 			color: $color-primary;
111 | 			transform: translateX(1rem);
112 | 		}
113 | 	}
114 | 
115 | 	// Fun
116 | 	&__checkbox:checked ~ &__background {
117 | 		transform: scale(80);
118 | 	}
119 | 
120 | 	&__checkbox:checked ~ &__nav {
121 | 		opacity: 1;
122 | 		width: 100%;
123 | 	}
124 | 
125 | 	// ICON
126 | 	&__icon {
127 | 		position: relative;
128 | 		margin-top: 3.5rem;
129 | 
130 | 		&,
131 | 		&::before,
132 | 		&::after {
133 | 			width: 3rem;
134 | 			height: 2px;
135 | 			background-color: $color-grey-dark-3;
136 | 			display: inline-block;
137 | 		}
138 | 
139 | 		&::before,
140 | 		&::after {
141 | 			content: '';
142 | 			position: absolute;
143 | 			left: 0;
144 | 			transition: all 0.2s;
145 | 		}
146 | 
147 | 		&::before {
148 | 			top: -0.8rem;
149 | 		}
150 | 
151 | 		&::after {
152 | 			top: 0.8rem;
153 | 		}
154 | 	}
155 | 
156 | 	&__button:hover &__icon:before {
157 | 		top: -1rem;
158 | 	}
159 | 
160 | 	&__button:hover &__icon:after {
161 | 		top: 1rem;
162 | 	}
163 | 
164 | 	&__checkbox:checked + &__button &__icon {
165 | 		background: transparent;
166 | 	}
167 | 
168 | 	&__checkbox:checked + &__button &__icon::before {
169 | 		top: 0;
170 | 		transform: rotate(135deg);
171 | 	}
172 | 	&__checkbox:checked + &__button &__icon::after {
173 | 		top: 0;
174 | 		transform: rotate(-135deg);
175 | 	}
176 | }
177 | 


--------------------------------------------------------------------------------
/15. Natours Project/sass/main.scss:
--------------------------------------------------------------------------------
 1 | @import 'abstracts/functions';
 2 | @import 'abstracts/mixins';
 3 | @import 'abstracts/variables';
 4 | 
 5 | @import 'base/animations';
 6 | @import 'base/base';
 7 | @import 'base/typography';
 8 | @import 'base/utilities';
 9 | 
10 | @import 'components/bg-video';
11 | @import 'components/button';
12 | @import 'components/card';
13 | @import 'components/composition';
14 | @import 'components/feature-box';
15 | @import 'components/form';
16 | @import 'components/popup';
17 | @import 'components/story';
18 | 
19 | @import 'layout/footer';
20 | @import 'layout/grid';
21 | @import 'layout/header';
22 | @import 'layout/navigation';
23 | 
24 | @import 'pages/home';
25 | 


--------------------------------------------------------------------------------
/15. Natours Project/sass/pages/_home.scss:
--------------------------------------------------------------------------------
  1 | .section-about {
  2 | 	background-color: $color-grey-light-1;
  3 | 	padding: 25rem 0;
  4 | 	margin-top: -20vh;
  5 | 
  6 | 	@include respond(tab-port) {
  7 | 		padding: 20rem 0;
  8 | 	}
  9 | }
 10 | 
 11 | .section-features {
 12 | 	padding: 20rem 0;
 13 | 	background-image: linear-gradient(
 14 | 			to right bottom,
 15 | 			rgba($color-primary-light, 0.8),
 16 | 			rgba($color-primary-dark, 0.8)
 17 | 		),
 18 | 		url(../img/nat-4.jpg);
 19 | 	background-size: cover;
 20 | 	transform: skewY(-4deg);
 21 | 	margin-top: -10rem;
 22 | 
 23 | 	& > * {
 24 | 		transform: skewY(4deg);
 25 | 	}
 26 | 
 27 | 	@include respond(tab-port) {
 28 | 		padding: 10rem 0;
 29 | 	}
 30 | }
 31 | 
 32 | .section-tours {
 33 | 	background-color: $color-grey-light-1;
 34 | 	padding: 25rem 0 15rem 0;
 35 | 	margin-top: -10rem;
 36 | 
 37 | 	@include respond(tab-port) {
 38 | 		padding: 20rem 0 10rem 0;
 39 | 	}
 40 | }
 41 | 
 42 | .section-stories {
 43 | 	position: relative;
 44 | 	padding: 15rem 0;
 45 | 
 46 | 	@include respond(tab-port) {
 47 | 		padding: 10rem 0;
 48 | 	}
 49 | }
 50 | 
 51 | .section-book {
 52 | 	padding: 15rem 0;
 53 | 	background-image: linear-gradient(
 54 | 		to right bottom,
 55 | 		$color-primary-light,
 56 | 		$color-primary-dark
 57 | 	);
 58 | }
 59 | 
 60 | .book {
 61 | 	background-image: linear-gradient(
 62 | 			105deg,
 63 | 			rgba($color-white, 0.9) 0%,
 64 | 			rgba($color-white, 0.9) 50%,
 65 | 			transparent 50%
 66 | 		),
 67 | 		url(../img/nat-10.jpg);
 68 | 	background-size: cover;
 69 | 	border-radius: 3px;
 70 | 	box-shadow: 0 1.5rem 4rem rgba($color-black, 0.2);
 71 | 
 72 | 	@include respond(tab-land) {
 73 | 		background-image: linear-gradient(
 74 | 				105deg,
 75 | 				rgba($color-white, 0.9) 0%,
 76 | 				rgba($color-white, 0.9) 65%,
 77 | 				transparent 65%
 78 | 			),
 79 | 			url(../img/nat-10.jpg);
 80 | 		background-size: cover;
 81 | 	}
 82 | 
 83 | 	@include respond(tab-port) {
 84 | 		background-image: linear-gradient(
 85 | 				to right,
 86 | 				rgba($color-white, 0.9) 0%,
 87 | 				rgba($color-white, 0.9) 100%
 88 | 			),
 89 | 			url(../img/nat-10.jpg);
 90 | 	}
 91 | 
 92 | 	&__form {
 93 | 		width: 50%;
 94 | 		padding: 6rem;
 95 | 
 96 | 		@include respond(tab-land) {
 97 | 			width: 65%;
 98 | 		}
 99 | 
100 | 		@include respond(tab-port) {
101 | 			width: 100%;
102 | 		}
103 | 	}
104 | }
105 | 


--------------------------------------------------------------------------------
/16. Trillo/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/16. Trillo/css/style.css:
--------------------------------------------------------------------------------
  1 | /*
  2 | COLORS
  3 | 
  4 | Primary: #eb2f64
  5 | Primary light: #FF3366
  6 | Primary dark: #BA265D
  7 | 
  8 | Grey light 1: #faf9f9
  9 | Grey light 2: #f4f2f2
 10 | Grey light 3: #f0eeee
 11 | Grey light 4: #ccc
 12 | 
 13 | Grey dark 1: #333
 14 | Grey dark 2: #777
 15 | Grey dark 3: #999
 16 | 
 17 | */
 18 | :root {
 19 |   --color-primary: #eb2f64;
 20 |   --color-primary-light: #ff3366;
 21 |   --color-primary-dark: #ba265d;
 22 |   --color-grey-light-1: #faf9f9;
 23 |   --color-grey-light-2: #f4f2f2;
 24 |   --color-grey-light-3: #f0eeee;
 25 |   --color-grey-light-4: #ccc;
 26 |   --color-grey-dark-1: #333;
 27 |   --color-grey-dark-2: #777;
 28 |   --color-grey-dark-3: #999;
 29 |   --shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3);
 30 |   --shadow-light: 0 2rem 5rem rgba(0, 0, 0, 0.06);
 31 |   --line: 1px solid var(--color-grey-light-2); }
 32 | 
 33 | * {
 34 |   margin: 0;
 35 |   padding: 0; }
 36 | 
 37 | *,
 38 | *::after,
 39 | *::before {
 40 |   box-sizing: inherit; }
 41 | 
 42 | html {
 43 |   box-sizing: border-box;
 44 |   font-size: 62.5%; }
 45 |   @media only screen and (max-width: 68.75em) {
 46 |     html {
 47 |       font-size: 50%; } }
 48 | 
 49 | body {
 50 |   font-family: 'Open Sans', sans-serif;
 51 |   font-weight: 400;
 52 |   line-height: 1.6;
 53 |   color: var(--color-grey-dark-2);
 54 |   background-image: linear-gradient(to right bottom, var(--color-primary-light), var(--color-primary-dark));
 55 |   background-size: cover;
 56 |   background-repeat: no-repeat; }
 57 | 
 58 | .logo {
 59 |   height: 3.25rem;
 60 |   margin-left: 2rem; }
 61 | 
 62 | .search {
 63 |   flex: 0 0 40%;
 64 |   display: flex;
 65 |   align-items: center;
 66 |   justify-content: center; }
 67 |   @media only screen and (max-width: 31.25em) {
 68 |     .search {
 69 |       order: 1;
 70 |       flex: 0 0 100%;
 71 |       background-color: var(--color-grey-light-2); } }
 72 |   .search__input {
 73 |     font-family: inherit;
 74 |     font-size: inherit;
 75 |     color: inherit;
 76 |     background-color: var(--color-grey-light-2);
 77 |     border: none;
 78 |     padding: 0.7rem 2rem;
 79 |     border-radius: 99rem;
 80 |     width: 90%;
 81 |     transition: all 0.2s;
 82 |     margin-right: -3.5rem; }
 83 |     .search__input:focus {
 84 |       outline: none;
 85 |       width: 100%;
 86 |       background-color: var(--color-grey-light-3); }
 87 |     .search__input::placeholder {
 88 |       font-weight: 100;
 89 |       color: var(--color-grey-light-4); }
 90 |   .search__input:focus + .search__button {
 91 |     background-color: var(--color-grey-light-3); }
 92 |   .search__button {
 93 |     border: none;
 94 |     background-color: var(--color-grey-light-2); }
 95 |     .search__button:focus {
 96 |       outline: none; }
 97 |     .search__button:active {
 98 |       transform: translateY(2px); }
 99 |   .search__icon {
100 |     height: 2rem;
101 |     width: 2rem;
102 |     fill: var(--color-grey-dark-3); }
103 | 
104 | .user-nav {
105 |   align-self: stretch;
106 |   display: flex;
107 |   align-items: center; }
108 |   .user-nav > * {
109 |     padding: 0 2rem;
110 |     cursor: pointer;
111 |     height: 100%;
112 |     display: flex;
113 |     align-items: center; }
114 |   .user-nav > *:hover {
115 |     background-color: var(--color-grey-light-2); }
116 |   .user-nav__icon-box {
117 |     position: relative; }
118 |   .user-nav__icon {
119 |     height: 2.25rem;
120 |     width: 2.25rem;
121 |     fill: var(--color-grey-dark-2); }
122 |   .user-nav__notification {
123 |     font-size: 0.8rem;
124 |     height: 1.75rem;
125 |     width: 1.75rem;
126 |     border-radius: 100%;
127 |     background-color: var(--color-primary);
128 |     color: #fff;
129 |     position: absolute;
130 |     top: 1.5rem;
131 |     right: 1.1rem;
132 |     display: flex;
133 |     justify-content: center;
134 |     align-items: center; }
135 |   .user-nav__user-photo {
136 |     height: 3.75rem;
137 |     width: 3.75rem;
138 |     border-radius: 50%;
139 |     margin-right: 1rem; }
140 | 
141 | .side-nav {
142 |   font-size: 1.4rem;
143 |   list-style: none;
144 |   margin-top: 3.5rem; }
145 |   @media only screen and (max-width: 56.25em) {
146 |     .side-nav {
147 |       display: flex;
148 |       margin: 0; } }
149 |   .side-nav__item {
150 |     position: relative; }
151 |     .side-nav__item:not(:last-child) {
152 |       margin-bottom: 0.5rem; }
153 |       @media only screen and (max-width: 56.25em) {
154 |         .side-nav__item:not(:last-child) {
155 |           margin-bottom: 0; } }
156 |     @media only screen and (max-width: 56.25em) {
157 |       .side-nav__item {
158 |         flex: 1; } }
159 |   .side-nav__item::before {
160 |     content: '';
161 |     position: absolute;
162 |     top: 0;
163 |     left: 0;
164 |     height: 100%;
165 |     width: 3px;
166 |     background-color: var(--color-primary);
167 |     transform: scaleY(0);
168 |     transition: transform 0.2s, width 0.3s cubic-bezier(1, 0, 0, 1) 0.2s, background-color 0.1s; }
169 |   .side-nav__item:hover::before, .side-nav__item--active::before {
170 |     transform: scaleY(1);
171 |     width: 100%; }
172 |   .side-nav__item:active::before {
173 |     background-color: var(--color-primary-light); }
174 |   .side-nav__link:link, .side-nav__link:visited {
175 |     color: var(--color-grey-light-1);
176 |     text-decoration: none;
177 |     text-transform: uppercase;
178 |     display: block;
179 |     padding: 1.5rem 3rem;
180 |     position: relative;
181 |     z-index: 10;
182 |     display: flex;
183 |     align-items: center; }
184 |     @media only screen and (max-width: 56.25em) {
185 |       .side-nav__link:link, .side-nav__link:visited {
186 |         justify-content: center;
187 |         padding: 2rem; } }
188 |     @media only screen and (max-width: 37.5em) {
189 |       .side-nav__link:link, .side-nav__link:visited {
190 |         flex-direction: column;
191 |         padding: 1.5rem 0.5rem; } }
192 |   .side-nav__icon {
193 |     width: 1.75rem;
194 |     height: 1.75rem;
195 |     margin-right: 2rem;
196 |     fill: currentColor; }
197 |     @media only screen and (max-width: 37.5em) {
198 |       .side-nav__icon {
199 |         margin-right: 0;
200 |         margin-bottom: 0.7rem;
201 |         width: 1.5rem;
202 |         height: 1.5rem; } }
203 | 
204 | .legal {
205 |   color: var(--color-grey-light-4);
206 |   font-size: 1.2rem;
207 |   text-align: center;
208 |   padding: 2.5rem; }
209 |   @media only screen and (max-width: 56.25em) {
210 |     .legal {
211 |       display: none; } }
212 | 
213 | .gallery {
214 |   display: flex; }
215 |   .gallery__photo {
216 |     width: 100%;
217 |     display: block; }
218 | 
219 | .overview {
220 |   display: flex;
221 |   align-items: center;
222 |   border-bottom: var(--line); }
223 |   .overview__heading {
224 |     font-size: 2.25rem;
225 |     font-weight: 300;
226 |     text-transform: uppercase;
227 |     letter-spacing: 1px;
228 |     padding: 1.5rem 3rem; }
229 |     @media only screen and (max-width: 37.5em) {
230 |       .overview__heading {
231 |         font-size: 1.8rem;
232 |         padding: 1.25rem 2rem; } }
233 |   .overview__stars {
234 |     margin-right: auto;
235 |     display: flex; }
236 |   .overview__icon-star, .overview__icon-location {
237 |     width: 1.75rem;
238 |     height: 1.75rem;
239 |     fill: var(--color-primary); }
240 |   .overview__location {
241 |     font-size: 1.2rem;
242 |     display: flex;
243 |     align-items: center; }
244 |   .overview__icon-location {
245 |     margin-right: 0.5rem; }
246 |   .overview__rating {
247 |     background-color: var(--color-primary);
248 |     margin-left: 3rem;
249 |     color: #fff;
250 |     align-self: stretch;
251 |     padding: 0 2.25rem;
252 |     display: flex;
253 |     justify-content: center;
254 |     align-items: center;
255 |     flex-direction: column; }
256 |     @media only screen and (max-width: 37.5em) {
257 |       .overview__rating {
258 |         padding: 0 1.5rem; } }
259 |   .overview__rating-average {
260 |     font-size: 2.25rem;
261 |     font-weight: 300;
262 |     margin-bottom: -3px; }
263 |     @media only screen and (max-width: 37.5em) {
264 |       .overview__rating-average {
265 |         font-size: 1.8rem; } }
266 |   .overview__rating-count {
267 |     font-size: 0.8rem;
268 |     text-transform: uppercase; }
269 |     @media only screen and (max-width: 37.5em) {
270 |       .overview__rating-count {
271 |         font-size: 0.5rem; } }
272 | 
273 | .btn-inline {
274 |   border: none;
275 |   color: var(--color-primary);
276 |   font-size: inherit;
277 |   border-bottom: 1px solid currentColor;
278 |   padding: 2px;
279 |   display: inline-block;
280 |   background-color: transparent;
281 |   cursor: pointer;
282 |   transition: all 0.2s; }
283 |   .btn-inline span {
284 |     margin-left: 3px;
285 |     transition: margin-left 0.2s; }
286 |   .btn-inline:hover {
287 |     color: var(--color-grey-dark-1); }
288 |     .btn-inline:hover span {
289 |       margin-left: 8px; }
290 |   .btn-inline:focus {
291 |     outline: none;
292 |     animation: pulsate 0.7s infinite; }
293 | 
294 | @keyframes pulsate {
295 |   0% {
296 |     transform: scale(1);
297 |     box-shadow: none; }
298 |   50% {
299 |     transform: scale(1.05);
300 |     box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.25); }
301 |   100% {
302 |     transform: scale(1);
303 |     box-shadow: none; } }
304 | 
305 | .paragraph:not(:last-of-type) {
306 |   margin-bottom: 2rem; }
307 | 
308 | .list {
309 |   list-style: none;
310 |   margin: 3rem 0;
311 |   padding: 3rem 0;
312 |   border-top: var(--line);
313 |   border-bottom: var(--line);
314 |   display: flex;
315 |   flex-wrap: wrap; }
316 |   .list__item {
317 |     flex: 0 0 50%;
318 |     margin-bottom: 0.7rem; }
319 |   .list__item::before {
320 |     content: '';
321 |     display: inline-block;
322 |     height: 1rem;
323 |     width: 1rem;
324 |     margin-right: 0.7rem; }
325 |     @supports (-webkit-mask-image: url()) or (mask-image: url()) {
326 |       .list__item::before {
327 |         background-color: var(--color-primary);
328 |         -webkit-mask-image: url(../img/chevron-thin-right.svg);
329 |         -webkit-mask-size: cover;
330 |         mask-image: url(../img/chevron-thin-right.svg);
331 |         mask-size: cover;
332 |         background-image: none; } }
333 | 
334 | .recommend {
335 |   font-size: 1.3rem;
336 |   color: var(--color-grey-dark-3);
337 |   display: flex;
338 |   align-items: center; }
339 |   .recommend__count {
340 |     margin-right: auto; }
341 |   .recommend__friends {
342 |     display: flex; }
343 |   .recommend__photo {
344 |     box-sizing: content-box;
345 |     height: 4rem;
346 |     width: 4rem;
347 |     border-radius: 50%;
348 |     border: 3px solid #fff; }
349 |     .recommend__photo:not(:last-child) {
350 |       margin-right: -2rem; }
351 | 
352 | .review {
353 |   background-color: #fff;
354 |   box-shadow: var(--shadow-light);
355 |   padding: 3rem;
356 |   margin-bottom: 3.5rem;
357 |   position: relative;
358 |   overflow: hidden; }
359 |   @media only screen and (max-width: 56.25em) {
360 |     .review {
361 |       padding: 2rem;
362 |       margin-bottom: 3rem; } }
363 |   .review__text {
364 |     margin-bottom: 2rem;
365 |     position: relative;
366 |     z-index: 10; }
367 |   .review__user {
368 |     display: flex;
369 |     align-items: center; }
370 |   .review__photo {
371 |     height: 4.5rem;
372 |     width: 4.5rem;
373 |     border-radius: 50%;
374 |     margin-right: 1.5rem; }
375 |   .review__user-box {
376 |     margin-right: auto; }
377 |   .review__user-name {
378 |     font-size: 1.1rem;
379 |     font-weight: 600;
380 |     text-transform: uppercase;
381 |     margin-bottom: 0.4rem; }
382 |   .review__user-date {
383 |     font-size: 1rem;
384 |     color: var(--color-grey-dark-3); }
385 |   .review__rating {
386 |     color: var(--color-primary);
387 |     font-size: 2.2rem;
388 |     font-weight: 300; }
389 |   .review::before {
390 |     content: '\201C';
391 |     position: absolute;
392 |     top: -2.75rem;
393 |     left: -1rem;
394 |     line-height: 1;
395 |     font-size: 20rem;
396 |     color: var(--color-grey-light-2);
397 |     font-family: sans-serif;
398 |     z-index: 1; }
399 | 
400 | .cta {
401 |   padding: 3.5rem 0;
402 |   text-align: center; }
403 |   @media only screen and (max-width: 56.25em) {
404 |     .cta {
405 |       padding: 2.5rem 0; } }
406 |   .cta__book-now {
407 |     font-size: 2rem;
408 |     font-weight: 300;
409 |     text-transform: uppercase;
410 |     margin-bottom: 2.5rem; }
411 | 
412 | .btn {
413 |   font-size: 1.5rem;
414 |   font-weight: 300;
415 |   text-transform: uppercase;
416 |   border-radius: 100px;
417 |   border: none;
418 |   background-image: linear-gradient(to right, var(--color-primary-light), var(--color-primary-dark));
419 |   color: #fff;
420 |   position: relative;
421 |   overflow: hidden;
422 |   cursor: pointer; }
423 |   .btn > * {
424 |     display: inline-block;
425 |     height: 100%;
426 |     width: 100%;
427 |     transition: all 0.2s; }
428 |   .btn__visible {
429 |     padding: 2rem 7.5rem; }
430 |   .btn__invisible {
431 |     position: absolute;
432 |     padding: 2rem 0;
433 |     left: 0;
434 |     top: -100%; }
435 |   .btn:hover {
436 |     background-image: linear-gradient(to left, var(--color-primary-light), var(--color-primary-dark)); }
437 |   .btn:hover .btn__visible {
438 |     transform: translateY(100%); }
439 |   .btn:hover .btn__invisible {
440 |     top: 0; }
441 |   .btn:focus {
442 |     outline: none;
443 |     animation: pulsate 1s infinite; }
444 | 
445 | .container {
446 |   max-width: 120rem;
447 |   margin: 8rem auto;
448 |   background-color: var(--color-grey-light-1);
449 |   box-shadow: var(--shadow-dark);
450 |   min-height: 50rem; }
451 |   @media only screen and (max-width: 75em) {
452 |     .container {
453 |       margin: 0;
454 |       max-width: 100%;
455 |       width: 100%; } }
456 | 
457 | .header {
458 |   font-size: 1.4rem;
459 |   height: 7rem;
460 |   background-color: #fff;
461 |   border-bottom: var(--line);
462 |   display: flex;
463 |   justify-content: space-between;
464 |   align-items: center; }
465 |   @media only screen and (max-width: 31.25em) {
466 |     .header {
467 |       flex-wrap: wrap;
468 |       align-content: space-around;
469 |       height: 11rem; } }
470 | 
471 | .content {
472 |   display: flex; }
473 |   @media only screen and (max-width: 56.25em) {
474 |     .content {
475 |       flex-direction: column; } }
476 | 
477 | .sidebar {
478 |   background-color: var(--color-grey-dark-1);
479 |   flex: 0 0 18%;
480 |   display: flex;
481 |   flex-direction: column;
482 |   justify-content: space-between; }
483 | 
484 | .hotel-view {
485 |   background-color: #fff;
486 |   flex: 1; }
487 | 
488 | .detail {
489 |   display: flex;
490 |   padding: 4.5rem;
491 |   font-size: 1.4rem;
492 |   background-color: var(--color-grey-light-1);
493 |   border-bottom: var(--line); }
494 |   @media only screen and (max-width: 56.25em) {
495 |     .detail {
496 |       padding: 3rem; } }
497 |   @media only screen and (max-width: 37.5em) {
498 |     .detail {
499 |       flex-direction: column; } }
500 | 
501 | .description {
502 |   flex: 0 0 60%;
503 |   margin-right: 4.5rem;
504 |   padding: 3rem;
505 |   background-color: #fff;
506 |   box-shadow: var(--shadow-light); }
507 |   @media only screen and (max-width: 56.25em) {
508 |     .description {
509 |       padding: 2rem;
510 |       margin-right: 3rem; } }
511 |   @media only screen and (max-width: 37.5em) {
512 |     .description {
513 |       margin-right: 0;
514 |       margin-bottom: 3rem; } }
515 | 
516 | .user-reviews {
517 |   flex: 1;
518 |   display: flex;
519 |   flex-direction: column;
520 |   align-items: center; }
521 | 


--------------------------------------------------------------------------------
/16. Trillo/img/SVG/aircraft.svg:
--------------------------------------------------------------------------------
1 | <!-- Generated by IcoMoon.io -->
2 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
3 | <title>aircraft</title>
4 | <path d="M12.496 17.414c-0.394-1.096-1.805-4.775-2.39-6.297-1.103 0.737-2.334 1.435-3.512 1.928-0.366 1.28-1.094 3.709-1.446 4.033-0.604 0.557-0.832 0.485-0.925-0.279s-0.485-3.236-0.485-3.236-2.162-1.219-2.84-1.568-0.667-0.591 0.057-0.974c0.422-0.223 2.927-0.085 4.242 0.005 0.861-0.951 1.931-1.882 2.993-2.679-1.215-1.076-4.15-3.675-5.034-4.424-0.776-0.658 0.079-0.797 0.079-0.797 0.39-0.070 1.222-0.132 1.628-0.009 2.524 0.763 6.442 2.068 7.363 2.376 0.353-0.249 0.737-0.52 1.162-0.821 4.702-3.33 5.887-2.593 6.111-2.27s0.503 1.701-4.199 5.032c-0.425 0.301-0.808 0.573-1.16 0.823-0.029 0.98-0.157 5.151-0.311 7.811-0.025 0.428-0.367 1.198-0.565 1.544-0.001 0-0.423 0.765-0.768-0.198z"></path>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/16. Trillo/img/SVG/bookmark.svg:
--------------------------------------------------------------------------------
1 | <!-- Generated by IcoMoon.io -->
2 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
3 | <title>bookmark</title>
4 | <path d="M14 2v17l-4-4-4 4v-17c0-0.553 0.585-1.020 1-1h6c0.689-0.020 1 0.447 1 1z"></path>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/16. Trillo/img/SVG/chat.svg:
--------------------------------------------------------------------------------
1 | <!-- Generated by IcoMoon.io -->
2 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
3 | <title>chat</title>
4 | <path d="M5.8 12.2v-6.2h-3.8c-1.1 0-2 0.9-2 2v6c0 1.1 0.9 2 2 2h1v3l3-3h5c1.1 0 2-0.9 2-2v-1.82c-0.064 0.014-0.132 0.021-0.2 0.021l-7-0.001zM18 1h-9c-1.1 0-2 0.9-2 2v8h7l3 3v-3h1c1.1 0 2-0.899 2-2v-6c0-1.1-0.9-2-2-2z"></path>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/16. Trillo/img/SVG/chevron-thin-right.svg:
--------------------------------------------------------------------------------
1 | <!-- Generated by IcoMoon.io -->
2 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
3 | <title>chevron-thin-right</title>
4 | <path d="M13.25 10l-7.141-7.42c-0.268-0.27-0.268-0.707 0-0.979 0.268-0.27 0.701-0.27 0.969 0l7.83 7.908c0.268 0.271 0.268 0.709 0 0.979l-7.83 7.908c-0.268 0.271-0.701 0.27-0.969 0s-0.268-0.707 0-0.979l7.141-7.417z"></path>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/16. Trillo/img/SVG/home.svg:
--------------------------------------------------------------------------------
1 | <!-- Generated by IcoMoon.io -->
2 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
3 | <title>home</title>
4 | <path d="M18.672 11h-1.672v6c0 0.445-0.194 1-1 1h-4v-6h-4v6h-4c-0.806 0-1-0.555-1-1v-6h-1.672c-0.598 0-0.47-0.324-0.060-0.748l8.024-8.032c0.195-0.202 0.451-0.302 0.708-0.312 0.257 0.010 0.513 0.109 0.708 0.312l8.023 8.031c0.411 0.425 0.539 0.749-0.059 0.749z"></path>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/16. Trillo/img/SVG/key.svg:
--------------------------------------------------------------------------------
1 | <!-- Generated by IcoMoon.io -->
2 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
3 | <title>key</title>
4 | <path d="M17.691 4.725c-0.503-2.977-3.22-4.967-6.069-4.441s-5.256 2.816-4.753 5.795c0.107 0.641 0.408 1.644 0.763 2.365l-5.175 7.723c-0.191 0.285-0.299 0.799-0.242 1.141l0.333 1.971c0.058 0.342 0.372 0.572 0.7 0.514l1.516-0.281c0.328-0.059 0.744-0.348 0.924-0.639l2.047-3.311 0.018-0.022 1.386-0.256 2.39-3.879c0.785 0.139 1.912 0.092 2.578-0.031 2.848-0.526 4.087-3.67 3.584-6.649zM15.166 6.252c-0.784 1.17-1.584 0.346-2.703-0.475-1.119-0.818-2.135-1.322-1.352-2.492s2.326-1.455 3.447-0.635c1.12 0.819 1.391 2.432 0.608 3.602z"></path>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/16. Trillo/img/SVG/location-pin.svg:
--------------------------------------------------------------------------------
1 | <!-- Generated by IcoMoon.io -->
2 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
3 | <title>location-pin</title>
4 | <path d="M10 2.009c-2.762 0-5 2.229-5 4.99 0 4.774 5 11 5 11s5-6.227 5-11c0-2.76-2.238-4.99-5-4.99zM10 9.76c-1.492 0-2.7-1.209-2.7-2.7s1.208-2.7 2.7-2.7c1.49 0 2.699 1.209 2.699 2.7s-1.209 2.7-2.699 2.7z"></path>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/16. Trillo/img/SVG/magnifying-glass.svg:
--------------------------------------------------------------------------------
1 | <!-- Generated by IcoMoon.io -->
2 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
3 | <title>magnifying-glass</title>
4 | <path d="M17.545 15.467l-3.779-3.779c0.57-0.935 0.898-2.035 0.898-3.21 0-3.417-2.961-6.377-6.378-6.377s-6.186 2.769-6.186 6.186c0 3.416 2.961 6.377 6.377 6.377 1.137 0 2.2-0.309 3.115-0.844l3.799 3.801c0.372 0.371 0.975 0.371 1.346 0l0.943-0.943c0.371-0.371 0.236-0.84-0.135-1.211zM4.004 8.287c0-2.366 1.917-4.283 4.282-4.283s4.474 2.107 4.474 4.474c0 2.365-1.918 4.283-4.283 4.283s-4.473-2.109-4.473-4.474z"></path>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/16. Trillo/img/SVG/map.svg:
--------------------------------------------------------------------------------
1 | <!-- Generated by IcoMoon.io -->
2 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
3 | <title>map</title>
4 | <path d="M19.447 3.718l-6-3c-0.281-0.141-0.613-0.141-0.895 0l-5.63 2.815-5.606-1.869c-0.306-0.102-0.64-0.051-0.901 0.138s-0.415 0.49-0.415 0.811v13.001c0 0.379 0.214 0.725 0.553 0.894l6 3c0.141 0.070 0.294 0.106 0.447 0.106s0.307-0.035 0.447-0.106l5.63-2.814 5.606 1.869c0.305 0.1 0.64 0.049 0.901-0.139s0.415-0.49 0.415-0.81v-13.002c0.001-0.379-0.213-0.725-0.552-0.894zM8 5.231l4-2v11.763l-4 2v-11.763zM2 4l4 1.333v11.661l-4-2v-10.994zM18 16.227l-4-1.334v-11.662l4 2v10.996z"></path>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/16. Trillo/img/SVG/star.svg:
--------------------------------------------------------------------------------
1 | <!-- Generated by IcoMoon.io -->
2 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
3 | <title>star</title>
4 | <path d="M10 1.3l2.388 6.722h6.412l-5.232 3.948 1.871 6.928-5.439-4.154-5.438 4.154 1.87-6.928-5.233-3.948h6.412l2.389-6.722z"></path>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/16. Trillo/img/chevron-thin-right.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <!-- Generated by IcoMoon.io -->
3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 | <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
5 | <path d="M13.25 10l-7.141-7.42c-0.268-0.27-0.268-0.707 0-0.979 0.268-0.27 0.701-0.27 0.969 0l7.83 7.908c0.268 0.271 0.268 0.709 0 0.979l-7.83 7.908c-0.268 0.271-0.701 0.27-0.969 0s-0.268-0.707 0-0.979l7.141-7.417z"></path>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/16. Trillo/img/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/16. Trillo/img/favicon.png


--------------------------------------------------------------------------------
/16. Trillo/img/hotel-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/16. Trillo/img/hotel-1.jpg


--------------------------------------------------------------------------------
/16. Trillo/img/hotel-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/16. Trillo/img/hotel-2.jpg


--------------------------------------------------------------------------------
/16. Trillo/img/hotel-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/16. Trillo/img/hotel-3.jpg


--------------------------------------------------------------------------------
/16. Trillo/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/16. Trillo/img/logo.png


--------------------------------------------------------------------------------
/16. Trillo/img/sprite.svg:
--------------------------------------------------------------------------------
 1 | <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 | <defs>
 3 | <symbol id="icon-bookmark" viewBox="0 0 20 20">
 4 | <title>bookmark</title>
 5 | <path d="M14 2v17l-4-4-4 4v-17c0-0.553 0.585-1.020 1-1h6c0.689-0.020 1 0.447 1 1z"></path>
 6 | </symbol>
 7 | <symbol id="icon-chevron-thin-right" viewBox="0 0 20 20">
 8 | <title>chevron-thin-right</title>
 9 | <path d="M13.25 10l-7.141-7.42c-0.268-0.27-0.268-0.707 0-0.979 0.268-0.27 0.701-0.27 0.969 0l7.83 7.908c0.268 0.271 0.268 0.709 0 0.979l-7.83 7.908c-0.268 0.271-0.701 0.27-0.969 0s-0.268-0.707 0-0.979l7.141-7.417z"></path>
10 | </symbol>
11 | <symbol id="icon-aircraft" viewBox="0 0 20 20">
12 | <title>aircraft</title>
13 | <path d="M12.496 17.414c-0.394-1.096-1.805-4.775-2.39-6.297-1.103 0.737-2.334 1.435-3.512 1.928-0.366 1.28-1.094 3.709-1.446 4.033-0.604 0.557-0.832 0.485-0.925-0.279s-0.485-3.236-0.485-3.236-2.162-1.219-2.84-1.568-0.667-0.591 0.057-0.974c0.422-0.223 2.927-0.085 4.242 0.005 0.861-0.951 1.931-1.882 2.993-2.679-1.215-1.076-4.15-3.675-5.034-4.424-0.776-0.658 0.079-0.797 0.079-0.797 0.39-0.070 1.222-0.132 1.628-0.009 2.524 0.763 6.442 2.068 7.363 2.376 0.353-0.249 0.737-0.52 1.162-0.821 4.702-3.33 5.887-2.593 6.111-2.27s0.503 1.701-4.199 5.032c-0.425 0.301-0.808 0.573-1.16 0.823-0.029 0.98-0.157 5.151-0.311 7.811-0.025 0.428-0.367 1.198-0.565 1.544-0.001 0-0.423 0.765-0.768-0.198z"></path>
14 | </symbol>
15 | <symbol id="icon-chat" viewBox="0 0 20 20">
16 | <title>chat</title>
17 | <path d="M5.8 12.2v-6.2h-3.8c-1.1 0-2 0.9-2 2v6c0 1.1 0.9 2 2 2h1v3l3-3h5c1.1 0 2-0.9 2-2v-1.82c-0.064 0.014-0.132 0.021-0.2 0.021l-7-0.001zM18 1h-9c-1.1 0-2 0.9-2 2v8h7l3 3v-3h1c1.1 0 2-0.899 2-2v-6c0-1.1-0.9-2-2-2z"></path>
18 | </symbol>
19 | <symbol id="icon-home" viewBox="0 0 20 20">
20 | <title>home</title>
21 | <path d="M18.672 11h-1.672v6c0 0.445-0.194 1-1 1h-4v-6h-4v6h-4c-0.806 0-1-0.555-1-1v-6h-1.672c-0.598 0-0.47-0.324-0.060-0.748l8.024-8.032c0.195-0.202 0.451-0.302 0.708-0.312 0.257 0.010 0.513 0.109 0.708 0.312l8.023 8.031c0.411 0.425 0.539 0.749-0.059 0.749z"></path>
22 | </symbol>
23 | <symbol id="icon-key" viewBox="0 0 20 20">
24 | <title>key</title>
25 | <path d="M17.691 4.725c-0.503-2.977-3.22-4.967-6.069-4.441s-5.256 2.816-4.753 5.795c0.107 0.641 0.408 1.644 0.763 2.365l-5.175 7.723c-0.191 0.285-0.299 0.799-0.242 1.141l0.333 1.971c0.058 0.342 0.372 0.572 0.7 0.514l1.516-0.281c0.328-0.059 0.744-0.348 0.924-0.639l2.047-3.311 0.018-0.022 1.386-0.256 2.39-3.879c0.785 0.139 1.912 0.092 2.578-0.031 2.848-0.526 4.087-3.67 3.584-6.649zM15.166 6.252c-0.784 1.17-1.584 0.346-2.703-0.475-1.119-0.818-2.135-1.322-1.352-2.492s2.326-1.455 3.447-0.635c1.12 0.819 1.391 2.432 0.608 3.602z"></path>
26 | </symbol>
27 | <symbol id="icon-location-pin" viewBox="0 0 20 20">
28 | <title>location-pin</title>
29 | <path d="M10 2.009c-2.762 0-5 2.229-5 4.99 0 4.774 5 11 5 11s5-6.227 5-11c0-2.76-2.238-4.99-5-4.99zM10 9.76c-1.492 0-2.7-1.209-2.7-2.7s1.208-2.7 2.7-2.7c1.49 0 2.699 1.209 2.699 2.7s-1.209 2.7-2.699 2.7z"></path>
30 | </symbol>
31 | <symbol id="icon-magnifying-glass" viewBox="0 0 20 20">
32 | <title>magnifying-glass</title>
33 | <path d="M17.545 15.467l-3.779-3.779c0.57-0.935 0.898-2.035 0.898-3.21 0-3.417-2.961-6.377-6.378-6.377s-6.186 2.769-6.186 6.186c0 3.416 2.961 6.377 6.377 6.377 1.137 0 2.2-0.309 3.115-0.844l3.799 3.801c0.372 0.371 0.975 0.371 1.346 0l0.943-0.943c0.371-0.371 0.236-0.84-0.135-1.211zM4.004 8.287c0-2.366 1.917-4.283 4.282-4.283s4.474 2.107 4.474 4.474c0 2.365-1.918 4.283-4.283 4.283s-4.473-2.109-4.473-4.474z"></path>
34 | </symbol>
35 | <symbol id="icon-map" viewBox="0 0 20 20">
36 | <title>map</title>
37 | <path d="M19.447 3.718l-6-3c-0.281-0.141-0.613-0.141-0.895 0l-5.63 2.815-5.606-1.869c-0.306-0.102-0.64-0.051-0.901 0.138s-0.415 0.49-0.415 0.811v13.001c0 0.379 0.214 0.725 0.553 0.894l6 3c0.141 0.070 0.294 0.106 0.447 0.106s0.307-0.035 0.447-0.106l5.63-2.814 5.606 1.869c0.305 0.1 0.64 0.049 0.901-0.139s0.415-0.49 0.415-0.81v-13.002c0.001-0.379-0.213-0.725-0.552-0.894zM8 5.231l4-2v11.763l-4 2v-11.763zM2 4l4 1.333v11.661l-4-2v-10.994zM18 16.227l-4-1.334v-11.662l4 2v10.996z"></path>
38 | </symbol>
39 | <symbol id="icon-star" viewBox="0 0 20 20">
40 | <title>star</title>
41 | <path d="M10 1.3l2.388 6.722h6.412l-5.232 3.948 1.871 6.928-5.439-4.154-5.438 4.154 1.87-6.928-5.233-3.948h6.412l2.389-6.722z"></path>
42 | </symbol>
43 | </defs>
44 | </svg>
45 | 


--------------------------------------------------------------------------------
/16. Trillo/img/text.txt:
--------------------------------------------------------------------------------
 1 | DESCRIPTION TEXT
 2 | 
 3 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi nisi dignissimos debitis ratione sapiente saepe. Accusantium cumque, quas, ut corporis incidunt deserunt quae architecto voluptate.
 4 | 
 5 | Accusantium cumque, quas, ut corporis incidunt deserunt quae architecto voluptate delectus, inventore iure aliquid aliquam.
 6 | 
 7 | 
 8 | 
 9 | REVIEW 1
10 | 
11 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga doloremque architecto dicta animi, totam, itaque officia ex.
12 | 
13 | 
14 | 
15 | REVIEW 2
16 | 
17 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga doloremque architecto dicta animi.


--------------------------------------------------------------------------------
/16. Trillo/img/user-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/16. Trillo/img/user-1.jpg


--------------------------------------------------------------------------------
/16. Trillo/img/user-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/16. Trillo/img/user-2.jpg


--------------------------------------------------------------------------------
/16. Trillo/img/user-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/16. Trillo/img/user-3.jpg


--------------------------------------------------------------------------------
/16. Trillo/img/user-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/16. Trillo/img/user-4.jpg


--------------------------------------------------------------------------------
/16. Trillo/img/user-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/16. Trillo/img/user-5.jpg


--------------------------------------------------------------------------------
/16. Trillo/img/user-6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/16. Trillo/img/user-6.jpg


--------------------------------------------------------------------------------
/16. Trillo/img/user.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nikita-rudenko/html-css-practice/cd660d4182b3cb9f60b0d6c7ad1455e79f158aed/16. Trillo/img/user.jpg


--------------------------------------------------------------------------------
/16. Trillo/index.html:
--------------------------------------------------------------------------------
  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 | 
  7 | 		<link
  8 | 			href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"
  9 | 			rel="stylesheet"
 10 | 		/>
 11 | 		<link rel="stylesheet" href="css/style.css" />
 12 | 		<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
 13 | 
 14 | 		<title>Trillo &mdash; Your all-in-one booking app</title>
 15 | 	</head>
 16 | 	<body>
 17 | 		<div class="container">
 18 | 			<header class="header">
 19 | 				<img class="logo" src="img/logo.png" alt="Trillo logo." />
 20 | 
 21 | 				<form class="search" action="#">
 22 | 					<input
 23 | 						class="search__input"
 24 | 						type="text"
 25 | 						placeholder="Search hotels"
 26 | 					/>
 27 | 					<button class="search__button">
 28 | 						<svg class="search__icon">
 29 | 							<use xlink:href="img/sprite.svg#icon-magnifying-glass"></use>
 30 | 						</svg>
 31 | 					</button>
 32 | 				</form>
 33 | 
 34 | 				<nav class="user-nav">
 35 | 					<div class="user-nav__icon-box">
 36 | 						<svg class="user-nav__icon">
 37 | 							<use xlink:href="img/sprite.svg#icon-bookmark"></use>
 38 | 						</svg>
 39 | 						<span class="user-nav__notification">7</span>
 40 | 					</div>
 41 | 					<div class="user-nav__icon-box">
 42 | 						<svg class="user-nav__icon">
 43 | 							<use xlink:href="img/sprite.svg#icon-chat"></use>
 44 | 							<span class="user-nav__notification">13</span>
 45 | 						</svg>
 46 | 					</div>
 47 | 					<div class="user-nav__user">
 48 | 						<img
 49 | 							class="user-nav__user-photo"
 50 | 							src="img/user.jpg"
 51 | 							alt="User photo."
 52 | 						/>
 53 | 						<span class="user-nav__user-name">
 54 | 							Jonas
 55 | 						</span>
 56 | 					</div>
 57 | 				</nav>
 58 | 			</header>
 59 | 
 60 | 			<div class="content">
 61 | 				<nav class="sidebar">
 62 | 					<ul class="side-nav">
 63 | 						<li class="side-nav__item side-nav__item--active">
 64 | 							<a href="#" class="side-nav__link">
 65 | 								<svg class="side-nav__icon">
 66 | 									<use xlink:href="img/sprite.svg#icon-home"></use>
 67 | 									<span>Hotel</span>
 68 | 								</svg>
 69 | 							</a>
 70 | 						</li>
 71 | 						<li class="side-nav__item">
 72 | 							<a href="#" class="side-nav__link">
 73 | 								<svg class="side-nav__icon">
 74 | 									<use xlink:href="img/sprite.svg#icon-aircraft"></use>
 75 | 									<span>Flight</span>
 76 | 								</svg>
 77 | 							</a>
 78 | 						</li>
 79 | 						<li class="side-nav__item">
 80 | 							<a href="#" class="side-nav__link">
 81 | 								<svg class="side-nav__icon">
 82 | 									<use xlink:href="img/sprite.svg#icon-key"></use>
 83 | 									<span>Car rental</span>
 84 | 								</svg>
 85 | 							</a>
 86 | 						</li>
 87 | 						<li class="side-nav__item">
 88 | 							<a href="#" class="side-nav__link">
 89 | 								<svg class="side-nav__icon">
 90 | 									<use xlink:href="img/sprite.svg#icon-map"></use>
 91 | 									<span>Tours</span>
 92 | 								</svg>
 93 | 							</a>
 94 | 						</li>
 95 | 					</ul>
 96 | 
 97 | 					<div class="legal">
 98 | 						&copy; 2017 by trillo. All rights reserved.
 99 | 					</div>
100 | 				</nav>
101 | 				<main class="hotel-view">
102 | 					<div class="gallery">
103 | 						<figure class="gallery__item">
104 | 							<img
105 | 								class="gallery__photo"
106 | 								src="img/hotel-1.jpg"
107 | 								alt="Photo of hotel 1"
108 | 							/>
109 | 						</figure>
110 | 						<figure class="gallery__item">
111 | 							<img
112 | 								class="gallery__photo"
113 | 								src="img/hotel-2.jpg"
114 | 								alt="Photo of hotel 2"
115 | 							/>
116 | 						</figure>
117 | 						<figure class="gallery__item">
118 | 							<img
119 | 								class="gallery__photo"
120 | 								src="img/hotel-3.jpg"
121 | 								alt="Photo of hotel 3"
122 | 							/>
123 | 						</figure>
124 | 					</div>
125 | 
126 | 					<div class="overview">
127 | 						<h1 class="overview__heading">Hotel Las Palmas</h1>
128 | 						<div class="overview__stars">
129 | 							<svg class="overview__icon-star">
130 | 								<use xlink:href="img/sprite.svg#icon-star"></use>
131 | 							</svg>
132 | 							<svg class="overview__icon-star">
133 | 								<use xlink:href="img/sprite.svg#icon-star"></use>
134 | 							</svg>
135 | 							<svg class="overview__icon-star">
136 | 								<use xlink:href="img/sprite.svg#icon-star"></use>
137 | 							</svg>
138 | 							<svg class="overview__icon-star">
139 | 								<use xlink:href="img/sprite.svg#icon-star"></use>
140 | 							</svg>
141 | 							<svg class="overview__icon-star">
142 | 								<use xlink:href="img/sprite.svg#icon-star"></use>
143 | 							</svg>
144 | 						</div>
145 | 
146 | 						<div class="overview__location">
147 | 							<svg class="overview__icon-location">
148 | 								<use xlink:href="img/sprite.svg#icon-location-pin"></use>
149 | 							</svg>
150 | 							<button class="btn-inline">Albufeira, Portugal</button>
151 | 						</div>
152 | 
153 | 						<div class="overview__rating">
154 | 							<div class="overview__rating-average">
155 | 								8.6
156 | 							</div>
157 | 							<div class="overview__rating-count">
158 | 								429 votes
159 | 							</div>
160 | 						</div>
161 | 					</div>
162 | 
163 | 					<div class="detail">
164 | 						<div class="description">
165 | 							<p class="paragraph">
166 | 								Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi
167 | 								nisi dignissimos debitis ratione sapiente saepe. Accusantium
168 | 								cumque, quas, ut corporis incidunt deserunt quae architecto
169 | 								voluptate.
170 | 							</p>
171 | 							<p class="paragraph">
172 | 								Accusantium cumque, quas, ut corporis incidunt deserunt quae
173 | 								architecto voluptate delectus, inventore iure aliquid aliquam.
174 | 							</p>
175 | 
176 | 							<ul class="list">
177 | 								<li class="list__item">
178 | 									Close to the beach
179 | 								</li>
180 | 								<li class="list__item">
181 | 									Breakfast included
182 | 								</li>
183 | 								<li class="list__item">
184 | 									Free airport shuttle
185 | 								</li>
186 | 								<li class="list__item">
187 | 									Free wifi in all rooms
188 | 								</li>
189 | 								<li class="list__item">
190 | 									Air conditioning and heating
191 | 								</li>
192 | 								<li class="list__item">
193 | 									Pets allowed
194 | 								</li>
195 | 								<li class="list__item">
196 | 									We speak all languages
197 | 								</li>
198 | 								<li class="list__item">
199 | 									Perfect for families
200 | 								</li>
201 | 							</ul>
202 | 
203 | 							<div class="recommend">
204 | 								<p class="recommend__count">
205 | 									Lucy and 3 other friends recommend this hotel.
206 | 								</p>
207 | 								<div class="recommend__friends">
208 | 									<img
209 | 										src="img/user-3.jpg"
210 | 										alt="Friend 1"
211 | 										class="recommend__photo"
212 | 									/>
213 | 									<img
214 | 										src="img/user-4.jpg"
215 | 										alt="Friend 2"
216 | 										class="recommend__photo"
217 | 									/>
218 | 									<img
219 | 										src="img/user-5.jpg"
220 | 										alt="Friend 3"
221 | 										class="recommend__photo"
222 | 									/>
223 | 									<img
224 | 										src="img/user-6.jpg"
225 | 										alt="Friend 4"
226 | 										class="recommend__photo"
227 | 									/>
228 | 								</div>
229 | 							</div>
230 | 						</div>
231 | 
232 | 						<div class="user-reviews">
233 | 							<figure class="review">
234 | 								<blockquote class="review__text">
235 | 									Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga
236 | 									doloremque architecto dicta animi, totam, itaque officia ex.
237 | 								</blockquote>
238 | 								<figcaption class="review__user">
239 | 									<img
240 | 										src="img/user-1.jpg"
241 | 										alt="User 1"
242 | 										class="review__photo"
243 | 									/>
244 | 									<div class="review__user-box">
245 | 										<p class="review__user-name">
246 | 											Nick Smith
247 | 										</p>
248 | 										<p class="review__user-date">
249 | 											Feb 23rd, 2017
250 | 										</p>
251 | 									</div>
252 | 									<div class="review__rating">
253 | 										7.8
254 | 									</div>
255 | 								</figcaption>
256 | 							</figure>
257 | 
258 | 							<figure class="review">
259 | 								<blockquote class="review__text">
260 | 									Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga
261 | 									doloremque architecto dicta animi.
262 | 								</blockquote>
263 | 								<figcaption class="review__user">
264 | 									<img
265 | 										src="img/user-2.jpg"
266 | 										alt="User 2"
267 | 										class="review__photo"
268 | 									/>
269 | 									<div class="review__user-box">
270 | 										<p class="review__user-name">
271 | 											Mary Thomas
272 | 										</p>
273 | 										<p class="review__user-date">
274 | 											Sept 13th, 2017
275 | 										</p>
276 | 									</div>
277 | 									<div class="review__rating">
278 | 										9.3
279 | 									</div>
280 | 								</figcaption>
281 | 							</figure>
282 | 
283 | 							<button class="btn-inline">Show all <span>&rarr;</span></button>
284 | 						</div>
285 | 					</div>
286 | 
287 | 					<div class="cta">
288 | 						<h2 class="cta__book-now">
289 | 							Good news! We have 4 free rooms for your selected dates!
290 | 						</h2>
291 | 						<button class="btn">
292 | 							<span class="btn__visible">Book now</span>
293 | 							<span class="btn__invisible">Only 4 rooms left</span>
294 | 						</button>
295 | 					</div>
296 | 				</main>
297 | 			</div>
298 | 		</div>
299 | 	</body>
300 | </html>
301 | 


--------------------------------------------------------------------------------
/16. Trillo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "trillo",
 3 |   "version": "1.0.0",
 4 |   "description": "Trillo app",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "watch:sass": "node-sass sass/main.scss css/style.css -w",
 8 |     "dev-server": "live-server",
 9 |     "start": "npm-run-all --parallel dev-server watch:sass",
10 |     "compile:sass": "node-sass sass/main.scss css/style.comp.css",
11 |     "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.concat.css -o css/style.prefix.css",
12 |     "compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
13 |     "build:css": "npm-run-all compile:sass prefix:css compress:css"
14 |   },
15 |   "author": "",
16 |   "license": "ISC",
17 |   "devDependencies": {
18 |     "autoprefixer": "^9.5.0",
19 |     "node-sass": "^4.11.0",
20 |     "npm-run-all": "^4.1.5",
21 |     "postcss-cli": "^6.1.2"
22 |   },
23 |   "dependencies": {}
24 | }
25 | 


--------------------------------------------------------------------------------
/16. Trillo/sass/_base.scss:
--------------------------------------------------------------------------------
 1 | /*
 2 | COLORS
 3 | 
 4 | Primary: #eb2f64
 5 | Primary light: #FF3366
 6 | Primary dark: #BA265D
 7 | 
 8 | Grey light 1: #faf9f9
 9 | Grey light 2: #f4f2f2
10 | Grey light 3: #f0eeee
11 | Grey light 4: #ccc
12 | 
13 | Grey dark 1: #333
14 | Grey dark 2: #777
15 | Grey dark 3: #999
16 | 
17 | */
18 | :root {
19 | 	--color-primary: #eb2f64;
20 | 	--color-primary-light: #ff3366;
21 | 	--color-primary-dark: #ba265d;
22 | 
23 | 	--color-grey-light-1: #faf9f9;
24 | 	--color-grey-light-2: #f4f2f2;
25 | 	--color-grey-light-3: #f0eeee;
26 | 	--color-grey-light-4: #ccc;
27 | 
28 | 	--color-grey-dark-1: #333;
29 | 	--color-grey-dark-2: #777;
30 | 	--color-grey-dark-3: #999;
31 | 
32 | 	--shadow-dark: 0 2rem 6rem rgba(0, 0, 0, 0.3);
33 | 	--shadow-light: 0 2rem 5rem rgba(0, 0, 0, 0.06);
34 | 
35 | 	--line: 1px solid var(--color-grey-light-2);
36 | }
37 | 
38 | $bp-largest: 75em; // 1200px
39 | $bp-large: 68.75em; // 1100px
40 | $bp-medium: 56.25em; // 900px
41 | $bp-small: 37.5em; // 600px
42 | $bp-smallest: 31.25em; // 500px
43 | 
44 | * {
45 | 	margin: 0;
46 | 	padding: 0;
47 | }
48 | 
49 | *,
50 | *::after,
51 | *::before {
52 | 	box-sizing: inherit;
53 | }
54 | 
55 | html {
56 | 	box-sizing: border-box;
57 | 	font-size: 62.5%; // 1rem === 10px, 10px/16px === 62.5%
58 | 
59 | 	@media only screen and (max-width: $bp-large) {
60 | 		font-size: 50%;
61 | 	}
62 | }
63 | 
64 | body {
65 | 	font-family: 'Open Sans', sans-serif;
66 | 	font-weight: 400;
67 | 	line-height: 1.6;
68 | 	color: var(--color-grey-dark-2);
69 | 	background-image: linear-gradient(
70 | 		to right bottom,
71 | 		var(--color-primary-light),
72 | 		var(--color-primary-dark)
73 | 	);
74 | 	background-size: cover;
75 | 	background-repeat: no-repeat;
76 | }
77 | 


--------------------------------------------------------------------------------
/16. Trillo/sass/_components.scss:
--------------------------------------------------------------------------------
  1 | ///////////////////////////////
  2 | // LOGO
  3 | 
  4 | .logo {
  5 | 	height: 3.25rem;
  6 | 	margin-left: 2rem;
  7 | }
  8 | 
  9 | ///////////////////////////////
 10 | // SEARCH
 11 | 
 12 | .search {
 13 | 	flex: 0 0 40%;
 14 | 
 15 | 	display: flex;
 16 | 	align-items: center;
 17 | 	justify-content: center;
 18 | 
 19 | 	@media only screen and (max-width: $bp-smallest) {
 20 | 		order: 1;
 21 | 		flex: 0 0 100%;
 22 | 		background-color: var(--color-grey-light-2);
 23 | 	}
 24 | 
 25 | 	&__input {
 26 | 		font-family: inherit;
 27 | 		font-size: inherit;
 28 | 		color: inherit;
 29 | 		background-color: var(--color-grey-light-2);
 30 | 		border: none;
 31 | 		padding: 0.7rem 2rem;
 32 | 		border-radius: 99rem;
 33 | 		width: 90%;
 34 | 		transition: all 0.2s;
 35 | 		margin-right: -3.5rem;
 36 | 
 37 | 		&:focus {
 38 | 			outline: none;
 39 | 			width: 100%;
 40 | 			background-color: var(--color-grey-light-3);
 41 | 		}
 42 | 
 43 | 		&::placeholder {
 44 | 			font-weight: 100;
 45 | 			color: var(--color-grey-light-4);
 46 | 		}
 47 | 	}
 48 | 
 49 | 	&__input:focus + &__button {
 50 | 		background-color: var(--color-grey-light-3);
 51 | 	}
 52 | 
 53 | 	&__button {
 54 | 		border: none;
 55 | 		background-color: var(--color-grey-light-2);
 56 | 
 57 | 		&:focus {
 58 | 			outline: none;
 59 | 		}
 60 | 
 61 | 		&:active {
 62 | 			transform: translateY(2px);
 63 | 		}
 64 | 	}
 65 | 
 66 | 	&__icon {
 67 | 		height: 2rem;
 68 | 		width: 2rem;
 69 | 		fill: var(--color-grey-dark-3);
 70 | 	}
 71 | }
 72 | 
 73 | //////////////////////////////
 74 | // USER NAV
 75 | 
 76 | .user-nav {
 77 | 	align-self: stretch;
 78 | 
 79 | 	display: flex;
 80 | 	align-items: center;
 81 | 
 82 | 	& > * {
 83 | 		padding: 0 2rem;
 84 | 		cursor: pointer;
 85 | 		height: 100%;
 86 | 		display: flex;
 87 | 		align-items: center;
 88 | 	}
 89 | 
 90 | 	& > *:hover {
 91 | 		background-color: var(--color-grey-light-2);
 92 | 	}
 93 | 
 94 | 	&__icon-box {
 95 | 		position: relative;
 96 | 	}
 97 | 
 98 | 	&__icon {
 99 | 		height: 2.25rem;
100 | 		width: 2.25rem;
101 | 		fill: var(--color-grey-dark-2);
102 | 	}
103 | 
104 | 	&__notification {
105 | 		font-size: 0.8rem;
106 | 		height: 1.75rem;
107 | 		width: 1.75rem;
108 | 		border-radius: 100%;
109 | 		background-color: var(--color-primary);
110 | 		color: #fff;
111 | 		position: absolute;
112 | 		top: 1.5rem;
113 | 		right: 1.1rem;
114 | 
115 | 		display: flex;
116 | 		justify-content: center;
117 | 		align-items: center;
118 | 	}
119 | 
120 | 	&__user-photo {
121 | 		height: 3.75rem;
122 | 		width: 3.75rem;
123 | 		border-radius: 50%;
124 | 		margin-right: 1rem;
125 | 	}
126 | }
127 | 
128 | ///////////////////////////////////
129 | /// SIDE NAV
130 | 
131 | .side-nav {
132 | 	font-size: 1.4rem;
133 | 	list-style: none;
134 | 	margin-top: 3.5rem;
135 | 
136 | 	@media only screen and (max-width: $bp-medium) {
137 | 		display: flex;
138 | 		margin: 0;
139 | 	}
140 | 
141 | 	&__item {
142 | 		position: relative;
143 | 
144 | 		&:not(:last-child) {
145 | 			margin-bottom: 0.5rem;
146 | 
147 | 			@media only screen and (max-width: $bp-medium) {
148 | 				margin-bottom: 0;
149 | 			}
150 | 		}
151 | 
152 | 		@media only screen and (max-width: $bp-medium) {
153 | 			flex: 1;
154 | 		}
155 | 	}
156 | 
157 | 	&__item::before {
158 | 		content: '';
159 | 		position: absolute;
160 | 		top: 0;
161 | 		left: 0;
162 | 		height: 100%;
163 | 		width: 3px;
164 | 		background-color: var(--color-primary);
165 | 		transform: scaleY(0);
166 | 		transition: transform 0.2s, width 0.3s cubic-bezier(1, 0, 0, 1) 0.2s,
167 | 			background-color 0.1s;
168 | 	}
169 | 
170 | 	&__item:hover::before,
171 | 	&__item--active::before {
172 | 		transform: scaleY(1);
173 | 		width: 100%;
174 | 	}
175 | 
176 | 	&__item:active::before {
177 | 		background-color: var(--color-primary-light);
178 | 	}
179 | 
180 | 	&__link:link,
181 | 	&__link:visited {
182 | 		color: var(--color-grey-light-1);
183 | 		text-decoration: none;
184 | 		text-transform: uppercase;
185 | 		display: block;
186 | 		padding: 1.5rem 3rem;
187 | 		position: relative;
188 | 		z-index: 10;
189 | 
190 | 		display: flex;
191 | 		align-items: center;
192 | 
193 | 		@media only screen and (max-width: $bp-medium) {
194 | 			justify-content: center;
195 | 			padding: 2rem;
196 | 		}
197 | 
198 | 		@media only screen and (max-width: $bp-small) {
199 | 			flex-direction: column;
200 | 			padding: 1.5rem 0.5rem;
201 | 		}
202 | 	}
203 | 
204 | 	&__icon {
205 | 		width: 1.75rem;
206 | 		height: 1.75rem;
207 | 		margin-right: 2rem;
208 | 		fill: currentColor;
209 | 
210 | 		@media only screen and (max-width: $bp-small) {
211 | 			margin-right: 0;
212 | 			margin-bottom: 0.7rem;
213 | 			width: 1.5rem;
214 | 			height: 1.5rem;
215 | 		}
216 | 	}
217 | }
218 | 
219 | //////////////////////////////////
220 | /// LEGAL TEXT
221 | 
222 | .legal {
223 | 	color: var(--color-grey-light-4);
224 | 	font-size: 1.2rem;
225 | 	text-align: center;
226 | 	padding: 2.5rem;
227 | 
228 | 	@media only screen and (max-width: $bp-medium) {
229 | 		display: none;
230 | 	}
231 | }
232 | 
233 | //////////////////////////////////
234 | /// GALLERY
235 | .gallery {
236 | 	display: flex;
237 | 
238 | 	&__photo {
239 | 		width: 100%;
240 | 		display: block;
241 | 	}
242 | }
243 | 
244 | //////////////////////////////////
245 | /// OVERVIEW
246 | .overview {
247 | 	display: flex;
248 | 	align-items: center;
249 | 	border-bottom: var(--line);
250 | 
251 | 	&__heading {
252 | 		font-size: 2.25rem;
253 | 		font-weight: 300;
254 | 		text-transform: uppercase;
255 | 		letter-spacing: 1px;
256 | 		padding: 1.5rem 3rem;
257 | 
258 | 		@media only screen and (max-width: $bp-small) {
259 | 			font-size: 1.8rem;
260 | 			padding: 1.25rem 2rem;
261 | 		}
262 | 	}
263 | 
264 | 	&__stars {
265 | 		margin-right: auto;
266 | 		display: flex;
267 | 	}
268 | 
269 | 	&__icon-star,
270 | 	&__icon-location {
271 | 		width: 1.75rem;
272 | 		height: 1.75rem;
273 | 		fill: var(--color-primary);
274 | 	}
275 | 
276 | 	&__location {
277 | 		font-size: 1.2rem;
278 | 		display: flex;
279 | 		align-items: center;
280 | 	}
281 | 
282 | 	&__icon-location {
283 | 		margin-right: 0.5rem;
284 | 	}
285 | 
286 | 	&__rating {
287 | 		background-color: var(--color-primary);
288 | 		margin-left: 3rem;
289 | 		color: #fff;
290 | 		align-self: stretch;
291 | 		padding: 0 2.25rem;
292 | 
293 | 		display: flex;
294 | 		justify-content: center;
295 | 		align-items: center;
296 | 		flex-direction: column;
297 | 
298 | 		@media only screen and (max-width: $bp-small) {
299 | 			padding: 0 1.5rem;
300 | 		}
301 | 	}
302 | 
303 | 	&__rating-average {
304 | 		font-size: 2.25rem;
305 | 		font-weight: 300;
306 | 		margin-bottom: -3px;
307 | 
308 | 		@media only screen and (max-width: $bp-small) {
309 | 			font-size: 1.8rem;
310 | 		}
311 | 	}
312 | 
313 | 	&__rating-count {
314 | 		font-size: 0.8rem;
315 | 		text-transform: uppercase;
316 | 
317 | 		@media only screen and (max-width: $bp-small) {
318 | 			font-size: 0.5rem;
319 | 		}
320 | 	}
321 | }
322 | 
323 | //////////////////////
324 | /// BUTTON
325 | 
326 | .btn-inline {
327 | 	border: none;
328 | 	color: var(--color-primary);
329 | 	font-size: inherit;
330 | 	border-bottom: 1px solid currentColor;
331 | 	padding: 2px;
332 | 	display: inline-block;
333 | 	background-color: transparent;
334 | 	cursor: pointer;
335 | 	transition: all 0.2s;
336 | 
337 | 	& span {
338 | 		margin-left: 3px;
339 | 		transition: margin-left 0.2s;
340 | 	}
341 | 
342 | 	&:hover {
343 | 		color: var(--color-grey-dark-1);
344 | 
345 | 		span {
346 | 			margin-left: 8px;
347 | 		}
348 | 	}
349 | 
350 | 	&:focus {
351 | 		outline: none;
352 | 		animation: pulsate 0.7s infinite;
353 | 	}
354 | }
355 | 
356 | @keyframes pulsate {
357 | 	0% {
358 | 		transform: scale(1);
359 | 		box-shadow: none;
360 | 	}
361 | 	50% {
362 | 		transform: scale(1.05);
363 | 		box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.25);
364 | 	}
365 | 	100% {
366 | 		transform: scale(1);
367 | 		box-shadow: none;
368 | 	}
369 | }
370 | 
371 | ///////////////////////////
372 | /// PARAGRAPH
373 | .paragraph:not(:last-of-type) {
374 | 	margin-bottom: 2rem;
375 | }
376 | 
377 | ///////////////////////////
378 | /// LIST
379 | 
380 | .list {
381 | 	list-style: none;
382 | 	margin: 3rem 0;
383 | 	padding: 3rem 0;
384 | 	border-top: var(--line);
385 | 	border-bottom: var(--line);
386 | 
387 | 	display: flex;
388 | 	flex-wrap: wrap;
389 | 
390 | 	&__item {
391 | 		flex: 0 0 50%;
392 | 		margin-bottom: 0.7rem;
393 | 	}
394 | 
395 | 	&__item::before {
396 | 		content: '';
397 | 		display: inline-block;
398 | 		height: 1rem;
399 | 		width: 1rem;
400 | 		margin-right: 0.7rem;
401 | 
402 | 		// Older browsers
403 | 		// background-image: url(../img/chevron-thin-right.svg);
404 | 		// background-size: cover;
405 | 
406 | 		// Newer browsers - masks
407 | 		@supports (-webkit-mask-image: url()) or (mask-image: url()) {
408 | 			background-color: var(--color-primary);
409 | 			-webkit-mask-image: url(../img/chevron-thin-right.svg);
410 | 			-webkit-mask-size: cover;
411 | 			mask-image: url(../img/chevron-thin-right.svg);
412 | 			mask-size: cover;
413 | 			background-image: none;
414 | 		}
415 | 	}
416 | }
417 | 
418 | ///////////////////////////
419 | /// RECOMMEND
420 | .recommend {
421 | 	font-size: 1.3rem;
422 | 	color: var(--color-grey-dark-3);
423 | 
424 | 	display: flex;
425 | 	align-items: center;
426 | 
427 | 	&__count {
428 | 		margin-right: auto;
429 | 	}
430 | 
431 | 	&__friends {
432 | 		display: flex;
433 | 	}
434 | 
435 | 	&__photo {
436 | 		box-sizing: content-box;
437 | 		height: 4rem;
438 | 		width: 4rem;
439 | 		border-radius: 50%;
440 | 		border: 3px solid #fff;
441 | 
442 | 		&:not(:last-child) {
443 | 			margin-right: -2rem;
444 | 		}
445 | 	}
446 | }
447 | 
448 | ///////////////////////////
449 | /// REVIEWS
450 | 
451 | .review {
452 | 	background-color: #fff;
453 | 	box-shadow: var(--shadow-light);
454 | 	padding: 3rem;
455 | 	margin-bottom: 3.5rem;
456 | 	position: relative;
457 | 	overflow: hidden;
458 | 
459 | 	@media only screen and (max-width: $bp-medium) {
460 | 		padding: 2rem;
461 | 		margin-bottom: 3rem;
462 | 	}
463 | 
464 | 	&__text {
465 | 		margin-bottom: 2rem;
466 | 		position: relative;
467 | 		z-index: 10;
468 | 	}
469 | 
470 | 	&__user {
471 | 		display: flex;
472 | 		align-items: center;
473 | 	}
474 | 
475 | 	&__photo {
476 | 		height: 4.5rem;
477 | 		width: 4.5rem;
478 | 		border-radius: 50%;
479 | 		margin-right: 1.5rem;
480 | 	}
481 | 
482 | 	&__user-box {
483 | 		margin-right: auto;
484 | 	}
485 | 
486 | 	&__user-name {
487 | 		font-size: 1.1rem;
488 | 		font-weight: 600;
489 | 		text-transform: uppercase;
490 | 		margin-bottom: 0.4rem;
491 | 	}
492 | 
493 | 	&__user-date {
494 | 		font-size: 1rem;
495 | 		color: var(--color-grey-dark-3);
496 | 	}
497 | 
498 | 	&__rating {
499 | 		color: var(--color-primary);
500 | 		font-size: 2.2rem;
501 | 		font-weight: 300;
502 | 	}
503 | 
504 | 	&::before {
505 | 		content: '\201C';
506 | 		position: absolute;
507 | 		top: -2.75rem;
508 | 		left: -1rem;
509 | 		line-height: 1;
510 | 		font-size: 20rem;
511 | 		color: var(--color-grey-light-2);
512 | 		font-family: sans-serif;
513 | 		z-index: 1;
514 | 	}
515 | }
516 | 
517 | ////////////////////////////////////////
518 | // CALL TO ACTION
519 | .cta {
520 | 	padding: 3.5rem 0;
521 | 	text-align: center;
522 | 
523 | 	@media only screen and (max-width: $bp-medium) {
524 | 		padding: 2.5rem 0;
525 | 	}
526 | 
527 | 	&__book-now {
528 | 		font-size: 2rem;
529 | 		font-weight: 300;
530 | 		text-transform: uppercase;
531 | 		margin-bottom: 2.5rem;
532 | 	}
533 | }
534 | 
535 | ////////////////////////////////////////
536 | // CTA BUTTON
537 | .btn {
538 | 	font-size: 1.5rem;
539 | 	font-weight: 300;
540 | 	text-transform: uppercase;
541 | 	border-radius: 100px;
542 | 	border: none;
543 | 	background-image: linear-gradient(
544 | 		to right,
545 | 		var(--color-primary-light),
546 | 		var(--color-primary-dark)
547 | 	);
548 | 	color: #fff;
549 | 	position: relative;
550 | 	overflow: hidden;
551 | 	cursor: pointer;
552 | 
553 | 	& > * {
554 | 		display: inline-block;
555 | 		height: 100%;
556 | 		width: 100%;
557 | 		transition: all 0.2s;
558 | 	}
559 | 
560 | 	&__visible {
561 | 		padding: 2rem 7.5rem;
562 | 	}
563 | 
564 | 	&__invisible {
565 | 		position: absolute;
566 | 		padding: 2rem 0;
567 | 		left: 0;
568 | 		top: -100%;
569 | 	}
570 | 
571 | 	&:hover {
572 | 		background-image: linear-gradient(
573 | 			to left,
574 | 			var(--color-primary-light),
575 | 			var(--color-primary-dark)
576 | 		);
577 | 	}
578 | 
579 | 	&:hover &__visible {
580 | 		transform: translateY(100%);
581 | 	}
582 | 
583 | 	&:hover &__invisible {
584 | 		top: 0;
585 | 	}
586 | 
587 | 	&:focus {
588 | 		outline: none;
589 | 		animation: pulsate 1s infinite;
590 | 	}
591 | }
592 | 


--------------------------------------------------------------------------------
/16. Trillo/sass/_layout.scss:
--------------------------------------------------------------------------------
 1 | .container {
 2 | 	max-width: 120rem;
 3 | 	margin: 8rem auto;
 4 | 	background-color: var(--color-grey-light-1);
 5 | 	box-shadow: var(--shadow-dark);
 6 | 
 7 | 	min-height: 50rem;
 8 | 
 9 | 	@media only screen and (max-width: $bp-largest) {
10 | 		margin: 0;
11 | 		max-width: 100%;
12 | 		width: 100%;
13 | 	}
14 | }
15 | 
16 | .header {
17 | 	font-size: 1.4rem;
18 | 	height: 7rem;
19 | 	background-color: #fff;
20 | 	border-bottom: var(--line);
21 | 
22 | 	display: flex;
23 | 	justify-content: space-between;
24 | 	align-items: center;
25 | 
26 | 	@media only screen and (max-width: $bp-smallest) {
27 | 		flex-wrap: wrap;
28 | 		align-content: space-around;
29 | 		height: 11rem;
30 | 	}
31 | }
32 | 
33 | .content {
34 | 	display: flex;
35 | 
36 | 	@media only screen and (max-width: $bp-medium) {
37 | 		flex-direction: column;
38 | 	}
39 | }
40 | 
41 | .sidebar {
42 | 	background-color: var(--color-grey-dark-1);
43 | 
44 | 	flex: 0 0 18%;
45 | 
46 | 	display: flex;
47 | 	flex-direction: column;
48 | 	justify-content: space-between;
49 | }
50 | 
51 | .hotel-view {
52 | 	background-color: #fff;
53 | 	flex: 1;
54 | }
55 | 
56 | .detail {
57 | 	display: flex;
58 | 	padding: 4.5rem;
59 | 	font-size: 1.4rem;
60 | 	background-color: var(--color-grey-light-1);
61 | 	border-bottom: var(--line);
62 | 
63 | 	@media only screen and (max-width: $bp-medium) {
64 | 		padding: 3rem;
65 | 	}
66 | 
67 | 	@media only screen and (max-width: $bp-small) {
68 | 		flex-direction: column;
69 | 	}
70 | }
71 | 
72 | .description {
73 | 	flex: 0 0 60%;
74 | 	margin-right: 4.5rem;
75 | 	padding: 3rem;
76 | 	background-color: #fff;
77 | 	box-shadow: var(--shadow-light);
78 | 
79 | 	@media only screen and (max-width: $bp-medium) {
80 | 		padding: 2rem;
81 | 		margin-right: 3rem;
82 | 	}
83 | 
84 | 	@media only screen and (max-width: $bp-small) {
85 | 		margin-right: 0;
86 | 		margin-bottom: 3rem;
87 | 	}
88 | }
89 | 
90 | .user-reviews {
91 | 	flex: 1;
92 | 
93 | 	display: flex;
94 | 	flex-direction: column;
95 | 	align-items: center;
96 | }
97 | 


--------------------------------------------------------------------------------
/16. Trillo/sass/main.scss:
--------------------------------------------------------------------------------
1 | @import 'base';
2 | @import 'components';
3 | @import 'layout';
4 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # HTML & CSS Practice
 2 | 
 3 | Practicing HTML & CSS by creating websites and uploading to this repo.
 4 | 
 5 | 1.  Acme Web Design [Traversy Media](https://www.youtube.com/watch?v=Wm6CUkswsNw)
 6 | 2.  Elegant Blur Landing [Traversy Media](https://www.youtube.com/watch?v=HZv8YHYUHTU)
 7 | 3.  Responsive Landing Page (+jQuery) [Traversy Media](https://www.youtube.com/watch?v=GJXXf3_dcng)
 8 | 4.  Bootstrap Landing Page [Drew Ryan](https://www.youtube.com/watch?v=Zn64_IVLO88)
 9 | 5.  Parallax Effect [Traversy Media](https://www.youtube.com/watch?v=JttTcnidSdQ)
10 | 6.  Coming Soon Page [DarkCode](https://www.youtube.com/watch?v=uoMkz1cXOcY&t)
11 | 7.  Backgrounds Fade out Effect [DarkCode](https://www.youtube.com/watch?v=Vr4Ay4td3xU)
12 | 8.  Split Landing Page [Traversy Media](https://www.youtube.com/watch?v=oRmQN244Ir0)
13 | 9.  Styling an HTML5 Form Playlist [The Net Ninja](https://www.youtube.com/playlist?list=PL4cUxeGkcC9g5_p_BVUGWykHfqx6bb7qK)
14 | 10. CSS3 Pricing Tables [Traversy Media](https://www.youtube.com/watch?v=7rJ5rhdVvOo)
15 | 11. Fullscreen Video Background [Traversy Media](https://www.youtube.com/watch?v=Xy3GlrddZFI)
16 | 12. Pluralsight Clone Login Page [Traversy Media](https://www.youtube.com/watch?v=wIx1O5Y5EB4)
17 | 13. Materialize CSS Travel Agency [Traversy Media](https://www.youtube.com/watch?v=MaP3vO-vEsg)
18 | 14. Booklist App OOJS [Traversy Media](https://www.youtube.com/watch?v=JaMCxVWtW58)
19 | 15. Natours Project [Advanced CSS and Sass](https://www.udemy.com/advanced-css-and-sass/)
20 | 16. Trillo (Flexbox) [Advanced CSS and Sass](https://www.udemy.com/advanced-css-and-sass/)
21 | 


--------------------------------------------------------------------------------