├── .stickler.yml
├── LICENSE
├── README.md
├── css
    ├── detailes.css
    ├── index.css
    ├── reset.css
    └── shelters.css
├── img
    ├── capstone.jpg
    ├── contributors.svg
    ├── main-image.jpeg
    ├── microverse.png
    ├── paws.png
    ├── result-one.png
    ├── result-three.png
    ├── result-two.png
    ├── screenshot.png
    ├── screenshot2.png
    └── yes.svg
├── index.html
├── less
    ├── detailes.less
    ├── index.less
    ├── reset.less
    └── shelters.less
├── pages
    ├── detailes.html
    └── shelters.html
└── stylelint.config.js


/.stickler.yml:
--------------------------------------------------------------------------------
 1 | # add the linters you want stickler to use for this project
 2 | linters:
 3 |   stylelint:
 4 |     # indicate where is the config file for stylelint
 5 |     config: 'stylelint.config.js'
 6 | 
 7 | # PLEASE DO NOT enable auto fixing options
 8 | # if you need extra support from you linter - do it in your local env as described in README for this config
 9 | 
10 | # find full documentation here: https://stickler-ci.com/docs
11 | 
12 | files:
13 |     # Ignore the files that match these glob patterns.
14 |     # Be careful to quote strings as `*` has special
15 |     # meaning in YAML files.
16 | 
17 |     ignore: less/*.less


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Alex
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <!--
  2 | *** Thanks for checking out this README Template. If you have a suggestion that would
  3 | *** make this better, please fork the repo and create a pull request or simply open
  4 | *** an issue with the tag "enhancement".
  5 | *** Thanks again! Now go create something AMAZING! :D
  6 | -->
  7 | 
  8 | <!-- PROJECT SHIELDS -->
  9 | <!--
 10 | *** I'm using markdown "reference style" links for readability.
 11 | *** Reference links are enclosed in brackets [ ] instead of parentheses ( ).
 12 | *** See the bottom of this document for the declaration of the reference variables
 13 | *** for contributors-url, forks-url, etc. This is an optional, concise syntax you may use.
 14 | *** https://www.markdownguide.org/basic-syntax/#reference-style-links
 15 | -->
 16 | [![Contributors][contributors-shield]][contributors-url]
 17 | [![Forks][forks-shield]][forks-url]
 18 | [![Stargazers][stars-shield]][stars-url]
 19 | [![Issues][issues-shield]][issues-url]
 20 | ![Hireable](./img/yes.svg)
 21 | 
 22 | <!-- PROJECT LOGO -->
 23 | <br />
 24 | <p align="center">
 25 |   <a href="https://github.com/rammazzoti2000/HTML-CSS-capstone-project">
 26 |     <img src="/img/microverse.png" alt="Logo" width="80" height="80">
 27 |   </a>
 28 | 
 29 |   <h3 align="center">HTML/CSS Capstone Project</h3>
 30 | 
 31 |   <p align="center">
 32 |     This project is part of the Microverse CSS3 and HTML curriculum!
 33 |     <br />
 34 |     <a href="https://github.com/rammazzoti2000/HTML-CSS-capstone-project/issues"><strong>Explore the docs »</strong></a>
 35 |     <br />
 36 |     <br />
 37 |     <a href="https://rawcdn.githack.com/rammazzoti2000/HTML-CSS-capstone-project/7f9326753720d862b2592569a1fa0cb6d0837f4f/index.html">View Demo</a>
 38 |     ·
 39 |     <a href="https://github.com/rammazzoti2000/HTML-CSS-capstone-project/issues">Report Bug</a>
 40 |     ·
 41 |     <a href="https://github.com/rammazzoti2000/HTML-CSS-capstone-project/issues">Request Feature</a>
 42 |   </p>
 43 | </p>
 44 | 
 45 | <!-- TABLE OF CONTENTS -->
 46 | ## Table of Contents
 47 | 
 48 | * [About the Project](#about-the-project)
 49 |   * [Built With](#built-with)
 50 | * [Live Version](#live-version)
 51 | * [Contact](#contact)
 52 | * [Acknowledgements](#acknowledgements)
 53 | 
 54 | <!-- ABOUT THE PROJECT -->
 55 | ## About The Project
 56 | 
 57 | [![Product Name Screen Shot][product-screenshot]](./img/screenshot.png)
 58 | 
 59 | This project is a Capstone Project. Capstone projects are solo projects at the end of the each of the Microverse Main Technical Curriculum modules.
 60 | 
 61 | Here are the objectives for this project:
 62 | 
 63 | * Build 3 pages as the minimum requirements
 64 | 	* the main page (search page), with a link to the results page
 65 | 	* the search results page, with a list of schools each with a link to the detail school page
 66 |   * the detail school page
 67 | 
 68 | * Each of these pages have versions for 3 different screen sizes
 69 |   * mobile: up to 768px
 70 |   * tablet: up to 1024px
 71 |   * desktop: from 1024px
 72 | 
 73 | * It has been followed the guidelines of the given design, including
 74 |   * colors (they are not explicitly in the design, but you can pick them from the design page)
 75 |   * colors (they are not explicitly in the design, but you can pick them from the design page)
 76 |   * layout: composition and space between elements, for the 3 given screen sizes
 77 | 
 78 | ### Built With
 79 | This project was built using these technologies.
 80 | * HTML
 81 | * CSS3
 82 | * LESS (CSS)
 83 | * BootStrap
 84 | * Stickler
 85 | * Atom :atom:
 86 | 
 87 | ## Usage
 88 | 
 89 | If you want to use it locally [download](https://github.com/rammazzoti2000/HTML-CSS-capstone-project/archive/master.zip) or clone the repo with the following command on a linux terminal:
 90 | 
 91 | ```git clone https://github.com/rammazzoti2000/HTML-CSS-capstone-project.git```
 92 | 
 93 | cd to the projects directory and open the index.html in your browser
 94 | 
 95 | ![screenshot](img/capstone.jpg)
 96 | 
 97 | <!-- LIVE VERSION -->
 98 | ## Live project demo and Walkthrough Video
 99 | 
100 | :point_right:  [Live demo link](https://rammazzoti2000.github.io/HTML-CSS-capstone-project/)
101 | 
102 | :point_right:  [Walkthrough Video](https://www.loom.com/share/ff218bb6079c400484d2286d65435a1e)
103 | 
104 | <!-- AUTOMATED TEST -->
105 | ## Automated Test
106 | 
107 | > There are no Automated Test for this project yet
108 | 
109 | ## Potential future features
110 | - Make it a full stack application using back-end technologies, mainly RubyOnRails
111 | - Improve the front-end
112 | 
113 | <!-- CONTACT -->
114 | ## Contact
115 | 
116 | 👤 Alexandru Bangau - twitter: [@alex_maxinova](https://twitter.com/alex_maxinova) - github: [@ramamzzoti2000](https://github.com/rammazzoti2000) - gmail: bangau.alexandru@gmail.com
117 | 
118 | ## 🤝 Contributing
119 | 
120 | Contributions, issues and feature requests are welcome!
121 | 
122 | Feel free to check the [issues page](https://github.com/rammazzoti2000/HTML-CSS-capstone-project/issues).
123 | 
124 | ## Show your support
125 | Give a :star: if you like this project!
126 | 
127 | <!-- ATTRIBUTIONS AND CREDITS -->
128 | ## Credit
129 | 
130 | Original site design by [Mathew Njuguna and others on Behance](https://www.behance.net/mathewnjuguna)
131 | 
132 | <!-- ACKNOWLEDGEMENTS -->
133 | ## Acknowledgements
134 | * [Microverse](https://www.microverse.org/)
135 | * [The Odin Project](https://www.theodinproject.com/)
136 | * [HTML Cheat Sheet](https://htmlcheatsheet.com/js/)
137 | * [LESS Documentation](http://lesscss.org/)
138 | * [BootStrap Documentation](https://getbootstrap.com/)
139 | 
140 | ## 📝 License
141 | 
142 | This project is [MIT](https://opensource.org/licenses/MIT) licensed.
143 | 
144 | <!-- MARKDOWN LINKS & IMAGES -->
145 | <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
146 | [contributors-shield]: https://img.shields.io/github/contributors/rammazzoti2000/HTML-CSS-capstone-project.svg?style=flat-square
147 | [contributors-url]: https://github.com/rammazzoti2000/HTML-CSS-capstone-project/graphs/contributors
148 | [forks-shield]: https://img.shields.io/github/forks/rammazzoti2000/HTML-CSS-capstone-project.svg?style=flat-square
149 | [forks-url]: https://github.com/rammazzoti2000/HTML-CSS-capstone-project/network/members
150 | [stars-shield]: https://img.shields.io/github/stars/rammazzoti2000/HTML-CSS-capstone-project.svg?style=flat-square
151 | [stars-url]: https://github.com/rammazzoti2000/HTML-CSS-capstone-project/stargazers
152 | [issues-shield]: https://img.shields.io/github/issues/rammazzoti2000/HTML-CSS-capstone-project.svg?style=flat-square
153 | [issues-url]: https://github.com/rammazzoti2000/HTML-CSS-capstone-project/issues
154 | [product-screenshot]: ./img/screenshot2.png
155 | 


--------------------------------------------------------------------------------
/css/detailes.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box;
  3 |   font-family: 'Roboto', sans-serif;
  4 | }
  5 | 
  6 | html {
  7 |   font-size: 65%;
  8 | }
  9 | 
 10 | html,
 11 | body {
 12 |   width: 100%;
 13 |   height: auto;
 14 | }
 15 | 
 16 | #nav-header {
 17 |   width: 100%;
 18 |   background-color: #d3574a;
 19 |   box-shadow: 0 0 10px rgba(226, 65, 64, 0.2);
 20 |   position: fixed;
 21 |   top: 0;
 22 |   z-index: 999;
 23 | }
 24 | 
 25 | #nav-header nav {
 26 |   display: flex;
 27 |   flex-flow: row wrap;
 28 |   justify-content: space-between;
 29 |   align-items: center;
 30 |   height: 65px;
 31 |   width: 95%;
 32 |   margin: 0 auto;
 33 | }
 34 | 
 35 | #nav-header nav .logo-container {
 36 |   display: inline-flex;
 37 |   cursor: pointer;
 38 |   color: white;
 39 |   font-size: 2rem;
 40 |   text-decoration: none;
 41 | }
 42 | 
 43 | #nav-header nav .logo-container .logo {
 44 |   font-size: 3rem;
 45 | }
 46 | 
 47 | #nav-header nav .logo-container .logo-increase {
 48 |   color: white;
 49 |   padding-left: 10px;
 50 |   font-weight: bold;
 51 | }
 52 | 
 53 | footer ul li {
 54 |   display: inline;
 55 | }
 56 | 
 57 | footer .footer-about ul li {
 58 |   padding: 0 31px;
 59 | }
 60 | 
 61 | footer .footer-info ul li {
 62 |   width: 25%;
 63 |   display: flex;
 64 |   flex-flow: column;
 65 |   align-items: center;
 66 |   text-align: center;
 67 | }
 68 | 
 69 | footer .social-copyright .social-footer li {
 70 |   padding: 0 10px;
 71 | }
 72 | 
 73 | section.jumbotron .contact-container ul li {
 74 |   display: inline;
 75 |   padding-left: 12px;
 76 | }
 77 | 
 78 | #nav-header nav .nav-list li {
 79 |   display: inline;
 80 |   flex-flow: row nowrap;
 81 |   justify-content: space-between;
 82 |   align-items: center;
 83 |   padding: 10px;
 84 |   font-size: 1.3rem;
 85 | }
 86 | 
 87 | div.jumbotron a {
 88 |   color: #434343;
 89 |   text-decoration: none;
 90 |   margin-left: 30px;
 91 | }
 92 | 
 93 | footer .footer-about ul li a {
 94 |   color: white;
 95 |   text-decoration: none;
 96 | }
 97 | 
 98 | footer .footer-info ul {
 99 |   display: flex;
100 |   flex-flow: row wrap;
101 |   justify-content: center;
102 |   align-items: baseline;
103 | }
104 | 
105 | section.jumbotron .contact-container ul a {
106 |   color: #434343;
107 |   text-decoration: none;
108 | }
109 | 
110 | footer .social-copyright .social-footer li a {
111 |   color: #656565;
112 | }
113 | 
114 | #nav-header nav .nav-list li a {
115 |   color: white;
116 |   text-decoration: none;
117 |   text-transform: uppercase;
118 |   font-weight: bold;
119 | }
120 | 
121 | section.jumbotron {
122 |   width: 90%;
123 |   margin: 130px auto 50px;
124 |   background-color: white;
125 | }
126 | 
127 | .map-container h1 {
128 |   text-align: center;
129 |   color: #d35649;
130 |   font-size: 2.5rem;
131 |   font-weight: 400;
132 |   margin: 66px 0 40px;
133 | }
134 | 
135 | section.jumbotron h2 {
136 |   font-size: 3.5rem;
137 |   font-weight: 300;
138 |   color: #d35649;
139 |   padding-left: 12px;
140 | }
141 | 
142 | section.jumbotron .info-rows {
143 |   display: flex;
144 |   flex-flow: row wrap;
145 |   justify-content: center;
146 | }
147 | 
148 | section.jumbotron .info-rows .card {
149 |   width: 48%;
150 |   margin: 10px auto;
151 |   font-size: 1.8rem;
152 |   text-transform: uppercase;
153 | }
154 | 
155 | footer .footer-info ul span {
156 |   color: #d3574a;
157 |   cursor: pointer;
158 | }
159 | 
160 | section.jumbotron .info-rows .card span {
161 |   font-weight: 600;
162 |   color: #434343;
163 | }
164 | 
165 | section.jumbotron .contact-container {
166 |   margin: 12px;
167 |   padding: 20px 0;
168 |   font-size: 1.3rem;
169 | }
170 | 
171 | footer .footer-info ul button {
172 |   width: 64px;
173 |   height: 38px;
174 |   border: none;
175 |   background-color: #434343;
176 |   color: white;
177 |   padding: 0;
178 |   cursor: pointer;
179 | }
180 | 
181 | section.jumbotron .contact-container button.btn-primary {
182 |   float: right;
183 |   clear: both;
184 |   margin-bottom: 10px;
185 |   background-color: #457db4;
186 |   border: 0;
187 |   font-size: 1.4rem;
188 |   padding: 6px;
189 | }
190 | 
191 | footer .footer-about ul {
192 |   margin: auto;
193 |   padding: 10px 0;
194 |   border-top: 1px solid #434343;
195 |   border-bottom: 1px solid #434343;
196 | }
197 | 
198 | section.jumbotron .contact-container ul {
199 |   float: right;
200 |   clear: both;
201 | }
202 | 
203 | div.jumbotron {
204 |   width: 90%;
205 |   margin: 0 auto;
206 |   font-size: 2rem;
207 |   text-transform: uppercase;
208 |   word-spacing: 13px;
209 |   letter-spacing: 8px;
210 |   padding: 14px 20px;
211 |   text-align: center;
212 |   background-color: #eee;
213 | }
214 | 
215 | .map-container {
216 |   width: 90%;
217 |   margin: 50px auto;
218 | }
219 | 
220 | .map-container iframe {
221 |   width: 100%;
222 | }
223 | 
224 | footer {
225 |   margin: 60px auto 0;
226 |   background-color: black;
227 |   display: flex;
228 |   flex-flow: column wrap;
229 |   align-items: center;
230 |   color: white;
231 |   position: relative;
232 |   bottom: 0;
233 |   width: 100%;
234 | }
235 | 
236 | footer .footer-about {
237 |   width: 100%;
238 |   display: flex;
239 |   flex-flow: row nowrap;
240 |   justify-content: space-between;
241 |   font-size: 1.3rem;
242 |   font-weight: bold;
243 |   padding: 10px 15px;
244 | }
245 | 
246 | footer .footer-about .footer-about-list {
247 |   margin: auto 0 auto auto;
248 | }
249 | 
250 | footer .footer-about div {
251 |   font-size: 3.5rem;
252 |   padding: 10px 25px;
253 |   border-radius: 100%;
254 |   border: 1px solid #434343;
255 |   margin: 0 -8px;
256 |   cursor: pointer;
257 | }
258 | 
259 | footer .footer-about .footer-media-list {
260 |   margin: auto auto auto 0;
261 | }
262 | 
263 | footer .footer-info {
264 |   width: 100%;
265 |   font-size: 1.3rem;
266 |   margin: 20px 0;
267 | }
268 | 
269 | footer .footer-info ul h4 {
270 |   margin-bottom: 15px;
271 |   font-size: 1.5rem;
272 | }
273 | 
274 | footer .footer-info ul .footer-input {
275 |   width: 84%;
276 | }
277 | 
278 | footer .footer-info ul input[type=text] {
279 |   background-color: inherit;
280 |   color: white;
281 |   padding: 0 7px;
282 |   margin-right: -68px;
283 |   height: 38px;
284 |   outline: 0;
285 |   border: 0.1rem solid #434343;
286 |   border-right: none;
287 |   width: 100%;
288 | }
289 | 
290 | footer .footer-info ul input[type=text]:focus {
291 |   outline: 0;
292 | }
293 | 
294 | footer .social-copyright {
295 |   display: flex;
296 |   flex-flow: row wrap;
297 |   justify-content: space-between;
298 |   align-items: center;
299 |   width: 100%;
300 |   height: 80px;
301 |   padding: 0 30px;
302 |   background-color: #1f1f1f;
303 |   color: #656565;
304 |   font-size: 1rem;
305 | }
306 | 
307 | footer .social-copyright .social-footer {
308 |   font-size: 1.5rem;
309 | }
310 | 
311 | footer .social-copyright .footer-copyright {
312 |   display: flex;
313 |   word-spacing: 5px;
314 |   letter-spacing: 3px;
315 | }
316 | 
317 | @media only screen and (max-width: 364px) {
318 |   #nav-header nav .nav-list li {
319 |     padding: 10px 20px !important;
320 |   }
321 | }
322 | 
323 | @media only screen and (max-width: 576px) {
324 |   #nav-header {
325 |     height: 90px;
326 |   }
327 | 
328 |   #nav-header nav {
329 |     display: flex;
330 |     flex-flow: column nowrap;
331 |     justify-content: center;
332 |     align-items: center;
333 |     height: auto;
334 |   }
335 | 
336 |   #nav-header nav .logo-container {
337 |     margin: 8px auto 18px;
338 |   }
339 | 
340 |   footer .footer-about .footer-about-list li {
341 |     padding: 0 14px;
342 |   }
343 | 
344 |   footer .footer-about .footer-media-list li {
345 |     padding: 0 14px;
346 |   }
347 | 
348 |   footer .footer-info .subscribe-list li {
349 |     width: 100%;
350 |     margin-bottom: 17px;
351 |   }
352 | 
353 |   #nav-header nav .nav-list li {
354 |     padding: 0 32px;
355 |   }
356 | 
357 |   footer .footer-about {
358 |     display: flex;
359 |     flex-flow: column;
360 |   }
361 | 
362 |   footer .footer-about .footer-about-list {
363 |     order: 2;
364 |     text-align: center;
365 |     width: 100%;
366 |     word-wrap: unset;
367 |   }
368 | 
369 |   footer .footer-about .footer-media-list {
370 |     order: 3;
371 |     width: 100%;
372 |     word-wrap: unset;
373 |     text-align: center;
374 |   }
375 | 
376 |   footer .footer-about .footer-logo {
377 |     order: 1;
378 |     font-size: 4rem;
379 |     padding: 0;
380 |     margin: auto;
381 |     border: none;
382 |     border-radius: 0;
383 |   }
384 | 
385 |   footer .footer-info .subscribe-list {
386 |     display: flex;
387 |     flex-flow: column;
388 |     justify-content: center;
389 |     align-items: center;
390 |   }
391 | 
392 |   footer .footer-info .subscribe-list li p {
393 |     margin-bottom: 0;
394 |   }
395 | 
396 |   footer .social-copyright {
397 |     display: flex;
398 |     flex-flow: column;
399 |     justify-content: center;
400 |     align-items: center;
401 |     height: 130px;
402 |     padding: 0;
403 |   }
404 | 
405 |   footer .social-copyright .social-footer {
406 |     margin-bottom: 17px;
407 |   }
408 | 
409 |   footer .social-copyright .footer-copyright {
410 |     text-align: center;
411 |     display: flex;
412 |     flex-flow: column;
413 |   }
414 | }
415 | 
416 | @media only screen and (max-width: 768px) {
417 |   #nav-header nav .remove {
418 |     display: none;
419 |   }
420 | 
421 |   footer .footer-about .footer-about-list li {
422 |     padding: 0 14px;
423 |   }
424 | 
425 |   footer .footer-about .footer-media-list li {
426 |     padding: 0 14px;
427 |   }
428 | 
429 |   footer .footer-info .subscribe-list li {
430 |     width: 100%;
431 |     margin-bottom: 17px;
432 |   }
433 | 
434 |   div.contact-container ul.contact-list li {
435 |     display: block;
436 |     padding: 0;
437 |   }
438 | 
439 |   #nav-header nav .nav-list li {
440 |     padding: 10px 34px;
441 |   }
442 | 
443 |   section.jumbotron div.info-rows {
444 |     display: flex;
445 |     flex-flow: column;
446 |     align-items: baseline;
447 |     justify-content: center;
448 |   }
449 | 
450 |   section.jumbotron div.info-rows .card {
451 |     width: 95%;
452 |   }
453 | 
454 |   div.contact-container ul.contact-list {
455 |     float: none;
456 |   }
457 | 
458 |   section.jumbotron .contact-container button.btn-primary {
459 |     float: none;
460 |   }
461 | 
462 |   footer .footer-about {
463 |     display: flex;
464 |     flex-flow: column;
465 |   }
466 | 
467 |   footer .footer-about .footer-about-list {
468 |     order: 2;
469 |     text-align: center;
470 |     width: 100%;
471 |     word-wrap: unset;
472 |   }
473 | 
474 |   footer .footer-about .footer-media-list {
475 |     order: 3;
476 |     width: 100%;
477 |     word-wrap: unset;
478 |     text-align: center;
479 |   }
480 | 
481 |   footer .footer-about .footer-logo {
482 |     order: 1;
483 |     font-size: 4rem;
484 |     padding: 0;
485 |     margin: auto;
486 |     border: none;
487 |     border-radius: 0;
488 |   }
489 | 
490 |   footer .footer-info {
491 |     padding: 0 15px;
492 |   }
493 | 
494 |   footer .footer-info .subscribe-list {
495 |     display: flex;
496 |     flex-flow: column;
497 |     justify-content: center;
498 |     align-items: center;
499 |   }
500 | 
501 |   footer .footer-info .subscribe-list li p {
502 |     margin-bottom: 0;
503 |   }
504 | 
505 |   footer .social-copyright {
506 |     display: flex;
507 |     flex-flow: column;
508 |     justify-content: center;
509 |     align-items: center;
510 |     height: 130px;
511 |     padding: 0;
512 |   }
513 | 
514 |   footer .social-copyright .social-footer {
515 |     margin-bottom: 17px;
516 |   }
517 | 
518 |   footer .social-copyright .footer-copyright {
519 |     text-align: center;
520 |     display: flex;
521 |     flex-flow: column;
522 |   }
523 | }
524 | 
525 | @media only screen and (max-width: 1024px) {
526 |   footer .footer-about ul li {
527 |     padding: 0 13px;
528 |   }
529 | 
530 |   .footer-info {
531 |     padding: 0 15px;
532 |   }
533 | 
534 |   .footer-info .subscribe-list {
535 |     display: flex;
536 |     flex-flow: column;
537 |     justify-content: center;
538 |     align-items: center;
539 |   }
540 | 
541 |   .footer-info .subscribe-list li {
542 |     width: 100%;
543 |     margin-bottom: 17px;
544 |   }
545 | 
546 |   .footer-info .subscribe-list li .footer-input {
547 |     width: 100%;
548 |     max-width: 299px;
549 |   }
550 | 
551 |   .footer-info .subscribe-list li p {
552 |     margin-bottom: 0;
553 |   }
554 | }
555 | 


--------------------------------------------------------------------------------
/css/index.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box;
  3 |   font-family: 'Roboto', sans-serif;
  4 | }
  5 | 
  6 | html {
  7 |   font-size: 65%;
  8 | }
  9 | 
 10 | html,
 11 | body {
 12 |   width: 100%;
 13 |   height: auto;
 14 | }
 15 | 
 16 | #nav-header {
 17 |   width: 100%;
 18 |   background-color: #d3574a;
 19 |   box-shadow: 0 0 10px rgba(226, 65, 64, 0.2);
 20 |   position: fixed;
 21 |   z-index: 999;
 22 | }
 23 | 
 24 | #nav-header nav {
 25 |   display: flex;
 26 |   flex-flow: row wrap;
 27 |   justify-content: space-between;
 28 |   align-items: center;
 29 |   height: 65px;
 30 |   width: 95%;
 31 |   margin: 0 auto;
 32 | }
 33 | 
 34 | #nav-header nav .logo-container {
 35 |   display: inline-flex;
 36 |   cursor: pointer;
 37 |   color: white;
 38 |   font-size: 2rem;
 39 |   text-decoration: none;
 40 | }
 41 | 
 42 | #nav-header nav .logo-container .logo {
 43 |   font-size: 3rem;
 44 | }
 45 | 
 46 | #nav-header nav .logo-container .logo-increase {
 47 |   color: white;
 48 |   padding-left: 10px;
 49 |   font-weight: bold;
 50 | }
 51 | 
 52 | footer ul li {
 53 |   display: inline;
 54 | }
 55 | 
 56 | footer .footer-about ul li {
 57 |   padding: 0 31px;
 58 | }
 59 | 
 60 | footer .footer-info ul li {
 61 |   width: 25%;
 62 |   display: flex;
 63 |   flex-flow: column;
 64 |   align-items: center;
 65 |   text-align: center;
 66 | }
 67 | 
 68 | footer .social-copyright .social-footer li {
 69 |   padding: 0 10px;
 70 | }
 71 | 
 72 | #nav-header nav .nav-list li {
 73 |   display: inline;
 74 |   flex-flow: row nowrap;
 75 |   justify-content: space-between;
 76 |   align-items: center;
 77 |   padding: 10px;
 78 |   font-size: 1.3rem;
 79 | }
 80 | 
 81 | footer .footer-about ul li a {
 82 |   color: white;
 83 |   text-decoration: none;
 84 | }
 85 | 
 86 | footer .social-copyright .social-footer li a {
 87 |   color: #656565;
 88 | }
 89 | 
 90 | #main-header a {
 91 |   color: black;
 92 |   text-decoration: none;
 93 |   font-size: 1.4rem;
 94 |   background: rgba(255, 255, 255, 0.6);
 95 |   border-radius: 3px;
 96 |   padding: 7px 12px;
 97 |   margin: 35px 0 20px;
 98 |   font-weight: bold;
 99 | }
100 | 
101 | #nav-header nav .nav-list li a {
102 |   color: white;
103 |   text-decoration: none;
104 |   text-transform: uppercase;
105 |   font-weight: bold;
106 | }
107 | 
108 | #main-header {
109 |   width: 100%;
110 |   margin: 0 auto;
111 | }
112 | 
113 | #main-header .main-header-container {
114 |   background: url(../img/main-image.jpeg) 0 0 / cover no-repeat;
115 |   height: 100vh;
116 |   position: relative;
117 |   z-index: 1;
118 | }
119 | 
120 | #main-header .main-header-container .cover-header {
121 |   background-color: rgba(0, 0, 0, 0.4);
122 |   width: 100%;
123 |   height: 100%;
124 |   position: absolute;
125 |   z-index: 2;
126 | }
127 | 
128 | #main-header .main-header-container .form-container {
129 |   position: relative;
130 |   z-index: 2;
131 |   top: 35%;
132 |   display: flex;
133 |   flex-flow: column;
134 |   align-items: center;
135 |   justify-content: center;
136 | }
137 | 
138 | #main-header .main-header-container .form-content {
139 |   width: 46%;
140 |   margin: 0 auto;
141 | }
142 | 
143 | #main-header .main-header-container h1 {
144 |   color: white;
145 |   font-size: 2.5rem;
146 |   text-align: center;
147 | }
148 | 
149 | #main-header .main-header-container form {
150 |   font-size: 1.5rem;
151 |   font-weight: bold;
152 |   background: rgba(255, 255, 255, 0.6);
153 |   padding: 27px 35px 40px;
154 |   border-radius: 6px;
155 |   margin-top: 10px;
156 | }
157 | 
158 | #main-header .main-header-container form p {
159 |   color: black;
160 |   font-size: 1.3rem;
161 |   font-weight: bold;
162 | }
163 | 
164 | footer .footer-info ul input[type=text] {
165 |   background-color: inherit;
166 |   color: white;
167 |   padding: 0 7px;
168 |   margin-right: -68px;
169 |   height: 38px;
170 |   outline: 0;
171 |   border: 0.1rem solid #434343;
172 |   border-right: none;
173 |   width: 100%;
174 | }
175 | 
176 | footer .footer-info ul input[type=text]:focus {
177 |   outline: 0;
178 | }
179 | 
180 | #main-header .main-header-container form input[type=text] {
181 |   width: 79%;
182 |   outline: none;
183 |   border: none;
184 |   padding: 3px 10px;
185 |   height: 42px;
186 |   margin-right: -3px;
187 | }
188 | 
189 | footer .footer-info ul button {
190 |   width: 64px;
191 |   height: 38px;
192 |   border: none;
193 |   background-color: #434343;
194 |   color: white;
195 |   padding: 0;
196 |   cursor: pointer;
197 | }
198 | 
199 | #main-header .main-header-container form button {
200 |   color: white;
201 |   background-color: #d3574a;
202 |   width: 20%;
203 |   padding: 11px;
204 |   border: none;
205 |   outline: 0;
206 |   cursor: pointer;
207 |   line-height: 20px;
208 | }
209 | 
210 | #main-header .main-header-container form button:active {
211 |   background-color: rgba(226, 65, 64, 0.8);
212 | }
213 | 
214 | section {
215 |   text-align: center;
216 |   font-size: 1.5rem;
217 |   padding: 80px;
218 | }
219 | 
220 | section .pet-title-header {
221 |   color: #d3574a;
222 |   font-weight: bold;
223 |   font-size: 1.8rem;
224 | }
225 | 
226 | section .instructions {
227 |   display: flex;
228 |   flex-flow: row wrap;
229 |   justify-content: space-evenly;
230 |   align-items: center;
231 |   margin-top: 20px;
232 | }
233 | 
234 | section .instructions .instruction-cards {
235 |   width: 50%;
236 |   padding: 40px 72px;
237 | }
238 | 
239 | section .instructions .instruction-cards .icon {
240 |   font-size: 3rem;
241 | }
242 | 
243 | section .instructions .instruction-cards h3 {
244 |   margin: 15px 0 20px;
245 |   font-weight: 600;
246 | }
247 | 
248 | footer {
249 |   margin: 25px auto 0;
250 |   background-color: black;
251 |   display: flex;
252 |   flex-flow: column wrap;
253 |   align-items: center;
254 |   color: white;
255 |   position: relative;
256 |   bottom: 0;
257 |   width: 100%;
258 | }
259 | 
260 | footer .footer-about {
261 |   width: 100%;
262 |   display: flex;
263 |   flex-flow: row nowrap;
264 |   justify-content: space-between;
265 |   font-size: 1.3rem;
266 |   font-weight: bold;
267 |   padding: 10px 15px;
268 | }
269 | 
270 | footer .footer-about ul {
271 |   margin: auto;
272 |   padding: 10px 0;
273 |   border-top: 1px solid #434343;
274 |   border-bottom: 1px solid #434343;
275 | }
276 | 
277 | footer .footer-about .footer-about-list {
278 |   margin: auto 0 auto auto;
279 | }
280 | 
281 | footer .footer-about div {
282 |   font-size: 3.5rem;
283 |   padding: 10px 25px;
284 |   border-radius: 100%;
285 |   border: 1px solid #434343;
286 |   margin: 0 -7px;
287 |   cursor: pointer;
288 | }
289 | 
290 | footer .footer-about .footer-media-list {
291 |   margin: auto auto auto 0;
292 | }
293 | 
294 | footer .footer-info {
295 |   width: 100%;
296 |   font-size: 1.3rem;
297 |   margin: 20px 0;
298 | }
299 | 
300 | footer .footer-info ul {
301 |   display: flex;
302 |   flex-flow: row wrap;
303 |   justify-content: center;
304 |   align-items: baseline;
305 | }
306 | 
307 | footer .footer-info ul h4 {
308 |   margin-bottom: 15px;
309 |   font-size: 1.5rem;
310 | }
311 | 
312 | footer .footer-info ul .footer-input {
313 |   width: 90%;
314 | }
315 | 
316 | footer .footer-info ul span {
317 |   color: #d3574a;
318 |   cursor: pointer;
319 | }
320 | 
321 | footer .social-copyright {
322 |   display: flex;
323 |   flex-flow: row wrap;
324 |   justify-content: space-between;
325 |   align-items: center;
326 |   width: 100%;
327 |   height: 80px;
328 |   padding: 0 30px;
329 |   background-color: #1f1f1f;
330 |   color: #656565;
331 |   font-size: 1rem;
332 | }
333 | 
334 | footer .social-copyright .social-footer {
335 |   font-size: 1.5rem;
336 | }
337 | 
338 | footer .social-copyright .footer-copyright {
339 |   display: flex;
340 |   word-spacing: 5px;
341 |   letter-spacing: 3px;
342 | }
343 | 
344 | @media only screen and (max-width: 364px) {
345 |   #nav-header nav .nav-list li {
346 |     padding: 10px 20px !important;
347 |   }
348 | }
349 | 
350 | @media only screen and (max-width: 576px) {
351 |   #nav-header {
352 |     height: 90px;
353 |   }
354 | 
355 |   #nav-header nav {
356 |     display: flex;
357 |     flex-flow: column nowrap;
358 |     justify-content: center;
359 |     align-items: center;
360 |     height: auto;
361 |   }
362 | 
363 |   #nav-header nav .logo-container {
364 |     margin: 8px auto 18px;
365 |   }
366 | 
367 |   footer .footer-about .footer-about-list li {
368 |     padding: 0 14px;
369 |   }
370 | 
371 |   footer .footer-about .footer-media-list li {
372 |     padding: 0 14px;
373 |   }
374 | 
375 |   footer .footer-info .subscribe-list li {
376 |     width: 100%;
377 |     margin-bottom: 17px;
378 |   }
379 | 
380 |   #nav-header nav .nav-list li {
381 |     padding: 0 32px;
382 |   }
383 | 
384 |   #main-header .main-header-container {
385 |     background-size: auto 100%;
386 |     background-position: center;
387 |   }
388 | 
389 |   #section .pet-title-header {
390 |     font-size: 1.5rem;
391 |   }
392 | 
393 |   section .instructions {
394 |     display: flex;
395 |     flex-flow: column wrap;
396 |     align-items: center;
397 |   }
398 | 
399 |   section .instructions .instruction-cards {
400 |     padding: 40px 20px;
401 |   }
402 | 
403 |   footer .footer-about {
404 |     display: flex;
405 |     flex-flow: column;
406 |   }
407 | 
408 |   footer .footer-about .footer-about-list {
409 |     order: 2;
410 |     text-align: center;
411 |     width: 100%;
412 |     word-wrap: unset;
413 |   }
414 | 
415 |   footer .footer-about .footer-media-list {
416 |     order: 3;
417 |     width: 100%;
418 |     word-wrap: unset;
419 |     text-align: center;
420 |   }
421 | 
422 |   footer .footer-about .footer-logo {
423 |     order: 1;
424 |     font-size: 4rem;
425 |     padding: 0;
426 |     margin: auto;
427 |     border: none;
428 |     border-radius: 0;
429 |   }
430 | 
431 |   footer .footer-info .subscribe-list {
432 |     display: flex;
433 |     flex-flow: column;
434 |     justify-content: center;
435 |     align-items: center;
436 |   }
437 | 
438 |   footer .footer-info .subscribe-list li p {
439 |     margin-bottom: 0;
440 |   }
441 | 
442 |   footer .social-copyright {
443 |     display: flex;
444 |     flex-flow: column;
445 |     justify-content: center;
446 |     align-items: center;
447 |     height: 130px;
448 |     padding: 0;
449 |   }
450 | 
451 |   footer .social-copyright .social-footer {
452 |     margin-bottom: 17px;
453 |   }
454 | 
455 |   footer .social-copyright .footer-copyright {
456 |     text-align: center;
457 |     display: flex;
458 |     flex-flow: column;
459 |   }
460 | }
461 | 
462 | @media only screen and (max-width: 768px) {
463 |   #nav-header nav .remove {
464 |     display: none;
465 |   }
466 | 
467 |   footer .footer-about .footer-about-list li {
468 |     padding: 0 14px;
469 |   }
470 | 
471 |   footer .footer-about .footer-media-list li {
472 |     padding: 0 14px;
473 |   }
474 | 
475 |   footer .footer-info .subscribe-list li {
476 |     width: 100%;
477 |     margin-bottom: 17px;
478 |   }
479 | 
480 |   #nav-header nav .nav-list li {
481 |     padding: 10px 34px;
482 |   }
483 | 
484 |   #main-header .main-header-container {
485 |     background-size: auto 100%;
486 |     background-position: center;
487 |   }
488 | 
489 |   #main-header .main-header-container .form-content {
490 |     width: 95% !important;
491 |   }
492 | 
493 |   section {
494 |     padding: 40px 0 0;
495 |   }
496 | 
497 |   section .instructions div.instruction-cards {
498 |     width: 100%;
499 |   }
500 | 
501 |   footer .footer-about {
502 |     display: flex;
503 |     flex-flow: column;
504 |   }
505 | 
506 |   footer .footer-about .footer-about-list {
507 |     order: 2;
508 |     text-align: center;
509 |     width: 100%;
510 |     word-wrap: unset;
511 |   }
512 | 
513 |   footer .footer-about .footer-media-list {
514 |     order: 3;
515 |     width: 100%;
516 |     word-wrap: unset;
517 |     text-align: center;
518 |   }
519 | 
520 |   footer .footer-about .footer-logo {
521 |     order: 1;
522 |     font-size: 4rem;
523 |     padding: 0;
524 |     margin: auto;
525 |     border: none;
526 |     border-radius: 0;
527 |   }
528 | 
529 |   footer .footer-info {
530 |     padding: 0 15px;
531 |   }
532 | 
533 |   footer .footer-info .subscribe-list {
534 |     display: flex;
535 |     flex-flow: column;
536 |     justify-content: center;
537 |     align-items: center;
538 |   }
539 | 
540 |   footer .footer-info .subscribe-list li p {
541 |     margin-bottom: 0;
542 |   }
543 | 
544 |   footer .social-copyright {
545 |     display: flex;
546 |     flex-flow: column;
547 |     justify-content: center;
548 |     align-items: center;
549 |     height: 130px;
550 |     padding: 0;
551 |   }
552 | 
553 |   footer .social-copyright .social-footer {
554 |     margin-bottom: 17px;
555 |   }
556 | 
557 |   footer .social-copyright .footer-copyright {
558 |     text-align: center;
559 |     display: flex;
560 |     flex-flow: column;
561 |   }
562 | }
563 | 
564 | @media only screen and (max-width: 1024px) {
565 |   #main-header .main-header-container {
566 |     background-position: center;
567 |   }
568 | 
569 |   #main-header .main-header-container .form-content {
570 |     width: 55%;
571 |   }
572 | 
573 |   #main-header .main-header-container form input[type=text] {
574 |     width: 100%;
575 |     margin-bottom: 10px;
576 |   }
577 | 
578 |   #main-header .main-header-container form button {
579 |     width: 100%;
580 |   }
581 | 
582 |   footer .footer-about ul li {
583 |     padding: 0 13px;
584 |   }
585 | 
586 |   .footer-info {
587 |     padding: 0 15px;
588 |   }
589 | 
590 |   .footer-info .subscribe-list {
591 |     display: flex;
592 |     flex-flow: column;
593 |     justify-content: center;
594 |     align-items: center;
595 |   }
596 | 
597 |   .footer-info .subscribe-list li {
598 |     width: 100%;
599 |     margin-bottom: 17px;
600 |   }
601 | 
602 |   .footer-info .subscribe-list li .footer-input {
603 |     width: 100%;
604 |     max-width: 299px;
605 |   }
606 | 
607 |   .footer-info .subscribe-list li p {
608 |     margin-bottom: 0;
609 |   }
610 | }
611 | 


--------------------------------------------------------------------------------
/css/reset.css:
--------------------------------------------------------------------------------
 1 | /* Box sizing rules */
 2 | *,
 3 | *::before,
 4 | *::after {
 5 |   box-sizing: border-box;
 6 | }
 7 | 
 8 | /* Remove default padding */
 9 | ul[class],
10 | ol[class] {
11 |   padding: 0;
12 |   list-style: none;
13 | }
14 | 
15 | /* Remove default margin */
16 | body,
17 | h1,
18 | h2,
19 | h3,
20 | h4,
21 | p,
22 | ul[class],
23 | ol[class],
24 | li,
25 | figure,
26 | figcaption,
27 | blockquote,
28 | dl,
29 | dd {
30 |   margin: 0;
31 | }
32 | 
33 | /* Set core body defaults */
34 | body {
35 |   min-height: 100vh;
36 |   scroll-behavior: smooth;
37 |   text-rendering: optimizeSpeed;
38 |   line-height: 1.5;
39 | }
40 | 
41 | /* A elements that don't have a class get default styles */
42 | a:not([class]) {
43 |   text-decoration-skip-ink: auto;
44 | }
45 | 
46 | /* Make images easier to work with */
47 | img {
48 |   max-width: 100%;
49 |   display: block;
50 | }
51 | 
52 | /* Natural flow and rhythm in articles by default */
53 | article > * + * {
54 |   margin-top: 1em;
55 | }
56 | 
57 | /* Inherit fonts for inputs and buttons */
58 | input,
59 | button,
60 | textarea,
61 | select {
62 |   font: inherit;
63 | }
64 | 
65 | /* Remove all animations and transitions for people that prefer not to see them */
66 | @media (prefers-reduced-motion: reduce) {
67 |   * {
68 |     animation-duration: 0.01ms !important;
69 |     animation-iteration-count: 1 !important;
70 |     transition-duration: 0.01ms !important;
71 |     scroll-behavior: auto !important;
72 |   }
73 | }
74 | 


