style(week-5): enhance business card component

0-1/assignments/week-5/business-card-component/README.md

@@ -1,13 +1,19 @@
 ## My Implementation
-
-![Jio Network blocking the view? Network switch reveals the magic!](./src/assets/card.gif)
-
 <h3 align="center">
 
-[Source Code of Business Card Component](./src/components/Card.jsx)
+[🗂️ Source Code](./src/components/Card.jsx)
 
 <h3>
-<br>
+
+<p align="center">
+ <img width = "800px" alt="Jio Network blocking the view? Network switch reveals the magic!" src="./src/assets/card-input.jpg">
+
+ <br>
+
+ <img width = "800px" alt="Jio Network blocking the view? Network switch reveals the magic!" src="./src/assets/card-output.jpg">
+
+<p>
+
 
 ## Workflow
 

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

@@ -1,20 +1,44 @@
 /* Card.css */
 .card {
-  border: 1px solid #ccc;
-  padding: 20px;
-  margin: 20px auto;
-  width: 300px;
+  background: #000;
+  padding: 20px 40px;
+  margin: 50px auto;
+  width: 450px;
+  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>
         )}