diff --git a/public/index.html b/public/index.html
index 69150242f63bd8e3c46f195d34a076688844af26..59e317ac5d5a34d945fe670f2dd4ba4dfc7c557f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -28,7 +28,7 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
-<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
+
<title>React App</title>
</head>
<body>
diff --git a/src/components/Cards/Cards.jsx b/src/components/Cards/Cards.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..0b912ca0c12fb9a3bc4d7a8fb1ed874bb7c669f8
--- /dev/null
+++ b/src/components/Cards/Cards.jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import "./Cards.scss";
+function Cards(props){
+ return (
+<div className="card">
+ <div className="card-body">
+
+ <span>{props.name} <i className="far fa-hand-point-up" id="icon"></i></span>
+ <h2>{props.number}</h2>
+ <span><i className="fa fa-arrow-up"></i> {props.percentage} {props.month}</span>
+
+
+ </div>
+
+</div>
+
+ );
+}
+export default Cards;
\ No newline at end of file
diff --git a/src/components/Cards/Cards.scss b/src/components/Cards/Cards.scss
new file mode 100644
index 0000000000000000000000000000000000000000..097df506aa69a20659b1099114b1f8217ed7c5bd
--- /dev/null
+++ b/src/components/Cards/Cards.scss
@@ -0,0 +1,19 @@
+.card{
+ background-color: whitesmoke;
+ width: 320px;
+ border-radius: 5px;
+
+}
+p{
+ width: 60px;
+ color: #8898AA;
+
+}
+.card-body{
+ padding-left: 20px;
+}
+#icon{
+ padding-left: 60px;
+ size: 80px;
+
+}
\ No newline at end of file
diff --git a/src/components/Social_buttons/Index.jsx b/src/components/Social_buttons/Index.jsx
index 44d8415eac3965b50a488fe68f0c5dd5465c69f0..48cb6b2c1c727a8ddf3f780e57f0f260b921233e 100644
--- a/src/components/Social_buttons/Index.jsx
+++ b/src/components/Social_buttons/Index.jsx
@@ -1,10 +1,10 @@
import React from "react";
-import "./Social_buttons.css";
+import "./Social_buttons.scss";
function Social_button(props){
return (
- <button onClick={props.handleClick}>
+ <button onClick={props.handleClick} className="social_buttons">
<div>
-<img src="{props.img}"></img>
+<img src={props.img} className="icon"></img>
{props.buttonName}
</div>
</button>
diff --git a/src/components/Social_buttons/Social_buttons.module.scss b/src/components/Social_buttons/Social_buttons.scss
similarity index 59%
rename from src/components/Social_buttons/Social_buttons.module.scss
rename to src/components/Social_buttons/Social_buttons.scss
index da5d0e6f01a3bf4bf6d4f1a4ee4d26f4e2cd6aec..355d7e2acba661b245ad432c5cbb8475892dbc67 100644
--- a/src/components/Social_buttons/Social_buttons.module.scss
+++ b/src/components/Social_buttons/Social_buttons.scss
@@ -1,19 +1,23 @@
-img{
+.icon{
height: 20px;
width: 20px;
margin-right: 8px;
}
- button{
+ .social_buttons{
border: 0px;
background-color: white;
font-size: 19px;
- margin: 100px 100px 100px 100px;
box-shadow: 2px 2px 1px #aaaa;
border-radius: 5px ;
+transition: all 200ms ease-in;
+padding-left: 20px;
+padding-right: 20px;
+
}
- button:hover{
+ .social_buttons:hover{
color: cadetblue;
+ -webkit-transform:scale(1.1);
}
\ No newline at end of file
diff --git a/src/components/index.js b/src/components/index.js
index dfd77b0712e18d7f6fdbac546e6ac39418f35bc2..f17d292352d4c8392dd8a972820482aa0141b1f5 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,2 +1,2 @@
-export { default as Button } from "./Button";
-export{default as SearchBar} from './SearchBar'
+// export { default as Button } from "./Button";
+// export{default as SearchBar} from './SearchBar'