--------------------------------------------------------------------------------
/css/shelters.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box;
  3 |   font-family: 'Roboto', sans-serif;
  4 | }
  5 | 
  6 | html {
  7 |   font-size: 65%;
  8 | }
  9 | 
 10 | html,
 11 | body {
 12 |   width: 100%;
 13 |   height: auto;
 14 | }
 15 | 
 16 | #nav-header {
 17 |   width: 100%;
 18 |   background-color: #d3574a;
 19 |   box-shadow: 0 0 10px rgba(226, 65, 64, 0.2);
 20 |   position: fixed;
 21 |   top: 0;
 22 |   z-index: 999;
 23 | }
 24 | 
 25 | #nav-header nav {
 26 |   display: flex;
 27 |   flex-flow: row wrap;
 28 |   justify-content: space-between;
 29 |   align-items: center;
 30 |   height: 65px;
 31 |   width: 95%;
 32 |   margin: 0 auto;
 33 | }
 34 | 
 35 | #nav-header nav .logo-container {
 36 |   display: inline-flex;
 37 |   cursor: pointer;
 38 |   color: white;
 39 |   font-size: 2rem;
 40 |   text-decoration: none;
 41 | }
 42 | 
 43 | #nav-header nav .logo-container .logo {
 44 |   font-size: 3rem;
 45 | }
 46 | 
 47 | #nav-header nav .logo-container .logo-increase {
 48 |   color: white;
 49 |   padding-left: 10px;
 50 |   font-weight: bold;
 51 | }
 52 | 
 53 | footer ul li {
 54 |   display: inline;
 55 | }
 56 | 
 57 | footer .footer-about ul li {
 58 |   padding: 0 31px;
 59 | }
 60 | 
 61 | footer .footer-about ul li a {
 62 |   color: white;
 63 |   text-decoration: none;
 64 | }
 65 | 
 66 | footer .footer-info ul li {
 67 |   width: 25%;
 68 |   display: flex;
 69 |   flex-flow: column;
 70 |   align-items: center;
 71 |   text-align: center;
 72 | }
 73 | 
 74 | footer .social-copyright .social-footer li {
 75 |   padding: 0 10px;
 76 | }
 77 | 
 78 | footer .social-copyright .social-footer li a {
 79 |   color: #656565;
 80 | }
 81 | 
 82 | #nav-header nav .nav-list li {
 83 |   display: inline;
 84 |   flex-flow: row nowrap;
 85 |   justify-content: space-between;
 86 |   align-items: center;
 87 |   padding: 10px;
 88 |   font-size: 1.3rem;
 89 | }
 90 | 
 91 | #nav-header nav .nav-list li a {
 92 |   color: white;
 93 |   text-decoration: none;
 94 |   text-transform: uppercase;
 95 |   font-weight: bold;
 96 | }
 97 | 
 98 | section.jumbotron {
 99 |   margin: 120px auto 50px;
100 |   width: 100%;
101 |   font-size: 1.5rem;
102 |   font-weight: bold;
103 |   padding: 5rem 2rem 10rem;
104 |   background-color: #eee;
105 | }
106 | 
107 | section.jumbotron h2 {
108 |   font-size: 2.5rem;
109 |   font-weight: 600;
110 |   text-align: center;
111 |   color: #91939a;
112 |   padding-bottom: 25px;
113 | }
114 | 
115 | section.jumbotron .find-container {
116 |   display: flex;
117 |   flex-flow: row wrap;
118 |   justify-content: center;
119 | }
120 | 
121 | section.jumbotron .find-container div.input {
122 |   width: 16%;
123 | }
124 | 
125 | section.jumbotron .find-container div.input input {
126 |   background-color: white;
127 |   border: 0;
128 |   border-radius: 3px;
129 |   padding: 6.7px 6px;
130 |   width: 100%;
131 | }
132 | 
133 | section.jumbotron .find-container .find {
134 |   display: flex;
135 |   flex-flow: column wrap;
136 |   justify-content: center;
137 |   align-items: flex-start;
138 |   padding: 0 2px;
139 | }
140 | 
141 | section.jumbotron .find-container .find label {
142 |   font-size: 1.3rem;
143 |   color: #474747;
144 |   line-height: 2.3;
145 | }
146 | 
147 | section.jumbotron .find-container .find .custom-select {
148 |   background: white;
149 |   border: 0;
150 |   font-size: 1.5rem;
151 |   padding: 7px;
152 |   font-weight: 100;
153 | }
154 | 
155 | footer .footer-info ul button {
156 |   width: 64px;
157 |   height: 38px;
158 |   border: none;
159 |   background-color: #434343;
160 |   color: white;
161 |   padding: 0;
162 |   cursor: pointer;
163 | }
164 | 
165 | section.jumbotron .find-container button {
166 |   align-self: flex-end;
167 |   margin: 0 2px 1px 2px;
168 |   border: 0;
169 |   color: white;
170 |   border-radius: 3px;
171 |   padding: 6px;
172 |   cursor: pointer;
173 | }
174 | 
175 | section.jumbotron .find-container button.btn-primary {
176 |   background-color: #457db4;
177 | }
178 | 
179 | section.jumbotron .find-container button.btn-warning {
180 |   background-color: #e5ab5a;
181 | }
182 | 
183 | .search-results {
184 |   width: 100%;
185 |   margin: 0 auto;
186 |   text-align: center;
187 | }
188 | 
189 | h1 {
190 |   font-size: 2.5rem;
191 |   color: #5b5656;
192 |   margin-bottom: 20px;
193 | }
194 | 
195 | .search-results .search-container {
196 |   display: flex;
197 |   flex-flow: row wrap;
198 |   justify-content: center;
199 | }
200 | 
201 | .search-container .search-cards {
202 |   display: block;
203 |   width: 18%;
204 |   margin: 10px;
205 |   height: 250px;
206 |   background: #d85e4b url(../img/paws.png) no-repeat center;
207 |   font-size: 1.8rem;
208 |   padding: 100px 0;
209 |   color: white;
210 |   text-decoration: none;
211 |   font-weight: 900;
212 | }
213 | 
214 | footer {
215 |   margin: 60px auto 0;
216 |   background-color: black;
217 |   display: flex;
218 |   flex-flow: column wrap;
219 |   align-items: center;
220 |   color: white;
221 |   position: relative;
222 |   bottom: 0;
223 |   width: 100%;
224 | }
225 | 
226 | footer .footer-about {
227 |   width: 100%;
228 |   display: flex;
229 |   flex-flow: row nowrap;
230 |   justify-content: space-between;
231 |   font-size: 1.3rem;
232 |   font-weight: bold;
233 |   padding: 10px 15px;
234 | }
235 | 
236 | footer .footer-about ul {
237 |   margin: auto;
238 |   padding: 10px 0;
239 |   border-top: 1px solid #434343;
240 |   border-bottom: 1px solid #434343;
241 | }
242 | 
243 | footer .footer-about .footer-about-list {
244 |   margin: auto 0 auto auto;
245 | }
246 | 
247 | footer .footer-about div {
248 |   font-size: 3.5rem;
249 |   padding: 10px 25px;
250 |   border-radius: 100%;
251 |   border: 1px solid #434343;
252 |   margin: 0 -8px;
253 |   cursor: pointer;
254 | }
255 | 
256 | footer .footer-about .footer-media-list {
257 |   margin: auto auto auto 0;
258 | }
259 | 
260 | footer .footer-info {
261 |   width: 100%;
262 |   font-size: 1.3rem;
263 |   margin: 20px 0;
264 | }
265 | 
266 | footer .footer-info ul {
267 |   display: flex;
268 |   flex-flow: row wrap;
269 |   justify-content: center;
270 |   align-items: baseline;
271 | }
272 | 
273 | footer .footer-info ul h4 {
274 |   margin-bottom: 15px;
275 |   font-size: 1.5rem;
276 | }
277 | 
278 | footer .footer-info ul .footer-input {
279 |   width: 84%;
280 | }
281 | 
282 | footer .footer-info ul input[type=text] {
283 |   background-color: inherit;
284 |   color: white;
285 |   padding: 0 7px;
286 |   margin-right: -68px;
287 |   height: 38px;
288 |   outline: 0;
289 |   border: 0.1rem solid #434343;
290 |   border-right: none;
291 |   width: 100%;
292 | }
293 | 
294 | footer .footer-info ul input[type=text]:focus {
295 |   outline: 0;
296 | }
297 | 
298 | footer .footer-info ul span {
299 |   color: #d3574a;
300 |   cursor: pointer;
301 | }
302 | 
303 | footer .social-copyright {
304 |   display: flex;
305 |   flex-flow: row wrap;
306 |   justify-content: space-between;
307 |   align-items: center;
308 |   width: 100%;
309 |   height: 80px;
310 |   padding: 0 30px;
311 |   background-color: #1f1f1f;
312 |   color: #656565;
313 |   font-size: 1rem;
314 | }
315 | 
316 | footer .social-copyright .social-footer {
317 |   font-size: 1.5rem;
318 | }
319 | 
320 | footer .social-copyright .footer-copyright {
321 |   display: flex;
322 |   word-spacing: 5px;
323 |   letter-spacing: 3px;
324 | }
325 | 
326 | @media only screen and (max-width: 364px) {
327 |   #nav-header nav .nav-list li {
328 |     padding: 10px 20px !important;
329 |   }
330 | }
331 | 
332 | @media only screen and (max-width: 576px) {
333 |   #nav-header {
334 |     height: 90px;
335 |   }
336 | 
337 |   #nav-header nav {
338 |     display: flex;
339 |     flex-flow: column nowrap;
340 |     justify-content: center;
341 |     align-items: center;
342 |     height: auto;
343 |   }
344 | 
345 |   #nav-header nav .logo-container {
346 |     margin: 8px auto 18px;
347 |   }
348 | 
349 |   footer .footer-about .footer-about-list li {
350 |     padding: 0 14px;
351 |   }
352 | 
353 |   footer .footer-info .subscribe-list li {
354 |     width: 100%;
355 |     margin-bottom: 17px;
356 |   }
357 | 
358 |   footer .footer-about .footer-media-list li {
359 |     padding: 0 14px;
360 |   }
361 | 
362 |   #nav-header nav .nav-list li {
363 |     padding: 0 32px;
364 |   }
365 | 
366 |   #nav-header nav .remove {
367 |     display: none;
368 |   }
369 | 
370 |   footer .footer-about {
371 |     display: flex;
372 |     flex-flow: column;
373 |   }
374 | 
375 |   footer .footer-about .footer-about-list {
376 |     order: 2;
377 |     text-align: center;
378 |     width: 100%;
379 |     word-wrap: unset;
380 |   }
381 | 
382 |   footer .footer-about .footer-media-list {
383 |     order: 3;
384 |     width: 100%;
385 |     word-wrap: unset;
386 |     text-align: center;
387 |   }
388 | 
389 |   footer .footer-about .footer-logo {
390 |     order: 1;
391 |     font-size: 4rem;
392 |     padding: 0;
393 |     margin: auto;
394 |     border: none;
395 |     border-radius: 0;
396 |   }
397 | 
398 |   footer .footer-info .subscribe-list {
399 |     display: flex;
400 |     flex-flow: column;
401 |     justify-content: center;
402 |     align-items: center;
403 |   }
404 | 
405 |   footer .footer-info .subscribe-list li p {
406 |     margin-bottom: 0;
407 |   }
408 | 
409 |   footer .social-copyright {
410 |     display: flex;
411 |     flex-flow: column;
412 |     justify-content: center;
413 |     align-items: center;
414 |     height: 130px;
415 |     padding: 0;
416 |   }
417 | 
418 |   footer .social-copyright .social-footer {
419 |     margin-bottom: 17px;
420 |   }
421 | 
422 |   footer .social-copyright .footer-copyright {
423 |     text-align: center;
424 |     display: flex;
425 |     flex-flow: column;
426 |   }
427 | }
428 | 
429 | @media only screen and (max-width: 790px) {
430 |   #nav-header nav .remove {
431 |     display: none;
432 |   }
433 | 
434 |   footer .footer-about .footer-about-list li {
435 |     padding: 0 14px;
436 |   }
437 | 
438 |   footer .footer-about .footer-media-list li {
439 |     padding: 0 14px;
440 |   }
441 | 
442 |   footer .footer-info .subscribe-list li {
443 |     width: 100%;
444 |     margin-bottom: 17px;
445 |   }
446 | 
447 |   #nav-header nav .nav-list li {
448 |     padding: 10px 34px;
449 |   }
450 | 
451 |   section.jumbotron div.find-container div.input input {
452 |     height: 40px;
453 |   }
454 | 
455 |   section.jumbotron {
456 |     padding: 5rem 2rem 3rem;
457 |   }
458 | 
459 |   section.jumbotron div.find-container div.input {
460 |     width: 90%;
461 |   }
462 | 
463 |   section.jumbotron div.find-container .find {
464 |     display: flex;
465 |     flex-flow: column;
466 |     width: 90%;
467 |     padding: 10px 2px;
468 |   }
469 | 
470 |   section.jumbotron div.find-container .find select.custom-select {
471 |     height: 40px;
472 |     font-size: 1.5rem;
473 |   }
474 | 
475 |   .search-container .search-cards {
476 |     width: 75%;
477 |   }
478 | 
479 |   footer .footer-about {
480 |     display: flex;
481 |     flex-flow: column;
482 |   }
483 | 
484 |   footer .footer-about .footer-about-list {
485 |     order: 2;
486 |     text-align: center;
487 |     width: 100%;
488 |     word-wrap: unset;
489 |   }
490 | 
491 |   footer .footer-about .footer-media-list {
492 |     order: 3;
493 |     width: 100%;
494 |     word-wrap: unset;
495 |     text-align: center;
496 |   }
497 | 
498 |   footer .footer-about .footer-logo {
499 |     order: 1;
500 |     font-size: 4rem;
501 |     padding: 0;
502 |     margin: auto;
503 |     border: none;
504 |     border-radius: 0;
505 |   }
506 | 
507 |   footer .footer-info {
508 |     padding: 0 15px;
509 |   }
510 | 
511 |   footer .footer-info .subscribe-list {
512 |     display: flex;
513 |     flex-flow: column;
514 |     justify-content: center;
515 |     align-items: center;
516 |   }
517 | 
518 |   footer .footer-info .subscribe-list li p {
519 |     margin-bottom: 0;
520 |   }
521 | 
522 |   footer .social-copyright {
523 |     display: flex;
524 |     flex-flow: column;
525 |     justify-content: center;
526 |     align-items: center;
527 |     height: 130px;
528 |     padding: 0;
529 |   }
530 | 
531 |   footer .social-copyright .social-footer {
532 |     margin-bottom: 17px;
533 |   }
534 | 
535 |   footer .social-copyright .footer-copyright {
536 |     text-align: center;
537 |     display: flex;
538 |     flex-flow: column;
539 |   }
540 | }
541 | 
542 | @media only screen and (max-width: 1024px) {
543 |   section.jumbotron .find-container {
544 |     display: flex;
545 |     flex-flow: column wrap;
546 |     justify-content: center;
547 |     align-items: center;
548 |   }
549 | 
550 |   section.jumbotron .find-container div.input {
551 |     width: 50%;
552 |   }
553 | 
554 |   section.jumbotron .find-container .find {
555 |     display: flex;
556 |     flex-flow: column;
557 |     justify-content: center;
558 |     align-items: normal;
559 |     padding: 10px 2px;
560 |     width: 50%;
561 |   }
562 | 
563 |   section.jumbotron .find-container button.btn-primary {
564 |     align-self: center;
565 |     width: 50%;
566 |     margin-bottom: 8px;
567 |   }
568 | 
569 |   section.jumbotron .find-container button.btn-warning {
570 |     align-self: center;
571 |     width: 50%;
572 |   }
573 | 
574 |   footer .footer-about ul li {
575 |     padding: 0 13px;
576 |   }
577 | 
578 |   .footer-info {
579 |     padding: 0 15px;
580 |   }
581 | 
582 |   .footer-info .subscribe-list {
583 |     display: flex;
584 |     flex-flow: column;
585 |     justify-content: center;
586 |     align-items: center;
587 |   }
588 | 
589 |   .footer-info .subscribe-list li {
590 |     width: 100%;
591 |     margin-bottom: 17px;
592 |   }
593 | 
594 |   .footer-info .subscribe-list li .footer-input {
595 |     width: 100%;
596 |     max-width: 299px;
597 |   }
598 | 
599 |   .footer-info .subscribe-list li p {
600 |     margin-bottom: 0;
601 |   }
602 | }
603 | 


