├── README.md
├── LICENSE
├── style.css
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | ## Envato Tuts+ Course: Figma to HTML: Code up a Single Page Design
2 | ### Instructor: [Kezz Bracey](https://tutsplus.com/authors/kezz-bracey)
3 | 
4 | In this course we’ll take a one page design for a travel website in Figma and go through the process of converting it into HTML.
5 | 
6 | In the process we’ll learn some tricks about working with Figma, and using CSS Grid and Flexbox to make layout control a breeze.
7 | 
8 | This course is perfect for anyone who’s found a landing page design on Envato Elements and wants to code it up themselves.
9 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | BSD 2-Clause License
 2 | 
 3 | Copyright (c) 2019, Tuts+
 4 | All rights reserved.
 5 | 
 6 | Redistribution and use in source and binary forms, with or without
 7 | modification, are permitted provided that the following conditions are met:
 8 | 
 9 | 1. Redistributions of source code must retain the above copyright notice, this
10 |    list of conditions and the following disclaimer.
11 | 
12 | 2. Redistributions in binary form must reproduce the above copyright notice,
13 |    this list of conditions and the following disclaimer in the documentation
14 |    and/or other materials provided with the distribution.
15 | 
16 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
17 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
18 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
19 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
20 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
21 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
22 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
23 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
24 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
25 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
26 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |     --background_color_one: #fff;
  3 |     --background_color_two: #F2F4F6;
  4 | 
  5 |     --border_color: #D6E3F0;
  6 | 
  7 |     --highlight_color: #38A4DC;
  8 | 
  9 |     --text_color_one: #5C6163;
 10 |     --text_color_two: #24282A;
 11 |     --text_color_three: #939FA4;
 12 |     --text_color_four: #A7B0B4;
 13 |     --text_color_five: #F799A6;
 14 | }
 15 | 
 16 | html, body {
 17 |     height: 100%;
 18 | }
 19 | 
 20 | body {
 21 |     margin: 0;
 22 |     background-color: var(--background_color_two);
 23 |     font-family: 'Roboto', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 24 | }
 25 | 
 26 | a {
 27 |     text-decoration: none;
 28 |     color: var(--highlight_color);
 29 | }
 30 | 
 31 | .wrapper {
 32 |     width: 100%;
 33 |     max-width: 90rem;
 34 |     margin: 0 auto;
 35 |     background-color: var(--background_color_one);
 36 |     min-height: 10rem;
 37 |     border-left: 1px solid var(--border_color);
 38 |     border-right: 1px solid var(--border_color);
 39 |     box-sizing: border-box;
 40 | }
 41 | 
 42 | .inner {
 43 |     width: 100%;
 44 |     max-width: 73.125rem;
 45 |     margin: 0 auto;
 46 |     height: inherit;
 47 | }
 48 | 
 49 | .inner_padding {
 50 |     padding: 6.875rem 0;
 51 | }
 52 | 
 53 | .inner h1 {
 54 |     font-size: 3rem;
 55 |     text-align: center;
 56 |     margin: 0 0 5.625rem 0;
 57 |     font-weight: 300;
 58 |     color: var(--text_color_three);
 59 | }
 60 | 
 61 | .best_offers .inner h1 {
 62 |     text-align: left;
 63 |     margin: 0 0 5rem 0;
 64 | }
 65 | 
 66 | .inner h1 strong {
 67 |     color: var(--text_color_two);
 68 |     font-weight: 700;
 69 | }
 70 | 
 71 | .top_header {
 72 |     background-color: var(--background_color_two);
 73 |     min-height: 3.125rem;
 74 | }
 75 | 
 76 | .popular_destinations {
 77 |     display: flex;
 78 |     justify-content: flex-end;
 79 |     font-size: 0.75rem;
 80 |     line-height: 3.125rem;
 81 | }
 82 | 
 83 | .popular_destinations a {
 84 |     font-weight: 500;
 85 |     margin-left: 1.875rem;
 86 | }
 87 | 
 88 | .popular_destinations div {
 89 |     color: var(--text_color_one);
 90 | }
 91 | 
 92 | .header {
 93 |     height: 6.25rem;
 94 | }
 95 | 
 96 | .header_inner {
 97 |     display: flex;
 98 |     justify-content: space-between;
 99 |     align-items: center;
100 | }
101 | 
102 | .logo {
103 |     font-size: 1.5rem;
104 |     font-weight: 300;
105 |     color: var(--text_color_three);
106 | }
107 | 
108 | .logo span {
109 |     font-weight: 700;
110 |     color: var(--text_color_two);
111 | }
112 | 
113 | .page_menu a {
114 |     color: var(--text_color_one);
115 |     font-weight: 500;
116 |     font-size: 0.875rem;
117 |     padding: 0.625rem;
118 |     margin: 0.9375rem;
119 | }
120 | 
121 | .page_menu a.active, .page_menu a:hover {
122 |     background: var(--highlight_color);
123 |     color: var(--background_color_one);
124 |     box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.2);
125 |     border-radius: 5px;
126 | }
127 | 
128 | .phone_number {
129 |     font-size: 0.875rem;
130 |     font-weight: 500;
131 |     color: var(--highlight_color);
132 |     line-height: 1.5rem;
133 |     display: flex;
134 |     align-content: center;
135 | }
136 | 
137 | .phone_number span {
138 |     margin-left: 0.5rem;
139 | }
140 | 
141 | .hero_header {
142 |     height: 43.75rem;
143 |     background-image: url("images/heroimage.jpg");
144 |     background-size: cover;
145 |     text-align: center;
146 | }
147 | 
148 | .hero_header_inner {
149 |     display: flex;
150 |     align-items: center;
151 |     justify-content: center;
152 | }
153 | 
154 | .subheadline {
155 | 	color: var(--background_color_one);
156 | 	font-size: 1.25rem;
157 | 	margin-bottom: 3.75rem;
158 | }
159 | 
160 | a.button {
161 |     background: linear-gradient(199.55deg, #FDD6BD 0%, #F794A4 100%);
162 |     box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.5);
163 |     border-radius: 30px;
164 |     color: var(--background_color_one);
165 |     font-weight: 500;
166 |     padding: 0 2.5rem;
167 |     line-height: 3.75rem;
168 |     display: inline-block;
169 | }
170 | 
171 | .tour_categories {
172 |     display: grid;
173 |     grid-template-columns: 1fr 1fr 1fr;
174 |     grid-gap: 1.875rem 1.875rem;
175 | }
176 | 
177 | .tour_categories > div {
178 |     position: relative;
179 | }
180 | 
181 | .rome {
182 |     grid-column: 1 / span 2;
183 | }
184 | 
185 | .tour_overlay {
186 |     position: absolute;
187 | 	top: 0;
188 | 	right: 0;
189 | 	bottom: 0;
190 |     left: 0;
191 |     display: flex;
192 |     flex-direction: column;
193 |     justify-content: flex-end;
194 |     align-items: flex-start;
195 |     padding: 1.875rem;
196 | }
197 | 
198 | a.button_two {
199 |     box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.3);
200 |     border-radius: 5px;
201 |     background: var(--highlight_color);
202 |     color: var(--background_color_one);
203 |     font-weight: 500;
204 |     font-size: 0.875rem;
205 |     padding: 0.625rem;
206 |     margin-bottom: 1rem;
207 |     display: inline-block;    
208 | }
209 | 
210 | .tour_text {
211 |     font-size: 1.25rem;
212 |     font-weight: 700;
213 |     color: var(--background_color_one);
214 | }
215 | 
216 | .best_offers {
217 |     min-height: 20rem;
218 |     background-color: var(--background_color_two);
219 | }
220 | 
221 | .best_offers_title {
222 |     display: flex;
223 |     justify-content: space-between;
224 |     align-items: flex-start;
225 | }
226 | 
227 | .best_offer_row {
228 |     display: grid;
229 |     grid-template-columns: repeat(6, 1fr);
230 |     padding: 1.25rem;
231 |     margin-left: 1.25rem;
232 |     margin-right: 1.25rem;
233 |     align-items: center;
234 |     font-size: 0.875rem;
235 |     color: var(--text_color_four);
236 | }
237 | 
238 | .best_offer_row strong {
239 |     color: var(--text_color_two);
240 |     font-size: 1rem;
241 | }
242 | 
243 | .best_offer_row img {
244 |     margin-left: -2.5rem;
245 | }
246 | 
247 | .best_offer_row:nth-child(even){
248 |     box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1);
249 |     border-radius: 5px;
250 |     background-color: var(--background_color_one);
251 | }
252 | 
253 | .best_offer_row:nth-child(even) img {
254 |     box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.3);
255 | }
256 | 
257 | .blog {
258 |     text-align: center;
259 | }
260 | 
261 | .blog_posts {
262 |     display: grid;
263 |     grid-template-columns: repeat(3, 1fr);
264 |     grid-column-gap: 0.625rem;
265 | }
266 | 
267 | .blog_posts > div {
268 |     margin-top: 1.25rem;
269 | }
270 | 
271 | .blog_posts img {
272 | 	display: block;
273 | 	margin: -1.25rem auto 0 auto;
274 | }
275 | 
276 | .blog_posts > div:nth-child(even) {
277 | 	box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1);
278 | 	border-radius: 5px;
279 | }
280 | 
281 | .blog_posts > div:nth-child(even) img {
282 | 	box-shadow: 0px 30px 60px rgba(0, 0, 0, 0.3);
283 | }
284 | 
285 | .blog_post_teaser {
286 | 	margin: 2.5rem;
287 | 	text-align: left;
288 | }
289 | 
290 | .blog_posts h1 {
291 | 	font-size: 1.25rem;
292 | 	font-weight: 700;
293 | 	margin-top: 1.875rem;
294 | 	margin-bottom: 0.625rem;
295 | 	color: var(--text_color_two);
296 | 	text-align: left;
297 | }
298 | 
299 | .blog_posts p {
300 | 	color: var(--text_color_four);
301 | }
302 | 
303 | .blog_posts a {
304 | 	color: var(--text_color_five);
305 | 	font-weight: 500;
306 | }
307 | 
308 | .blog .button {
309 |     margin-top: 5.625rem;
310 |     margin-bottom: 1.875rem;
311 | }
312 | 
313 | .footer {
314 |     background-color: var(--background_color_two);
315 | }
316 | 
317 | .footer_inner {
318 |     display: flex;
319 |     justify-content: space-between;
320 |     align-items: center;
321 |     padding: 4.375rem 0;
322 | }


