test day 04

04_Day_Components/04_components_boilerplate/src/Id.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import asabenehImage from './images/asabeneh.jpg'
+
+const Id = () => {
+    return (
+        <>
+            <div style={{ backgroundColor: "#F0F1F7", width: "100%" }}>
+                <div style={{ padding: "20px", width: "98%", backgroundColor: "#FFF", margin: "auto", height: "400px" }}>
+                    <img src={asabenehImage} alt='asabeneh image' style={{ width: "150px", borderRadius: "50%" }} />
+                    <p style={{ fontWeight: "500" }}>Asabeneh Yetayeh</p>
+                    <p style={{ fontSize: "13px" }}>Senior Developer, Finland</p>
+                    <strong>Skills</strong>
+                    <br />
+                    <br />
+                    <div>
+                        <span style={{ backgroundColor: "#2ACFCF", color: "#FFF", padding: "10px", margin: "3px", borderRadius: "10px" }}>HTML</span>
+                        <span style={{ backgroundColor: "#2ACFCF", color: "#FFF", padding: "10px", margin: "3px", borderRadius: "10px" }}>CSS</span>
+                        <span style={{ backgroundColor: "#2ACFCF", color: "#FFF", padding: "10px", margin: "3px", borderRadius: "10px" }}>Sass</span>
+                        <span style={{ backgroundColor: "#2ACFCF", color: "#FFF", padding: "10px", margin: "3px", borderRadius: "10px" }}>JS</span>
+                        <span style={{ backgroundColor: "#2ACFCF", color: "#FFF", padding: "10px", margin: "3px", borderRadius: "10px" }}>React</span>
+                        <span style={{ backgroundColor: "#2ACFCF", color: "#FFF", padding: "10px", margin: "3px", borderRadius: "10px" }}>Redux</span>
+                        <span style={{ backgroundColor: "#2ACFCF", color: "#FFF", padding: "10px", margin: "3px", borderRadius: "10px" }}>Node</span>
+                        <span style={{ backgroundColor: "#2ACFCF", color: "#FFF", padding: "10px", margin: "3px", borderRadius: "10px" }}>MongoBD</span>
+                        <span style={{ backgroundColor: "#2ACFCF", color: "#FFF", padding: "10px", margin: "3px", borderRadius: "10px" }}>Python</span>
+                        <span style={{ backgroundColor: "#2ACFCF", color: "#FFF", padding: "10px", margin: "3px", borderRadius: "10px" }}>Flask</span>
+                        <span style={{ backgroundColor: "#2ACFCF", color: "#FFF", padding: "10px", margin: "3px", borderRadius: "10px" }}>Django</span>
+                        <span style={{ backgroundColor: "#2ACFCF", color: "#FFF", padding: "10px", margin: "3px", borderRadius: "10px" }}>NumPy</span>
+                        <span style={{ backgroundColor: "#2ACFCF", color: "#FFF", padding: "10px", margin: "3px", borderRadius: "10px" }}>Pandas</span>
+                        <span style={{ backgroundColor: "#2ACFCF", color: "#FFF", padding: "10px", margin: "3px", borderRadius: "10px" }}>Data Analysis</span>
+                        <br /><br />
+                        <span style={{ backgroundColor: "#2ACFCF", color: "#FFF", padding: "10px", margin: "3px", borderRadius: "10px" }}>MySQL</span>
+                        <span style={{ backgroundColor: "#2ACFCF", color: "#FFF", padding: "10px", margin: "3px", borderRadius: "10px" }}>GraphQL</span>
+                        <span style={{ backgroundColor: "#2ACFCF", color: "#FFF", padding: "10px", margin: "3px", borderRadius: "10px" }}>D3.js</span>
+                        <span style={{ backgroundColor: "#2ACFCF", color: "#FFF", padding: "10px", margin: "3px", borderRadius: "10px" }}>Gatsby</span>
+                        <span style={{ backgroundColor: "#2ACFCF", color: "#FFF", padding: "10px", margin: "3px", borderRadius: "10px" }}>Docker</span>
+                        <span style={{ backgroundColor: "#2ACFCF", color: "#FFF", padding: "10px", margin: "3px", borderRadius: "10px" }}>Heroku</span>
+                        <span style={{ backgroundColor: "#2ACFCF", color: "#FFF", padding: "10px", borderRadius: "10px" }}>Git</span>
+                    </div>
+                    <br />
+                    <p style={{ fontSize: "13px" }}>Joined on Aug 30, 2020</p>
+                </div>
+            </div>
+        </>
+    )
+}
+export default Id;