--------------------------------------------------------------------------------
/img/capstone.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rammazzoti2000/HTML-CSS-capstone-project/8ea3527efa9e8b0029fd560c537accd16792320a/img/capstone.jpg


--------------------------------------------------------------------------------
/img/contributors.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="94" height="20"><g shape-rendering="crispEdges"><path fill="#555" d="M0 0h77v20H0z"/><path fill="#e05d44" d="M77 0h17v20H77z"/></g><g fill="#fff" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110" text-anchor="middle"><text x="395" y="140" textLength="670" transform="scale(.1)">contributors</text><text x="845" y="140" textLength="70" transform="scale(.1)">1</text></g></svg>


--------------------------------------------------------------------------------
/img/main-image.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rammazzoti2000/HTML-CSS-capstone-project/8ea3527efa9e8b0029fd560c537accd16792320a/img/main-image.jpeg


--------------------------------------------------------------------------------
/img/microverse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rammazzoti2000/HTML-CSS-capstone-project/8ea3527efa9e8b0029fd560c537accd16792320a/img/microverse.png


--------------------------------------------------------------------------------
/img/paws.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rammazzoti2000/HTML-CSS-capstone-project/8ea3527efa9e8b0029fd560c537accd16792320a/img/paws.png


--------------------------------------------------------------------------------
/img/result-one.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rammazzoti2000/HTML-CSS-capstone-project/8ea3527efa9e8b0029fd560c537accd16792320a/img/result-one.png


--------------------------------------------------------------------------------
/img/result-three.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rammazzoti2000/HTML-CSS-capstone-project/8ea3527efa9e8b0029fd560c537accd16792320a/img/result-three.png


--------------------------------------------------------------------------------
/img/result-two.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rammazzoti2000/HTML-CSS-capstone-project/8ea3527efa9e8b0029fd560c537accd16792320a/img/result-two.png


--------------------------------------------------------------------------------
/img/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rammazzoti2000/HTML-CSS-capstone-project/8ea3527efa9e8b0029fd560c537accd16792320a/img/screenshot.png


--------------------------------------------------------------------------------
/img/screenshot2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rammazzoti2000/HTML-CSS-capstone-project/8ea3527efa9e8b0029fd560c537accd16792320a/img/screenshot2.png


--------------------------------------------------------------------------------
/img/yes.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="84" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="a"><rect width="84" height="20" rx="3" fill="#fff"/></mask><g mask="url(#a)"><path fill="#555" d="M0 0h55v20H0z"/><path fill="#4c1" d="M55 0h29v20H55z"/><path fill="url(#b)" d="M0 0h84v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"><text x="27.5" y="15" fill="#010101" fill-opacity=".3">hireable</text><text x="27.5" y="14">hireable</text><text x="68.5" y="15" fill="#010101" fill-opacity=".3">yes</text><text x="68.5" y="14">yes</text></g></svg>


--------------------------------------------------------------------------------
/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 |   <title>HTM/CSS - Capstone | Dog-Shelter Directory</title>
  7 |   <link rel="stylesheet" href="css/index.css">
  8 |   <link rel="stylesheet" href="css/reset.css">
  9 |   <script src="https://kit.fontawesome.com/d4de0f4540.js" crossorigin="anonymous"></script>
 10 |   <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
 11 | </head>
 12 | 
 13 | <body>
 14 | 
 15 |   <!-- Navigation bar -->
 16 |   <header id="nav-header">    
 17 |       <nav>
 18 |       <a class="logo-container text-decoration-none" href="index.html">
 19 |         <i class="fas fa-map-marker-alt logo"></i>
 20 |         <span class="logo-increase">PETFinder</span>
 21 |       </a>
 22 | 
 23 |       <ul class="nav-list">
 24 |         <li><a href="./pages/shelters.html"><i class="fas fa-search"></i><span class="remove">&nbsp;shelters</span></a></li>
 25 |         <li><a href="#"><i class="far fa-user"></i><span class="remove">&nbsp;about</span></a></li>
 26 |         <li><a href="#"><i class="fas fa-rss"></i><span class="remove">&nbsp;blog</span></a></li>
 27 |         <li><a href="#"><i class="fas fa-bars"></i><span class="remove">&nbsp;more...</span></a></li>
 28 |       </ul>
 29 |     </nav>
 30 |   </header>
 31 | 
 32 |   <!-- Main section -->
 33 |   <main>
 34 |     <!--Main header with input form -->
 35 |     <header id="main-header">
 36 |       <div class="main-header-container">
 37 |         <div class="cover-header"></div>
 38 |         <div class="form-container">
 39 |           <div class="form-content">
 40 |             <h1 class="title-header">PETFinder... FIND AN ANIMAL SHELTER OR RESCUE GROUP.</h1>
 41 |             <form action="#">
 42 |               <p>SEARCH BY KEYWORD:</p>
 43 |               <input type="text" name="search">
 44 |               <button type="button">SEARCH</button>
 45 |             </form>            
 46 |           </div>
 47 |           <a href="#section">How it works</a>
 48 |         </div>
 49 |       </div>
 50 |     </header>
 51 | 
 52 |     <!-- How it works section -->
 53 |     <section id="section">
 54 |       <h2 class="pet-title-header">PETFinder WORKS IN FOUR SIMPLE STEPS.</h2>
 55 |         <div class="instructions">
 56 |           <div class="instruction-cards card-1">
 57 |             <i class="fas fa-search-location icon"></i>
 58 |             <div class="card-text">
 59 |               <h3>1 - SEARCH:</h3>
 60 |               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint libero rerum, distinctio nostrum perspiciatis itaque iure similique eius molestias maiores tempora voluptas voluptatum esse obcaecati sit ullam, deleniti earum accusantium?</p>
 61 |             </div>
 62 |           </div>
 63 | 
 64 |           <div class="instruction-cards card-2">
 65 |             <i class="fas fa-map-marked-alt icon"></i>
 66 |             <div class="card-text">
 67 |               <h3>2 - LOCATE:</h3>
 68 |               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint libero rerum, distinctio nostrum perspiciatis itaque iure similique eius molestias maiores tempora voluptas voluptatum esse obcaecati sit ullam, deleniti earum accusantium?</p>
 69 |             </div>
 70 |           </div>
 71 | 
 72 |           <div class="instruction-cards card-3">
 73 |             <i class="fas fa-address-book icon"></i>
 74 |             <div class="card-text">
 75 |               <h3>3 - Contact:</h3>
 76 |               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint libero rerum, distinctio nostrum perspiciatis itaque iure similique eius molestias maiores tempora voluptas voluptatum esse obcaecati sit ullam, deleniti earum accusantium?</p>
 77 |             </div>
 78 |           </div>
 79 | 
 80 |           <div class="instruction-cards card-4">
 81 |             <i class="fas fa-umbrella-beach icon"></i>
 82 |             <div class="card-text">
 83 |               <h3>4 - RELAX</h3>
 84 |               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint libero rerum, distinctio nostrum perspiciatis itaque iure similique eius molestias maiores tempora voluptas voluptatum esse obcaecati sit ullam, deleniti earum accusantium?</p>
 85 |             </div>
 86 |           </div>
 87 |         </div>
 88 |     </section>
 89 |   </main>
 90 | 
 91 |   <!-- Footer section -->
 92 |   <footer>
 93 | 
 94 |     <!-- top footer -->
 95 |     <div class="footer-about">
 96 |       <ul class="footer-about-list list">
 97 |         <li><a href="#">HOME</a></li>
 98 |         <li><a href="#">SEARCH</a></li>
 99 |         <li><a href="#">ABOUT US</a></li>
100 |         <li><a href="#">ADVERTISE</a></li>
101 |       </ul>
102 | 
103 |       <div class="footer-logo"><i class="fas fa-map-marker-alt"></i></div>
104 | 
105 |       <ul class="footer-media-list list">
106 |         <li><a href="#">FACEBOOK</a></li>
107 |         <li><a href="#">TWITEER</a></li>
108 |         <li><a href="#">BLOG</a></li>
109 |         <li><a href="#">GOOGLE</a></li>
110 |       </ul>
111 |     </div>
112 | 
113 |     <!-- middle footer -->
114 |     <div class="footer-info">
115 |       <ul class="subscribe-list">
116 |         <li>
117 |           <h4>SUBSCRIBE</h4>
118 |           <div class="footer-input">
119 |             <input type="text" name="search" placeholder="you@example.com">
120 |             <button type="button">send</button>
121 |           </div>
122 |         </li>
123 |         
124 |         <li>
125 |           <h4>CONTACT</h4>
126 |           <p>Have a question or submission?</p>
127 |           <span>you@example.com</span>
128 |         </li>
129 | 
130 |         <li>
131 |           <h4>ABOUT</h4>
132 |           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint libero rerum, distinctio nostrum perspiciatis itaque iure similique eius molestias maiores tempora voluptas voluptatum esse obcaecati sit ullam, deleniti earum accusantium?<span> Learn more...</span></p>
133 |         </li>
134 |       </ul>
135 |     </div>
136 | 
137 |     <!-- bottom footer -->
138 |     <div class="social-copyright">
139 |       <ul class="social-footer">
140 |         <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
141 |         <li><a href="#"><i class="fab fa-twitter"></i></a></li>
142 |         <li><a href="#"><i class="fab fa-tumblr"></i></a></li>
143 |         <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
144 |         <li><a href="#"><i class="fab fa-instagram"></i></a></li>
145 |       </ul>
146 | 
147 |       <ul class="footer-copyright">
148 |         <li><p>&copy;PETFinder 2020.</p></li>
149 |         <li><p>&nbsp; ALL RIGHTS RESERVED.</p></li>
150 |         <li><p>&nbsp; LOVE AND AWESOMNESS.</p></li>
151 |       </ul>
152 |     </div>
153 |   </footer>
154 | </body>
155 | </html>


--------------------------------------------------------------------------------
/less/detailes.less:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box;
  3 | }
  4 | 
  5 | html,
  6 | body {
  7 |   font-size: 65%;
  8 |   width: 100%;
  9 |   height: 100%;
 10 |   font-family: Arial, Helvetica, sans-serif;
 11 |   height: auto;
 12 | }
 13 | 
 14 | @backgroundRedPink: #E24140;
 15 | 
 16 | #nav-header {
 17 |   width: 100%;
 18 |   background-color: @backgroundRedPink;
 19 |   box-shadow: 0px 0px 10px rgba(226, 65, 64, 0.2);
 20 |   position: fixed;
 21 |   top: 0;
 22 |   z-index: 999;
 23 | 
 24 |   nav {
 25 |     display: flex;
 26 |     flex-flow: row wrap;
 27 |     justify-content: space-between;
 28 |     align-items: center;
 29 |     height: 65px;
 30 |     width: 95%;
 31 |     margin: 0 auto;
 32 | 
 33 |     .logo-container {
 34 |       display: inline-flex;
 35 |       cursor: pointer;
 36 |       color: white;
 37 |       font-size: 2rem;
 38 | 
 39 | 
 40 |       .logo {
 41 |         font-size: 3rem;
 42 |       }
 43 | 
 44 |       .logo-increase {
 45 |         color: white;
 46 |         padding-left: 10px;
 47 |         font-weight: bold;
 48 |       }
 49 |     }
 50 | 
 51 |     .nav-list li {
 52 |       display: inline;
 53 |       flex-flow: row nowrap;
 54 |       justify-content: space-between;
 55 |       align-items: center;
 56 |       padding: 10px;
 57 | 
 58 |       a {
 59 |         color: white;
 60 |         text-decoration: none;
 61 |         font-size: 1.5rem;
 62 |         text-transform: uppercase;
 63 |         font-weight: bold;
 64 |       }
 65 |     }
 66 |   }
 67 | }
 68 | 
 69 | section.jumbotron {
 70 |   width: 90%;
 71 |   margin: 130px auto 50px;
 72 |   background-color: white;
 73 | 
 74 |   h2 {
 75 |     font-size: 3.5rem;
 76 |     font-weight: 300;
 77 |     color: @backgroundRedPink;
 78 |     padding-left: 12px;
 79 |   }
 80 | 
 81 |   .info-rows {
 82 |     display: flex;
 83 |     flex-flow: row wrap;
 84 |     justify-content: center;
 85 | 
 86 |     .card {
 87 |       width: 48%;
 88 |       margin: 10px auto;
 89 |       font-size: 1.8rem;
 90 |       text-transform: uppercase;
 91 | 
 92 |       span {
 93 |         font-weight: 600;
 94 |         color: #434343;
 95 |       }
 96 |     }
 97 |   }
 98 | 
 99 |   .contact-container {
100 |     margin: 12px;
101 |     padding: 20px 0;
102 |     font-size: 1.3rem;
103 | 
104 |     button {
105 |       float: right;
106 |       clear: both;
107 |       margin-bottom: 10px;
108 |       font-size: 1.5rem;
109 |     }
110 | 
111 |     ul {
112 |       float: right;
113 |       clear: both;
114 | 
115 |       li {
116 |         display: inline;
117 |         padding-left: 12px;
118 |       }
119 | 
120 |       a {
121 |         color: #434343;
122 |         text-decoration: none;
123 |       }
124 |     }
125 |   }
126 | }
127 | 
128 | div.jumbotron {
129 |   width: 90%;
130 |   margin: 0 auto;
131 |   font-size: 2rem;
132 |   text-transform: uppercase;
133 |   word-spacing: 13px;
134 |   letter-spacing: 8px;
135 |   padding: 14px 20px;
136 |   text-align: center;
137 | 
138 |   a {
139 |     color: #434343;
140 |     text-decoration: none;
141 |     margin-left: 30px;
142 |   }
143 | }
144 | 
145 | .map-container {
146 |   width: 90%;
147 |   margin: 50px auto;
148 |   
149 |   h2 {
150 |     text-align: center;
151 |     color: @backgroundRedPink;
152 |     font-size: 3rem;
153 |     font-weight: 300;
154 |     margin: 66px 0 40px;
155 |   }
156 | 
157 |   iframe {
158 |     width: 100%;
159 |   }
160 | }
161 | 
162 | footer {
163 |   margin: 60px auto 0;
164 |   background-color: black;
165 |   display: flex;
166 |   flex-flow: column wrap;
167 |   align-items: center;
168 |   color: white;
169 |   position: relative;
170 |   bottom: 0;
171 |   width: 100%;
172 | 
173 |   ul li {
174 |     display: inline;
175 |   }
176 | 
177 |   .footer-about {
178 |     width: 100%;
179 |     display: flex;
180 |     flex-flow: row nowrap;
181 |     justify-content: space-between;
182 |     font-size: 1.3rem;
183 |     font-weight: bold;
184 |     padding: 10px 15px;
185 | 
186 |     ul {
187 | 
188 |       margin: auto;
189 |       padding: 10px 0;
190 |       border-top: 1px solid #434343;
191 |       border-bottom: 1px solid #434343;
192 | 
193 |       li {
194 |         padding: 0px 40px;
195 | 
196 |         a {
197 |           color: white;
198 |           text-decoration: none;
199 |         }
200 |       }
201 |     }
202 | 
203 |     .footer-about-list {
204 |       margin: auto 0 auto auto;
205 |     }
206 | 
207 |     div {
208 |       font-size: 3.5rem;
209 |       padding: 10px 25px;
210 |       border-radius: 100%;
211 |       border: 1px solid #434343;
212 |       margin: 0 -8px;
213 |       cursor: pointer;
214 |     }
215 | 
216 |     .footer-media-list {
217 |       margin: auto auto auto 0;
218 |     }
219 |   }
220 | 
221 |   
222 | 
223 |   .footer-info {
224 |     width: 100%;
225 |     font-size: 1.3rem;
226 |     margin: 20px 0;
227 | 
228 |     ul {
229 |       display: flex;
230 |       flex-flow: row wrap;
231 |       justify-content: center;
232 |       align-items: baseline;
233 | 
234 |       li {
235 |         width: 24%;
236 |         margin: 0 auto;
237 |         display: flex;
238 |         flex-flow: column;
239 |         align-items: center;
240 |         text-align: center;
241 |       }
242 | 
243 |       h4 {
244 |         margin-bottom: 15px;
245 |         font-size: 1.5rem;
246 |       }
247 | 
248 |       .footer-input {
249 |         width: 84%;
250 |       }
251 | 
252 |       input[type=text] {
253 |         background-color: inherit;
254 |         color: white;
255 |         padding: 0 7px;
256 |         margin-right: -68px;
257 |         height: 38px;
258 |         outline: 0;
259 |         border: 0.1rem solid #434343;
260 |         border-right: none;
261 |         width: 100%;
262 |       }
263 | 
264 |       input[type=text]:focus {
265 |         outline: 0;
266 |       }
267 | 
268 |       button {
269 |         width: 64px;
270 |         height: 38px;
271 |         border: none;
272 |         background-color: #434343;
273 |         color: white;
274 |         padding: 0;
275 |         cursor: pointer;
276 |       }
277 | 
278 |       span {
279 |         color: @backgroundRedPink;
280 |         cursor: pointer;
281 |       }
282 |     }
283 |   }
284 | 
285 |   .social-copyright {
286 |     display: flex;
287 |     flex-flow: row wrap;
288 |     justify-content: space-between;
289 |     align-items: center;
290 |     width: 100%;
291 |     height: 80px;
292 |     padding: 0 30px;
293 |     background-color: #1F1F1F;
294 |     color: #656565;
295 |     font-size: 1rem;
296 | 
297 |     .social-footer {
298 |       font-size: 1.5rem;
299 |       
300 |       li {
301 |         padding: 0 10px;
302 | 
303 |         a {
304 |           color: #656565;
305 |         }
306 |       }
307 |     }
308 |     
309 |     .footer-copyright {
310 |       display: flex;
311 |       word-spacing: 5px;
312 |       letter-spacing: 3px;
313 |     }
314 |   }
315 | }
316 | 
317 | @media only screen and (max-width: 576px) {
318 |   #nav-header {
319 |     height: 90px;
320 | 
321 |     nav {
322 |       display: flex;
323 |       flex-flow: column nowrap;
324 |       justify-content: center;
325 |       align-items: center;
326 |       height: auto;
327 | 
328 |       .logo-container {
329 |         margin: 8px auto 18px;
330 |       }
331 | 
332 |       .nav-list {
333 | 
334 |         li {
335 |           padding: 0 32px;
336 |         }
337 |       }
338 | 
339 |       .remove {
340 |         display: none;
341 |       }
342 |     }
343 |   }
344 | 
345 |   footer {
346 | 
347 |     .footer-about {
348 |       display: flex;
349 |       flex-flow: column;
350 |   
351 |       .footer-about-list {
352 |         order: 2;
353 |         text-align: center;
354 |         width: 100%;
355 |         word-wrap: unset;
356 |   
357 |         li {
358 |           padding: 0 14px;
359 |         }
360 |       }
361 |   
362 |       .footer-media-list {
363 |         order: 3;
364 |         width: 100%;
365 |         word-wrap: unset;
366 |         text-align: center;
367 |   
368 |         li {
369 |           padding: 0 14px;
370 |         }
371 |       }
372 |   
373 |       .footer-logo {
374 |         order: 1;
375 |         font-size: 4rem;
376 |         padding: 0;
377 |         margin: auto;
378 |         border: none;
379 |         border-radius: 0;
380 |       }
381 |     }
382 |   
383 |     .footer-info {
384 |   
385 |       .subscribe-list {
386 |         display: flex;
387 |         flex-flow: column;
388 |         justify-content: center;
389 |         align-items: center;
390 |   
391 |         li {
392 |           width: 100%;
393 |           margin-bottom: 17px;
394 | 
395 |           p {
396 |             margin-bottom: 0;
397 |           }
398 |         }
399 |       }
400 |     }
401 |   
402 |     .social-copyright {
403 |       display: flex;
404 |       flex-flow: column;
405 |       justify-content: center;
406 |       align-items: center;
407 |       height: 130px;
408 |       padding: 0;
409 |   
410 |       .social-footer {
411 |         margin-bottom: 17px;
412 |       }
413 |   
414 |       .footer-copyright {
415 |         text-align: center;
416 |         display: flex;
417 |         flex-flow: column;
418 |       }
419 |     }
420 |   }
421 | }
422 | 
423 | @media only screen and (max-width: 790px) {
424 |   #main-header {
425 | 
426 |     .main-header-container {
427 |       background-size: auto 100%;
428 |       background-position: center;
429 | 
430 |       .cover-header {
431 | 
432 |         .form-content {
433 |           width: 90%;
434 | 
435 |           h2 {
436 |           font-size: 1.8rem;
437 |           }
438 | 
439 |           form {
440 |             padding: 23px 18px 33px;
441 |           }
442 | 
443 |           input {
444 |             margin-right: -25%;
445 |             padding: 3px 10px;
446 |             width: 99%;
447 |           }
448 | 
449 |           button {
450 |             width: 26%;
451 |             font-size: 1.5rem;
452 |           }
453 |         }
454 |       }
455 |     }
456 |   }
457 | 
458 |   section.jumbotron {
459 | 
460 |     div.info-rows {
461 |       display: flex;
462 |       flex-flow: column;
463 |       align-items: baseline;
464 |       justify-content: center;
465 |   
466 |       .card {
467 |         width: 95%;
468 |       }    
469 |     }
470 |   }
471 | 
472 |   div.contact-container {
473 | 
474 |     ul.contact-list {
475 |       float: none;
476 | 
477 |       li {
478 |         display: block;
479 |         padding: 0;
480 |       }
481 |     }
482 | 
483 |     button.btn-primary{
484 |       float: none;
485 |     }
486 |   }
487 |       
488 |     
489 | 
490 |   footer {
491 | 
492 |     .footer-about {
493 |       display: flex;
494 |       flex-flow: column;
495 |   
496 |       .footer-about-list {
497 |         order: 2;
498 |         text-align: center;
499 |         width: 100%;
500 |         word-wrap: unset;
501 |   
502 |         li {
503 |           padding: 0 14px;
504 |         }
505 |       }
506 |   
507 |       .footer-media-list {
508 |         order: 3;
509 |         width: 100%;
510 |         word-wrap: unset;
511 |         text-align: center;
512 |   
513 |         li {
514 |           padding: 0 14px;
515 |         }
516 |       }
517 |   
518 |       .footer-logo {
519 |         order: 1;
520 |         font-size: 4rem;
521 |         padding: 0;
522 |         margin: auto;
523 |         border: none;
524 |         border-radius: 0;
525 |       }
526 |     }
527 |   
528 |     .footer-info {
529 |       padding: 0 15px;
530 |   
531 |       .subscribe-list {
532 |         display: flex;
533 |         flex-flow: column;
534 |         justify-content: center;
535 |         align-items: center;
536 |   
537 |         li {
538 |           width: 100%;
539 |           margin-bottom: 17px;
540 | 
541 |           p {
542 |             margin-bottom: 0;
543 |           }
544 |         }
545 |       }
546 |     }
547 |   
548 |     .social-copyright {
549 |       display: flex;
550 |       flex-flow: column;
551 |       justify-content: center;
552 |       align-items: center;
553 |       height: 130px;
554 |       padding: 0;
555 |   
556 |       .social-footer {
557 |         margin-bottom: 17px;
558 |       }
559 |   
560 |       .footer-copyright {
561 |         text-align: center;
562 |         display: flex;
563 |         flex-flow: column;
564 |       }
565 |     }
566 |   }
567 | }
568 | 
569 | @media only screen and (max-width: 1024px) {
570 | 
571 |   footer .footer-about ul li {
572 |     padding: 0 13px;
573 |   }
574 | 
575 |   .footer-info {
576 |     padding: 0 15px;
577 | 
578 |     .subscribe-list {
579 |       display: flex;
580 |       flex-flow: column;
581 |       justify-content: center;
582 |       align-items: center;
583 | 
584 |       li {
585 |         width: 100%;
586 |         margin-bottom: 17px;
587 | 
588 |         .footer-input {
589 |           width: 50%;
590 |         }
591 | 
592 |         p {
593 |           margin-bottom: 0;
594 |         }
595 |       }
596 |     }
597 |   }
598 | }
599 | 


