diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3c3629e --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..24af645 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,13 @@ +{ + "name": "package.json", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "package.json", + "version": "1.0.0", + "license": "ISC" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..7408275 --- /dev/null +++ b/package.json @@ -0,0 +1,38 @@ +{ + "name": "myapp", + "version": "0.1.0", + "private": true, + "dependencies": { + "@testing-library/jest-dom": "^5.17.0", + "@testing-library/react": "^13.4.0", + "@testing-library/user-event": "^13.5.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "5.0.1", + "web-vitals": "^2.1.4" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} \ No newline at end of file diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..7bc8490 --- /dev/null +++ b/public/index.html @@ -0,0 +1,40 @@ + + + + + + + + + + + + + React App + + + +
+ + + \ No newline at end of file diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..d476a59 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" + } \ No newline at end of file diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..3927ed2 --- /dev/null +++ b/src/App.css @@ -0,0 +1,17 @@ +*{ + margin: 0; + padding: 0; + } + + .App>img{ + width: 100%; + } + .cards{ + display: flex; + margin:100px 0px; + padding: 10px; + justify-content: space-evenly; + align-items: center; + flex-wrap: wrap; + + } \ No newline at end of file diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..c056587 --- /dev/null +++ b/src/App.js @@ -0,0 +1,26 @@ +import Card from "./components/Card" +import img from "./assets/hero.png" +import img2 from "./assets/Imgur(1).png" +import img3 from "./assets/Imgur (2).png" +import img4 from "./assets/Imgur (3).png" +import img1 from "./assets/Imgur.png" + +import './App.css'; + +function App() { + return ( +
+ + hero img + +
+ + + + +
+
+ ); +} + +export default App; \ No newline at end of file diff --git a/src/Apptest.js b/src/Apptest.js new file mode 100644 index 0000000..a42a500 --- /dev/null +++ b/src/Apptest.js @@ -0,0 +1,8 @@ +import { render, screen } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + render(); + const linkElement = screen.getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); \ No newline at end of file diff --git a/src/assets/Imgur (2).png b/src/assets/Imgur (2).png new file mode 100644 index 0000000..55ec222 Binary files /dev/null and b/src/assets/Imgur (2).png differ diff --git a/src/assets/Imgur (3).png b/src/assets/Imgur (3).png new file mode 100644 index 0000000..7bce97a Binary files /dev/null and b/src/assets/Imgur (3).png differ diff --git a/src/assets/Imgur(1).png b/src/assets/Imgur(1).png new file mode 100644 index 0000000..4b62541 Binary files /dev/null and b/src/assets/Imgur(1).png differ diff --git a/src/assets/Imgur.png b/src/assets/Imgur.png new file mode 100644 index 0000000..d1af18b Binary files /dev/null and b/src/assets/Imgur.png differ diff --git a/src/assets/hero.png b/src/assets/hero.png new file mode 100644 index 0000000..7153afc Binary files /dev/null and b/src/assets/hero.png differ diff --git a/src/components/Card.css b/src/components/Card.css new file mode 100644 index 0000000..0c1fe04 --- /dev/null +++ b/src/components/Card.css @@ -0,0 +1,22 @@ +.card{ + display: flex; + justify-content: center; + flex-direction: column; + width: 162px; + gap: 10px; + padding: 0px 20px; + + } + + .card img{ + width: 110px; + margin-bottom: 10px; + } + + .card h1{ + font-size: 30px; + } + + .card p{ + color: rgb(130, 130, 130); + } \ No newline at end of file diff --git a/src/components/Card.jsx b/src/components/Card.jsx new file mode 100644 index 0000000..86ce1f4 --- /dev/null +++ b/src/components/Card.jsx @@ -0,0 +1,13 @@ +import React from 'react' +import "./Card.css" +const Card = (props) => { + return ( +
+ +

{props.h}

+

{props.p}

+
+ ) +} + +export default Card \ No newline at end of file diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..4b9ba6d --- /dev/null +++ b/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; + } \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..951fbfa --- /dev/null +++ b/src/index.js @@ -0,0 +1,17 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import App from './App'; +import reportWebVitals from './reportWebVitals'; + +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render( + + + +); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); \ No newline at end of file diff --git a/src/logo.svg b/src/logo.svg new file mode 100644 index 0000000..9dfc1c0 --- /dev/null +++ b/src/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js new file mode 100644 index 0000000..7d7417e --- /dev/null +++ b/src/reportWebVitals.js @@ -0,0 +1,13 @@ +const reportWebVitals = onPerfEntry => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } + }; + + export default reportWebVitals; \ No newline at end of file diff --git a/src/setupTests.js b/src/setupTests.js new file mode 100644 index 0000000..331666c --- /dev/null +++ b/src/setupTests.js @@ -0,0 +1 @@ +import '@testing-library/jest-dom'; \ No newline at end of file