Practice

react-pr2/public/styles.css

@@ -50,9 +50,9 @@ body {
 }
 
 .circle-img {
-  border-radius: 50%;
+  border-radius: 25px;
   border: 7px solid #fff;
-  width: 120px;
+  width: 250px;
   height: 120px;
 }
 

react-pr2/src/components/App.jsx

@@ -1,20 +1,17 @@
 import React from "react";
-
-function App() {
+import Contacts from "contacts";
+function App(props) {
   return (
     <div>
       <h1 className="heading">My Contacts</h1>
       <div className="card">
         <div className="top">
-          <h2>Beyonce</h2>
-          <img
-            src="https://blackhistorywall.files.wordpress.com/2010/02/picture-device-independent-bitmap-119.jpg"
-            alt="avatar_img"
-          />
+          <h2 className="name">{Contacts.name}</h2>
+          <img className="circle-img" src={Contacts.imgURL} alt="avatar_img" />
         </div>
         <div className="bottom">
-          <p>+123 456 789</p>
-          <p>[email protected]</p>
+          <p className="info">{Contacts.phone}</p>
+          <p className="info">{Contacts.email}</p>
         </div>
       </div>
     </div>

react-pr2/src/contacts.js

@@ -21,3 +21,5 @@ const contacts = [
     email: "[email protected]",
   },
 ];
+
+export default Contacts;