├── .gitignore
├── css
    └── style.css
├── img
    ├── apartment.png
    ├── avatar.png
    ├── hamburger.png
    ├── logo.png
    ├── mobile-img.png
    ├── room.png
    ├── search-icon-white.png
    └── search-icon.png
├── index.html
└── js
    └── script.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | 


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     padding: 0;
  3 |     margin: 0;
  4 | }
  5 | 
  6 | html {
  7 |     font-size: 16px;
  8 |     -webkit-font-smoothing: antialiased;
  9 | }
 10 | 
 11 | body {
 12 |     font-family: 'Roboto', sans-serif;
 13 | }
 14 | 
 15 | .container {
 16 |    max-width: 90%;
 17 |    margin: 0 auto;
 18 | }
 19 | 
 20 | nav {
 21 |     display: flex;
 22 |     align-items: center;
 23 |     justify-content: space-between;
 24 |     padding: 1rem 0;
 25 |     flex-wrap: wrap;
 26 | }
 27 | 
 28 | nav .logo-section {
 29 |     display: flex;
 30 |     align-items: center;
 31 | }
 32 | 
 33 | .search-block {
 34 |     border: 1px solid #D9DDE7;
 35 |     padding: 0.5rem 0.8rem;
 36 |     border-radius: 4px;
 37 |     display: flex;
 38 |     align-items: center;
 39 |     margin-left: 1.4rem;
 40 | }
 41 | 
 42 | nav input {
 43 |     border: none;
 44 |     min-width: 190px;
 45 | }
 46 | 
 47 | nav input:focus {
 48 |     outline: none;
 49 | }
 50 | 
 51 | nav ul {
 52 |     display: none;
 53 |     width: 100%;
 54 |     text-align: center;
 55 |     list-style-type: none;
 56 |     padding: 1rem;
 57 |     background: whitesmoke;
 58 |     margin-top: 1rem;
 59 | }
 60 | 
 61 | nav ul.show {
 62 |     display: block;
 63 | }
 64 | 
 65 | 
 66 | nav ul li {
 67 |     padding-bottom: 1rem;
 68 | }
 69 | 
 70 | nav ul li:last-child {
 71 |     padding-bottom: 0;
 72 | }
 73 | 
 74 | nav ul li a {
 75 |     color: #596172;
 76 |     text-decoration: none;
 77 | }
 78 | 
 79 | .hero {
 80 |     background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),url('../img/mobile-img.png');
 81 |     min-height: calc(100vh - 65px);
 82 |     background-repeat: no-repeat;
 83 |     background-size: cover;
 84 |     background-position: bottom;
 85 |     display: flex;
 86 |     align-items: center;
 87 | }
 88 | 
 89 | .hero__text-block {
 90 |     width: 90%;
 91 |     margin: 0 auto;
 92 |     color: #fff;
 93 | }
 94 | 
 95 | .hero__text-block .house-emoji {
 96 |     font-size: 3rem;
 97 |     margin-bottom: 1rem;
 98 | }
 99 | 
