Merge pull request #73 from domsbytes/main

Issue #8 :added pizzaz to dom's card
women-who-software · Oct 25, 2021 · 6ec4b95 · 6ec4b95
2 parents 19b91a6 + 5343273
commit 6ec4b95
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/src/cards/domsCard/domsCard.jsx b/src/cards/domsCard/domsCard.jsx
@@ -5,10 +5,8 @@ import image from "./dom_photo1.png";
 function DomsCard() {
   return (
     <div className="domCardContainer">
-      <div className="card">
         <img className="imageContainer" src={image} alt="dom's headshot" />
-      </div>
-
+
       <div className="card">
         <h3>Dominika Wilk</h3>
         <p>Sr Software Engineer</p>

diff --git a/src/cards/domsCard/domsCard.scss b/src/cards/domsCard/domsCard.scss
@@ -5,10 +5,8 @@
     background: linear-gradient( #4bc0c8d3, #c54bd3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
     color: whitesmoke;
     display: flex;
-    //font-weight: 600;
     height: 100%;
     justify-content: space-around;
-    text-shadow: 4px 2px 6px #000000;
 
     h3 {
         margin-top: 0!important;
@@ -23,10 +21,21 @@
         text-align: center;
     }
 
-    .image {
+    .imageContainer {
         border-radius: 50% 20% / 10% 50%;
-        height: 130px;
-        //filter:saturate(200%) sepia(30%);
+    }
+
+    .imageContainer:hover{
+        animation-name: percent-keyframe-animation;
+        animation-duration: 5s;
+    }
+
+    @keyframes percent-keyframe-animation {
+        0%   { border-radius: 0 0 0 0 }
+        25%  { border-radius: 0 100% 0 0 }
+        50%  { border-radius: 0 100% 100% 0 }
+        75%  { border-radius: 0 100% 100% 100% }
+        100% { border-radius: 100% 100% 100% 100% }
     }
 
     .card {
@@ -38,7 +47,6 @@
         padding: 5px 10px;
         margin: 0 5px 5px;
         background-color: rgb(38, 114, 95);
-        //box-shadow: 2px 2px 4px grey;
         border: none;
         border-radius: 5px;
         color: white;