From bedf851cbc49d3137ebec8c89092b41be18ebec0 Mon Sep 17 00:00:00 2001
From: Roni <rtlockwoodwork@gmail.com>
Date: Mon, 25 Oct 2021 14:15:09 -0600
Subject: [PATCH] added some styles

---
 src/cards/ronisCard/roniCard.jsx  | 14 +++++----
 src/cards/ronisCard/roniCard.scss | 47 ++++++++++++++++++++++++++++++-
 2 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/src/cards/ronisCard/roniCard.jsx b/src/cards/ronisCard/roniCard.jsx
index 529f36d..b5ae7d4 100644
--- a/src/cards/ronisCard/roniCard.jsx
+++ b/src/cards/ronisCard/roniCard.jsx
@@ -6,18 +6,20 @@ import Roni from './roni-headshot.png';
 
 function ExampleCard() {
   return (
-    <div className="cardContainer">
+    <div className="cardContainer roni-container">
 
         <div className="card">
-            <img className="imageContainer" src={Roni} alt="example headshot of a woman" />
+            <img className="imageContainer roniImg" src={Roni} alt="example headshot of a woman" />
         </div>
 
-        <div className="card">
+        <div className="card roni-card">
             <h3>Roni Lockwood</h3>
             <p>Front-End Developer</p>
-            <a href="mailto:rtlockwoodwork@gmail.com">Email</a> <br />
-            <a href="roni.rocks" target="_blank">Portfolio Site</a> <br />
-            <a href="github.com/OlliesWorld" target="_blank">Github</a>
+            <a href="mailto:rtlockwoodwork@gmail.com" className="email">rtlockwoodwork@gmail.com</a> 
+            <div className="links">
+              <a href="github.com/OlliesWorld" target="_blank">Github</a>
+              <a href="roni.rocks" target="_blank">Portfolio</a> 
+            </div>
       </div>
 
     </div>
diff --git a/src/cards/ronisCard/roniCard.scss b/src/cards/ronisCard/roniCard.scss
index 93dd0ef..20ea9a5 100644
--- a/src/cards/ronisCard/roniCard.scss
+++ b/src/cards/ronisCard/roniCard.scss
@@ -1,4 +1,3 @@
-
 .cardContainer{
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -22,3 +21,49 @@
     margin: auto;
     border-radius: 50%;
 }
+
+.roni-container {
+    background: #006675;
+    // background: linear-gradient(65deg, rgba(96,17,191,1) 0%, rgba(70,130,180,1) 45%, rgba(255,166,0,1) 100%);
+}
+
+.roniImg {
+    width: 150px;
+    height: 150px; 
+}
+
+.roni-card {
+    color:#334553;
+    background-color: hsl(75 25 97);
+    padding: .5rem;
+    margin: 0 .5rem;
+}
+.roni-card h3 {
+    text-decoration: underline rgb(167, 138, 0);
+    margin-bottom: .5rem;
+}
+
+.email {
+    
+    color:#334553;
+}
+.roni-card p {
+    margin:0;
+
+}
+.links a {
+    background-color: #006675;
+    color: white;
+    padding: .5rem;
+    display: inline-flex;
+    margin: 1rem .5rem;
+    border-radius: 10%;
+    box-shadow: 3px 5px 10px grey;
+    transition: background-color 300ms ease-in-out;
+}
+.links a:hover,
+.links a:focus {
+    background-color: rgb(167, 138, 0);
+    color:#006675;
+    font-size: 1.5rem;
+}
\ No newline at end of file