--------------------------------------------------------------------------------
/less/index.less:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box;
  3 | }
  4 | 
  5 | html,
  6 | body {
  7 |   font-size: 65%;
  8 |   width: 100%;
  9 |   height: 100%;
 10 |   font-family: Arial, Helvetica, sans-serif;
 11 |   height: auto;
 12 | }
 13 | 
 14 | @backgroundRedPink: #E24140;
 15 | 
 16 | #nav-header {
 17 |   width: 100%;
 18 |   background-color: @backgroundRedPink;
 19 |   box-shadow: 0px 0px 10px rgba(226, 65, 64, 0.2);
 20 |   position: fixed;
 21 |   z-index: 999;
 22 | 
 23 |   nav {
 24 |     display: flex;
 25 |     flex-flow: row wrap;
 26 |     justify-content: space-between;
 27 |     align-items: center;
 28 |     height: 65px;
 29 |     width: 95%;
 30 |     margin: 0 auto;
 31 | 
 32 |     .logo-container {
 33 |       display: inline-flex;
 34 |       cursor: pointer;
 35 |       color: white;
 36 |       font-size: 2rem;
 37 | 
 38 | 
 39 |       .logo {
 40 |         font-size: 3rem;
 41 |       }
 42 | 
 43 |       .logo-increase {
 44 |         color: white;
 45 |         padding-left: 10px;
 46 |         font-weight: bold;
 47 |       }
 48 |     }
 49 | 
 50 |     .nav-list li {
 51 |       display: inline;
 52 |       flex-flow: row nowrap;
 53 |       justify-content: space-between;
 54 |       align-items: center;
 55 |       padding: 10px;
 56 | 
 57 |       a {
 58 |         color: white;
 59 |         text-decoration: none;
 60 |         font-size: 1.5rem;
 61 |         text-transform: uppercase;
 62 |         font-weight: bold;
 63 |       }
 64 |     }
 65 |   }
 66 | }
 67 | 
 68 | #main-header {
 69 |   width: 100%;
 70 |   margin: 0 auto;
 71 |   height: 554px;
 72 | 
 73 |   .main-header-container {
 74 |     background: url(../img/main-image.jpeg) no-repeat;
 75 |     height: 127%;
 76 |     background-position: 0;
 77 |     background-size: cover;
 78 | 
 79 |     .cover-header {
 80 |       background-color: rgba(0, 0, 0, 0.4);
 81 |       width: 100%;
 82 |       height: 100%;
 83 |       display: flex;
 84 |       flex-flow: column wrap;
 85 |       justify-content: center;
 86 |       align-items: center;
 87 | 
 88 |       .form-content {
 89 |         width: 58%;
 90 |         margin-top: 14%;
 91 |       }
 92 | 
 93 |       h2 {
 94 |         color: white;
 95 |         text-shadow: 1px 2px 1px black;
 96 |         font-size: 2.5rem;
 97 |         text-align: center;
 98 |       }
 99 |     }
100 | 
101 |     form {
102 |       font-size: 1.5rem;
103 |       font-weight: bold;
104 |       background: rgba(255,255,255, 0.6);
105 |       padding: 27px 40px 40px;
106 |       border-radius: 6px;
107 |       margin-top: 10px;
108 | 
109 |       p {
110 |         margin-bottom: 6px;
111 |       }
112 |       
113 |       input[type=text] {
114 |         width: 85%;
115 |         outline: none;
116 |         border: none;
117 |         padding: 3px 10px;
118 |         height: 43px;
119 |         }
120 | 
121 |         button {
122 |           color: white;
123 |           background-color: @backgroundRedPink;
124 |           height: 43px;
125 |           width: 15%;
126 |           padding: 0;
127 |           border: none;
128 |           margin-left: -7px;
129 |           cursor: pointer;
130 |         }
131 | 
132 |         button:active {
133 |           background-color: rgba(226, 65, 64, 0.8);
134 |         }
135 |       }
136 |     }
137 | 
138 |     a {
139 |       color: black;
140 |       text-decoration: none;
141 |       font-size: 2rem;
142 |       background: rgba(255,255,255, 0.6);
143 |       border-radius: 6px;
144 |       padding: 10px 15px;
145 |       margin: 35px 0 20px;
146 |     }
147 | 
148 |     a:hover {
149 |       background-color: rgb(226, 65, 64);
150 |     }
151 | 
152 |     a:active {
153 |       background: rgba(255,255,255, 0.6);
154 |     }
155 |   }
156 | 
157 | section {
158 |   text-align: center;
159 |   font-size: 1.5rem;
160 |   padding-top: 50px;
161 | 
162 |   .pet-title-header {
163 |     color: white;
164 |     text-shadow: 1px 2px 1px black;
165 |   }
166 | 
167 | 
168 |   .instructions {
169 |     display: flex;
170 |     flex-flow: row wrap;
171 |     justify-content: space-evenly;
172 |     align-items: center;
173 |     margin-top: 20px;
174 | 
175 |     .instruction-cards {
176 |       width: 20%;
177 |       height: 344px;
178 |       box-shadow: 0px 0px 10px rgba(226, 65, 64, 0.2);
179 |       border-radius: 5px;
180 |       margin: 40px 0;
181 |       padding: 40px;
182 |       background-color: white;
183 |       overflow: scroll;
184 | 
185 |       .icon {
186 |         font-size: 2rem;
187 |         color: @backgroundRedPink;
188 |       }
189 | 
190 |       h3 {
191 |         margin: 15px 0 20px;
192 |       }
193 |     }
194 |   }
195 | }
196 | 
197 | footer {
198 |   margin: 25px auto 0;
199 |   background-color: black;
200 |   display: flex;
201 |   flex-flow: column wrap;
202 |   align-items: center;
203 |   color: white;
204 |   position: relative;
205 |   bottom: 0;
206 |   width: 100%;
207 | 
208 |   ul li {
209 |     display: inline;
210 |   }
211 | 
212 |   .footer-about {
213 |     width: 100%;
214 |     display: flex;
215 |     flex-flow: row nowrap;
216 |     justify-content: space-between;
217 |     font-size: 1.3rem;
218 |     font-weight: bold;
219 |     padding: 10px 15px;
220 | 
221 |     ul {
222 | 
223 |       margin: auto;
224 |       padding: 10px 0;
225 |       border-top: 1px solid #434343;
226 |       border-bottom: 1px solid #434343;
227 | 
228 |       li {
229 |         padding: 0px 40px;
230 | 
231 |         a {
232 |           color: white;
233 |           text-decoration: none;
234 |         }
235 |       }
236 |     }
237 | 
238 |     .footer-about-list {
239 |       margin: auto 0 auto auto;
240 |     }
241 | 
242 |     div {
243 |       font-size: 3.5rem;
244 |       padding: 10px 25px;
245 |       border-radius: 100%;
246 |       border: 1px solid #434343;
247 |       margin: 0 -8px;
248 |       cursor: pointer;
249 |     }
250 | 
251 |     .footer-media-list {
252 |       margin: auto auto auto 0;
253 |     }
254 |   }
255 | 
256 |   
257 | 
258 |   .footer-info {
259 |     width: 100%;
260 |     font-size: 1.3rem;
261 |     margin: 20px 0;
262 | 
263 |     ul {
264 |       display: flex;
265 |       flex-flow: row wrap;
266 |       justify-content: center;
267 |       align-items: baseline;
268 | 
269 |       li {
270 |         width: 25%;
271 |         margin: 0 auto;
272 |         display: flex;
273 |         flex-flow: column;
274 |         align-items: center;
275 |         text-align: center;
276 |       }
277 | 
278 |       h4 {
279 |         margin-bottom: 15px;
280 |         font-size: 1.5rem;
281 |       }
282 | 
283 |       .footer-input {
284 |         width: 90%;
285 |       }
286 | 
287 |       input[type=text] {
288 |         background-color: inherit;
289 |         color: white;
290 |         padding: 0 7px;
291 |         margin-right: -68px;
292 |         height: 38px;
293 |         outline: 0;
294 |         border: 0.1rem solid #434343;
295 |         border-right: none;
296 |         width: 100%;
297 |       }
298 | 
299 |       input[type=text]:focus {
300 |         outline: 0;
301 |       }
302 | 
303 |       button {
304 |         width: 64px;
305 |         height: 38px;
306 |         border: none;
307 |         background-color: #434343;
308 |         color: white;
309 |         padding: 0;
310 |         cursor: pointer;
311 |       }
312 | 
313 |       span {
314 |         color: @backgroundRedPink;
315 |         cursor: pointer;
316 |       }
317 |     }
318 |   }
319 | 
320 |   .social-copyright {
321 |     display: flex;
322 |     flex-flow: row wrap;
323 |     justify-content: space-between;
324 |     align-items: center;
325 |     width: 100%;
326 |     height: 80px;
327 |     padding: 0 30px;
328 |     background-color: #1F1F1F;
329 |     color: #656565;
330 |     font-size: 1rem;
331 | 
332 |     .social-footer {
333 |       font-size: 1.5rem;
334 |       
335 |       li {
336 |         padding: 0 10px;
337 | 
338 |         a {
339 |           color: #656565;
340 |         }
341 |       }
342 |     }
343 |     
344 |     .footer-copyright {
345 |       display: flex;
346 |       word-spacing: 5px;
347 |       letter-spacing: 3px;
348 |     }
349 |   }
350 | }
351 | 
352 | @media only screen and (max-width: 576px) {
353 |   #nav-header {
354 |     height: 90px;
355 | 
356 |     nav {
357 |       display: flex;
358 |       flex-flow: column nowrap;
359 |       justify-content: center;
360 |       align-items: center;
361 |       height: auto;
362 | 
363 |       .logo-container {
364 |         margin: 8px auto 18px;
365 |       }
366 | 
367 |       .nav-list {
368 | 
369 |         li {
370 |           padding: 0 32px;
371 |         }
372 |       }
373 | 
374 |       .remove {
375 |         display: none;
376 |       }
377 |     }
378 |   }
379 | 
380 |   #main-header {
381 | 
382 |     .main-header-container {
383 |       background-size: auto 100%;
384 |       background-position: center;
385 | 
386 |       .cover-header {
387 | 
388 |         .form-content {
389 |           width: 90%;
390 | 
391 |           h2 {
392 |           font-size: 1.8rem;
393 |           }
394 | 
395 |           form {
396 |             padding: 23px 18px 33px;
397 |           }
398 | 
399 |           input {
400 |             margin-right: -25%;
401 |             padding: 3px 10px;
402 |             width: 99%;
403 |           }
404 | 
405 |           button {
406 |             width: 26%;
407 |             font-size: 1.4rem;
408 |           }
409 |         }
410 |       }
411 |     }
412 |   }
413 | 
414 |   section {
415 | 
416 |     .instructions {
417 |       display: flex;
418 |       flex-flow: column wrap;
419 |       align-items: center;
420 | 
421 |       .instruction-cards {
422 |         width: 90% !important;
423 |         height: auto;
424 |       }
425 |     }
426 |   }
427 | 
428 |   footer {
429 | 
430 |     .footer-about {
431 |       display: flex;
432 |       flex-flow: column;
433 |   
434 |       .footer-about-list {
435 |         order: 2;
436 |         text-align: center;
437 |         width: 100%;
438 |         word-wrap: unset;
439 |   
440 |         li {
441 |           padding: 0 14px;
442 |         }
443 |       }
444 |   
445 |       .footer-media-list {
446 |         order: 3;
447 |         width: 100%;
448 |         word-wrap: unset;
449 |         text-align: center;
450 |   
451 |         li {
452 |           padding: 0 14px;
453 |         }
454 |       }
455 |   
456 |       .footer-logo {
457 |         order: 1;
458 |         font-size: 4rem;
459 |         padding: 0;
460 |         margin: auto;
461 |         border: none;
462 |         border-radius: 0;
463 |       }
464 |     }
465 |   
466 |     .footer-info {
467 |   
468 |       .subscribe-list {
469 |         display: flex;
470 |         flex-flow: column;
471 |         justify-content: center;
472 |         align-items: center;
473 |   
474 |         li {
475 |           width: 100%;
476 |           margin-bottom: 17px;
477 | 
478 |           p {
479 |             margin-bottom: 0;
480 |           }
481 |         }
482 |       }
483 |     }
484 |   
485 |     .social-copyright {
486 |       display: flex;
487 |       flex-flow: column;
488 |       justify-content: center;
489 |       align-items: center;
490 |       height: 130px;
491 |       padding: 0;
492 |   
493 |       .social-footer {
494 |         margin-bottom: 17px;
495 |       }
496 |   
497 |       .footer-copyright {
498 |         text-align: center;
499 |         display: flex;
500 |         flex-flow: column;
501 |       }
502 |     }
503 |   }
504 | }
505 | 
506 | @media only screen and (max-width: 768px) {
507 |   #main-header {
508 | 
509 |     .main-header-container {
510 |       background-size: auto 100%;
511 |       background-position: center;
512 | 
513 |       .cover-header {
514 | 
515 |         .form-content {
516 |           width: 90%;
517 | 
518 |           h2 {
519 |           font-size: 1.8rem;
520 |           }
521 | 
522 |           form {
523 |             padding: 23px 18px 33px;
524 |           }
525 | 
526 |           input {
527 |             margin-right: -24%;
528 |             padding: 3px 10px;
529 |             width: 99%;
530 |           }
531 | 
532 |           button {
533 |             width: 25%;
534 |             font-size: 1.5rem;
535 |           }
536 |         }
537 |       }
538 |     }
539 |   }
540 | 
541 |   section {
542 |     .instructions div.instruction-cards {
543 |       width: 45%;
544 |       margin: 40px 0 10px;
545 |     }
546 |   }
547 | 
548 |   footer {
549 | 
550 |     .footer-about {
551 |       display: flex;
552 |       flex-flow: column;
553 |   
554 |       .footer-about-list {
555 |         order: 2;
556 |         text-align: center;
557 |         width: 100%;
558 |         word-wrap: unset;
559 |   
560 |         li {
561 |           padding: 0 14px;
562 |         }
563 |       }
564 |   
565 |       .footer-media-list {
566 |         order: 3;
567 |         width: 100%;
568 |         word-wrap: unset;
569 |         text-align: center;
570 |   
571 |         li {
572 |           padding: 0 14px;
573 |         }
574 |       }
575 |   
576 |       .footer-logo {
577 |         order: 1;
578 |         font-size: 4rem;
579 |         padding: 0;
580 |         margin: auto;
581 |         border: none;
582 |         border-radius: 0;
583 |       }
584 |     }
585 |   
586 |     .footer-info {
587 |       padding: 0 15px;
588 |   
589 |       .subscribe-list {
590 |         display: flex;
591 |         flex-flow: column;
592 |         justify-content: center;
593 |         align-items: center;
594 |   
595 |         li {
596 |           width: 100%;
597 |           margin-bottom: 17px;
598 | 
599 |           p {
600 |             margin-bottom: 0;
601 |           }
602 |         }
603 |       }
604 |     }
605 |   
606 |     .social-copyright {
607 |       display: flex;
608 |       flex-flow: column;
609 |       justify-content: center;
610 |       align-items: center;
611 |       height: 130px;
612 |       padding: 0;
613 |   
614 |       .social-footer {
615 |         margin-bottom: 17px;
616 |       }
617 |   
618 |       .footer-copyright {
619 |         text-align: center;
620 |         display: flex;
621 |         flex-flow: column;
622 |       }
623 |     }
624 |   }
625 | }
626 | 
627 | @media only screen and (max-width: 1024px) {
628 |   section .instructions .instruction-cards {
629 |     width: 40%;
630 |     height: 319px;
631 |   }
632 | 
633 |   footer .footer-about ul li {
634 |     padding: 0 13px;
635 |   }
636 | 
637 |   .footer-info {
638 |     padding: 0 15px;
639 | 
640 |     .subscribe-list {
641 |       display: flex;
642 |       flex-flow: column;
643 |       justify-content: center;
644 |       align-items: center;
645 | 
646 |       li {
647 |         width: 100%;
648 |         margin-bottom: 17px;
649 | 
650 |         .footer-input {
651 |           width: 50%;
652 |         }
653 | 
654 |         p {
655 |           margin-bottom: 0;
656 |         }
657 |       }
658 |     }
659 |   }
660 | }
661 | 


--------------------------------------------------------------------------------
/less/reset.less:
--------------------------------------------------------------------------------
 1 | /* Box sizing rules */
 2 | *,
 3 | *::before,
 4 | *::after {
 5 |   box-sizing: border-box;
 6 | }
 7 | 
 8 | /* Remove default padding */
 9 | ul[class],
10 | ol[class] {
11 |   padding: 0;
12 | }
13 | 
14 | /* Remove default margin */
15 | body,
16 | h1,
17 | h2,
18 | h3,
19 | h4,
20 | p,
21 | ul[class],
22 | ol[class],
23 | li,
24 | figure,
25 | figcaption,
26 | blockquote,
27 | dl,
28 | dd {
29 |   margin: 0;
30 | }
31 | 
32 | /* Set core body defaults */
33 | body {
34 |   min-height: 100vh;
35 |   scroll-behavior: smooth;
36 |   text-rendering: optimizeSpeed;
37 |   line-height: 1.5;
38 | }
39 | 
40 | /* Remove list styles on ul, ol elements with a class attribute */
41 | ul[class],
42 | ol[class] {
43 |   list-style: none;
44 | }
45 | 
46 | /* Make images easier to work with */
47 | img {
48 |   max-width: 100%;
49 |   display: block;
50 | }
51 | 
52 | /* Natural flow and rhythm in articles by default */
53 | article > * + * {
54 |   margin-top: 1em;
55 | }
56 | 
57 | /* Inherit fonts for inputs and buttons */
58 | input,
59 | button,
60 | textarea,
61 | select {
62 |   font: inherit;
63 | }
64 | 
65 | /* Remove all animations and transitions for people that prefer not to see them */
66 | @media (prefers-reduced-motion: reduce) {
67 |   * {
68 |     animation-duration: 0.01ms !important;
69 |     animation-iteration-count: 1 !important;
70 |     transition-duration: 0.01ms !important;
71 |     scroll-behavior: auto !important;
72 |   }
73 | }


