From 5f67bf618b4ca66bd4b9c59d8a852f12f162baf2 Mon Sep 17 00:00:00 2001
From: Jordan Hudgens <jordan@devcamp.com>
Date: Tue, 6 Apr 2021 12:15:13 -0700
Subject: [PATCH] Added starter code for workshop

---
 index.html |  1 -
 main.css   | 94 +-----------------------------------------------------
 2 files changed, 1 insertion(+), 94 deletions(-)

diff --git a/index.html b/index.html
index 780b81d..33207fe 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,6 @@
 
     <div class="container">
       <div class="content">
-        <!-- <div class="pseudo-demo" data-tooltip="Secret data">test</div> -->
         <div class="price-grid">
           <div class="item">
             <div class="banner">
diff --git a/main.css b/main.css
index 8ec76d8..7539333 100644
--- a/main.css
+++ b/main.css
@@ -45,143 +45,51 @@ body {
 }
 
 .price-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 50px;
-  width: 1200px;
 }
 
 .price-grid > .item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: white;
-  height: fit-content;
-  border-radius: var(--border-radius);
-  border: 1px solid var(--primary);
 }
 
 .price-grid > .item > .details {
-  text-align: center;
-  padding: 15px 15px 30px 15px;
 }
 
 .price-grid > .item > .details > .title {
-  font-size: 1.5rem;
-  color: var(--primary);
-  font-size: 700;
 }
 
 .price-grid > .item > .banner img {
-  width: 100%;
-  height: 200px;
-  object-fit: cover;
-  object-position: center;
-  border-top-right-radius: var(--border-radius);
-  border-top-left-radius: var(--border-radius);
 }
 
 .price-grid > .item > .details > .feature-container {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 10px;
 }
 
 .feature,
 .info-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }
 
 .info-icon > img {
-  width: 18px;
-  height: auto;
-  margin-left: 5px;
 }
 
 .price {
-  font-size: 1.5rem;
-  margin-top: 20px;
-}
-
-@media (max-width: 48em) {
-  .content {
-    grid-template-columns: 1fr;
-    width: 100%;
-    box-shadow: unset;
-  }
-
-  .price-grid {
-    grid-template-columns: 1fr;
-    width: 100%;
-  }
-
-  .price-grid > .item {
-    box-shadow: var(--shadow);
-  }
 }
 
 .tooltip:before {
-  content: attr(data-text);
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  left: 100%;
-  margin-left: 15px;
-  width: 200px;
-  padding: 10px;
-  border-radius: 10px;
-  background: #000;
-  color: #fff;
-  text-align: center;
-  display: none;
-  opacity: 0;
-  transition: 0.3s opacity;
 }
 
 .tooltip-left:before {
-  left: unset;
-  right: 100%;
-  margin-right: 15px;
-  margin-left: unset;
 }
 
 .tooltip:hover:before,
 .tooltip:hover:after {
-  display: block;
-  opacity: 1;
 }
 
 .tooltip {
-  position: relative;
-  cursor: help;
 }
 
 .tooltip:after {
-  content: "";
-  position: absolute;
-  left: 100%;
-  margin-left: -5px;
-  top: 50%;
-  transform: translateY(-50%);
-  border: 10px solid #000;
-  border-color: transparent black transparent transparent;
-  display: none;
 }
 
 .tooltip-left:after {
-  left: unset;
-  right: 100%;
-  margin-left: unset;
-  margin-right: -5px;
-  border-color: transparent transparent transparent black;
-}
-
-.pseudo-demo::before {
-  content: attr(data-tooltip);
 }
 
-.pseudo-demo::after {
-  content: "----";
+@media (max-width: 48em) {
 }