add new exercise

solutions/day-04/day-04-exercises/src/App.css

@@ -8,6 +8,7 @@
 
 body {
     display: flex;
-    justify-content: center;
-    margin: 80px auto;
+    justify-content: start;
+    margin: 30px auto;
+    padding: 0 80px;
 }

solutions/day-04/day-04-exercises/src/App.js

@@ -1,18 +1,24 @@
 import React from 'react'
 // import Background from './pages/Background'
 import './App.css'
-import Stripe from './pages/Stripe'
+import Footer from './pages/Footer'
+import ProfileCard from './pages/ProfileCard'
+import Skills from './pages/Skills'
+// import Stripe from './pages/Stripe'
 
 
 const App = (props) => {
   return (
     <div>
         {/* <Background /> */}
-        <Stripe bgColor="#518cef" color="#518cef" />
+        {/* <Stripe bgColor="#518cef" color="#518cef" />
         <Stripe bgColor="#3b10c4" color="#3b10c4" />
         <Stripe bgColor="#9aede6" color="#9aede6" />
         <Stripe bgColor="#8ee763" color="#8ee763" />
-        <Stripe bgColor="#a30dd0" color="#a30dd0" />
+        <Stripe bgColor="#a30dd0" color="#a30dd0" /> */}
+        <ProfileCard />
+        <Skills />
+        <Footer />
     </div>
   )
 }

solutions/day-04/day-04-exercises/src/pages/Footer.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import styles from './Footer.module.css'
+const Footer = () => {
+  return (
+    <div>Footer</div>
+  )
+}
+
+export default Footer

solutions/day-04/day-04-exercises/src/pages/ProfileCard.js

@@ -0,0 +1,15 @@
+import React from "react";
+import styles from "./ProfileCard.module.css";
+var ProfilePhoto = require('../assets/img/photo.jpg')
+
+const ProfileCard = () => {
+  return (
+    <div className={styles.container}>
+      <img src={ProfilePhoto} alt="Profile Photo" />
+      <h1>Diego Baena</h1>
+      <p>Frontend Developer</p>
+    </div>
+  );
+};
+
+export default ProfileCard;

solutions/day-04/day-04-exercises/src/pages/ProfileCard.module.css

@@ -0,0 +1,12 @@
+.container img {
+    width: 250px;
+    border-radius: 50%;
+    margin-bottom: 20px;
+}
+
+.container h1,
+.container p {
+    text-align: center;
+    margin-bottom: 10px;
+    color: rgb(36, 35, 35);
+}

solutions/day-04/day-04-exercises/src/pages/Skills.js

@@ -0,0 +1,33 @@
+import React from "react";
+import styles from "./Skills.module.css";
+import Tags from "./Tags";
+
+const Skills = (props) => {
+  return (
+    <div className={styles.container}>
+      <h1>Skills</h1>
+      <div>
+        <Tags skill="HTML" />
+        <Tags skill="CSS" />
+        <Tags skill="Sass" />
+        <Tags skill="JS" />
+        <Tags skill="React" />
+        <Tags skill="Redux" />
+        <Tags skill="Node" />
+        <Tags skill="MongoDB" />
+        <Tags skill="Python" />
+        <Tags skill="Flask" />
+        <Tags skill="Django" />
+        <Tags skill="Data Analisys" />
+        <Tags skill="MySQL" />
+        <Tags skill="GraphQL" />
+        <Tags skill="Gatsby" />
+        <Tags skill="Docker" />
+        <Tags skill="Heroku" />
+        <Tags skill="Git" />
+      </div>
+    </div>
+  );
+};
+
+export default Skills;

solutions/day-04/day-04-exercises/src/pages/Skills.module.css

@@ -0,0 +1,15 @@
+.container {
+    display: flex;
+    flex-direction: column;
+}
+
+.container div {
+    display: flex;
+    justify-content: space-between;
+}
+
+.container h1 {
+    color: rgb(55, 53, 53);
+    text-align: left;
+    margin-bottom: 15px;
+}

solutions/day-04/day-04-exercises/src/pages/Tags.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import styles from './Tags.module.css'
+
+const Tags = (props) => {
+  return (
+    <p className={styles.container}>{props.skill}</p>
+  )
+}
+
+export default Tags

solutions/day-04/day-04-exercises/src/pages/Tags.module.css

@@ -0,0 +1,12 @@
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-width: 50px;
+    max-width: 80px;
+    padding: 2px;
+    border-radius: 5px;
+    color: white;
+    font-weight: bold;
+    background-color: aqua;
+}