100 | .hero__text-block h1 {
101 |     font-size: 2rem;
102 |     line-height: 1.3;
103 |     margin-bottom: 2rem;
104 |     font-weight: 400;
105 | }
106 | 
107 | .search-block.search-block--hero input {
108 |     width: 100%;
109 |     background: transparent;
110 |     border: none;
111 |     color: #fff;
112 | }
113 | 
114 | .search-block.search-block--hero input:focus {
115 |     outline: none;
116 |     border: none;
117 | }
118 | 
119 | .hero ::placeholder {
120 |     color: #fff;
121 | }
122 | 
123 | .search-block.search-block--hero {
124 |     margin-left: 0;
125 |     width: 70%;
126 | }
127 | 
128 | .hero__btn-block {
129 |     margin-top: 2rem;
130 |     display: flex;
131 |     flex-wrap: wrap;
132 | }
133 | 
134 | .hero__btn-block .btn {
135 |     color: #fff;
136 |     border: none;
137 |     padding: 0.7rem 1rem;
138 |     border-radius: 4px;
139 |     cursor: pointer;
140 |     margin-right: 0.5rem;
141 |     margin-bottom: 0.5rem;
142 | }
143 | 
144 | .hero__btn-block .btn-success {
145 |     background: #25DF8F;
146 | }
147 | 
148 | .hero__btn-block .btn-secondary {
149 |     background: #C1C8D7;
150 | }
151 | 
152 | .apartments {
153 |     background: #F6F6F7;
154 | }
155 | 
156 | .apartments .section-heading {
157 |     display: flex;
158 |     align-items: center;
159 |     justify-content: space-between;
160 |     margin-bottom: 1rem;
161 | }
162 | 
163 | .apartments .section-heading h2 {
164 |     font-weight: 400;
165 |     color: #2B313D;
166 |     font-size: 1.2rem;
167 | }
168 | 
169 | .apartments .section-heading h2 span {
170 |     color: #949FB7;
171 | }
172 | 
173 | .apartments .section-heading a {
174 |     color: #596172;
175 |     text-decoration: none;
176 |     font-size: 1rem;
177 | }
178 | 
179 | .apartments__list-wrapper {
180 |     display: grid;
181 |     grid-template-columns: 1fr 1fr;
182 |     grid-gap: 2rem;
183 | }
184 | 
185 | section {
186 |     padding: 2rem 0;
187 | }
188 | 
189 | .apartments__meta {
190 |     display: flex;
191 |     align-items: center;
192 |     justify-content: space-between;
193 | }
194 | 
195 | .apartments__meta span {
196 |     color: #596172;
197 |     font-size: 0.8rem;
198 |     padding-top: 0.4rem;
199 | }
200 | 
201 | .apartments__card img {
202 |     width: 100%;
203 | }
204 | 
205 | .apartments__title {
206 |     margin-top: 1rem;
207 | }
208 | 
209 | .apartments__title a {
210 |     color: #2B313D;
211 |     text-decoration: none;
212 |     line-height: 1.6;
213 | }
214 | 
215 | .hero__image-block {
216 |     display: none;
217 | }
218 | 
219 | /* Media queries */
220 | @media(min-width: 800px) {
221 |     nav .hamburger {
222 |         display: none;
223 |     }
224 | 
225 |     nav ul.nav-list {
226 |         width: auto;
227 |         display: flex;
228 |         align-items: center;
229 |         background: transparent;
230 |         margin-top: 0;
231 |         padding: 0;
232 |     }
233 | 
234 |     nav ul.nav-list li {
235 |         padding-bottom: 0;
236 |         margin-left: 1.8rem;
237 |     }
238 | 
239 |     nav {
240 |         flex-wrap: nowrap;
241 |     }
242 | 
243 |     .hero__text-block h1 {
244 |         width: 60%;
245 |     }
246 | 
247 | }
248 | 
249 | @media(min-width: 992px) {
250 |     .hero {
251 |         background: #fff;
252 |         min-height: auto;
253 |     }
254 |     .hero__text-block {
255 |         width: 45%;
256 |         margin-left: 5%;
257 |     }
258 |     .hero__image-block {
259 |     display: block;
260 |     width: 55%;
261 |     margin-left: 4rem;
262 |     }
263 |     .hero__image-block img {
264 |         height: 100%;
265 |         width: 100%;
266 |     }
267 |     .hero__text-block h1 {
268 |         color: #2B313D;
269 |         font-weight: 400;
270 |         width: 100%;
271 |     }
272 |     .search-block.search-block--hero input {
273 |         color: #949FB7;
274 |     }
275 | 
276 |     .search-block.search-block--hero ::placeholder {
277 |         color: #949FB7
278 |       }
279 | 
280 |       .apartments__list-wrapper {
281 |           grid-template-columns: repeat(3, 1fr);
282 |       }
283 | }
284 | 
285 | @media(min-width: 1192px) {
286 |     html {
287 |         font-size: 20px;
288 |     }
289 |     .apartments__list-wrapper {
290 |         grid-template-columns: repeat(4, 1fr);
291 |     }
292 | }
293 | 
294 | 


--------------------------------------------------------------------------------
/img/apartment.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codersgyan/mobile-first-web-design/e9da228952b7e6112fd91916d706460d22bd94c4/img/apartment.png


--------------------------------------------------------------------------------
/img/avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codersgyan/mobile-first-web-design/e9da228952b7e6112fd91916d706460d22bd94c4/img/avatar.png


--------------------------------------------------------------------------------
/img/hamburger.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codersgyan/mobile-first-web-design/e9da228952b7e6112fd91916d706460d22bd94c4/img/hamburger.png


--------------------------------------------------------------------------------
/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codersgyan/mobile-first-web-design/e9da228952b7e6112fd91916d706460d22bd94c4/img/logo.png


--------------------------------------------------------------------------------
/img/mobile-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codersgyan/mobile-first-web-design/e9da228952b7e6112fd91916d706460d22bd94c4/img/mobile-img.png


--------------------------------------------------------------------------------
/img/room.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codersgyan/mobile-first-web-design/e9da228952b7e6112fd91916d706460d22bd94c4/img/room.png


--------------------------------------------------------------------------------
/img/search-icon-white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codersgyan/mobile-first-web-design/e9da228952b7e6112fd91916d706460d22bd94c4/img/search-icon-white.png


--------------------------------------------------------------------------------
/img/search-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codersgyan/mobile-first-web-design/e9da228952b7e6112fd91916d706460d22bd94c4/img/search-icon.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Mobile first design</title>
  8 |     <link rel="preconnect" href="https://fonts.gstatic.com">
  9 |     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
 10 |     <link rel="stylesheet" href="./css/style.css">
 11 | </head>
 12 | 
 13 | <body>
 14 |     <nav class="container">
 15 |         <div class="logo-section">
 16 |             <img class="logo" src="./img/logo.png" alt="logo">
 17 |             <div class="search-block">
 18 |                 <input type="text" placeholder="Search for rooms or homes...">
 19 |                 <img src="./img/search-icon.png" alt="search-icon">
 20 |             </div>
 21 |         </div>
 22 |         <img class="hamburger" src="./img/hamburger.png" alt="hamburger">
 23 |         <ul class="nav-list">
 24 |             <li>
 25 |                 <a href="#">Become a host</a>
 26 |             </li>
 27 |             <li>
 28 |                 <a href="#">Trips</a>
 29 |             </li>
 30 |             <li>
 31 |                 <a href="#">Messages</a>
 32 |             </li>
 33 |             <li>
 34 |                 <a href="#">Help</a>
 35 |             </li>
 36 |             <li>
 37 |                 <a href="#">
 38 |                     <img src="./img/avatar.png" alt="avatar">
 39 |                 </a>
 40 |             </li>
 41 |         </ul>
 42 |     </nav>
 43 |     <main>
 44 |         <div class="hero">
 45 |             <div class="hero__text-block">
 46 |                 <div class="house-emoji">🏡</div>
 47 |                 <h1>Book unique homes and experiences all over the world.</h1>
 48 |                 <div class="search-block search-block--hero">
 49 |                     <input type="text" placeholder="Try “Copenhagen, Denmark”">
 50 |                     <img src="./img/search-icon.png" alt="search-icon">
 51 |                 </div>
 52 |                 <div class="hero__btn-block">
 53 |                     <button class="btn btn-success">All properties</button>
 54 |                     <button class="btn btn-secondary">Homes</button>
 55 |                     <button class="btn btn-secondary">Experiences</button>
 56 |                     <button class="btn btn-secondary">Restaurants</button>
 57 |                 </div>
 58 |             </div>
 59 |             <div class="hero__image-block">
 60 |                 <img src="./img/room.png" alt="room">
 61 |             </div>
 62 |         </div>
 63 |         <section class="apartments">
 64 |             <div class="container">
 65 |                 <div class="section-heading">
 66 |                     <h2><span>Apartments in</span> Barcelona, Spain</h2>
 67 |                     <a href="#"> Show all (328)</a>
 68 |                 </div>
 69 |                 <div class="apartments__list-wrapper">
 70 |                     <div class="apartments__card">
 71 |                         <img src="./img/apartment.png" alt="apartment">
 72 |                         <div class="apartments__meta">
 73 |                             <span>$123 per night</span>
 74 |                             <span>🔥 4.8</span>
 75 |                         </div>
 76 |                         <div class="apartments__title">
 77 |                             <a href="#">
 78 |                                 Explore Old Barcelona from a Loft-Style Studio
 79 |                             </a>
 80 |                         </div>
 81 |                     </div>
 82 |                     <div class="apartments__card">
 83 |                         <img src="./img/apartment.png" alt="apartment">
 84 |                         <div class="apartments__meta">
 85 |                             <span>$123 per night</span>
 86 |                             <span>🔥 4.8</span>
 87 |                         </div>
 88 |                         <div class="apartments__title">
 89 |                             <a href="#">
 90 |                                 Explore Old Barcelona from a Loft-Style Studio
 91 |                             </a>
 92 |                         </div>
 93 |                     </div>
 94 |                     <div class="apartments__card">
 95 |                         <img src="./img/apartment.png" alt="apartment">
 96 |                         <div class="apartments__meta">
 97 |                             <span>$123 per night</span>
 98 |                             <span>🔥 4.8</span>
 99 |                         </div>
