Add files via upload

smkhairkar · Jun 26, 2021 · 87d72ce · 87d72ce
1 parent 760cc9a
commit 87d72ce
Show file tree

Hide file tree

Showing 8 changed files with 157 additions and 0 deletions.
diff --git a/App.jsx b/App.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+import Header from "./Header";
+import Footer from "./Footer";
+import Info from "./Info";
+
+function App() {
+  return (
+    <div>
+      <Header />
+      <Footer />
+      <Info />
+      <Info />
+      <Info />
+      <Info />
+      <Info />
+    </div>
+  );
+}
+
+export default App;
diff --git a/Footer.jsx b/Footer.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+function Footer() {
+  return (
+    <footer>
+      <p>Copyright by ShapeAI &copy; {new Date().getFullYear()}</p>
+    </footer>
+  );
+}
+
+export default Footer;
diff --git a/Header.jsx b/Header.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+function Header(){
+  return(
+    <header>
+      <h1>ShapeAI Bootcamps</h1>
+    </header>
+  );
+}
+
+export default Header;
diff --git a/Info.jsx b/Info.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+
+function Info() {
+  return (
+    <div className="note">
+      <h1>Javascript and React.js</h1>
+      <p>A basix Web Devlopment React JS Bootcamp!</p>
+    </div>
+  );
+}
+
+export default Info;
diff --git a/index.html b/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>JSX</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script src="../src/index.js" type="text/JSX"></script>
+  </body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,5 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./components/App";
+
+ReactDOM.render(<App />, document.getElementById("root"));
diff --git a/package.json b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "react",
+  "version": "1.0.0",
+  "description": "React example starter project",
+  "keywords": [
+    "react",
+    "starter"
+  ],
+  "main": "src/index.js",
+  "dependencies": {
+    "react": "17.0.2",
+    "react-dom": "17.0.2"
+  },
+  "devDependencies": {
+    "@babel/runtime": "7.13.8",
+    "typescript": "4.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,56 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+html {
+  font-family: "Montserrat", sans-serif;
+}
+body {
+  background: #eee;
+  padding: 0 16px;
+}
+
+header {
+  background-color: palevioletred;
+  margin: auto -16px;
+  padding: 16px 32px;
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
+}
+
+header h1 {
+  color: #fff;
+  font-family: "McLaren", cursive;
+  font-weight: 200;
+}
+
+footer {
+  position: absolute;
+  text-align: center;
+  bottom: 0;
+  width: 100%;
+  height: 2.5rem;
+}
+
+footer p {
+  color: #000;
+}
+.note {
+  background: #fff;
+  border-radius: 7px;
+  box-shadow: 0 2px 5px #ccc;
+  padding: 10px;
+  width: 240px;
+  margin: 16px;
+  float: left;
+}
+.note h1 {
+  font-size: 1.1em;
+  margin-bottom: 6px;
+}
+.note p {
+  font-size: 1.1em;
+  margin-bottom: 10px;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}