Navbar

.eslintcache

@@ -1 +1 @@
-[{"/Users/vilasayrathahao/Documents/FreeOpenUniversity/splash--page/src/index.js":"1","/Users/vilasayrathahao/Documents/FreeOpenUniversity/splash--page/src/App.js":"2","/Users/vilasayrathahao/Documents/FreeOpenUniversity/splash--page/src/reportWebVitals.js":"3"},{"size":500,"mtime":1610117916212,"results":"4","hashOfConfig":"5"},{"size":144,"mtime":1610122043791,"results":"6","hashOfConfig":"5"},{"size":362,"mtime":1610117916213,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"q4ivd7",{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/vilasayrathahao/Documents/FreeOpenUniversity/splash--page/src/index.js",[],"/Users/vilasayrathahao/Documents/FreeOpenUniversity/splash--page/src/App.js",[],"/Users/vilasayrathahao/Documents/FreeOpenUniversity/splash--page/src/reportWebVitals.js",[]]
+[{"C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\index.js":"1","C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\App.js":"2","C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\reportWebVitals.js":"3","C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\components\\Navbar\\Navbar.js":"4","C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\components\\Hero\\index.js":"5","C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\components\\SearchBar.js":"6"},{"size":500,"mtime":1610126499193,"results":"7","hashOfConfig":"8"},{"size":231,"mtime":1610237254969,"results":"9","hashOfConfig":"8"},{"size":362,"mtime":1610126499216,"results":"10","hashOfConfig":"8"},{"size":1125,"mtime":1610244588586,"results":"11","hashOfConfig":"8"},{"size":702,"mtime":1610237110498,"results":"12","hashOfConfig":"8"},{"size":697,"mtime":1610237111090,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"afgwvf",{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"23","messages":"24","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"25","usedDeprecatedRules":"16"},{"filePath":"26","messages":"27","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":"28","usedDeprecatedRules":"16"},"C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\index.js",[],["29","30"],"C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\App.js",[],"C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\reportWebVitals.js",[],"C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\components\\Navbar\\Navbar.js",["31"],"C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\components\\Hero\\index.js",["32"],"import { SearchBar } from \"../SearchBar\"\nimport \"./index.css\"\nimport heroimg from \"./resources/hero_img.png\"\n\nconst Hero = () => {\n    return (\n      <div className=\"varela bg-img mv6 tl h-100\">\n        <div className=\"flex justify-around ph6\">\n          <div className=\" pt6 w-40-l\">\n            <h1 className=\"f1\">Powerful search tools for your documents</h1>\n            <p className =\"f3 mid-gray w-90-l\">You simply input keywords, then all relavant results will be returned within miliseconds.</p>\n          </div>\n          <img src={heroimg} className=\"w-40-l \"/>\n        </div>\n        <div className=\"\"><SearchBar/></div>\n        \n        \n      </div>\n    );\n  };\n  \n  export default Hero;\n  ","C:\\Users\\Noosa\\Desktop\\freeOpenUniv\\splash--page\\src\\components\\SearchBar.js",["33"],"import { isEmpty } from \"lodash\";\nimport React from \"react\";\n// import { connect } from \"react-redux\";\n// import { api } from \"../store\";\n\nexport function SearchBar({ books, className }) {\n  // isEmpty(books) && api.book.read();\n  return (\n    <div className={\"pa5 pb5 flex justify-center tc\" + className}>\n      <input\n        type=\"text\"\n        className=\"f2 fw5 shadow-5 pv3 ph5 br-pill mr2 b-dark-green bw0 \"\n      ></input>\n      <button className=\"fw6 shadow-5  white ph4 br-pill  f3 ttc bg-blue b-dark-green bw0 \">\n        search\n      </button>\n    </div>\n  );\n}\n\n// export const SearchBar \n// = connect(\n//   (state, props) => ({ books: state.book, ...props }),\n//   {}\n// )(searchBar);\n",{"ruleId":"34","replacedBy":"35"},{"ruleId":"36","replacedBy":"37"},{"ruleId":"38","severity":1,"message":"39","line":1,"column":17,"nodeType":"40","messageId":"41","endLine":1,"endColumn":26},{"ruleId":"42","severity":1,"message":"43","line":13,"column":11,"nodeType":"44","endLine":13,"endColumn":51},{"ruleId":"38","severity":1,"message":"45","line":1,"column":10,"nodeType":"40","messageId":"41","endLine":1,"endColumn":17},"no-native-reassign",["46"],"no-negated-in-lhs",["47"],"no-unused-vars","'Component' is defined but never used.","Identifier","unusedVar","jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement","'isEmpty' is defined but never used.","no-global-assign","no-unsafe-negation"]

.gitignore

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.eslintcache
 
 npm-debug.log*
 yarn-debug.log*

public/index.html

@@ -23,6 +23,9 @@
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
   />
+
+  <!-- Varela Round font -->
+  <link href="http://fonts.cdnfonts.com/css/varela-round-3" rel="stylesheet">
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!--

src/App.css

@@ -1,38 +0,0 @@
-.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: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,10 +1,13 @@
 
 import './App.css';
+import Hero from './components/Hero';
+import Navbar from './components/Navbar/Navbar'
 
 function App() {
   return (
     <div className="App">
-      <div>HELLO WORLD</div>
+      <Navbar/>
+      <Hero/>
     </div>
   );
 }

src/components/Hero/index.css

@@ -0,0 +1,10 @@
+.bg-img {
+    background-image: url("./resources/hero_bg.png");
+    background-repeat: no-repeat;
+    background-size: 65% 100%;
+    background-position: right;
+}
+
+.varela {
+    font-family: 'Varela Round', sans-serif;
+}

src/components/Hero/index.js

@@ -1,7 +1,20 @@
+import { SearchBar } from "../SearchBar"
+import "./index.css"
+import heroimg from "./resources/hero_img.png"
+
 const Hero = () => {
     return (
-      <div>
-          this is for hero section
+      <div className="varela bg-img mv6 tl h-100">
+        <div className="flex justify-around ph6">
+          <div className=" pt6 w-40-l">
+            <h1 className="f1">Powerful search tools for your documents</h1>
+            <p className ="f3 mid-gray w-90-l">You simply input keywords, then all relavant results will be returned within miliseconds.</p>
+          </div>
+          <img src={heroimg} className="w-40-l "/>
+        </div>
+        <div className=""><SearchBar/></div>
+
+
       </div>
     );
   };

src/components/Navbar/Navbar.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+
+const Navbar = () => {
+
+        return (
+        <div className="">
+            <nav className="flex justify-between items-center ph5 fixed w-100 top-0 ">
+                <h1 className="">
+                    <a className="varela f3 no-underline black" href="index.html"> Colligate Independent Study</a>
+                </h1>
+                <ul className="flex no-underline
+                ">
+                    <li className="list"><a className="ttu ph2 mh3 varela no-underline black" href="profiles.html">Products</a></li>
+                    <li className="list" ><a className="ttu varela no-underline black ph2 mh3" href="register.html">Technologies</a></li>
+                    <li className="list"><a className="ttu p2 mh3 varela no-underline black" href="login.html">Teams</a></li>
+                    <li className="list"><a className="ttc bg-light-blue ba br-2 white mh3 ph2 pv1 varela no-underline" href="login.html">Subscribe</a></li>
+
+                </ul>
+            </nav>
+        </div>
+
+        ) 
+
+}
+
+
+
+export default Navbar

src/components/SearchBar.js

@@ -0,0 +1,25 @@
+import { isEmpty } from "lodash";
+import React from "react";
+// import { connect } from "react-redux";
+// import { api } from "../store";
+
+export function SearchBar({ books, className }) {
+  // isEmpty(books) && api.book.read();
+  return (
+    <div className={"pa5 pb5 flex justify-center tc" + className}>
+      <input
+        type="text"
+        className="f2 fw5 shadow-5 pv3 ph5 br-pill mr2 b-dark-green bw0 "
+      ></input>
+      <button className="fw6 shadow-5  white ph4 br-pill  f3 ttc bg-blue b-dark-green bw0 ">
+        search
+      </button>
+    </div>
+  );
+}
+
+// export const SearchBar 
+// = connect(
+//   (state, props) => ({ books: state.book, ...props }),
+//   {}
+// )(searchBar);