Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created Mar 14, 2021
Embed
What would you like to do?
Codecademy export
<!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://content.codecademy.com/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://content.codecademy.com/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://content.codecademy.com/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://content.codecademy.com/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://content.codecademy.com/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>️&copy; PupSpa 2017</p>
</footer>
</div>
</body>
</html>
/* 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;
}
body {
background-color: #ffffff;
color: #db6363;
text-align: center;
}
.grid {
display: grid;
grid-template: 5% 30% 10% 30% 20% 5% / repeat(6, 1fr);
grid-column-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;
}
.two {
grid-column: 4 / span 3;
}
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: 5% 30% 10% repeat(3, 10%) repeat(2, 10%) 5%;
grid-row-gap: 20px;
}
header {
margin-bottom: -20px;
}
.banner {
font-size: 20px;
font-weight: 300;
line-height: 2.75;
letter-spacing: 1.9px;
margin-bottom: -20px;
}
.dog {
width: 195px;
height: 237px;
padding-left: 50px;
}
.about {
margin-bottom: -20px;
}
.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 {
margin-top: -20px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment