├── src ├── App.css ├── olx-logo.png ├── Pages │ ├── Login.js │ ├── Signup.js │ ├── ViewPost.js │ ├── Create.js │ └── Home.js ├── store │ ├── PostContext.js │ └── Context.js ├── index.js ├── assets │ ├── Arrow.js │ ├── SellButtonPlus.js │ ├── Search.js │ ├── OlxLogo.js │ ├── Heart.js │ └── SellButton.js ├── firebase │ └── config.js ├── Components │ ├── Footer │ │ ├── Footer.css │ │ └── Footer.js │ ├── Create │ │ ├── Create.css │ │ └── Create.js │ ├── Banner │ │ ├── Banner.css │ │ └── Banner.js │ ├── Login │ │ ├── Login.css │ │ └── Login.js │ ├── Signup │ │ ├── Signup.css │ │ └── Signup.js │ ├── View │ │ ├── View.css │ │ └── View.js │ ├── Posts │ │ ├── Post.css │ │ └── Posts.js │ └── Header │ │ ├── Header.js │ │ └── Header.css └── App.js ├── assets ├── styles │ ├── pages │ │ ├── Home.css │ │ ├── Create.css │ │ ├── Login.css │ │ └── Signup.css │ └── components │ │ ├── Footer.css │ │ ├── Banner.css │ │ ├── View.css │ │ ├── Post.css │ │ └── Header.css └── images │ ├── banner copy.png │ ├── olx-logo.svg │ └── svg │ └── svg.js ├── public ├── robots.txt ├── Images │ ├── R15V3.jpg │ ├── banner.jpg │ └── banner copy.png ├── global.css ├── manifest.json └── index.html ├── .gitignore └── package.json /src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/styles/pages/Home.css: -------------------------------------------------------------------------------- 1 | .homeParentDiv{ 2 | ; 3 | } 4 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/olx-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christopharantony/OLX_Clone/HEAD/src/olx-logo.png -------------------------------------------------------------------------------- /public/Images/R15V3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christopharantony/OLX_Clone/HEAD/public/Images/R15V3.jpg -------------------------------------------------------------------------------- /public/Images/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christopharantony/OLX_Clone/HEAD/public/Images/banner.jpg -------------------------------------------------------------------------------- /assets/images/banner copy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christopharantony/OLX_Clone/HEAD/assets/images/banner copy.png -------------------------------------------------------------------------------- /public/Images/banner copy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/christopharantony/OLX_Clone/HEAD/public/Images/banner copy.png -------------------------------------------------------------------------------- /src/Pages/Login.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Login from '../Components/Login/Login'; 3 | 4 | function LoginPage() { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | 12 | export default LoginPage; 13 | -------------------------------------------------------------------------------- /src/Pages/Signup.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Signup from '../Components/Signup/Signup'; 4 | 5 | function SignupPage() { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | } 12 | 13 | export default SignupPage; 14 | -------------------------------------------------------------------------------- /public/global.css: -------------------------------------------------------------------------------- 1 | /* * { 2 | margin: 0px; 3 | padding: 0px; 4 | box-sizing: border-box; 5 | } 6 | 7 | .alignItemCenter { 8 | justify-content: space-between; 9 | align-items: center; 10 | } 11 | 12 | .alignItemSpaceBetween { 13 | justify-content: space-between; 14 | align-items: center; 15 | } */ 16 | -------------------------------------------------------------------------------- /src/Pages/ViewPost.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import Header from '../Components/Header/Header' 4 | import View from '../Components/View/View' 5 | 6 | function ViewPost(props) { 7 | return ( 8 |
9 |
10 | 11 |
12 | ) 13 | } 14 | 15 | export default ViewPost 16 | -------------------------------------------------------------------------------- /src/Pages/Create.js: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from 'react'; 2 | import Header from '../Components/Header/Header'; 3 | import Create from '../Components/Create/Create'; 4 | 5 | const CreatePage = () => { 6 | return ( 7 | 8 |
9 | 10 | 11 | ); 12 | }; 13 | 14 | export default CreatePage; 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /src/store/PostContext.js: -------------------------------------------------------------------------------- 1 | import { createContext,useState } from "react"; 2 | 3 | export const PostContext = createContext(null); 4 | 5 | function Post({ children }) { 6 | const [postDetails, setPostDetails] = useState(); 7 | return ( 8 | 9 | {children} 10 | 11 | ); 12 | } 13 | 14 | export default Post -------------------------------------------------------------------------------- /src/store/Context.js: -------------------------------------------------------------------------------- 1 | import {Children, createContext,useState} from 'react'; 2 | 3 | export const FirebaseContext = createContext(null) 4 | export const AuthContext = createContext(null) 5 | 6 | export default function Context({children}) { 7 | const [user,setUser] = useState(null) 8 | return( 9 | 10 | {children} 11 | 12 | ) 13 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import {FirebaseContext} from './store/Context' 5 | import Context from './store/Context' 6 | import firebase from './firebase/config' 7 | 8 | ReactDOM.render( 9 | 10 | 11 | 12 | 13 | 14 | , document.getElementById('root')); 15 | -------------------------------------------------------------------------------- /src/Pages/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import Header from '../Components/Header/Header'; 4 | import Banner from '../Components/Banner/Banner'; 5 | 6 | import Posts from '../Components/Posts/Posts'; 7 | import Footer from '../Components/Footer/Footer'; 8 | 9 | function Home(props) { 10 | return ( 11 |
12 |
13 | 14 | 15 |
16 |
17 | ); 18 | } 19 | 20 | export default Home; 21 | 22 | -------------------------------------------------------------------------------- /src/assets/Arrow.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | 4 | export default function Arrow() { 5 | return ( 13 | 17 | ) 18 | } -------------------------------------------------------------------------------- /src/firebase/config.js: -------------------------------------------------------------------------------- 1 | import firebase from 'firebase' 2 | import 'firebase/auth' 3 | import 'firebase/firestore' 4 | import 'firebase/storage' 5 | 6 | const firebaseConfig = { 7 | apiKey: "AIzaSyDSfdC5m8rle8KKRev4fJNYNddm4qLBYp4", 8 | authDomain: "fir-dd7a4.firebaseapp.com", 9 | projectId: "fir-dd7a4", 10 | storageBucket: "fir-dd7a4.appspot.com", 11 | messagingSenderId: "130870331280", 12 | appId: "1:130870331280:web:9b29533318dcf1cc855515", 13 | measurementId: "G-WSPTZL068W" 14 | }; 15 | 16 | export default firebase.initializeApp(firebaseConfig); -------------------------------------------------------------------------------- /assets/styles/components/Footer.css: -------------------------------------------------------------------------------- 1 | .footerParentDiv { 2 | } 3 | .footerParentDiv .content { 4 | display: flex; 5 | justify-content: space-between; 6 | align-items: center; 7 | background: #ebeeef; 8 | padding: 16px; 9 | } 10 | .footerParentDiv .content .heading { 11 | font-size: 24px; 12 | font-weight: bolder; 13 | } 14 | 15 | .footerParentDiv .footer { 16 | display: flex; 17 | justify-content: space-between; 18 | align-items: center; 19 | padding: 10px; 20 | background: #002f34; 21 | color: whitesmoke; 22 | } 23 | 24 | .footerParentDiv .footer p { 25 | margin: 0; 26 | } 27 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /src/Components/Footer/Footer.css: -------------------------------------------------------------------------------- 1 | .footerParentDiv { 2 | width: 100vw; 3 | } 4 | .footerParentDiv .content { 5 | display: flex; 6 | justify-content: space-between; 7 | align-items: center; 8 | background: #ebeeef; 9 | padding: 16px; 10 | } 11 | .footerParentDiv .content .heading { 12 | font-size: 24px; 13 | font-weight: bolder; 14 | } 15 | 16 | .footerParentDiv .footer { 17 | display: flex; 18 | justify-content: space-between; 19 | align-items: center; 20 | padding: 10px; 21 | background: #002f34; 22 | color: whitesmoke; 23 | } 24 | 25 | .footerParentDiv .footer p { 26 | margin: 0; 27 | } 28 | -------------------------------------------------------------------------------- /src/assets/SellButtonPlus.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function SellButtonPlus(params) { 4 | return( 5 | 13 | 17 | 18 | ) 19 | } -------------------------------------------------------------------------------- /assets/styles/pages/Create.css: -------------------------------------------------------------------------------- 1 | .centerDiv { 2 | border: 1px solid black; 3 | width: max-content; 4 | padding: 50px; 5 | position: absolute; 6 | top: 65%; 7 | left: 50%; 8 | transform: translate(-50%, -50%); 9 | border-radius: 6px; 10 | } 11 | .input { 12 | border-top-color: transparent; 13 | border-left-color: transparent; 14 | border-right-color: transparent; 15 | outline-color: transparent; 16 | } 17 | 18 | .uploadBtn { 19 | margin-top: 30px; 20 | width: 100%; 21 | height: 48px; 22 | /* border-color: transparent; */ 23 | background-color: #002f34; 24 | color: whitesmoke; 25 | font-weight: 900; 26 | } 27 | .uploadBtn:hover { 28 | background-color: white; 29 | color: #002f34; 30 | border: 2px solid #002f34; 31 | } 32 | -------------------------------------------------------------------------------- /src/Components/Create/Create.css: -------------------------------------------------------------------------------- 1 | .centerDiv { 2 | border: 1px solid black; 3 | width: max-content; 4 | padding: 50px; 5 | position: absolute; 6 | top: 65%; 7 | left: 50%; 8 | transform: translate(-50%, -50%); 9 | border-radius: 6px; 10 | } 11 | .input { 12 | border-top-color: transparent; 13 | border-left-color: transparent; 14 | border-right-color: transparent; 15 | outline-color: transparent; 16 | } 17 | 18 | .uploadBtn { 19 | margin-top: 30px; 20 | width: 100%; 21 | height: 48px; 22 | /* border-color: transparent; */ 23 | background-color: #002f34; 24 | color: whitesmoke; 25 | font-weight: 900; 26 | } 27 | .uploadBtn:hover { 28 | background-color: white; 29 | color: #002f34; 30 | border: 2px solid #002f34; 31 | } 32 | -------------------------------------------------------------------------------- /assets/styles/pages/Login.css: -------------------------------------------------------------------------------- 1 | .loginParentDiv { 2 | border: 1px solid black; 3 | width: max-content; 4 | padding: 10px; 5 | position: absolute; 6 | top: 50%; 7 | left: 50%; 8 | transform: translate(-50%, -50%); 9 | border-radius: 6px; 10 | } 11 | 12 | .loginParentDiv .input { 13 | border-top-color: transparent; 14 | border-left-color: transparent; 15 | border-right-color: transparent; 16 | outline-color: transparent; 17 | } 18 | 19 | .loginParentDiv button { 20 | width: 100%; 21 | height: 48px; 22 | /* border-color: transparent; */ 23 | background-color: #002f34; 24 | color: whitesmoke; 25 | font-weight: 900; 26 | } 27 | .loginParentDiv button:hover { 28 | background-color: white; 29 | color: #002f34; 30 | border: 2px solid #002f34; 31 | } 32 | 33 | .loginParentDiv a { 34 | display: flex; 35 | justify-content: center; 36 | cursor: pointer; 37 | } 38 | -------------------------------------------------------------------------------- /src/assets/Search.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function Search(props) { 4 | return( 13 | 17 | ) 18 | } -------------------------------------------------------------------------------- /assets/styles/components/Banner.css: -------------------------------------------------------------------------------- 1 | .bannerParentDiv { 2 | padding-top: 4em; 3 | } 4 | .bannerParentDiv .bannerChildDiv { 5 | } 6 | .bannerParentDiv .bannerChildDiv .menuBar { 7 | display: flex; 8 | padding: 10px 16px 10px 16px; 9 | } 10 | 11 | .bannerParentDiv .bannerChildDiv .menuBar span { 12 | } 13 | 14 | .bannerParentDiv .bannerChildDiv .menuBar .categoryMenu span { 15 | margin-right: 16px; 16 | font-weight: bolder; 17 | } 18 | 19 | .bannerParentDiv .bannerChildDiv .menuBar .otherQuickOptions { 20 | } 21 | .bannerParentDiv .bannerChildDiv .menuBar .otherQuickOptions span { 22 | padding: 10px; 23 | } 24 | 25 | .bannerChildDiv .banner { 26 | position: relative; 27 | left: -33em; 28 | } 29 | 30 | @media only screen and (max-width: 700px) { 31 | .otherQuickOptions { 32 | display: none; 33 | } 34 | .bannerChildDiv .banner { 35 | position: relative; 36 | left: -33em; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/assets/OlxLogo.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function OlxLogo() { 4 | return( 5 | 13 | 17 | ) 18 | } -------------------------------------------------------------------------------- /src/Components/Banner/Banner.css: -------------------------------------------------------------------------------- 1 | .bannerParentDiv { 2 | padding-top: 4em; 3 | } 4 | .bannerParentDiv .bannerChildDiv { 5 | } 6 | .bannerParentDiv .bannerChildDiv .menuBar { 7 | display: flex; 8 | padding: 10px 16px 10px 16px; 9 | } 10 | 11 | .bannerParentDiv .bannerChildDiv .menuBar span { 12 | } 13 | 14 | .bannerParentDiv .bannerChildDiv .menuBar .categoryMenu span { 15 | margin-right: 16px; 16 | font-weight: bolder; 17 | } 18 | 19 | .bannerParentDiv .bannerChildDiv .menuBar .otherQuickOptions { 20 | } 21 | .bannerParentDiv .bannerChildDiv .menuBar .otherQuickOptions span { 22 | padding: 10px; 23 | } 24 | 25 | .bannerChildDiv .banner { 26 | position: relative; 27 | width: 100vw; 28 | } 29 | .bannerChildDiv .banner img{ 30 | width: 100vw; 31 | } 32 | 33 | @media only screen and (max-width: 700px) { 34 | .otherQuickOptions { 35 | display: none; 36 | } 37 | .bannerChildDiv .banner { 38 | position: relative; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/Components/Login/Login.css: -------------------------------------------------------------------------------- 1 | .loginParentDiv { 2 | border: 1px solid black; 3 | width: max-content; 4 | padding: 10px; 5 | position: absolute; 6 | top: 50%; 7 | left: 50%; 8 | transform: translate(-50%, -50%); 9 | border-radius: 6px; 10 | } 11 | 12 | .loginParentDiv .input { 13 | border-top-color: transparent; 14 | border-left-color: transparent; 15 | border-right-color: transparent; 16 | outline-color: transparent; 17 | } 18 | 19 | .loginParentDiv button { 20 | width: 100%; 21 | height: 48px; 22 | /* border-color: transparent; */ 23 | background-color: #002f34; 24 | color: whitesmoke; 25 | font-weight: 900; 26 | } 27 | .loginParentDiv button:hover { 28 | background-color: white; 29 | color: #002f34; 30 | border: 2px solid #002f34; 31 | } 32 | 33 | .loginParentDiv a { 34 | display: flex; 35 | justify-content: center; 36 | cursor: pointer; 37 | } 38 | -------------------------------------------------------------------------------- /assets/styles/pages/Signup.css: -------------------------------------------------------------------------------- 1 | .signupParentDiv { 2 | border: 1px solid black; 3 | width: max-content; 4 | padding: 10px; 5 | position: absolute; 6 | top: 50%; 7 | left: 50%; 8 | transform: translate(-50%, -50%); 9 | border-radius: 6px; 10 | } 11 | 12 | .signupParentDiv .input { 13 | border-top-color: transparent; 14 | border-left-color: transparent; 15 | border-right-color: transparent; 16 | outline-color: transparent; 17 | } 18 | 19 | .signupParentDiv button { 20 | width: 100%; 21 | height: 48px; 22 | /* border-color: transparent; */ 23 | background-color: #002f34; 24 | color: whitesmoke; 25 | font-weight: 900; 26 | } 27 | .signupParentDiv button:hover { 28 | background-color: white; 29 | color: #002f34; 30 | border: 2px solid #002f34; 31 | } 32 | 33 | .signupParentDiv a { 34 | display: flex; 35 | justify-content: center; 36 | cursor: pointer; 37 | } 38 | -------------------------------------------------------------------------------- /src/Components/Signup/Signup.css: -------------------------------------------------------------------------------- 1 | .signupParentDiv { 2 | border: 1px solid black; 3 | width: max-content; 4 | padding: 10px; 5 | position: absolute; 6 | top: 50%; 7 | left: 50%; 8 | transform: translate(-50%, -50%); 9 | border-radius: 6px; 10 | } 11 | 12 | .signupParentDiv .input { 13 | border-top-color: transparent; 14 | border-left-color: transparent; 15 | border-right-color: transparent; 16 | outline-color: transparent; 17 | } 18 | 19 | .signupParentDiv button { 20 | width: 100%; 21 | height: 48px; 22 | /* border-color: transparent; */ 23 | background-color: #002f34; 24 | color: whitesmoke; 25 | font-weight: 900; 26 | } 27 | .signupParentDiv button:hover { 28 | background-color: white; 29 | color: #002f34; 30 | border: 2px solid #002f34; 31 | } 32 | 33 | .signupParentDiv a { 34 | display: flex; 35 | justify-content: center; 36 | cursor: pointer; 37 | } 38 | -------------------------------------------------------------------------------- /src/assets/Heart.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function Heart() { 4 | return( 5 | 13 | 17 | 18 | ) 19 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "olx", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.11.4", 7 | "@testing-library/react": "^11.1.0", 8 | "@testing-library/user-event": "^12.1.10", 9 | "chokidar": "^3.5.3", 10 | "firebase": "^8.4.3", 11 | "react": "^17.0.2", 12 | "react-dom": "^17.0.2", 13 | "react-router-dom": "^5.2.0", 14 | "react-scripts": "4.0.3", 15 | "web-vitals": "^1.0.1" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": [ 25 | "react-app", 26 | "react-app/jest" 27 | ] 28 | }, 29 | "browserslist": { 30 | "production": [ 31 | ">0.2%", 32 | "not dead", 33 | "not op_mini all" 34 | ], 35 | "development": [ 36 | "last 1 chrome version", 37 | "last 1 firefox version", 38 | "last 1 safari version" 39 | ] 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/Components/Banner/Banner.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './Banner.css'; 4 | import Arrow from '../../assets/Arrow' 5 | function Banner() { 6 | return ( 7 |
8 |
9 |
10 |
11 | ALL CATEGORIES 12 | 13 |
14 |
15 | Cars 16 | Motorcy... 17 | Mobile Ph... 18 | For Sale:Houses & Apart... 19 | Scoot... 20 | Commercial & Other Ve... 21 | For Rent: House & Apart... 22 |
23 |
24 |
25 | 29 |
30 |
31 | 32 |
33 | ); 34 | } 35 | 36 | export default Banner; 37 | -------------------------------------------------------------------------------- /src/Components/View/View.css: -------------------------------------------------------------------------------- 1 | .viewParentDiv { 2 | padding-top: 4em; 3 | display: flex; 4 | } 5 | .viewParentDiv .imageShowDiv { 6 | padding: 16px; 7 | width: 70vw; 8 | } 9 | .viewParentDiv .imageShowDiv img { 10 | width: 65vw; 11 | height: 85vh; 12 | } 13 | 14 | .viewParentDiv .rightSection { 15 | padding: 16px; 16 | margin-top: 3em; 17 | width: 30vw; 18 | } 19 | 20 | .viewParentDiv .rightSection .productDetails :first-child { 21 | font-weight: 700; 22 | margin-bottom: 8px; 23 | color: #002f34; 24 | font-size: 34px; 25 | line-height: 32px; 26 | margin-bottom: 20px; 27 | } 28 | 29 | .viewParentDiv .rightSection .productDetails { 30 | border: 1px solid black; 31 | padding: 6px; 32 | border-radius: 6px; 33 | margin-bottom: 2em; 34 | width: 100%; 35 | } 36 | 37 | .viewParentDiv .rightSection .contactDetails { 38 | border: 1px solid black; 39 | padding: 6px; 40 | border-radius: 6px; 41 | } 42 | 43 | .viewParentDiv .rightSection .contactDetails :first-child { 44 | font-size: 20px; 45 | line-height: 24px; 46 | font-weight: 700; 47 | color: #002f34; 48 | font-weight: 400; 49 | padding: 0; 50 | } 51 | -------------------------------------------------------------------------------- /assets/styles/components/View.css: -------------------------------------------------------------------------------- 1 | .viewParentDiv { 2 | padding-top: 4em; 3 | display: flex; 4 | } 5 | .viewParentDiv .imageShowDiv { 6 | padding: 16px; 7 | width: 70vw; 8 | } 9 | .viewParentDiv .imageShowDiv img { 10 | width: 65vw; 11 | height: 85vh; 12 | } 13 | 14 | .viewParentDiv .rightSection { 15 | padding: 16px; 16 | margin-top: 3em; 17 | width: 30vw; 18 | } 19 | 20 | .viewParentDiv .rightSection .productDetails :first-child { 21 | font-weight: 700; 22 | margin-bottom: 8px; 23 | color: #002f34; 24 | font-size: 34px; 25 | line-height: 32px; 26 | margin-bottom: 20px; 27 | } 28 | 29 | .viewParentDiv .rightSection .productDetails { 30 | border: 1px solid black; 31 | padding: 6px; 32 | border-radius: 6px; 33 | margin-bottom: 2em; 34 | width: 100%; 35 | } 36 | 37 | .viewParentDiv .rightSection .contactDetails { 38 | border: 1px solid black; 39 | padding: 6px; 40 | border-radius: 6px; 41 | } 42 | 43 | .viewParentDiv .rightSection .contactDetails :first-child { 44 | font-size: 20px; 45 | line-height: 24px; 46 | font-weight: 700; 47 | color: #002f34; 48 | font-weight: 400; 49 | padding: 0; 50 | } 51 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useContext } from 'react'; 2 | import { BrowserRouter as Router, Route } from 'react-router-dom' 3 | 4 | import Signup from './Pages/Signup' 5 | import Login from './Pages/Login' 6 | import Create from './Pages/Create' 7 | import View from './Pages/ViewPost' 8 | 9 | import './App.css'; 10 | 11 | /** 12 | * ? =====Import Components===== 13 | */ 14 | import Home from './Pages/Home'; 15 | import { AuthContext, FirebaseContext } from './store/Context'; 16 | import Post from './store/PostContext'; 17 | 18 | function App() { 19 | const { setUser } = useContext(AuthContext) 20 | const { firebase } = useContext(FirebaseContext) 21 | useEffect(() => { 22 | firebase.auth().onAuthStateChanged(user => { 23 | setUser(user) 24 | }) 25 | }) 26 | return ( 27 |
28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 |
48 | ); 49 | } 50 | 51 | export default App; 52 | -------------------------------------------------------------------------------- /src/Components/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import './Footer.css'; 4 | 5 | function Footer() { 6 | return ( 7 |
8 |
9 |
10 |
11 |

POPULAR LOCATIONS

12 |
13 |
14 |
    15 |
  • kolkata
    • 16 |
  • Mumbai
    • 17 |
  • Chennai
    • 18 |
  • Pune
    • 19 |
20 |
21 |
22 |
23 |
24 |

ABOUT US

25 |
26 |
27 |
    28 |
  • About OLX Group
    • 29 |
  • Careers
    • 30 |
  • Contact Us
    • 31 |
  • OLXPeople
    • 32 |
33 |
34 |
35 |
36 |
37 |

OLX

38 |
39 |
40 |
    41 |
  • Help
    • 42 |
  • Sitemap
    • 43 |
  • Legal & Privacy information
    • 44 |
45 |
46 |
47 |
48 |
49 |

Other Countries Pakistan - South Africa - Indonesia

50 |

Free Classifieds in India. © 2006-2021 OLX

51 |
52 |
53 | ); 54 | } 55 | 56 | export default Footer; 57 | -------------------------------------------------------------------------------- /src/Components/Posts/Post.css: -------------------------------------------------------------------------------- 1 | .moreView { 2 | margin: 16px 16px 24px; 3 | padding: 16px 16px 32px; 4 | background-color: #ebeeef; 5 | border-radius: 4px; 6 | } 7 | 8 | .heading { 9 | display: flex; 10 | justify-content: space-between; 11 | align-items: center; 12 | width: 100%; 13 | } 14 | .heading :first-child { 15 | font-size: 24px; 16 | color: #002f34; 17 | } 18 | 19 | .heading :last-child { 20 | font-size: 14px; 21 | color: #002f34; 22 | } 23 | 24 | .recommendations .cards { 25 | display: flex; 26 | } 27 | 28 | .moreView .cards { 29 | white-space: nowrap; 30 | overflow-x: scroll; 31 | overflow-y: hidden; 32 | } 33 | 34 | .card { 35 | margin-right: 15px; 36 | padding: 13px; 37 | max-width: 222px; 38 | width: 222px; 39 | height: 270px; 40 | display: inline-block; 41 | cursor: pointer; 42 | } 43 | 44 | .card .favorite { 45 | display: flex; 46 | justify-content: flex-end; 47 | align-items: center; 48 | } 49 | 50 | .card .image { 51 | display: flex; 52 | justify-content: center; 53 | align-items: center; 54 | } 55 | 56 | .card .image img { 57 | height: 100px; 58 | max-width: 100%; 59 | max-height: 100%; 60 | min-height: 100%; 61 | text-align: center; 62 | } 63 | .card .content .rate { 64 | margin-top: 10px; 65 | font-size: larger; 66 | font-weight: bold; 67 | } 68 | .card .content .kilometer { 69 | font-size: medium; 70 | } 71 | .card .content .name { 72 | font-size: small; 73 | } 74 | .card .date { 75 | display: flex; 76 | justify-content: flex-end; 77 | font-size: small; 78 | } 79 | 80 | .recommendations { 81 | margin: 16px 16px 24px; 82 | } 83 | 84 | .recommendations .heading span { 85 | font-size: 24px; 86 | color: #002f34; 87 | } 88 | -------------------------------------------------------------------------------- /assets/styles/components/Post.css: -------------------------------------------------------------------------------- 1 | .moreView { 2 | margin: 16px 16px 24px; 3 | padding: 16px 16px 32px; 4 | background-color: #ebeeef; 5 | border-radius: 4px; 6 | } 7 | 8 | .heading { 9 | display: flex; 10 | justify-content: space-between; 11 | align-items: center; 12 | width: 100%; 13 | } 14 | .heading :first-child { 15 | font-size: 24px; 16 | color: #002f34; 17 | } 18 | 19 | .heading :last-child { 20 | font-size: 14px; 21 | color: #002f34; 22 | } 23 | 24 | .recommendations .cards { 25 | display: flex; 26 | } 27 | 28 | .moreView .cards { 29 | white-space: nowrap; 30 | overflow-x: scroll; 31 | overflow-y: hidden; 32 | } 33 | 34 | .card { 35 | margin-right: 15px; 36 | padding: 13px; 37 | max-width: 222px; 38 | width: 222px; 39 | height: 270px; 40 | display: inline-block; 41 | cursor: pointer; 42 | } 43 | 44 | .card .favorite { 45 | display: flex; 46 | justify-content: flex-end; 47 | align-items: center; 48 | } 49 | 50 | .card .image { 51 | display: flex; 52 | justify-content: center; 53 | align-items: center; 54 | } 55 | 56 | .card .image img { 57 | height: 100px; 58 | max-width: 100%; 59 | max-height: 100%; 60 | min-height: 100%; 61 | text-align: center; 62 | } 63 | .card .content .rate { 64 | margin-top: 10px; 65 | font-size: larger; 66 | font-weight: bold; 67 | } 68 | .card .content .kilometer { 69 | font-size: medium; 70 | } 71 | .card .content .name { 72 | font-size: small; 73 | } 74 | .card .date { 75 | display: flex; 76 | justify-content: flex-end; 77 | font-size: small; 78 | } 79 | 80 | .recommendations { 81 | margin: 16px 16px 24px; 82 | } 83 | 84 | .recommendations .heading span { 85 | font-size: 24px; 86 | color: #002f34; 87 | } 88 | -------------------------------------------------------------------------------- /src/Components/View/View.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState, useContext } from 'react'; 2 | import { FirebaseContext } from '../../store/Context'; 3 | import { PostContext } from '../../store/PostContext' 4 | 5 | import './View.css'; 6 | function View() { 7 | const [userDetails, setUserDetails] = useState({}) 8 | const { postDetails } = useContext(PostContext) 9 | const { firebase } = useContext(FirebaseContext) 10 | useEffect(() => { 11 | console.log(postDetails); 12 | const { owner } = postDetails 13 | console.log(owner,'W4lSx83v9LONVsFi5VkZy6rstJf1'); 14 | firebase.firestore().collection('users').where('id', '==', owner ).get().then((response) => { 15 | console.log(response); 16 | response.forEach(doc => { 17 | setUserDetails(doc.data()) 18 | console.log(doc.data() 19 | ) 20 | }) 21 | }) 22 | }, [postDetails, firebase]) 23 | useEffect(() => { 24 | console.log(userDetails) 25 | } 26 | , [userDetails]); 27 | return ( 28 |
29 |
30 | 34 |
35 |
36 |
37 |

₹ {postDetails.price}

38 | {postDetails.name} 39 |

{postDetails.category}

40 | {postDetails.createdAt} 41 |
42 | {userDetails &&
43 |

Seller details

44 |

{userDetails.username}

45 |

{userDetails.phone}

46 |
} 47 | 48 |
49 |
50 | ); 51 | } 52 | export default View; 53 | -------------------------------------------------------------------------------- /src/assets/SellButton.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default function SellButton() { 4 | return( 10 | 11 | 15 | 19 | 23 | 27 | 28 | ) 29 | } -------------------------------------------------------------------------------- /src/Components/Login/Login.js: -------------------------------------------------------------------------------- 1 | import React,{useState,useContext} from 'react'; 2 | import {FirebaseContext} from '../../store/Context'; 3 | 4 | import Logo from '../../olx-logo.png'; 5 | import './Login.css'; 6 | import { useHistory } from 'react-router-dom'; 7 | 8 | function Login() { 9 | const [email, setEmail] = useState(''); 10 | const [password, setPassword] = useState(''); 11 | const {firebase} = useContext(FirebaseContext) 12 | const history = useHistory(); 13 | const handleLogin = (e) => { 14 | e.preventDefault(); 15 | firebase.auth().signInWithEmailAndPassword(email, password).then((result)=>{ 16 | history.push('/') 17 | }).catch((error)=>{ 18 | alert(error.message) 19 | }) 20 | } 21 | return ( 22 |
23 |
24 | Logo 25 |
26 | 27 |
28 | setEmail(e.target.value)} 33 | id="fname" 34 | name="email" 35 | defaultValue="John" 36 | /> 37 |
38 | 39 |
40 | setPassword(e.target.value)} 45 | id="lname" 46 | name="password" 47 | defaultValue="Doe" 48 | /> 49 |
50 |
51 | 52 |
53 |

{ 54 | history.push('/signup') 55 | }}>Signup

56 |
57 |
58 | ); 59 | } 60 | 61 | export default Login; 62 | -------------------------------------------------------------------------------- /src/Components/Header/Header.js: -------------------------------------------------------------------------------- 1 | import React,{useContext} from 'react'; 2 | import { useHistory } from 'react-router-dom'; 3 | 4 | import {AuthContext, FirebaseContext} from '../../store/Context'; 5 | 6 | import './Header.css'; 7 | import OlxLogo from '../../assets/OlxLogo'; 8 | import Search from '../../assets/Search'; 9 | import Arrow from '../../assets/Arrow'; 10 | import SellButton from '../../assets/SellButton'; 11 | import SellButtonPlus from '../../assets/SellButtonPlus'; 12 | function Header() { 13 | const history = useHistory(); 14 | const {user} = useContext(AuthContext) 15 | const {firebase} = useContext(FirebaseContext) 16 | return ( 17 |
18 |
19 |
{ 21 | history.push('/') 22 | } 23 | } className="brandName"> 24 | 25 |
26 |
27 | 28 | 29 | 30 |
31 |
32 |
33 | 37 |
38 |
39 | 40 |
41 |
42 |
43 | ENGLISH 44 | 45 |
46 |
47 | { 48 | history.push('/login') 49 | }}>{user ? user.displayName : 'Login'} 50 |
51 |
52 | {user && { 53 | firebase.auth().signOut(); 54 | history.push('/login') 55 | }}>Logout} 56 | 57 |
58 | 59 |
{ 60 | history.push('/create') 61 | }} className="sellMenuContent"> 62 | 63 | SELL 64 |
65 |
66 |
67 |
68 | ); 69 | } 70 | 71 | export default Header; 72 | -------------------------------------------------------------------------------- /src/Components/Signup/Signup.js: -------------------------------------------------------------------------------- 1 | import React,{useState,useContext} from 'react'; 2 | 3 | 4 | import Logo from '../../olx-logo.png'; 5 | import { FirebaseContext } from '../../store/Context'; 6 | import { useHistory } from 'react-router-dom'; 7 | import './Signup.css'; 8 | 9 | export default function Signup() { 10 | const history = useHistory(); 11 | const [userName,setUserName] = useState(''); 12 | const [email,setEmail] = useState(''); 13 | const [phone,setPhone] = useState(''); 14 | const [password,setPassword] = useState(''); 15 | 16 | const {firebase} = useContext(FirebaseContext); 17 | 18 | const handleSubmit = (e) => { 19 | e.preventDefault(); 20 | firebase.auth().createUserWithEmailAndPassword(email, password).then((result)=>{ 21 | result.user.updateProfile({displayName:userName}).then(()=>{ 22 | firebase.firestore().collection('users').add({ 23 | id:result.user.uid, 24 | username:userName, 25 | phone:phone 26 | }).then(()=>{ 27 | history.push('/login') 28 | }) 29 | }) 30 | }) 31 | } 32 | 33 | return ( 34 |
35 |
36 | Logo 37 |
38 | 39 |
40 | setUserName(e.target.value)} 45 | id="fname" 46 | name="name" 47 | defaultValue="John" 48 | /> 49 |
50 | 51 |
52 | setEmail(e.target.value)} 57 | id="fname" 58 | name="email" 59 | defaultValue="John" 60 | /> 61 |
62 | 63 |
64 | setPhone(e.target.value)} 69 | id="lname" 70 | name="phone" 71 | defaultValue="Doe" 72 | /> 73 |
74 | 75 |
76 | setPassword(e.target.value)} 81 | id="lname" 82 | name="password" 83 | defaultValue="Doe" 84 | /> 85 |
86 |
87 | 88 |
89 | Login 90 |
91 |
92 | ); 93 | } 94 | -------------------------------------------------------------------------------- /src/Components/Create/Create.js: -------------------------------------------------------------------------------- 1 | import React,{ useContext,useState,Fragment } from 'react'; 2 | import './Create.css'; 3 | import Header from '../Header/Header'; 4 | import {useHistory} from 'react-router-dom'; 5 | import {FirebaseContext,AuthContext} from '../../store/Context' 6 | 7 | const Create = () => { 8 | const {firebase} = useContext(FirebaseContext) 9 | const {user} = useContext(AuthContext) 10 | const history = useHistory() 11 | const [name,setName] = useState(''); 12 | const [category,setCategory] = useState(''); 13 | const [price,setPrice] = useState(''); 14 | const [image,setImage] = useState(null); 15 | const date = new Date(); 16 | const handleSubmit = (e)=>{ 17 | e.preventDefault(); 18 | firebase.storage().ref(`/images/${image.name}`).put(image).then(({ref})=>{ 19 | ref.getDownloadURL().then((url)=>{ 20 | console.log(url) 21 | firebase.firestore().collection('products').add({ 22 | name, 23 | category, 24 | price, 25 | image:url, 26 | owner:user.uid, 27 | createdAt:date.toDateString() 28 | }) 29 | history.push('/') 30 | }) 31 | }) 32 | } 33 | 34 | return ( 35 | 36 |
37 | 38 |
39 |
40 | 41 |
42 | setName(e.target.value)} 47 | id="fname" 48 | name="Name" 49 | defaultValue="John" 50 | /> 51 |
52 | 53 |
54 | setCategory(e.target.value)} 59 | id="fname" 60 | name="category" 61 | defaultValue="John" 62 | /> 63 |
64 | 65 |
66 | setPrice(e.target.value)} id="fname" name="Price" /> 67 |
68 |
69 |
70 | Posts 71 |
72 |
73 | { 74 | setImage(e.target.files[0]) 75 | }} type="file" /> 76 |
77 | 78 |
79 |
80 | 81 | 82 | ); 83 | }; 84 | 85 | export default Create; 86 | -------------------------------------------------------------------------------- /src/Components/Posts/Posts.js: -------------------------------------------------------------------------------- 1 | import React,{useState,useEffect,useContext} from 'react'; 2 | import { useHistory } from 'react-router-dom'; 3 | 4 | import Heart from '../../assets/Heart'; 5 | import {FirebaseContext} from '../../store/Context' 6 | import {PostContext} from '../../store/PostContext' 7 | import './Post.css'; 8 | 9 | function Posts() { 10 | const history = useHistory(); 11 | const {firebase} = useContext(FirebaseContext); 12 | const {setPostDetails} = useContext(PostContext) 13 | const [products,setProducts] = useState([]) 14 | useEffect(() => { 15 | firebase.firestore().collection('products').get().then((snapshot) => { 16 | const allPost = snapshot.docs.map((product) => { 17 | return { 18 | id:product.id, 19 | ...product.data() 20 | } 21 | }) 22 | setProducts(allPost) 23 | }) 24 | },[]) 25 | return ( 26 |
27 |
28 |
29 | Quick Menu 30 | View more 31 |
32 |
33 | 34 | {products.map(product => { 35 | 36 | return
{ 39 | setPostDetails(product) 40 | history.push('/view') 41 | }} 42 | > 43 |
44 | 45 |
46 |
47 | Not found 48 |
49 |
50 |

₹ {product.price}

51 | {product.category} 52 |

{product.name}

53 |
54 |
55 | {product.createdAt} 56 |
57 |
58 | 59 | })} 60 | 61 | 62 |
63 |
64 |
65 |
66 | Fresh recommendations 67 |
68 |
69 |
70 |
71 | 72 |
73 |
74 | 75 |
76 |
77 |

₹ 250000

78 | Two Wheeler 79 |

YAMAHA R15V3

80 |
81 |
82 | 10/5/2021 83 |
84 |
85 |
86 |
87 |
88 | ); 89 | } 90 | 91 | export default Posts; 92 | -------------------------------------------------------------------------------- /assets/styles/components/Header.css: -------------------------------------------------------------------------------- 1 | .headerParentDiv { 2 | padding: 10px 16px; 3 | background-color: whitesmoke; 4 | position: fixed; 5 | width: 100%; 6 | z-index: 999; 7 | } 8 | 9 | .headerChildDiv { 10 | width: 100%; 11 | display: flex; 12 | justify-content: space-between; 13 | align-items: center; 14 | } 15 | 16 | .placeSearch { 17 | width: 17em; 18 | height: 48px; 19 | display: flex; 20 | align-items: center; 21 | padding: 0 8px; 22 | border: 2px solid #002f34; 23 | border-radius: 4px; 24 | background-color: white; 25 | } 26 | 27 | .placeSearch ::selection { 28 | border-color: #23e5db; 29 | outline-color: #23e5db; 30 | } 31 | 32 | .placeSearch input { 33 | border-color: transparent; 34 | outline-color: transparent; 35 | } 36 | 37 | .productSearch { 38 | width: 35em; 39 | height: 48px; 40 | border: 2px solid #002f34; 41 | border-radius: 4px; 42 | display: flex; 43 | align-items: center; 44 | background-color: white; 45 | display: flex; 46 | align-items: center; 47 | justify-content: space-between; 48 | } 49 | 50 | .productSearch .input { 51 | width: 100%; 52 | height: 100%; 53 | display: flex; 54 | } 55 | 56 | .productSearch .input input { 57 | border-color: transparent; 58 | outline-color: transparent; 59 | width: 100%; 60 | align-items: center; 61 | } 62 | 63 | .productSearch .searchAction { 64 | min-width: 48px; 65 | height: 48px; 66 | position: relative; 67 | display: flex; 68 | cursor: pointer; 69 | background-color: #002f34; 70 | border-radius: 0 4px 4px 0; 71 | } 72 | 73 | .productSearch .searchAction svg { 74 | position: absolute; 75 | top: 50%; 76 | left: 50%; 77 | transform: translate(-50%, -50%); 78 | fill: white; 79 | } 80 | 81 | .language { 82 | height: 48px; 83 | display: flex; 84 | align-items: center; 85 | } 86 | 87 | .language span { 88 | /* justify-content: space-between; 89 | align-items: center; */ 90 | font-size: 15px; 91 | white-space: normal; 92 | text-overflow: ellipsis; 93 | font-weight: bolder; 94 | margin-right: 5px; 95 | } 96 | 97 | .language svg { 98 | } 99 | 100 | .loginPage span { 101 | text-decoration: none; 102 | font-size: 16px; 103 | white-space: normal; 104 | text-overflow: ellipsis; 105 | font-weight: bolder; 106 | margin-right: 5px; 107 | } 108 | 109 | .loginPage hr { 110 | margin: 0; 111 | background-color: black; 112 | height: 2px; 113 | } 114 | 115 | .sellMenu { 116 | position: relative; 117 | cursor: pointer; 118 | } 119 | 120 | .sellMenu .all { 121 | fill: white; 122 | } 123 | 124 | .sellMenu .top { 125 | fill: #23e5db; 126 | } 127 | 128 | .sellMenu .left { 129 | fill: #ffce32; 130 | } 131 | 132 | .sellMenu .right { 133 | fill: #3a77ff; 134 | } 135 | .sellMenu .sellMenuContent { 136 | display: flex; 137 | position: absolute; 138 | top: 50%; 139 | left: 50%; 140 | transform: translate(-50%, -50%); 141 | font-size: 14px; 142 | font-weight: 700; 143 | letter-spacing: 0.5px; 144 | color: #002f34; 145 | } 146 | 147 | /* .sellMenu .sellMenuContent svg { 148 | align-items: center; 149 | } */ 150 | .sellMenu .sellMenuContent span { 151 | margin-left: 5px; 152 | } 153 | 154 | @media only screen and (max-width: 700px) { 155 | .placeSearch, 156 | .productSearch { 157 | display: none; 158 | } 159 | } 160 | -------------------------------------------------------------------------------- /src/Components/Header/Header.css: -------------------------------------------------------------------------------- 1 | .headerParentDiv { 2 | padding: 10px; 3 | background-color: whitesmoke; 4 | position: fixed; 5 | width: 100vw; 6 | z-index: 999; 7 | } 8 | 9 | .headerChildDiv { 10 | width: 100%; 11 | display: flex; 12 | justify-content: space-between; 13 | align-items: center; 14 | } 15 | 16 | .placeSearch { 17 | width: 16em; 18 | height: 48px; 19 | display: flex; 20 | align-items: center; 21 | padding: 0 8px; 22 | border: 2px solid #002f34; 23 | border-radius: 4px; 24 | background-color: white; 25 | } 26 | 27 | .placeSearch ::selection { 28 | border-color: #23e5db; 29 | outline-color: #23e5db; 30 | } 31 | 32 | .placeSearch input { 33 | border-color: transparent; 34 | outline-color: transparent; 35 | } 36 | 37 | .productSearch { 38 | width: 35em; 39 | height: 48px; 40 | border: 2px solid #002f34; 41 | border-radius: 4px; 42 | display: flex; 43 | align-items: center; 44 | background-color: white; 45 | display: flex; 46 | align-items: center; 47 | justify-content: space-between; 48 | } 49 | 50 | .productSearch .input { 51 | width: 100%; 52 | height: 100%; 53 | display: flex; 54 | } 55 | 56 | .productSearch .input input { 57 | border-color: transparent; 58 | outline-color: transparent; 59 | width: 100%; 60 | align-items: center; 61 | } 62 | 63 | .productSearch .searchAction { 64 | min-width: 48px; 65 | height: 48px; 66 | position: relative; 67 | display: flex; 68 | cursor: pointer; 69 | background-color: #002f34; 70 | border-radius: 0 4px 4px 0; 71 | } 72 | 73 | .productSearch .searchAction svg { 74 | position: absolute; 75 | top: 50%; 76 | left: 50%; 77 | transform: translate(-50%, -50%); 78 | fill: white; 79 | } 80 | 81 | .language { 82 | height: 48px; 83 | display: flex; 84 | align-items: center; 85 | } 86 | 87 | .language span { 88 | /* justify-content: space-between; 89 | align-items: center; */ 90 | font-size: 15px; 91 | white-space: normal; 92 | text-overflow: ellipsis; 93 | font-weight: bolder; 94 | margin-right: 5px; 95 | } 96 | 97 | .language svg { 98 | } 99 | 100 | .span { 101 | text-decoration: none; 102 | font-size: 16px; 103 | white-space: normal; 104 | text-overflow: ellipsis; 105 | font-weight: bolder; 106 | margin-right: 5px; 107 | } 108 | 109 | .loginPage hr { 110 | margin: 0; 111 | background-color: black; 112 | height: 2px; 113 | } 114 | 115 | .loginPage a{ 116 | text-decoration: none; 117 | } 118 | 119 | .sellMenu { 120 | position: relative; 121 | cursor: pointer; 122 | } 123 | 124 | .sellMenu .all { 125 | fill: white; 126 | } 127 | 128 | .sellMenu .top { 129 | fill: #23e5db; 130 | } 131 | 132 | .sellMenu .left { 133 | fill: #ffce32; 134 | } 135 | 136 | .sellMenu .right { 137 | fill: #3a77ff; 138 | } 139 | .sellMenu .sellMenuContent { 140 | display: flex; 141 | position: absolute; 142 | top: 50%; 143 | left: 50%; 144 | transform: translate(-50%, -50%); 145 | font-size: 14px; 146 | font-weight: 700; 147 | letter-spacing: 0.5px; 148 | color: #002f34; 149 | } 150 | 151 | /* .sellMenu .sellMenuContent svg { 152 | align-items: center; 153 | } */ 154 | .sellMenu .sellMenuContent span { 155 | margin-left: 5px; 156 | } 157 | 158 | @media only screen and (max-width: 700px) { 159 | .placeSearch, 160 | .productSearch, 161 | .sellMenu { 162 | display: none; 163 | } 164 | } -------------------------------------------------------------------------------- /assets/images/olx-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 20 | 22 | 23 | 25 | image/svg+xml 26 | 28 | 29 | 30 | 31 | 32 | 34 | 54 | 61 | 66 | 71 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /assets/images/svg/svg.js: -------------------------------------------------------------------------------- 1 | /** 2 | * ? olx-logo.svg ----- login page signup page 3 | */ 4 | 5 | /** 6 | * ! olx brand name header-component 7 | 8 | 9 | 17 | 21 | ; 22 | 23 | */ 24 | 25 | 26 | /** 27 | * ! search icon header-component 28 | 29 | 37 | 41 | ; 42 | 43 | */ 44 | 45 | 46 | /** 47 | * ! arrow-down header-component 48 | 49 | 57 | 61 | 62 | 63 | */ 64 | 65 | 66 | /** 67 | * ! sell-icon header-component 68 | 69 | 75 | 76 | 80 | 84 | 88 | 92 | 93 | 94 | 95 | */ 96 | 97 | 98 | /** 99 | * ! plus-icon header-component 100 | 101 | 109 | 113 | 114 | 115 | */ 116 | 117 | /** 118 | * ! favorite-icon post components 119 | 120 | 128 | 132 | 133 | 134 | */ 135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Olx 11 | 17 | 22 | 27 | 28 | 29 | 30 |
31 | 32 | 37 | 42 | 43 | 44 | --------------------------------------------------------------------------------