--------------------------------------------------------------------------------
/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 href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet"> 
  8 |     <link rel="stylesheet" href="style.css">
  9 |     <title>Travel Site</title>
 10 | </head>
 11 | <body>
 12 | 
 13 |     <div class="wrapper">
 14 |         <header>
 15 | 
 16 |             <div class="top_header">
 17 |                 <div class="inner">
 18 |                     <nav class="popular_destinations">
 19 |                         <div>Popular Destinations</div>
 20 |                         <a href="#">Kuala Lumpur</a>
 21 | 						<a href="#">New York</a>
 22 | 						<a href="#">Dubai</a>
 23 | 						<a href="#">Paris</a>
 24 | 						<a href="#">Bangkok</a>
 25 |                     </nav>
 26 |                 </div>
 27 |             </div>
 28 | 
 29 |             <div class="header">
 30 |                 <div class="inner header_inner">
 31 | 
 32 |                     <div class="logo">
 33 |                         <span>Knifé</span> Travel
 34 |                     </div>
 35 | 
 36 |                     <nav class="page_menu">
 37 |                         <a href="#" class="active">Home</a><a href="#">About</a><a href="#">Tours</a><a href="#">Blog</a><a href="#">Contact</a>
 38 |                     </nav>
 39 | 
 40 |                     <div class="phone_number">
 41 |                         <img src="images/phoneicon.svg" alt="phone icon">
 42 |                         <span>011 234 567 999</span>
 43 |                     </div>
 44 | 
 45 |                 </div>
 46 |             </div>
 47 | 
 48 |             <div class="hero_header">
 49 |                 <div class="inner hero_header_inner">
 50 |                     <div class="hero_content">
 51 |                         <img src="images/summer.svg" alt="#summer">
 52 |                         <div class="subheadline">Curated list of summer trips to <strong>Sea Side, Islands & Oceans</strong></div>
 53 |                         <a href="#" class="button">Explore Now</a>
 54 |                     </div>
 55 |                 </div>
 56 |             </div>
 57 | 
 58 |         </header>
 59 | 
 60 |         <main>
 61 | 
 62 |             <div class="tours">
 63 |                 <div class="inner inner_padding">
 64 |                     <h1><strong>Discover Around</strong><br />The World</h1>
 65 |                     <div class="tour_categories">
 66 | 						<div class="rome">
 67 | 							<img src="images/rome.jpg" alt="Rome Tours">
 68 | 							<div class="tour_overlay">
 69 | 								<a href="#" class="button_two">15 Tours</a>
 70 | 								<div class="tour_text">Ancient Roman Road &<br/>Aqueducts by bike</div>
 71 | 							</div>
 72 | 						</div>
 73 | 						<div class="barcrawl">
 74 | 							<img src="images/barcrawl.jpg" alt="Bar Crawl Tours">
 75 | 							<div class="tour_overlay">
 76 | 								<a href="#" class="button_two">12 Tours</a>
 77 | 								<div class="tour_text">Whisky and beer at<br/>the local barber</div>
 78 | 							</div>
 79 | 						</div>
 80 | 						<div class="paris">
 81 | 							<img src="images/paris.jpg" alt="Paris Tours">
 82 | 							<div class="tour_overlay">
 83 | 								<a href="#" class="button_two">21 Tours</a>
 84 | 								<div class="tour_text">Paris photo walk<br/>with Leo Iglesias</div>
 85 | 							</div>
 86 | 						</div>
 87 | 						<div class="arttour">
 88 | 							<img src="images/arttour.jpg" alt="Art Tours">
 89 | 							<div class="tour_overlay">
 90 | 								<a href="#" class="button_two">16 Tours</a>
 91 | 								<div class="tour_text">Art Studio Spark<br/>your creativity</div>
 92 | 							</div>
 93 | 						</div>
 94 | 						<div class="iceland">
 95 | 							<img src="images/iceland.jpg" alt="Iceland Tours">
 96 | 							<div class="tour_overlay">
 97 | 								<a href="#" class="button_two">19 Tours</a>
 98 | 								<div class="tour_text">Essence of Iceland<br/>own custom souvenir</div>
 99 | 							</div>