--------------------------------------------------------------------------------
/less/shelters.less:
--------------------------------------------------------------------------------
  1 | * {
  2 |   box-sizing: border-box;
  3 | }
  4 | 
  5 | html,
  6 | body {
  7 |   font-size: 65%;
  8 |   width: 100%;
  9 |   height: 100%;
 10 |   font-family: Arial, Helvetica, sans-serif;
 11 |   height: auto;
 12 | }
 13 | 
 14 | @backgroundRedPink: #E24140;
 15 | 
 16 | #nav-header {
 17 |   width: 100%;
 18 |   background-color: @backgroundRedPink;
 19 |   box-shadow: 0px 0px 10px rgba(226, 65, 64, 0.2);
 20 |   position: fixed;
 21 |   top: 0;
 22 |   z-index: 999;
 23 | 
 24 |   nav {
 25 |     display: flex;
 26 |     flex-flow: row wrap;
 27 |     justify-content: space-between;
 28 |     align-items: center;
 29 |     height: 65px;
 30 |     width: 95%;
 31 |     margin: 0 auto;
 32 | 
 33 |     .logo-container {
 34 |       display: inline-flex;
 35 |       cursor: pointer;
 36 |       color: white;
 37 |       font-size: 2rem;
 38 | 
 39 | 
 40 |       .logo {
 41 |         font-size: 3rem;
 42 |       }
 43 | 
 44 |       .logo-increase {
 45 |         color: white;
 46 |         padding-left: 10px;
 47 |         font-weight: bold;
 48 |       }
 49 |     }
 50 | 
 51 |     .nav-list li {
 52 |       display: inline;
 53 |       flex-flow: row nowrap;
 54 |       justify-content: space-between;
 55 |       align-items: center;
 56 |       padding: 10px;
 57 | 
 58 |       a {
 59 |         color: white;
 60 |         text-decoration: none;
 61 |         font-size: 1.5rem;
 62 |         text-transform: uppercase;
 63 |         font-weight: bold;
 64 |       }
 65 |     }
 66 |   }
 67 | }
 68 | 
 69 | section.jumbotron {
 70 |   margin: 120px auto 50px;
 71 |   width: 100%;
 72 |   font-size: 1.5rem;
 73 |   font-weight: bold;
 74 |   padding: 5rem 2rem 10rem;
 75 |   
 76 |   h2 {
 77 |     font-size: 3rem;
 78 |     font-weight: 500;
 79 |   }
 80 | 
 81 |   .find-container {
 82 |     display: flex;
 83 |     flex-flow: row wrap;
 84 |     justify-content: center;
 85 | 
 86 |     div.input {
 87 |       width: 16%;
 88 | 
 89 |       input {
 90 |         height: 32px;
 91 |         background-color: white;
 92 |         border: 1px solid lightgray;
 93 |         border-radius: 3px;
 94 |         padding-left: 5px;
 95 |         width: 100%;
 96 |       }
 97 |     }
 98 | 
 99 |    
100 | 
101 |     .find {
102 |       display: flex;
103 |       flex-flow: column wrap;
104 |       justify-content: center;
105 |       align-items: flex-start;
106 |       padding: 0 2px;
107 |       width: 10%;
108 | 
109 |       label {
110 |         font-size: 1.4rem;
111 |       }
112 | 
113 |       .custom-select {
114 |         height: 32px
115 |       }
116 |     }
117 | 
118 |     button {
119 |       height: 30px;
120 |       align-self: end;
121 |       margin: 0 2px 1px 1px;
122 |     }
123 |   }
124 | }
125 | 
126 | .search-results {
127 |   width: 100%;
128 |   margin: 0 auto;
129 |   text-align: center;
130 | 
131 |   .search-container {
132 |     display: flex;
133 |     flex-flow: row wrap;
134 |     justify-content: center;
135 | 
136 |     .search-cards {
137 |       padding: 27px 0;
138 |       background-color: rgba(0, 0, 0, 0.2);
139 |       position: relative;
140 | 
141 |       img {
142 |         width: 60%;
143 |         margin: auto;
144 |         box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
145 |         border-radius: 5px;
146 |       }
147 | 
148 |       .middle {
149 |         position: absolute;
150 |         z-index: 998;
151 |         top: 7.99%;
152 |         left: 20%;
153 |         background-color: rgba(0,0,0, 0.5);
154 |         width: 60%;
155 |         height: 84%;
156 |         border-radius: 5px;
157 |         cursor: pointer;
158 |       }
159 | 
160 |       .middle:hover {
161 |         background-color: rgba(0,0,0, 0.3);
162 |       }
163 | 
164 |       .text {
165 |         position: absolute;
166 |         bottom: 15%;
167 |         left: 26%;
168 |         color: white;
169 |         background-color: @backgroundRedPink;
170 |         box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
171 |         padding: 8px 10px 10px;
172 |         font-size: 1.3rem;
173 |         font-weight: bold;
174 |         border-radius: 3px;
175 |       }
176 | 
177 |       .text:hover {
178 |         background-color: rgb(53, 19, 22);
179 |       }
180 |     }
181 |   }
182 | }
183 | 
184 | footer {
185 |   margin: 60px auto 0;
186 |   background-color: black;
187 |   display: flex;
188 |   flex-flow: column wrap;
189 |   align-items: center;
190 |   color: white;
191 |   position: relative;
192 |   bottom: 0;
193 |   width: 100%;
194 | 
195 |   ul li {
196 |     display: inline;
197 |   }
198 | 
199 |   .footer-about {
200 |     width: 100%;
201 |     display: flex;
202 |     flex-flow: row nowrap;
203 |     justify-content: space-between;
204 |     font-size: 1.3rem;
205 |     font-weight: bold;
206 |     padding: 10px 15px;
207 | 
208 |     ul {
209 | 
210 |       margin: auto;
211 |       padding: 10px 0;
212 |       border-top: 1px solid #434343;
213 |       border-bottom: 1px solid #434343;
214 | 
215 |       li {
216 |         padding: 0px 40px;
217 | 
218 |         a {
219 |           color: white;
220 |           text-decoration: none;
221 |         }
222 |       }
223 |     }
224 | 
225 |     .footer-about-list {
226 |       margin: auto 0 auto auto;
227 |     }
228 | 
229 |     div {
230 |       font-size: 3.5rem;
231 |       padding: 10px 25px;
232 |       border-radius: 100%;
233 |       border: 1px solid #434343;
234 |       margin: 0 -8px;
235 |       cursor: pointer;
236 |     }
237 | 
238 |     .footer-media-list {
239 |       margin: auto auto auto 0;
240 |     }
241 |   }
242 | 
243 |   
244 | 
245 |   .footer-info {
246 |     width: 100%;
247 |     font-size: 1.3rem;
248 |     margin: 20px 0;
249 | 
250 |     ul {
251 |       display: flex;
252 |       flex-flow: row wrap;
253 |       justify-content: center;
254 |       align-items: baseline;
255 | 
256 |       li {
257 |         width: 24%;
258 |         margin: 0 auto;
259 |         display: flex;
260 |         flex-flow: column;
261 |         align-items: center;
262 |         text-align: center;
263 |       }
264 | 
265 |       h4 {
266 |         margin-bottom: 15px;
267 |         font-size: 1.5rem;
268 |       }
269 | 
270 |       .footer-input {
271 |         width: 84%;
272 |       }
273 | 
274 |       input[type=text] {
275 |         background-color: inherit;
276 |         color: white;
277 |         padding: 0 7px;
278 |         margin-right: -68px;
279 |         height: 38px;
280 |         outline: 0;
281 |         border: 0.1rem solid #434343;
282 |         border-right: none;
283 |         width: 100%;
284 |       }
285 | 
286 |       input[type=text]:focus {
287 |         outline: 0;
288 |       }
289 | 
290 |       button {
291 |         width: 64px;
292 |         height: 38px;
293 |         border: none;
294 |         background-color: #434343;
295 |         color: white;
296 |         padding: 0;
297 |         cursor: pointer;
298 |       }
299 | 
300 |       span {
301 |         color: @backgroundRedPink;
302 |         cursor: pointer;
303 |       }
304 |     }
305 |   }
306 | 
307 |   .social-copyright {
308 |     display: flex;
309 |     flex-flow: row wrap;
310 |     justify-content: space-between;
311 |     align-items: center;
312 |     width: 100%;
313 |     height: 80px;
314 |     padding: 0 30px;
315 |     background-color: #1F1F1F;
316 |     color: #656565;
317 |     font-size: 1rem;
318 | 
319 |     .social-footer {
320 |       font-size: 1.5rem;
321 |       
322 |       li {
323 |         padding: 0 10px;
324 | 
325 |         a {
326 |           color: #656565;
327 |         }
328 |       }
329 |     }
330 |     
331 |     .footer-copyright {
332 |       display: flex;
333 |       word-spacing: 5px;
334 |       letter-spacing: 3px;
335 |     }
336 |   }
337 | }
338 | 
339 | @media only screen and (max-width: 576px) {
340 |   #nav-header {
341 |     height: 90px;
342 | 
343 |     nav {
344 |       display: flex;
345 |       flex-flow: column nowrap;
346 |       justify-content: center;
347 |       align-items: center;
348 |       height: auto;
349 | 
350 |       .logo-container {
351 |         margin: 8px auto 18px;
352 |       }
353 | 
354 |       .nav-list {
355 | 
356 |         li {
357 |           padding: 0 32px;
358 |         }
359 |       }
360 | 
361 |       .remove {
362 |         display: none;
363 |       }
364 |     }
365 |   }
366 | 
367 |   footer {
368 | 
369 |     .footer-about {
370 |       display: flex;
371 |       flex-flow: column;
372 |   
373 |       .footer-about-list {
374 |         order: 2;
375 |         text-align: center;
376 |         width: 100%;
377 |         word-wrap: unset;
378 |   
379 |         li {
380 |           padding: 0 14px;
381 |         }
382 |       }
383 |   
384 |       .footer-media-list {
385 |         order: 3;
386 |         width: 100%;
387 |         word-wrap: unset;
388 |         text-align: center;
389 |   
390 |         li {
391 |           padding: 0 14px;
392 |         }
393 |       }
394 |   
395 |       .footer-logo {
396 |         order: 1;
397 |         font-size: 4rem;
398 |         padding: 0;
399 |         margin: auto;
400 |         border: none;
401 |         border-radius: 0;
402 |       }
403 |     }
404 |   
405 |     .footer-info {
406 |   
407 |       .subscribe-list {
408 |         display: flex;
409 |         flex-flow: column;
410 |         justify-content: center;
411 |         align-items: center;
412 |   
413 |         li {
414 |           width: 100%;
415 |           margin-bottom: 17px;
416 | 
417 |           p {
418 |             margin-bottom: 0;
419 |           }
420 |         }
421 |       }
422 |     }
423 |   
424 |     .social-copyright {
425 |       display: flex;
426 |       flex-flow: column;
427 |       justify-content: center;
428 |       align-items: center;
429 |       height: 130px;
430 |       padding: 0;
431 |   
432 |       .social-footer {
433 |         margin-bottom: 17px;
434 |       }
435 |   
436 |       .footer-copyright {
437 |         text-align: center;
438 |         display: flex;
439 |         flex-flow: column;
440 |       }
441 |     }
442 |   }
443 | }
444 | 
445 | @media only screen and (max-width: 790px) {
446 |   #main-header {
447 | 
448 |     .main-header-container {
449 |       background-size: auto 100%;
450 |       background-position: center;
451 | 
452 |       .cover-header {
453 | 
454 |         .form-content {
455 |           width: 90%;
456 | 
457 |           h2 {
458 |           font-size: 1.8rem;
459 |           }
460 | 
461 |           form {
462 |             padding: 23px 18px 33px;
463 |           }
464 | 
465 |           input {
466 |             margin-right: -25%;
467 |             padding: 3px 10px;
468 |             width: 99%;
469 |           }
470 | 
471 |           button {
472 |             width: 26%;
473 |             font-size: 1.5rem;
474 |           }
475 |         }
476 |       }
477 |     }
478 |   }
479 | 
480 |   section.jumbotron {
481 |     padding: 5rem 2rem 3rem;
482 | 
483 |     div.find-container {
484 | 
485 |       div.input {
486 |         width: 90%;
487 |         
488 |         input {
489 |           height: 40px;
490 |         }
491 |       }
492 |   
493 |       .find {
494 |         display: flex;
495 |         flex-flow: column;
496 |         align-items: baseline;
497 |         width: 90%;
498 |         padding: 10px 2px;
499 |     
500 |         select.custom-select {
501 |           height: 40px;
502 |           font-size: 1.5rem;
503 |         }
504 |       }
505 |   
506 |       button.btn-primary {
507 |         width: 50%;
508 |         height: 40px;
509 |         font-size: 1.4rem;
510 |         margin-top: 20px;
511 |       }
512 |   
513 |       button.btn-warning {
514 |         width: 38%;
515 |         height: 40px;
516 |         font-size: 1.4rem;
517 |         margin-top: 20px;
518 |       }
519 |     }
520 |   }
521 | 
522 | 
523 |   footer {
524 | 
525 |     .footer-about {
526 |       display: flex;
527 |       flex-flow: column;
528 |   
529 |       .footer-about-list {
530 |         order: 2;
531 |         text-align: center;
532 |         width: 100%;
533 |         word-wrap: unset;
534 |   
535 |         li {
536 |           padding: 0 14px;
537 |         }
538 |       }
539 |   
540 |       .footer-media-list {
541 |         order: 3;
542 |         width: 100%;
543 |         word-wrap: unset;
544 |         text-align: center;
545 |   
546 |         li {
547 |           padding: 0 14px;
548 |         }
549 |       }
550 |   
551 |       .footer-logo {
552 |         order: 1;
553 |         font-size: 4rem;
554 |         padding: 0;
555 |         margin: auto;
556 |         border: none;
557 |         border-radius: 0;
558 |       }
559 |     }
560 |   
561 |     .footer-info {
562 |       padding: 0 15px;
563 |   
564 |       .subscribe-list {
565 |         display: flex;
566 |         flex-flow: column;
567 |         justify-content: center;
568 |         align-items: center;
569 |   
570 |         li {
571 |           width: 100%;
572 |           margin-bottom: 17px;
573 | 
574 |           p {
575 |             margin-bottom: 0;
576 |           }
577 |         }
578 |       }
579 |     }
580 |   
581 |     .social-copyright {
582 |       display: flex;
583 |       flex-flow: column;
584 |       justify-content: center;
585 |       align-items: center;
586 |       height: 130px;
587 |       padding: 0;
588 |   
589 |       .social-footer {
590 |         margin-bottom: 17px;
591 |       }
592 |   
593 |       .footer-copyright {
594 |         text-align: center;
595 |         display: flex;
596 |         flex-flow: column;
597 |       }
598 |     }
599 |   }
600 | }
601 | 
602 | @media only screen and (max-width: 1024px) {
603 | 
604 |   footer .footer-about ul li {
605 |     padding: 0 13px;
606 |   }
607 | 
608 |   .footer-info {
609 |     padding: 0 15px;
610 | 
611 |     .subscribe-list {
612 |       display: flex;
613 |       flex-flow: column;
614 |       justify-content: center;
615 |       align-items: center;
616 | 
617 |       li {
618 |         width: 100%;
619 |         margin-bottom: 17px;
620 | 
621 |         .footer-input {
622 |           width: 50%;
623 |         }
624 | 
625 |         p {
626 |           margin-bottom: 0;
627 |         }
628 |       }
629 |     }
630 |   }
631 | }
632 | 


