style(week-5): enhance business card component

0-1/assignments/week-5/business-card-component/src/components/Card.css

@@ -1,20 +1,44 @@
 /* Card.css */
 .card {
-  border: 1px solid #ccc;
+  background: #000;
   padding: 20px;
-  margin: 20px auto;
-  width: 300px;
+  margin: 50px auto;
+  width: 400px;
+  border-radius: 4px;
+  filter: drop-shadow(0 0 1rem #646cffaa);
+}
+
+.card h2 {
+  font-size: 3.5rem;
+  margin-top: 20px;
+  margin-bottom: 0;
+}
+
+.card p {
+  font-size: 1.5rem;
+  margin-top: 10px;
 }
 
 .social-media img {
-  width: 30px;
-  margin-right: 10px;
+  width: 42px;
+  margin: 5px 20px;
+}
+
+#twitter {
+  width: 40px;
+  border-radius: 20%;
+  background: #fff;
+  box-sizing: border-box;
+  padding: 5px;
 }
 
 .interests {
+  font-size: 1.3rem;
   margin-top: 20px;
+  margin-bottom: 20px;
 }
 
 .interests h3 {
+  font-size: 1.8rem;
   margin-bottom: 10px;
 }

0-1/assignments/week-5/business-card-component/src/components/Card.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import linkedinLogo from '../assets/linkedin-icon.png';
 import githubLogo from '../assets/github-icon.png';
-import twitterLogo from '../assets/twitter-icon.png';
+import twitterLogo from '../assets/twitter.png';
 import './Card.css';
 
 const Card = props => {
@@ -21,7 +21,7 @@ const Card = props => {
 
         {twitter && (
           <a href={twitter} target="_blank" rel="noopener noreferrer">
-            <img src={twitterLogo} alt="Twitter" />
+            <img src={twitterLogo} alt="Twitter" id='twitter' />
           </a>
         )}