100 | 						</div>
101 |                     </div>
102 |                 </div>
103 |             </div>
104 | 
105 |             <div class="best_offers">
106 |                 <div class="inner inner_padding">
107 |                     <div class="best_offers_title">
108 |                         <h1><strong>Best</strong> Offers</h1>
109 |                         <a href="#" class="button">View All Offers</a>
110 |                     </div>
111 |                     <div class="best_offers_table">
112 | 						<div class="best_offer_row">
113 | 							<div>
114 | 								<img src="images/thumb_paris.jpg" alt="Paris tour">
115 | 							</div>
116 | 							<div>
117 | 								<div><strong>Paris, France</strong></div>
118 | 								<div>Panorama City</div>
119 | 							</div>
120 | 							<div>
121 | 								<div><strong>7 Days</strong></div>
122 | 								<div>6 Nights</div>
123 | 							</div>
124 | 							<div>
125 | 								<div><strong>11 February</strong></div>
126 | 								<div>06:30 PM</div>
127 | 							</div>
128 | 							<div>
129 | 								<div><strong>$1889</strong></div>
130 | 								<div>It was $2449</div>
131 | 							</div>
132 | 							<div>
133 | 								<div><strong>$560</strong></div>
134 | 								<div>Save 20%</div>
135 | 							</div>
136 | 						</div>
137 | 						<div class="best_offer_row">
138 | 							<div>
139 | 								<img src="images/thumb_dublin.jpg" alt="Dublin tour">
140 | 							</div>
141 | 							<div>
142 | 								<div><strong>Dublin, Ireland</strong></div>
143 | 								<div>Car Roadtrip</div>
144 | 							</div>
145 | 							<div>
146 | 								<div><strong>4 Days</strong></div>
147 | 								<div>5 Nights</div>
148 | 							</div>
149 | 							<div>
150 | 								<div><strong>16 February</strong></div>
151 | 								<div>09:00 AM</div>
152 | 							</div>
153 | 							<div>
154 | 								<div><strong>$1400</strong></div>
155 | 								<div>It was $1900</div>
156 | 							</div>
157 | 							<div>
158 | 								<div><strong>$500</strong></div>
159 | 								<div>Save 25%</div>
160 | 							</div>
161 | 						</div>
162 | 						<div class="best_offer_row">
163 | 							<div>
164 | 								<img src="images/thumb_berlin.jpg" alt="Berlin tour">
165 | 							</div>
166 | 							<div>
167 | 								<div><strong>Berlin, Germany</strong></div>
168 | 								<div>Museums & City</div>
169 | 							</div>
170 | 							<div>
171 | 								<div><strong>9 Days</strong></div>
172 | 								<div>10 Nights</div>
173 | 							</div>
174 | 							<div>
175 | 								<div><strong>12 February</strong></div>
176 | 								<div>09:00 AM</div>
177 | 							</div>
178 | 							<div>
179 | 								<div><strong>$1450</strong></div>
180 | 								<div>It was $1950</div>
181 | 							</div>
182 | 							<div>
183 | 								<div><strong>$550</strong></div>
184 | 								<div>Save 25%</div>
185 | 							</div>
186 | 						</div>
187 |                     </div>
188 |                 </div>
189 |             </div>
190 | 
191 |             <div class="blog">
192 |                 <div class="inner inner_padding">
193 |                     <h1><strong>Explore the Travel</strong><br />Through our Blog & Journal</h1>
194 |                     <div class="blog_posts">
195 | 						<div>
196 | 							<img src="images/greenland.jpg" alt="Greenland">
197 | 							<div class="blog_post_teaser">
198 | 								<h1>Hiking Greenland’s Arctic Circle Trail 2019</h1>
199 | 								<p>Tourism is travel for pleasure or business; also the theory and practice of touring, the business of attracting, accommodating…</p>
200 | 								<a href="#">Read More →</a>
201 | 							</div>
202 | 						</div>
203 | 						<div>
204 | 							<img src="images/indonesia.jpg" alt="Indonesia">
205 | 							<div class="blog_post_teaser">
206 | 								<h1>Why You Shouldn’t  Ride Elephants in Indonesia</h1>
207 | 								<p>Tourism is travel for pleasure or business; also the theory and practice of touring, the business of attracting, accommodating…</p>
208 | 								<a href="#">Read More →</a>
209 | 							</div>
210 | 						</div>
211 | 						<div>
212 | 							<img src="images/quotes.jpg" alt="Quotes">
213 | 							<div class="blog_post_teaser">
214 | 								<h1>Best Travel Quotes For Inspiration Travel Blog</h1>
215 | 								<p>Tourism is travel for pleasure or business; also the theory and practice of touring, the business of attracting, accommodating…</p>
216 | 								<a href="#">Read More →</a>
217 | 							</div>
218 | 						</div>
219 |                     </div>
220 | 
221 |                     <a href="#" class="button">Read our Blog</a>
222 |                 </div>
223 |             </div>
224 | 
225 |         </main>
226 | 
227 |         <footer class="footer">
228 |             <div class="inner footer_inner">
229 | 
230 |                 <div class="logo">
231 |                     <span>Knifé</span> Travel
232 |                 </div>
233 | 
234 |                 <nav class="page_menu">
235 |                     <a href="#" class="active">Home</a><a href="#">About</a><a href="#">Tours</a><a href="#">Blog</a><a href="#">Contact</a>
236 |                 </nav>
237 | 
238 |                 <div class="phone_number">
239 |                     <img src="images/phoneicon.svg" alt="phone icon">
240 |                     <span>011 234 567 999</span>
241 |                 </div>
242 | 
243 |             </div>
244 |         </footer>
245 | 
246 |     </div>
247 |     
248 | </body>
249 | </html>


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