Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Day4 #371

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Day4 #371

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e9aee25
test day 03
Hypervenom007 Sep 20, 2023
68d4d1f
test day 04
Hypervenom007 Sep 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
13,989 changes: 13,989 additions & 0 deletions 03_Day_Setting_Up/03_setting_up_boilerplate/package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

67 changes: 64 additions & 3 deletions 03_Day_Setting_Up/03_setting_up_boilerplate/src/index.js
View file
Open in desktop
Expand Up @@ -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'
Expand All @@ -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'
Expand Down Expand Up @@ -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'
Expand Down