diff --git a/css/style.css b/css/style.css
index e6183af..bd6ade7 100644
--- a/css/style.css
+++ b/css/style.css
@@ -114,6 +114,10 @@ align-content: center;
         max-height: 200px;
         max-width: 200px;
     }
+    .card-img-top{
+        max-height: 300px !important;
+        max-width: 300px !important; 
+    }
 }
 p{
     font-size: 30px;
@@ -261,6 +265,21 @@ a.fab:hover{
       }
  
   }
+
+  @media(min-width: 1300px){
+    .card-group{
+        display: -webkit-box;
+        display: flex;
+        justify-content: space-around;
+    }
+  
+  }
+  @media(max-width:1460px){
+  .card{
+        -webkit-box-align: center !important;
+                align-items: center !important;
+        }
+  }
   .innerBox{
       padding-right: 25px;
   }
@@ -289,4 +308,40 @@ a.fab:hover{
     left: 0;
     width: 100%;
     height: 100%;
+}
+.card-group{
+padding: 40px;
+}
+.card-img-top{
+    max-width: 500px;
+    max-height: 300px;
+    padding-bottom: 20px;
+    vertical-align: middle;
+      opacity: 0.5;
+      -webkit-filter: blur(3px);
+              filter: blur(3px);
+        vertical-align: middle;   
+}
+.card-img-top:hover {
+    color: white;
+    opacity: 1;
+    -webkit-filter: blur(0px);
+            filter: blur(0px);
+}
+.card{
+    padding: 20px;
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    flex-direction: column;
+    -webkit-box-align: center;
+            align-items: center;
+}
+.card-title{
+    font-family: 'Abril Fatface', cursive !important; 
+    font-size: 20px;  
+}
+.card-text{
+    font-size: 15px;
 }
\ No newline at end of file
diff --git a/img/css.png b/img/css.png
new file mode 100644
index 0000000..161dfbd
Binary files /dev/null and b/img/css.png differ
diff --git a/img/css2.png b/img/css2.png
new file mode 100644
index 0000000..0828445
Binary files /dev/null and b/img/css2.png differ
diff --git a/img/farmhouse.png b/img/farmhouse.png
new file mode 100644
index 0000000..ad66b5f
Binary files /dev/null and b/img/farmhouse.png differ
diff --git a/img/farmhouse2.png b/img/farmhouse2.png
new file mode 100644
index 0000000..ec5b025
Binary files /dev/null and b/img/farmhouse2.png differ
diff --git a/img/mag.jpg b/img/mag.jpg
new file mode 100644
index 0000000..f2e4c89
Binary files /dev/null and b/img/mag.jpg differ
diff --git a/img/mag2.jpg b/img/mag2.jpg
new file mode 100644
index 0000000..66a4556
Binary files /dev/null and b/img/mag2.jpg differ
diff --git a/index.html b/index.html
index c5a1938..8bc94bc 100644
--- a/index.html
+++ b/index.html
@@ -67,18 +67,30 @@
       <img src="img/IMG_6831-2.jpg" alt="Meira"class="meira">
     </div>
 
-  <section class="webportfolio">
-    <div class="animation">
-      <div class="textbox">
-        <h2>CSS Animation Project</h2>
-        <p>This CSS project was for my advanced web design class was about exploring parts of CSS. I chose CSS animations and animated and created a cat using CSS animations and transitions.</p>
-      <a href="">Learn More</a>
-      <div class="responsive-video">
-        <iframe src="https://giphy.com/embed/hrpi7we2LbGkioL17I" width="480" height="274" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
+    <div class="card-group">
+      <div class="card">
+        <h5 class="card-title">CSS Animation Project</h5>
+        <img a href="animation.html" class="card-img-top" src="img/css2.png" alt="CSS Animation"></a>
+        <div class="card-body">
+          <p class="card-text">This CSS project was for my advanced web design class was about exploring parts of CSS. I chose CSS animations and animated and created a cat using CSS animations and transitions.</p>
+        </div>
       </div>
+      <div class="card">
+        <h5 class="card-title">Nutmeg Magazine</h5>
+        <a><img class="card-img-top" src="img/mag2.jpg" alt="Nutmeg Magazine"></a>
+        <div class="card-body">
+          <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+        </div>
+      </div>
+      <div class="card">
+        <h5 class="card-title">Farmhouse Cafe</h5>
+        <a><img class="card-img-top" src="img/farmhouse2.png" alt="farmhouse"></a>
+        <div class="card-body">
+          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+        </div>
       </div>
     </div>
-  </section>
+