day1 of react

barathraju-43 · Jun 8, 2023 · 7475e91 · 7475e91
1 parent 0c39bfe
commit 7475e91
Show file tree

Hide file tree

Showing 11 changed files with 95 additions and 119 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>React_testPage</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.css b/src/App.css
@@ -1,42 +1,49 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
+header{
+    position: relative;
 }
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+.nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+
+.nav-logo {
+    width: 60px;
 }
 
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.nav-items {
+    list-style: none;
+    display: flex;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
+.nav-items > li {
+    padding: 10px;
 }
 
-.card {
-  padding: 2em;
+header::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background-color: #090202;
+  }
+
+.footer-section{
+    bottom: 0;
+    border: 3px solid grey;
 }
 
-.read-the-docs {
-  color: #888;
+
+
+.mainHeader{
+    font-family: 'Roboto', sans-serif;
 }
+
+
+
+
+
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,24 +1,18 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-// import './App.css'
+import "./App.css";
+import React from "react";
+import Header from "./components/Header/Header";
+import MainContent from "./components/MainContent/MainContent";
+import Footer from "./components/Footer/Footer";
+import ReactDOM from "react-dom";
 
 function App() {
   return (
-    <>
-      <div>
-        <h1>The Exchange HUB</h1>
-        <ul>
-          <li>Topics</li>
-          <li>About</li>
-          <li>Contact</li>
-        </ul>
-      </div>
-      <div> 
-        <p>This is just a test page to understand react</p>
-      </div>
-    </>
-  )
+    <div>
+      <Header />
+      <MainContent />
+      <Footer />
+    </div>
+  );
 }
 
-export default App
+export default App;
diff --git a/src/assets/reactlogo.png b/src/assets/reactlogo.png
diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import "./Footer.css";
+
+export default function Footer() {
+  return (
+    <footer className="footer-section">
+      <small>© 2021 xyz development. All rights reserved.</small>
+    </footer>
+  );
+}
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -0,0 +1,18 @@
+import React from "react";
+import logo from "../../assets/reactlogo.png";
+import "./Header.css";
+
+export default function Header() {
+  return (
+    <header>
+      <nav className="navbar">
+        <img src={logo} width="40px" />
+        <ul className="nav-items">
+          <li>Pricing</li>
+          <li>About</li>
+          <li>Contact</li>
+        </ul>
+      </nav>
+    </header>
+  );
+}
diff --git a/src/components/MainContent/MainContent.css b/src/components/MainContent/MainContent.css
diff --git a/src/components/MainContent/MainContent.jsx b/src/components/MainContent/MainContent.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import "./MainContent.css";
+
+export default function MainContent() {
+  return (
+    <div>
+      <h1 className="mainHeader">Reasons I'm excited to learn React</h1>
+      <ol>
+        <li>
+          It's a popular library, so I'll be able to fit in with the cool kids!
+        </li>
+        <li>I'm more likely to get a job as a developer if I know React</li>
+      </ol>
+    </div>
+  );
+}
diff --git a/src/index.css b/src/index.css
@@ -1,69 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}