100 |                         <div class="apartments__title">
101 |                             <a href="#">
102 |                                 Explore Old Barcelona from a Loft-Style Studio
103 |                             </a>
104 |                         </div>
105 |                     </div>
106 |                     <div class="apartments__card">
107 |                         <img src="./img/apartment.png" alt="apartment">
108 |                         <div class="apartments__meta">
109 |                             <span>$123 per night</span>
110 |                             <span>🔥 4.8</span>
111 |                         </div>
112 |                         <div class="apartments__title">
113 |                             <a href="#">
114 |                                 Explore Old Barcelona from a Loft-Style Studio
115 |                             </a>
116 |                         </div>
117 |                     </div>
118 |                     <div class="apartments__card">
119 |                         <img src="./img/apartment.png" alt="apartment">
120 |                         <div class="apartments__meta">
121 |                             <span>$123 per night</span>
122 |                             <span>🔥 4.8</span>
123 |                         </div>
124 |                         <div class="apartments__title">
125 |                             <a href="#">
126 |                                 Explore Old Barcelona from a Loft-Style Studio
127 |                             </a>
128 |                         </div>
129 |                     </div>
130 |                     <div class="apartments__card">
131 |                         <img src="./img/apartment.png" alt="apartment">
132 |                         <div class="apartments__meta">
133 |                             <span>$123 per night</span>
134 |                             <span>🔥 4.8</span>
135 |                         </div>
136 |                         <div class="apartments__title">
137 |                             <a href="#">
138 |                                 Explore Old Barcelona from a Loft-Style Studio
139 |                             </a>
140 |                         </div>
141 |                     </div>
142 |                     <div class="apartments__card">
143 |                         <img src="./img/apartment.png" alt="apartment">
144 |                         <div class="apartments__meta">
145 |                             <span>$123 per night</span>
146 |                             <span>🔥 4.8</span>
147 |                         </div>
148 |                         <div class="apartments__title">
149 |                             <a href="#">
150 |                                 Explore Old Barcelona from a Loft-Style Studio
151 |                             </a>
152 |                         </div>
153 |                     </div>
154 |                 </div>
155 |             </div>
156 |         </section>
157 |         <section class="apartments">
158 |             <div class="container">
159 |                 <div class="section-heading">
160 |                     <h2><span>Apartments in</span> Barcelona, Spain</h2>
161 |                     <a href="#"> Show all (328)</a>
162 |                 </div>
163 |                 <div class="apartments__list-wrapper">
164 |                     <div class="apartments__card">
165 |                         <img src="./img/apartment.png" alt="apartment">
166 |                         <div class="apartments__meta">
167 |                             <span>$123 per night</span>
168 |                             <span>🔥 4.8</span>
169 |                         </div>
170 |                         <div class="apartments__title">
171 |                             <a href="#">
172 |                                 Explore Old Barcelona from a Loft-Style Studio
173 |                             </a>
174 |                         </div>
175 |                     </div>
176 |                     <div class="apartments__card">
177 |                         <img src="./img/apartment.png" alt="apartment">
178 |                         <div class="apartments__meta">
179 |                             <span>$123 per night</span>
180 |                             <span>🔥 4.8</span>
181 |                         </div>
182 |                         <div class="apartments__title">
183 |                             <a href="#">
184 |                                 Explore Old Barcelona from a Loft-Style Studio
185 |                             </a>
186 |                         </div>
187 |                     </div>
188 |                     <div class="apartments__card">
189 |                         <img src="./img/apartment.png" alt="apartment">
190 |                         <div class="apartments__meta">
191 |                             <span>$123 per night</span>
192 |                             <span>🔥 4.8</span>
193 |                         </div>
194 |                         <div class="apartments__title">
195 |                             <a href="#">
196 |                                 Explore Old Barcelona from a Loft-Style Studio
197 |                             </a>
198 |                         </div>
199 |                     </div>
200 |                     <div class="apartments__card">
201 |                         <img src="./img/apartment.png" alt="apartment">
202 |                         <div class="apartments__meta">
203 |                             <span>$123 per night</span>
204 |                             <span>🔥 4.8</span>
205 |                         </div>
206 |                         <div class="apartments__title">
207 |                             <a href="#">
208 |                                 Explore Old Barcelona from a Loft-Style Studio
209 |                             </a>
210 |                         </div>
211 |                     </div>
212 |                     <div class="apartments__card">
213 |                         <img src="./img/apartment.png" alt="apartment">
214 |                         <div class="apartments__meta">
215 |                             <span>$123 per night</span>
216 |                             <span>🔥 4.8</span>
217 |                         </div>
218 |                         <div class="apartments__title">
219 |                             <a href="#">
220 |                                 Explore Old Barcelona from a Loft-Style Studio
221 |                             </a>
222 |                         </div>
223 |                     </div>
224 |                     <div class="apartments__card">
225 |                         <img src="./img/apartment.png" alt="apartment">
226 |                         <div class="apartments__meta">
227 |                             <span>$123 per night</span>
228 |                             <span>🔥 4.8</span>
229 |                         </div>
230 |                         <div class="apartments__title">
231 |                             <a href="#">
232 |                                 Explore Old Barcelona from a Loft-Style Studio
233 |                             </a>
234 |                         </div>
235 |                     </div>
236 |                     <div class="apartments__card">
237 |                         <img src="./img/apartment.png" alt="apartment">
238 |                         <div class="apartments__meta">
239 |                             <span>$123 per night</span>
240 |                             <span>🔥 4.8</span>
241 |                         </div>
242 |                         <div class="apartments__title">
243 |                             <a href="#">
244 |                                 Explore Old Barcelona from a Loft-Style Studio
245 |                             </a>
246 |                         </div>
247 |                     </div>
248 |                 </div>
249 |             </div>
250 |         </section>
251 |     </main>
252 |     <script src="./js/script.js"></script>
253 | </body>
254 | 
255 | </html>


--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
1 | const hamburger = document.querySelector('.hamburger');
2 | const navList = document.querySelector('.nav-list');
3 | 
4 | hamburger.addEventListener('click', () => {
5 |     navList.classList.toggle('show');
6 | });
7 | 


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