test day 03

03_Day_Setting_Up/03_setting_up_boilerplate/src/index.js

@@ -3,6 +3,9 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 // To get the root element from the HTML document
 import asabenehImage from './images/asabeneh.jpg'
+import htmlLogo from './images/html_logo.png'
+import cssLogo from './images/css_logo.png'
+import reactLogo from './images/react_logo.png'
 
 // to import the doSomeMath from the math.js with or without extension
 import doSomeMath from './math.js'
@@ -15,8 +18,7 @@ import * as everything from './math.js'
 console.log(addTwo(5, 5))
 console.log(doSomeMath.addTwo(5, 5))
 console.log(everything)
-// JSX element, header
+// JSX element, header 
-
 
 // JSX element, header
 const welcome = 'Welcome to 30 Days Of React'
@@ -87,8 +89,67 @@ const main = (
       {result}
       {personAge}
       {user}
+      <div style={{ backgroundColor: "#F0F1F7" }}>
+        <h3 style={{ textAlign: "center" }}>Front End Technologies</h3>
+        <br />
+        <img src={htmlLogo} style={{ width: "250px" }} alt='html logo' />
+        <img src={cssLogo} style={{ width: "250px" }} alt='css logo' />
+        <img src={reactLogo} style={{ width: "250px" }} alt='react image' />
+      </div>
+      <br />
+      <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>
+      <br />
+      <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>
     </div>
-  </main>
+  </main >
 )
 
 const copyRight = 'Copyright 2020'