04_Day_Components/04_components_boilerplate/src/ImgSector.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import htmlLogo from './images/html_logo.png'
+import cssLogo from './images/css_logo.png'
+import jsLogo from './images/js_logo.png'
+import reactLogo from './images/react_logo.png'
+
+const ImgSector = () => {
+    return (
+        <>
+            <div style={{ backgroundColor: "#F0F1F7", padding: "20px", textAlign: "center" }}>
+                <p>Front End Technologies</p>
+                <img src={htmlLogo} style={{ width: "200px", padding: "10px" }} alt="html logo" />
+                <img src={cssLogo} style={{ width: "200px", padding: "10px" }} alt="css logo" />
+                <img src={jsLogo} style={{ width: "200px", padding: "10px" }} alt="Javascript logo" />
+                <img src={reactLogo} style={{ width: "200px", padding: "10px" }} alt="React logo" />
+            </div>
+        </>
+    )
+}
+export default ImgSector;

04_Day_Components/04_components_boilerplate/src/InputSec.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+const InputSec = () => {
+    return (
+        <>
+            <div style={{ backgroundColor: "#C2E6F4", padding: "10px" }}>
+                <h3 style={{ textAlign: "center" }}>SUBSCRIBE</h3>
+                <p style={{ textAlign: "center" }}>Sign up with your email address to receive news and updates.</p>
+                <br />
+                <div style={{ textAlign: "center", }}>
+                    <input style={{ padding: "10px", margin: "5px" }} placeholder='First name' />
+                    <input style={{ padding: "10px", margin: "5px" }} placeholder='Last name' />
+                    <input style={{ padding: "10px", margin: "5px" }} placeholder='Email' />
+                    <br />
+                    <br />
+                    <button style={{ backgroundColor: "#F37474", padding: "10px", border: "none", width: "250px", color: "#FFF" }}>Subscribe</button>
+                    <br />
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default InputSec

04_Day_Components/04_components_boilerplate/src/index.js

@@ -2,6 +2,9 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import asabenehImage from './images/asabeneh.jpg'
+import ImgSector from './ImgSector'
+import InputSec from './InputSec'
+import Id from './Id'
 
 const hexaColor = () => {
   let str = '0123456789abcdef'
@@ -16,10 +19,12 @@ const hexaColor = () => {
 const HexaColor = () => {
   const bgColor = hexaColor()
   const styles = {
+    backgroundColor: hexaColor(),
+    color: "#FFF",
     height: '100px',
     display: 'flex',
-    'justify-content': 'center',
+    justifyContent: 'center',
-    'align-items': 'center',
+    alignItems: 'center',
     fontFamily: 'Montserrat',
     margin: '2px auto',
     borderRadius: '5px',
@@ -80,9 +85,20 @@ const Main = () => (
       <UserCard />
       <div>
         {/* Generate two different hexa colors every time */}
-        <HexaColor />
-        <HexaColor />
       </div>
+      <br />
+      <ImgSector />
+      <br />
+      <InputSec />
+      <br />
+      <HexaColor />
+      <HexaColor />
+      <HexaColor />
+      <HexaColor />
+      <HexaColor />
+      <HexaColor />
+      <br />
+      <Id />
     </div>
   </main>
 )
@@ -101,7 +117,7 @@ const App = () => (
   <div className='app'>
     <Header />
     <Main />
-    <Footer />
+    {/* <Footer /> */}
   </div>
 )
 

04_Day_Components/package-lock.json

@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}