--------------------------------------------------------------------------------
/pages/detailes.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 |   <title>HTM/CSS - Capstone | Dog-Shelter Directory</title>
  7 |   <link rel="stylesheet" href="../css/detailes.css">
  8 |   <link rel="stylesheet" href="../css/reset.css">
  9 |   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
 10 |   <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
 11 |   <script src="https://kit.fontawesome.com/d4de0f4540.js" crossorigin="anonymous"></script>
 12 | </head>
 13 | 
 14 | <body>
 15 | 
 16 |   <!-- Navigation bar -->
 17 |   <header id="nav-header">
 18 |     <nav>
 19 |       <a class="logo-container text-decoration-none" href="../index.html">
 20 |         <i class="fas fa-map-marker-alt logo"></i>
 21 |         <span class="logo-increase">PETFinder</span>
 22 |       </a>
 23 | 
 24 |       <ul class="nav-list">
 25 |         <li><a href="../pages/shelters.html"><i class="fas fa-search"></i><span class="remove">&nbsp;shelters</span></a></li>
 26 |         <li><a href="#"><i class="far fa-user"></i><span class="remove">&nbsp;about</span></a></li>
 27 |         <li><a href="#"><i class="fas fa-rss"></i><span class="remove">&nbsp;blog</span></a></li>
 28 |         <li><a href="#"><i class="fas fa-bars"></i><span class="remove">&nbsp;more...</span></a></li>
 29 |       </ul>
 30 |     </nav>
 31 |   </header>
 32 | 
 33 |   <!-- Shelter detailes section -->
 34 |   <section class="jumbotron">
 35 |     <h2><i class="fas fa-shield-alt"></i> Canile Rifugio di Torino </h2>
 36 |     <div class="info-rows">
 37 |      <div class="card text-primary">
 38 |       <div class="card-body"><span>NAME: </span>Canile Rifugio di Torino </div>
 39 |      </div>
 40 |      <div class="card text-primary">
 41 |       <div class="card-body"><span>TYPE: </span>Dogs and Cats</div>
 42 |      </div>
 43 |      <div class="card text-primary">
 44 |       <div class="card-body"><span>STATE: </span>Italy</div>
 45 |      </div>
 46 |      <div class="card text-primary">
 47 |       <div class="card-body"><span>COUNTY: </span>Piemonte</div>
 48 |      </div>
 49 |      <div class="card text-primary">
 50 |       <div class="card-body"><span>CITY: </span>Turin</div>
 51 |      </div>
 52 |      <div class="card text-primary">
 53 |       <div class="card-body"><span>ZIPCODE:</span></div>
 54 |      </div>
 55 |     </div>
 56 |     <div class="contact-container">
 57 |       <button type="button" class="btn btn-primary">CONTACT US</button>
 58 |       <ul class="contact-list">
 59 |         <li>
 60 |           <a href="#"><i class="fas fa-phone-alt text-primary"></i> TEL: +39 338.238.94.79</a>
 61 |         </li>
 62 |         <li>
 63 |           <a href="#"><i class="fas fa-bus text-primary"></i> TRANSPORT: YES</a>
 64 |         </li>
 65 |         <li>
 66 |           <a href="https://www.adottauncane.net/torino-e-provincia/canile-rifugio-di-torino.html" target="_blank"><i class="fas fa-desktop text-primary"></i> WEBSITE: adottauncane.net</a>
 67 |         </li>
 68 |       </ul>
 69 |     </div>
 70 |   </section>
 71 | 
 72 |   <!-- See more detailes section -->
 73 |   <div class="jumbotron more-detailes">
 74 |     <p><a href="https://www.adottauncane.net/torino-e-provincia/canile-rifugio-di-torino.html" target="_blank"><i class="fas fa-info-circle"></i> click to view more detailes.</a></p>
 75 |   </div>
 76 | 
 77 |   <!-- Map section -->  
 78 |   <div class="map-container">
 79 |     <h1><i class="far fa-compass"></i> MAP DIRECTIONS</h1>
 80 |     <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d5629.723818362599!2d7.702397000000001!3d45.129134!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47886e175a285831%3A0x70dbfe1c20c49254!2sStrada%20Cuorgn%C3%A8%2C%20139%2C%2010156%20Torino%20TO!5e0!3m2!1sit!2sit!4v1581895476821!5m2!1sit!2sit" width="600" height="450" style="border: 0;" allowfullscreen=""></iframe>
 81 |   </div>
 82 |  
 83 |   <!-- Footer section -->
 84 |   <footer>
 85 | 
 86 |     <!-- top footer -->
 87 |     <div class="footer-about">
 88 |       <ul class="footer-about-list">
 89 |         <li><a href="#">HOME</a></li>
 90 |         <li><a href="#">SEARCH</a></li>
 91 |         <li><a href="#">ABOUT US</a></li>
 92 |         <li><a href="#">ADVERTISE</a></li>
 93 |       </ul>
 94 | 
 95 |       <div class="footer-logo"><i class="fas fa-map-marker-alt"></i></div>
 96 | 
 97 |       <ul class="footer-media-list">
 98 |         <li><a href="#">FACEBOOK</a></li>
 99 |         <li><a href="#">TWITTER</a></li>
100 |         <li><a href="#">BLOG</a></li>
101 |         <li><a href="#">GOOGLE</a></li>
102 |       </ul>
103 |     </div>
104 | 
105 |     <!-- middle footer -->
106 |     <div class="footer-info">
107 |       <ul class="subscribe-list">
108 |         <li>
109 |           <h4>SUBSCRIBE</h4>
110 |           <div class="footer-input">
111 |             <input type="text" name="search" placeholder="you@example.com">
112 |             <button type="button">send</button>
113 |           </div>
114 |         </li>
115 |         
116 |         <li>
117 |           <h4>CONTACT</h4>
118 |           <p>Have a question or submission?</p>
119 |           <span>you@example.com</span>
120 |         </li>
121 | 
122 |         <li>
123 |           <h4>ABOUT</h4>
124 |           <p>PETFinder is an online, searchable database of animals who need homes. It is also a directory of nearly thousands of animal shelters and adoption organizations across the Europe. Organizations maintain their own home pages and available-pet databases.<span> Learn more...</span></p>
125 |         </li>
126 |       </ul>
127 |     </div>
128 | 
129 |     <!-- bottom footer -->
130 |     <div class="social-copyright">
131 |       <ul class="social-footer">
132 |         <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
133 |         <li><a href="#"><i class="fab fa-twitter"></i></a></li>
134 |         <li><a href="#"><i class="fab fa-tumblr"></i></a></li>
135 |         <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
136 |         <li><a href="#"><i class="fab fa-instagram"></i></a></li>
137 |       </ul>
138 | 
139 |       <ul class="footer-copyright">
140 |         <li><p>&copy;PETFINDER 2020.</p></li>
141 |         <li><p>&nbsp; ALL RIGHTS RESERVED.</p></li>
142 |         <li><p>&nbsp; LOVE AND AWESOMNESS.</p></li>
143 |       </ul>
144 |     </div>
145 |   </footer>
146 | </body>
147 | </html>


--------------------------------------------------------------------------------
/pages/shelters.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 |   <title>HTM/CSS - Capstone | Dog-Shelter Directory</title>
  7 |   <link rel="stylesheet" href="../css/shelters.css">
  8 |   <link rel="stylesheet" href="../css/reset.css">
  9 |   <script src="https://kit.fontawesome.com/d4de0f4540.js" crossorigin="anonymous"></script>
 10 |   <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
 11 | </head>
 12 | 
 13 | <body>
 14 | 
 15 |   <!-- Navigation bar -->
 16 |   <header id="nav-header">    
 17 |     <nav>
 18 |       <a class="logo-container text-decoration-none" href="../index.html">
 19 |         <i class="fas fa-map-marker-alt logo"></i>
 20 |         <span class="logo-increase">PETFinder</span>
 21 |       </a>
 22 | 
 23 |       <ul class="nav-list">
 24 |         <li><a href="../pages/shelters.html"><i class="fas fa-search"></i><span class="remove">&nbsp;shelters</span></a></li>
 25 |         <li><a href="#"><i class="far fa-user"></i><span class="remove">&nbsp;about</span></a></li>
 26 |         <li><a href="#"><i class="fas fa-rss"></i><span class="remove">&nbsp;blog</span></a></li>
 27 |         <li><a href="#"><i class="fas fa-bars"></i><span class="remove">&nbsp;more...</span></a></li>
 28 |       </ul>
 29 |     </nav>
 30 |   </header>
 31 | 
 32 |   <!-- Search input section -->
 33 |   <section class="jumbotron">
 34 |     <h2>Filter by name, state, county or zipcode:</h2>
 35 |     <div class="find-container">
 36 |       <div class="input find">
 37 |         <label>SHELTER NAME:*</label>
 38 |         <input type="text" required>
 39 |       </div>
 40 |       <div class="find">
 41 |         <label for="state">STATE:</label>
 42 |         <select name="state" id="state" class="custom-select">
 43 |           <option selected>Choose...</option>
 44 |           <option value="france">France</option>
 45 |           <option value="germany">Germany</option>
 46 |           <option value="italy">Italy</option>
 47 |           <option value="poland">Poland</option>
 48 |           <option value="romania">Romania</option>
 49 |           <option value="spain">Spain</option>
 50 |         </select>
 51 |       </div>
 52 |       <div class="find">
 53 |         <label for="county">COUNTY:</label>
 54 |         <select name="county" id="county" class="resize-select custom-select">
 55 |           <option selected>Choose...</option>
 56 |         </select>
 57 |       </div>
 58 |       <div class="find">
 59 |         <label for="city">CITY:</label>
 60 |         <select name="city" id="city" class="resize-select custom-select">
 61 |           <option selected>Choose...</option>
 62 |         </select>
 63 |       </div>
 64 |       <div class="find">
 65 |         <label for="zipcode">ZIPCODE:</label>
 66 |         <select name="zipcode" id="zipcode" class="resize-select custom-select">
 67 |           <option selected>Choose...</option>
 68 |         </select>
 69 |       </div>
 70 |       <button type="submit" class="btn btn-primary">Search</button>
 71 |       <button class="btn btn-warning text-white"><i class="fas fa-edit"></i>Clear filter</button>
 72 |     </div>
 73 |   </section>
 74 | 
 75 |   <!-- Search results section -->
 76 |   <section class="search-results">
 77 |     <h1>Search Results Found 3 Shelter(s).</h1>
 78 |     <div class="search-container">
 79 |       <a class="search-cards" href="detailes.html">SHELTER 1</a>
 80 |       <a class="search-cards" href="detailes.html">SHELTER 2</a>
 81 |       <a class="search-cards" href="detailes.html">SHELTER 3</a>
 82 |     </div>
 83 |   </section>
 84 | 
 85 |  
 86 |   <!-- Footer section -->
 87 |   <footer>
 88 | 
 89 |     <!-- top footer -->
 90 |     <div class="footer-about">
 91 |       <ul class="footer-about-list">
 92 |         <li><a href="#">HOME</a></li>
 93 |         <li><a href="#">SEARCH</a></li>
 94 |         <li><a href="#">ABOUT US</a></li>
 95 |         <li><a href="#">ADVERTISE</a></li>
 96 |       </ul>
 97 | 
 98 |       <div class="footer-logo"><i class="fas fa-map-marker-alt"></i></div>
 99 | 
100 |       <ul class="footer-media-list">
101 |         <li><a href="#">FACEBOOK</a></li>
102 |         <li><a href="#">TWITEER</a></li>
103 |         <li><a href="#">BLOG</a></li>
104 |         <li><a href="#">GOOGLE</a></li>
105 |       </ul>
106 |     </div>
107 | 
108 |     <!-- middle footer -->
109 |     <div class="footer-info">
110 |       <ul class="subscribe-list">
111 |         <li>
112 |           <h4>SUBSCRIBE</h4>
113 |           <div class="footer-input">
114 |             <input type="text" name="search" placeholder="you@example.com">
115 |             <button type="button">send</button>
116 |           </div>
117 |         </li>
118 |         
119 |         <li>
120 |           <h4>CONTACT</h4>
121 |           <p>Have a question or submission?</p>
122 |           <span>you@example.com</span>
123 |         </li>
124 | 
125 |         <li>
126 |           <h4>ABOUT</h4>
127 |           <p>PETFinder is an online, searchable database of animals who need homes. It is also a directory of nearly thousands of animal shelters and adoption organizations across the Europe. Organizations maintain their own home pages and available-pet databases.<span> Learn more...</span></p>
128 |         </li>
129 |       </ul>
130 |     </div>
131 | 
132 |     <!-- bottom footer -->
133 |     <div class="social-copyright">
134 |       <ul class="social-footer">
135 |         <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
136 |         <li><a href="#"><i class="fab fa-twitter"></i></a></li>
137 |         <li><a href="#"><i class="fab fa-tumblr"></i></a></li>
138 |         <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
139 |         <li><a href="#"><i class="fab fa-instagram"></i></a></li>
140 |       </ul>
141 | 
142 |       <ul class="footer-copyright">
143 |         <li><p>&copy;PETFINDER 2020.</p></li>
144 |         <li><p>&nbsp; ALL RIGHTS RESERVED.</p></li>
145 |         <li><p>&nbsp; LOVE AND AWESOMNESS.</p></li>
146 |       </ul>
147 |     </div>
148 |   </footer>
149 | </body>
150 | </html>


--------------------------------------------------------------------------------
/stylelint.config.js:
--------------------------------------------------------------------------------
  1 | "use strict"
  2 | 
  3 | module.exports = {
  4 |   "extends": "stylelint-config-recommended",
  5 |   "rules": {
  6 |     "at-rule-empty-line-before": [ "always", {
  7 |       except: [
  8 |         "blockless-after-same-name-blockless",
  9 |         "first-nested",
 10 |       ],
 11 |       ignore: ["after-comment"],
 12 |     } ],
 13 |     "at-rule-name-case": "lower",
 14 |     "at-rule-name-space-after": "always-single-line",
 15 |     "at-rule-semicolon-newline-after": "always",
 16 |     "block-closing-brace-empty-line-before": "never",
 17 |     "block-closing-brace-newline-after": "always",
 18 |     "block-closing-brace-newline-before": "always-multi-line",
 19 |     "block-closing-brace-space-before": "always-single-line",
 20 |     "block-opening-brace-newline-after": "always-multi-line",
 21 |     "block-opening-brace-space-after": "always-single-line",
 22 |     "block-opening-brace-space-before": "always",
 23 |     "color-hex-case": "lower",
 24 |     "color-hex-length": "short",
 25 |     "comment-empty-line-before": [ "always", {
 26 |       except: ["first-nested"],
 27 |       ignore: ["stylelint-commands"],
 28 |     } ],
 29 |     "comment-whitespace-inside": "always",
 30 |     "custom-property-empty-line-before": [ "always", {
 31 |       except: [
 32 |         "after-custom-property",
 33 |         "first-nested",
 34 |       ],
 35 |       ignore: [
 36 |         "after-comment",
 37 |         "inside-single-line-block",
 38 |       ],
 39 |     } ],
 40 |     "declaration-bang-space-after": "never",
 41 |     "declaration-bang-space-before": "always",
 42 |     "declaration-block-semicolon-newline-after": "always-multi-line",
 43 |     "declaration-block-semicolon-space-after": "always-single-line",
 44 |     "declaration-block-semicolon-space-before": "never",
 45 |     "declaration-block-single-line-max-declarations": 1,
 46 |     "declaration-block-trailing-semicolon": "always",
 47 |     "declaration-colon-newline-after": "always-multi-line",
 48 |     "declaration-colon-space-after": "always-single-line",
 49 |     "declaration-colon-space-before": "never",
 50 |     "declaration-empty-line-before": [ "always", {
 51 |       except: [
 52 |         "after-declaration",
 53 |         "first-nested",
 54 |       ],
 55 |       ignore: [
 56 |         "after-comment",
 57 |         "inside-single-line-block",
 58 |       ],
 59 |     } ],
 60 |     "function-comma-newline-after": "always-multi-line",
 61 |     "function-comma-space-after": "always-single-line",
 62 |     "function-comma-space-before": "never",
 63 |     "function-max-empty-lines": 0,
 64 |     "function-name-case": "lower",
 65 |     "function-parentheses-newline-inside": "always-multi-line",
 66 |     "function-parentheses-space-inside": "never-single-line",
 67 |     "function-whitespace-after": "always",
 68 |     "indentation": 2,
 69 |     "length-zero-no-unit": true,
 70 |     "max-empty-lines": 1,
 71 |     "media-feature-colon-space-after": "always",
 72 |     "media-feature-colon-space-before": "never",
 73 |     "media-feature-name-case": "lower",
 74 |     "media-feature-parentheses-space-inside": "never",
 75 |     "media-feature-range-operator-space-after": "always",
 76 |     "media-feature-range-operator-space-before": "always",
 77 |     "media-query-list-comma-newline-after": "always-multi-line",
 78 |     "media-query-list-comma-space-after": "always-single-line",
 79 |     "media-query-list-comma-space-before": "never",
 80 |     "no-eol-whitespace": true,
 81 |     "no-missing-end-of-source-newline": true,
 82 |     "number-leading-zero": "always",
 83 |     "number-no-trailing-zeros": true,
 84 |     "property-case": "lower",
 85 |     "rule-empty-line-before": [ "always-multi-line", {
 86 |       except: ["first-nested"],
 87 |       ignore: ["after-comment"],
 88 |     } ],
 89 |     "selector-attribute-brackets-space-inside": "never",
 90 |     "selector-attribute-operator-space-after": "never",
 91 |     "selector-attribute-operator-space-before": "never",
 92 |     "selector-combinator-space-after": "always",
 93 |     "selector-combinator-space-before": "always",
 94 |     "selector-descendant-combinator-no-non-space": true,
 95 |     "selector-list-comma-newline-after": "always",
 96 |     "selector-list-comma-space-before": "never",
 97 |     "selector-max-empty-lines": 0,
 98 |     "selector-pseudo-class-case": "lower",
 99 |     "selector-pseudo-class-parentheses-space-inside": "never",
100 |     "selector-pseudo-element-case": "lower",
101 |     "selector-pseudo-element-colon-notation": "double",
102 |     "selector-type-case": "lower",
103 |     "unit-case": "lower",
104 |     "value-list-comma-newline-after": "always-multi-line",
105 |     "value-list-comma-space-after": "always-single-line",
106 |     "value-list-comma-space-before": "never",
107 |     "value-list-max-empty-lines": 0,
108 |   },
109 | }
110 | 


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