filled in starter code from codecademy

aramb-dev · Sep 7, 2023 · 3bc31c9 · 3bc31c9
1 parent d9016d7
commit 3bc31c9
Show file tree

Hide file tree

Showing 2 changed files with 174 additions and 0 deletions.
diff --git a/pup-spa/index.html b/pup-spa/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>PupSpa</title>
+      <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
+      <link rel='stylesheet' href='style.css'>
+  </head>
+
+  <body>
+    <div class="grid">
+
+      <header>
+        <p class="title">PupSpa</p>
+      </header>
+
+      <div class="banner">
+        <div class="banner-contents">
+          <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>
+
+      <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="icon">
+          <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="icon">
+          <p>HOURS:
+          <br>Mon-Fri 8:00AM-9:00PM</p>
+      </div>
+
+      <div class="box call-us">
+          <img src="https://content.codecademy.com/courses/learn-css-grid/project-i/images/telephone.png" class="icon">
+          <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 2021</p>
+      </footer>
+
+    </div>
+  </body>
+
+</html>
diff --git a/pup-spa/styles.css b/pup-spa/styles.css
@@ -0,0 +1,110 @@
+body {
+    background-color: #fcfcfc;
+    color: #db6363;
+    text-align: center;
+  }
+
+  .grid {
+
+  }
+
+  header {
+
+  }
+
+  .title {
+    margin: auto;
+    color: #dc6363;
+    font-family: Poppins;
+    font-size: 2em;
+    font-weight: 700;
+  }
+
+  .banner {
+    padding: 3%;
+    background-color: #db6363;
+    color: #ffffff;
+    font-family: Poppins;
+    font-size: 3em;
+    font-weight: 300;
+    letter-spacing: 3.7px;
+
+  }
+
+  p, .banner-contents {
+    max-width: 80%;
+    margin: auto;
+  }
+
+  img {
+    height: 5em;
+    margin-left: 75px;
+  }
+
+  .about {
+    background-color: #f0f0f0;
+
+  }
+
+  .text {
+    color: #2f2d2d;
+    font-family: Poppins;
+    font-size: 22px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+  }
+
+  .box {
+    background-color: #2f2f2f;
+    color: #ffffff;
+    font-family: Poppins;
+    font-size: 16px;
+    font-weight: 500;
+    letter-spacing: 0.5px;
+    text-align: center;
+
+  }
+
+  .address {
+
+  }
+
+  .hours {
+
+  }
+
+  .call-us {
+
+  }
+
+  .icon {
+    height: 80px;
+    margin: auto;
+  }
+
+  .testimonial {
+    background-color: #f0f0f0;
+    color: #db6363;
+    font-family: Poppins;
+    font-size: 18px;
+    font-style: italic;
+    letter-spacing: 3.7px;
+
+  }
+
+  .one {
+
+  }
+
+  .two {
+
+  }
+
+  footer {
+    background-color: #db6363;
+    color: #ffffff;
+    font-family: Poppins;
+    font-size: 16px;
+    letter-spacing: 0.4px;
+
+  }