diff --git a/Assets/3949083.jpg b/Assets/3949083.jpg new file mode 100644 index 0000000..30565fb Binary files /dev/null and b/Assets/3949083.jpg differ diff --git a/Assets/H2L3ohY.png b/Assets/H2L3ohY.png new file mode 100644 index 0000000..d1af18b Binary files /dev/null and b/Assets/H2L3ohY.png differ diff --git a/Assets/IHW1mFB.png b/Assets/IHW1mFB.png new file mode 100644 index 0000000..4b62541 Binary files /dev/null and b/Assets/IHW1mFB.png differ diff --git a/Assets/LtUDB9y.png b/Assets/LtUDB9y.png new file mode 100644 index 0000000..55ec222 Binary files /dev/null and b/Assets/LtUDB9y.png differ diff --git a/Assets/agN6R4Y.png b/Assets/agN6R4Y.png new file mode 100644 index 0000000..7bce97a Binary files /dev/null and b/Assets/agN6R4Y.png differ diff --git a/Assets/react-bg.jpeg b/Assets/react-bg.jpeg new file mode 100644 index 0000000..b5736cf Binary files /dev/null and b/Assets/react-bg.jpeg differ diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..a11777c Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..aa069f2 --- /dev/null +++ b/public/index.html @@ -0,0 +1,43 @@ + + + + + + + + + + + + + React App + + + +
+ + + diff --git a/public/logo192.png b/public/logo192.png new file mode 100644 index 0000000..fc44b0a Binary files /dev/null and b/public/logo192.png differ diff --git a/public/logo512.png b/public/logo512.png new file mode 100644 index 0000000..a4e47a6 Binary files /dev/null and b/public/logo512.png differ diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..080d6c7 --- /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" +} diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..e9e57dc --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000..0606fad --- /dev/null +++ b/src/App.css @@ -0,0 +1,38 @@ +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #dfe3ed; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #e0e8ea; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..9110c5c --- /dev/null +++ b/src/App.js @@ -0,0 +1,18 @@ + +import './App.css'; +import LandingPage from './LandingPage'; +import "./landing.css"; +import "./footer.css"; +import Footer from './Footer'; + +function App() { + return ( +
+ +
+ + ); +} + +export default App; diff --git a/src/App.test.js b/src/App.test.js new file mode 100644 index 0000000..1f03afe --- /dev/null +++ b/src/App.test.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(); +}); diff --git a/src/Assets/3949083.jpg b/src/Assets/3949083.jpg new file mode 100644 index 0000000..30565fb Binary files /dev/null and b/src/Assets/3949083.jpg differ diff --git a/src/Assets/H2L3ohY.png b/src/Assets/H2L3ohY.png new file mode 100644 index 0000000..d1af18b Binary files /dev/null and b/src/Assets/H2L3ohY.png differ diff --git a/src/Assets/IHW1mFB.png b/src/Assets/IHW1mFB.png new file mode 100644 index 0000000..4b62541 Binary files /dev/null and b/src/Assets/IHW1mFB.png differ diff --git a/src/Assets/LtUDB9y.png b/src/Assets/LtUDB9y.png new file mode 100644 index 0000000..55ec222 Binary files /dev/null and b/src/Assets/LtUDB9y.png differ diff --git a/src/Assets/agN6R4Y.png b/src/Assets/agN6R4Y.png new file mode 100644 index 0000000..7bce97a Binary files /dev/null and b/src/Assets/agN6R4Y.png differ diff --git a/src/Assets/react-bg.jpeg b/src/Assets/react-bg.jpeg new file mode 100644 index 0000000..b5736cf Binary files /dev/null and b/src/Assets/react-bg.jpeg differ diff --git a/src/Footer.js b/src/Footer.js new file mode 100644 index 0000000..8844403 --- /dev/null +++ b/src/Footer.js @@ -0,0 +1,25 @@ +import React from 'react' + +const Footer = () => { + return ( +
+
+ + footer-bg1 +

Declarative

+

+ +
+
+ Forest +
+
+ Mountains +
+
+ + ) +} + +export default Footer; \ No newline at end of file diff --git a/src/LandingPage.js b/src/LandingPage.js new file mode 100644 index 0000000..3c3343a --- /dev/null +++ b/src/LandingPage.js @@ -0,0 +1,25 @@ +import React from 'react' + +const LandingPage = () => { + return ( +
+

+ Say Hello to ReactJs +

+

You will learn a Frontend framework from + scratch ,to become an Ninka Developer +

+ + + + + + + +
+ + + ) +} + +export default LandingPage; \ No newline at end of file diff --git a/src/footer.css b/src/footer.css new file mode 100644 index 0000000..6341859 --- /dev/null +++ b/src/footer.css @@ -0,0 +1,15 @@ +.row{ + background-color: rgb(255, 255, 255); + padding: 300px 20px 400px 50px; + display : flex; + justify-content: space-around; + +} + +.column img{ + + + +} + + diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..ec2585e --- /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; +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..d563c0f --- /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(); diff --git a/src/landing.css b/src/landing.css new file mode 100644 index 0000000..72e2d38 --- /dev/null +++ b/src/landing.css @@ -0,0 +1,46 @@ +.Landingpage{ + background-image: url("C:\Users\ADITYA KOCHE\OneDrive\Desktop\lab-hello-rootlearn\lab-hello-rootlearn\src\Assets\3949083.jpg"); + + color:aliceblue; + padding : 100px 20px 60px; + + +} + +.Landingpage button{ + background-color: #f6fffc; + border: none; + border-radius: 4px; + color: rgb(0, 0, 0); + padding: 15px 32px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + margin-left : 40px; + +} + +.Landingpage button:hover{ + background-color: tomato; + + +} + +.Landingpage h1,p{ + margin-left: 40px; + font-size: larger; + +} + +.row{ + padding: 100px 20px 60px; + margin:10px; + border-color: rgb(0, 19, 231); +} + +.column{ + background-color: aqua; + + +} \ 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..5253d3a --- /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; diff --git a/src/setupTests.js b/src/setupTests.js new file mode 100644 index 0000000..8f2609b --- /dev/null +++ b/src/setupTests.js @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom';