-
-
Save codecademydev/c9e06cd235f9dd2b8c9b5c5babeba939 to your computer and use it in GitHub Desktop.
Codecademy export
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>PupSpa</title> | |
| <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> | |
| <link rel='stylesheet' type='text/css' href='style.css'> | |
| </head> | |
| <body> | |
| <div class="grid"> | |
| <header> | |
| <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-i/images/pup-spa.svg" class="logo"> | |
| </header> | |
| <div class="banner"> | |
| <p>The #1 Dog Spa in NYC!</p> | |
| <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-i/images/dog.svg" class="dog"> | |
| </div> | |
| <div class="about"> | |
| <p class="text">We are a full service grooming salon and doggy daycare. PupSpace is founded on the principles of communication and specialized care. We welcome you to your dog's new second home.</p> | |
| </div> | |
| <div class="box address"> | |
| <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-i/images/marker.svg" class="marker"> | |
| <p>ADDRESS: | |
| <br>233 Lewis Avenue, | |
| <br>Brooklyn, NY 11233</p> | |
| </div> | |
| <div class="box hours"> | |
| <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-i/images/clock.svg" class="clock"> | |
| <p>HOURS: | |
| <br>Mon-Fri 8:00 AM - 9:00 PM | |
| <br>Sat-Sun 7:00AM - 11:00 PM</p> | |
| </div> | |
| <div class="box call-us"> | |
| <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-css-grid/project-i/images/telephone.png" class="clock"> | |
| <p>CALL US: | |
| <br>718-324-6751</p> | |
| </div> | |
| <div class = "testimonial one"> | |
| <p>"PupSpa is a first class doggie grooming operation. My pug VanDyke always comes back looking so fresh. Thanks guys!" | |
| <br> - Dan </p> | |
| </div> | |
| <div class = "testimonial two"> | |
| <p>"Lua (my shiba inu) and I are HUGE fans of PupSpa! Ryan and his crew are always so generous with their time." | |
| <br> - KC </p> | |
| </div> | |
| <footer> | |
| <p>️© PupSpa 2017</p> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* http://meyerweb.com/eric/tools/css/reset/ | |
| v2.0 | 20110126 | |
| License: none (public domain) | |
| */ | |
| html, body, div, span, applet, object, iframe, | |
| h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
| a, abbr, acronym, address, big, cite, code, | |
| del, dfn, em, img, ins, kbd, q, s, samp, | |
| small, strike, strong, sub, sup, tt, var, | |
| b, u, i, center, | |
| dl, dt, dd, ol, ul, li, | |
| fieldset, form, label, legend, | |
| table, caption, tbody, tfoot, thead, tr, th, td, | |
| article, aside, canvas, details, embed, | |
| figure, figcaption, footer, header, hgroup, | |
| menu, nav, output, ruby, section, summary, | |
| time, mark, audio, video { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| font: inherit; | |
| vertical-align: baseline; | |
| } | |
| /* HTML5 display-role reset for older browsers */ | |
| article, aside, details, figcaption, figure, | |
| footer, header, hgroup, menu, nav, section { | |
| display: block; | |
| } | |
| body { | |
| line-height: 1; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| } | |
| blockquote, q { | |
| quotes: none; | |
| } | |
| blockquote:before, blockquote:after, | |
| q:before, q:after { | |
| content: ''; | |
| content: none; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: #ffffff; | |
| color: #db6363; | |
| text-align: center; | |
| } | |
| .grid { | |
| display: grid; | |
| grid-template: auto / repeat(6, 1fr); | |
| grid-column-gap: 20px; | |
| grid-row-gap: 20px; | |
| } | |
| header { | |
| background-color: #ffffff; | |
| color: #dc6363; | |
| padding-top: 10px; | |
| grid-column-start: 1; | |
| grid-column-end: 7; | |
| } | |
| .banner { | |
| background-color: #db6363; | |
| color: #ffffff; | |
| font-family: Poppins; | |
| font-size: 84px; | |
| font-weight: 300; | |
| letter-spacing: 3.7px; | |
| color: #ffffff; | |
| grid-column-start: 1; | |
| grid-column-end: 7; | |
| } | |
| img { | |
| max-width: 100%; | |
| } | |
| .about { | |
| background-color: #f0f0f0; | |
| padding-bottom: 20px; | |
| grid-column-start: 1; | |
| grid-column-end: 7; | |
| } | |
| .text { | |
| width: 50%; | |
| height: 100%; | |
| margin: auto; | |
| padding: auto; | |
| color: #2f2d2d; | |
| font-family: Poppins; | |
| font-size: 18px; | |
| font-weight: 500; | |
| text-align: left; | |
| letter-spacing: 0.5px; | |
| padding-top: 30px; | |
| } | |
| .box { | |
| background-color: #2f2f2f; | |
| color: #ffffff; | |
| font-family: Poppins; | |
| font-size: 20px; | |
| font-weight: 500; | |
| letter-spacing: 0.5px; | |
| text-align: center; | |
| padding-top: 20px; | |
| padding-bottom: 20px; | |
| } | |
| .address { | |
| grid-column: 1 / span 2; | |
| } | |
| .hours { | |
| grid-column: 3 / span 2; | |
| } | |
| .call-us { | |
| grid-column: 5 / span 2; | |
| } | |
| .marker { | |
| width: 51px; | |
| height: 82px; | |
| } | |
| .clock { | |
| width: 75px; | |
| height: 75px; | |
| } | |
| .phone { | |
| width: 98px; | |
| height: 79px; | |
| } | |
| .testimonial { | |
| margin: auto; | |
| padding: auto; | |
| background-color: #f0f0f0; | |
| color: #db6363; | |
| font-family: Poppins; | |
| font-size: 20px; | |
| font-weight: 300; | |
| letter-spacing: 3.7px; | |
| font-style: italic; | |
| } | |
| .one { | |
| grid-column: 1 / span 3; | |
| grid-row: 5 / 6; | |
| } | |
| .two { | |
| grid-column: 4 / span 3; | |
| grid-row: 5 / 6; | |
| } | |
| footer { | |
| background-color: #db6363; | |
| color: #ffffff; | |
| font-family: Poppins; | |
| font-size: 14px; | |
| font-weight: 300; | |
| letter-spacing: 0.4px; | |
| grid-column-start: 1; | |
| grid-column-end: 7; | |
| } | |
| @media(max-width: 600px){ | |
| .grid { | |
| grid-template-columns: 100%; | |
| grid-template-rows: auto; | |
| grid-row-gap: 20px; | |
| } | |
| header { | |
| grid-column: 1 / span 1; | |
| } | |
| .banner { | |
| font-size: 20px; | |
| font-weight: 300; | |
| line-height: 2.75; | |
| letter-spacing: 1.9px; | |
| grid-column: 1 / span 1; | |
| } | |
| .dog { | |
| width: 195px; | |
| height: 237px; | |
| padding-left: 50px; | |
| } | |
| .about { | |
| grid-column-start: 1; | |
| grid-column-end: span 6; | |
| grid-column: 1 / span 1; | |
| } | |
| .text { | |
| width: 75%; | |
| padding-top: 50px; | |
| padding-bottom: 50px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .box { | |
| font-size: 14px; | |
| font-weight: 500; | |
| letter-spacing: 0.3px; | |
| } | |
| .address { | |
| grid-row: 4 / span 1; | |
| grid-column: 1 / span 1; | |
| } | |
| .hours { | |
| grid-row: 5 / span 1; | |
| grid-column: 1 / span 1; | |
| } | |
| .call-us { | |
| grid-row: 6 / span 1; | |
| grid-column: 1 / span 1; | |
| } | |
| .marker { | |
| width: 25.5px; | |
| height: 40.4px; | |
| } | |
| .clock { | |
| width: 37.6px; | |
| height: 37.5px; | |
| } | |
| .phone { | |
| width: 49px; | |
| height: 39.5px; | |
| } | |
| .testimonial { | |
| font-size: 14px; | |
| font-weight: 500; | |
| letter-spacing: 0.3px; | |
| } | |
| .one { | |
| grid-row: 7 / span 1; | |
| grid-column: 1 / span 1; | |
| } | |
| .two { | |
| grid-row: 8 / span 1; | |
| grid-column: 1 / span 1; | |
| } | |
| footer { | |
| grid-row: 9 / span 1; | |
| grid-column: 1 / span 1; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment