msb-public
/
30-Days-Of-React
mirror of https://github.com/Asabeneh/30-Days-Of-React
2
1
Code Issues Projects Releases Wiki Activity

test day 04

Browse Source
pull/371/head
Mohammed Yusuf 2 years ago
parent e9aee25e74
commit 68d4d1f4f0
6 changed files with 14103 additions and 5 deletions
Show Stats Download Patch File Download Diff File

13989
04_Day_Components/04_components_boilerplate/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

46
04_Day_Components/04_components_boilerplate/src/Id.js
Unescape View File

@ -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;

20
04_Day_Components/04_components_boilerplate/src/ImgSector.js
Unescape View File

@ -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;

24
04_Day_Components/04_components_boilerplate/src/InputSec.js
Unescape View File

@ -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

26
04_Day_Components/04_components_boilerplate/src/index.js
Unescape View File

@ -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',
'align-items': 'center',
justifyContent: '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>
)

3
04_Day_Components/package-lock.json generated
Unescape View File

@ -0,0 +1,3 @@
{
"lockfileVersion": 1
}
Write Preview
Loading…
Cancel
Save