portfolio changes

css/style.css

@@ -344,4 +344,68 @@ padding: 40px;
 }
 .card-text{
     font-size: 15px;
-}
+}
+figure {
+    position: relative;
+    display: inline-block;
+  }
+@media(min-width:900px){
+    .portfolio1{
+        display: -webkit-box;
+        display: flex;
+        -webkit-box-pack: center;
+                justify-content: space-around;
+        -webkit-box-align: center;
+                align-items: center;
+    }
+    .portfolio2{
+        display: -webkit-box;
+        display: flex;
+        -webkit-box-pack: center;
+                justify-content: space-around;
+        -webkit-box-align: center;
+                align-items: center;
+    }
+}
+  .img {
+    border-radius: 50%;
+    vertical-align: middle;
+    width:300px;
+      height:300px;
+      padding:30px;
+      opacity: 0.45;
+      -webkit-filter: blur(3px);
+              filter: blur(3px);
+        border-radius: 50%;
+        vertical-align: middle;
+
+  }
+  .img:hover {
+          color: white;
+          opacity: 5;
+          -webkit-filter: blur(0px);
+                  filter: blur(0px);
+      }
+
+  figcaption {
+    border-radius: 10px; 
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    margin-top: -1em;
+    line-height: 2em;
+    margin-bottom:10px; 
+    color: white;
+    text-align: center; 
+    font-family: 'Raleway',sans-serif;
+    font-size: 25px;
+
+  }
+
+  .img:hover + figcaption {
+    display: none;
+  }
+  .page3{
+      background-image: url(../img/marble.jpg);
+  }
+

index.html

@@ -67,29 +67,56 @@
       <img src="img/IMG_6831-2.jpg" alt="Meira"class="meira">
     </div>
 
-    <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 class="page3" id="portfolio">
+      <div class="portfolio1">
+
+        <a class="link" href="animation.html.html">
+        <figure>
+         <img class="img" src="img/css2.png" alt="CSS Animation">
+          <figcaption>CSS Animation</figcaption>
+        </figure>
+        </a>
+
+        <a class="link" href="nutmeg.html">
+        <figure>
+          <img class="img" src="img/mag2.jpg" alt="Nutmeg Mag"/>
+          <figcaption>Nutmeg Magazine</figcaption> 
+        </figure>
+        </a>
+
+        <a class="link" href="farmhouse.html">
+        <figure>
+          <img class="img" src="img/farmhouse2.png">
+          <figcaption>Farmhouse Cafe </figcaption>
+        </figure>
+        </a>
       </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 class="portfolio2">
+        <a class="link" href="farmhouse.html">
+          <figure>
+            <img class="img" src="img/farmhouse2.png">
+            <figcaption>Farmhouse Cafe  </figcaption>
+          </figure>
+          </a>
+
+        <a class="link" href="farmhouse.html">
+          <figure>
+            <img class="img" src="img/farmhouse2.png">
+            <figcaption>Farmhouse Cafe  </figcaption>
+          </figure>
+        </a>
+
+        <a class="link" href="miscellaneous.html">
+          <figure>
+            <img class="img" src="img/farmhouse2.png">
+            <figcaption>Farmhouse Cafe  </figcaption>
+          </figure>
+        </a>
       </div>
+
+
     </div>
+