├── src ├── App.css ├── components │ ├── Main.js │ ├── Home.js │ ├── HomeDisplay.js │ ├── HomeSearch.js │ ├── HomePageThree.js │ ├── Rightside.js │ ├── Login.js │ ├── Leftside.js │ └── Header.js ├── reportWebVitals.js ├── index.js ├── index.css └── App.js ├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── images │ ├── page3.png │ ├── page6.jpeg │ ├── linkedin.png │ ├── right-icon.svg │ ├── down-icon.svg │ ├── plus-icon.svg │ ├── nav-work.svg │ ├── nav-jobs.svg │ ├── nav-home.svg │ ├── card-bg.svg │ ├── widget-icon.svg │ ├── nav-notifications.svg │ ├── nav-network.svg │ ├── search-icon.svg │ ├── home-logo.svg │ ├── user.svg │ ├── google.svg │ ├── photo.svg │ ├── nav-messaging.svg │ ├── login-logo.svg │ ├── page5.svg │ ├── page4.svg │ └── login-hero.svg ├── manifest.json └── index.html ├── README.md ├── .gitignore └── package.json /src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahendrasaikumargandham/LinkedIn-Clone/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahendrasaikumargandham/LinkedIn-Clone/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahendrasaikumargandham/LinkedIn-Clone/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/images/page3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahendrasaikumargandham/LinkedIn-Clone/HEAD/public/images/page3.png -------------------------------------------------------------------------------- /public/images/page6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahendrasaikumargandham/LinkedIn-Clone/HEAD/public/images/page6.jpeg -------------------------------------------------------------------------------- /public/images/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahendrasaikumargandham/LinkedIn-Clone/HEAD/public/images/linkedin.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

Linkedin Clone

2 | Fork the project and read the documentation for clear understanding of the source code. 3 |

Made with: React Styled Components📄

4 |

Click Here for Live Demo 🚀

5 | -------------------------------------------------------------------------------- /src/components/Main.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | const Main = (props) => { 4 | return ( 5 |

Main

 6 | ); 7 | } 8 | 9 | const Container = styled.div` 10 | grid-area: main; 11 | `; 12 | 13 | export default Main; -------------------------------------------------------------------------------- /public/images/right-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /public/images/down-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /public/images/plus-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/images/nav-work.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /public/images/nav-jobs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/nav-home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/images/card-bg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/images/widget-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.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/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /public/images/nav-notifications.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /public/images/nav-network.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /public/images/search-icon.svg: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/images/home-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/images/user.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | LinkedIn: Log In or Sign Up 15 | 16 | 17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /public/images/google.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | background: #f5f5f5; 3 | box-sizing: border-box; 4 | margin: 0; 5 | padding: 0; 6 | border: 0; 7 | outline: none; 8 | font-size: 100%; 9 | vertical-align: baseline; 10 | background-color: transparent; 11 | } 12 | 13 | body { 14 | margin: 0; 15 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 16 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 17 | sans-serif; 18 | -webkit-font-smoothing: antialiased; 19 | -moz-osx-font-smoothing: grayscale; 20 | overflow-x: hidden; 21 | overflow-y: scroll; 22 | } 23 | 24 | code { 25 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 26 | monospace; 27 | } 28 | 29 | @media (max-width: 970px) { 30 | * { 31 | overflow-x: hidden; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import Login from "./components/Login"; 3 | import Home from "./components/Home"; 4 | import HomeSearch from "./components/HomeSearch"; 5 | import HomeDisplay from "./components/HomeDisplay"; 6 | import HomePageThree from "./components/HomePageThree"; 7 | import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; 8 | import Header from './components/Header'; 9 | function App() { 10 | return ( 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 |
27 | ); 28 | } 29 | 30 | export default App; 31 | -------------------------------------------------------------------------------- /public/images/photo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "linkedin-clone", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-router-dom": "^5.3.0", 12 | "react-scripts": "4.0.3", 13 | "styled-components": "^5.3.3", 14 | "web-vitals": "^1.1.2" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test", 20 | "eject": "react-scripts eject" 21 | }, 22 | "eslintConfig": { 23 | "extends": [ 24 | "react-app", 25 | "react-app/jest" 26 | ] 27 | }, 28 | "browserslist": { 29 | "production": [ 30 | ">0.2%", 31 | "not dead", 32 | "not op_mini all" 33 | ], 34 | "development": [ 35 | "last 1 chrome version", 36 | "last 1 firefox version", 37 | "last 1 safari version" 38 | ] 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/components/Home.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import Leftside from "./Leftside"; 3 | import Main from "./Main"; 4 | import Rightside from "./Rightside"; 5 | 6 | const Home = (props) => { 7 | return ( 8 | 9 |
10 |
11 | Hiring in a hurry? - 12 |
13 |

14 | Find talented pros in record time with Upwork and keep business 15 | moving. 16 |

17 |
18 | 19 | 20 |
21 | 22 | 23 | 24 | ); 25 | }; 26 | 27 | const Container = styled.div` 28 | background-color: #f5f5f5; 29 | padding-top: 100px; 30 | max-width: 100%; 31 | `; 32 | 33 | const Section = styled.section` 34 | min-height: 50px; 35 | padding: 16px 0; 36 | box-sizing: content-box; 37 | text-align: center; 38 | text-decoration: underline; 39 | display: flex; 40 | justify-content: center; 41 | h5 { 42 | color: #0a66c2; 43 | font-size: 14px; 44 | a { 45 | font-weight: 700; 46 | } 47 | } 48 | p { 49 | font-size: 14px; 50 | color: #434649; 51 | font-weight: 600; 52 | } 53 | @media (max-width: 768px) { 54 | flex-direction: column; 55 | padding: 0 5px; 56 | } 57 | `; 58 | 59 | const Layout = styled.div` 60 | display: grid; 61 | grid-template-areas: "leftside main rightside"; 62 | grid-template-columns: minmax(0, 5fr) minmax(0, 12fr) minmax(300px, 7fr); 63 | column-gap: 25px; 64 | row-gap: 25px; 65 | margin: 25px 0; 66 | @media (max-width: 768px) { 67 | display: flex; 68 | flex-direction: column; 69 | padding: 0 5px; 70 | } 71 | `; 72 | 73 | export default Home; -------------------------------------------------------------------------------- /public/images/nav-messaging.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/components/HomeDisplay.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | const HomeDisplay = (props) => { 4 | return ( 5 | 6 | 7 | 8 | 9 | 10 |

Let the right people know you’re open to work

11 |

With the Open To Work feature, you can privately tell recruiters or publicly share with the LinkedIn community that you are looking for new job opportunities

12 | 13 | 14 | ); 15 | } 16 | 17 | const Component = styled.div` 18 | margin-top: 10%; 19 | margin-left: 3%; 20 | flex-wrap: nowrap; 21 | align-items: center; 22 | position: relative; 23 | justify-content: space-between; 24 | display: inline-block; 25 | `; 26 | 27 | const DisplayLeft = styled.div` 28 | display: inline-block; 29 | justify-content: space-between; 30 | width: 60%; 31 | visibility: hidden; 32 | h1 { 33 | font-size: 50px; 34 | font-weight: 500; 35 | color: #2977c9; 36 | } 37 | p { 38 | margin-top: 10px; 39 | font-size: 30px; 40 | font-weight: 300; 41 | } 42 | @media (max-width: 768px) { 43 | margin-top: 15%; 44 | width: 95%; 45 | margin-left: 10px; 46 | h1 { 47 | font-size: 30px; 48 | } 49 | p { 50 | font-size: 20px; 51 | } 52 | visibility: visible; 53 | } 54 | `; 55 | 56 | const DisplayRight = styled.div` 57 | img { 58 | top: -300px; 59 | width: 400px; 60 | height: 400px; 61 | position: relative; 62 | bottom: -2px; 63 | right: -800px; 64 | visibility: hidden; 65 | @media (max-width: 768px) { 66 | top: 60px; 67 | margin-top: 10%; 68 | margin-left: 15px; 69 | width: 90%; 70 | position: initial; 71 | height: initial; 72 | margin-bottom: 0; 73 | visibility: visible; 74 | } 75 | } 76 | `; 77 | 78 | export default HomeDisplay; -------------------------------------------------------------------------------- /src/components/HomeSearch.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | const HomeSearch = (props) => { 4 | return ( 5 | 6 | 7 |

Find the right job or internship for you

8 |

Suggested Seaches

9 | Engineering 10 | Bussiness Development 11 | Finance 12 | Administrative Assistant 13 | Retail Associate 14 | Customer Service 15 | Operations 16 | Information Technology 17 | Marketing 18 | Human Resources 19 | Healthcare Services 20 | Sales 21 | Program and Project Management 22 | Accounting 23 | Arts and Design 24 | Community and Social Services 25 | Consulting 26 | Education 27 | Administrative 28 | 29 | 30 | ); 31 | } 32 | 33 | const Container = styled.div` 34 | padding: 0; 35 | margin: 0; 36 | margin-left: 15px; 37 | width: 90%; 38 | `; 39 | 40 | const Heading = styled.div` 41 | h1 { 42 | font-size: 50px; 43 | font-weight: 400; 44 | color: rgba(0,0,0,0.8); 45 | margin: 15px; 46 | width: 90%; 47 | @media(max-width: 768px) { 48 | font-size: 30px; 49 | font-weight: 700; 50 | } 51 | } 52 | p { 53 | text-transform: uppercase; 54 | margin-top: 20px; 55 | margin-left: 15px; 56 | color: rgba(0,0,0,0.6); 57 | font-size: 18px; 58 | font-weight: 700; 59 | } 60 | span { 61 | position: relative; 62 | display: inline-block; 63 | background-color: lightgray; 64 | margin: 10px; 65 | padding: 15px 25px; 66 | font-size: 20px; 67 | font-weight: 700; 68 | border-radius: 999px; 69 | color: rgba(0,0,0,0.6); 70 | @media (max-width: 768px) { 71 | padding: 14px 20px; 72 | margin: 5px; 73 | } 74 | &:hover { 75 | text-decoration: underline; 76 | background: rgba(0,0,0,0.3); 77 | } 78 | } 79 | `; 80 | 81 | export default HomeSearch; -------------------------------------------------------------------------------- /public/images/login-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/HomePageThree.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | const HomePageThree = (props) => { 4 | return ( 5 | 6 | 7 | 8 | Connect with people who can help 9 | Find people you know 10 | 11 | 12 | 13 | Learn the skills you need to succeed 14 | Choose a topic to learn about 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | } 22 | 23 | const Component = styled.div` 24 | padding: 0; 25 | margin-top: 10%; 26 | justify-content: space-between; 27 | `; 28 | 29 | const PageLeft = styled.div` 30 | img { 31 | width: 300px; 32 | height: 300px; 33 | position: relative; 34 | visibility: hidden; 35 | @media (max-width: 768px) { 36 | top: 260px; 37 | margin-top: 10%; 38 | margin-left: 15px; 39 | width: 90%; 40 | position: initial; 41 | height: initial; 42 | margin-bottom: 0; 43 | visibility: visible; 44 | } 45 | } 46 | 47 | `; 48 | const PageRight = styled.div` 49 | img { 50 | visibility: hidden; 51 | @media (max-width: 768px) { 52 | top: 260px; 53 | margin-top: 10%; 54 | margin-left: 15px; 55 | width: 90%; 56 | position: initial; 57 | height: initial; 58 | margin-bottom: 0; 59 | visibility: visible; 60 | } 61 | } 62 | `; 63 | 64 | const Height = styled.div` 65 | visibility: hidden; 66 | @media(max-width: 768px) { 67 | font-size: 30px; 68 | margin-left: 20px; 69 | margin-top: 5%; 70 | visibility: visible; 71 | } 72 | `; 73 | 74 | const ButtonTop = styled.button` 75 | visibility: hidden; 76 | @media(max-width: 768px) { 77 | border: 2px solid rgba(0,0,0,0.6); 78 | margin-left: 10%; 79 | padding: 15px 20px; 80 | border-radius: 999px; 81 | margin-top: 5%; 82 | font-size: 20px; 83 | color: rgba(0,0,0,0.6); 84 | font-weight: 700; 85 | cursor: pointer; 86 | visibility: visible; 87 | } 88 | `; 89 | 90 | const ButtonBottom = styled.button` 91 | visibility: hidden; 92 | @media(max-width: 768px) { 93 | border: 2px solid rgba(0,0,0,0.6); 94 | margin-left: 5%; 95 | padding: 15px 20px; 96 | border-radius: 999px; 97 | margin-top: 5%; 98 | font-size: 20px; 99 | color: rgba(0,0,0,0.6); 100 | font-weight: 700; 101 | cursor: pointer; 102 | width: 90%; 103 | visibility: visible; 104 | } 105 | `; 106 | 107 | const PageBottom = styled.div` 108 | visibility: hidden; 109 | @media(max-width: 768px) { 110 | visibility: visible; 111 | } 112 | `; 113 | 114 | export default HomePageThree; -------------------------------------------------------------------------------- /src/components/Rightside.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | const Rightside = (props) => { 4 | return ( 5 | 6 | 7 | 8 | <h2>Add to your feed</h2> 9 | <img src="/images/feed-icon.svg" alt="" /> 10 | 11 | 12 | 13 |
  • 14 | 15 | 16 | 17 |
    18 | #Linkedin 19 | 20 |
    21 |
    • 22 |
  • 23 | 24 | 25 | 26 |
    27 | #Video 28 | 29 |
    30 |
    • 31 |     32 | 33 | 34 | View all recommendations 35 | 36 | 37 |     38 | 39 | 43 | 44 |     45 | ); 46 | }; 47 | 48 | const Container = styled.div` 49 | grid-area: rightside; 50 | `; 51 | 52 | const FollowCard = styled.div` 53 | text-align: center; 54 | overflow: hidden; 55 | margin-bottom: 8px; 56 | background-color: #fff; 57 | border-radius: 5px; 58 | position: relative; 59 | border: none; 60 | box-shadow: 0 0 0 1px rgb(0 0 0 / 15%), 0 0 0 rgb(0 0 0 / 20%); 61 | padding: 12px; 62 | `; 63 | 64 | const Title = styled.div` 65 | display: inline-flex; 66 | align-items: center; 67 | justify-content: space-between; 68 | font-size: 16px; 69 | width: 100%; 70 | color: rgba(0, 0, 0, 0.6); 71 | `; 72 | 73 | const FeedList = styled.ul` 74 | margin-top: 16px; 75 | li { 76 | display: flex; 77 | align-items: center; 78 | margin: 12px 0; 79 | position: relative; 80 | font-size: 14px; 81 | & > div { 82 | display: flex; 83 | flex-direction: column; 84 | } 85 | 86 | button { 87 | background-color: transparent; 88 | color: rgba(0, 0, 0, 0.6); 89 | box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); 90 | padding: 16px; 91 | align-items: center; 92 | border-radius: 15px; 93 | box-sizing: border-box; 94 | font-weight: 600; 95 | display: inline-flex; 96 | justify-content: center; 97 | max-height: 32px; 98 | max-width: 480px; 99 | text-align: center; 100 | outline: none; 101 | } 102 | } 103 | `; 104 | 105 | const Avatar = styled.div` 106 | background-image: url("https://static-exp1.licdn.com/sc/h/1b4vl1r54ijmrmcyxzoidwmxs"); 107 | background-size: contain; 108 | background-position: center; 109 | background-repeat: no-repeat; 110 | width: 48px; 111 | height: 48px; 112 | margin-right: 8px; 113 | `; 114 | 115 | const Recommendation = styled.a` 116 | color: #0a66c2; 117 | display: flex; 118 | align-items: center; 119 | font-size: 14px; 120 | `; 121 | 122 | const BannerCard = styled(FollowCard)` 123 | img { 124 | width: 100%; 125 | height: 100%; 126 | } 127 | `; 128 | 129 | export default Rightside; -------------------------------------------------------------------------------- /public/images/page5.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/Login.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | const Login = (props) => { 4 | return ( 5 | 6 | 15 |
    16 | 17 |

    Welcome to your professional community

    18 |     19 |
    20 | 21 | 22 | Sign in with Google 23 | 24 |
    25 | 26 | 27 | 28 |
    29 |     30 | ); 31 | }; 32 | 33 | const Container = styled.div` 34 | padding: 0px; 35 | margin: 0; 36 | `; 37 | 38 | const Nav = styled.nav` 39 | max-width: 1128px; 40 | margin: auto; 41 | padding: 12px 0 16px; 42 | display: flex; 43 | align-items: center; 44 | position: relative; 45 | justify-content: space-between; 46 | flex-wrap: nowrap; 47 | & > a { 48 | width: 135px; 49 | height: 34px; 50 | @media (max-width: 768px) { 51 | position: relative; 52 | padding: 0 5px; 53 | margin: 15px; 54 | width: 30%; 55 | top: 5px; 56 | } 57 | } 58 | `; 59 | 60 | const Join = styled.a` 61 | position: relative; 62 | font-size: 16px; 63 | font-weight: 600; 64 | padding: 10px 20px; 65 | right: 10px; 66 | text-decoration: none; 67 | border-radius: 5px; 68 | color: rgba(0, 0, 0, 0.6); 69 | cursor: pointer; 70 | @media (max-width: 768px) { 71 | position: relative; 72 | color: rgba(0,0,0,0.6); 73 | font-weight: 700; 74 | right: 10px; 75 | top: 0px; 76 | } 77 | &:hover { 78 | background-color: rgba(0, 0, 0, 0.08); 79 | color: rgba(0, 0, 0, 0.9); 80 | text-decoration: none; 81 | } 82 | `; 83 | 84 | const SignIn = styled.a` 85 | box-shadow: inset 0 0 0 1px #0a66c2; 86 | color: #0a66c2; 87 | border-radius: 24px; 88 | transition-duration: 167ms; 89 | font-size: 16px; 90 | font-weight: 600; 91 | line-height: 40px; 92 | padding: 10px 24px; 93 | text-align: center; 94 | cursor: pointer; 95 | background-color: rgba(0, 0, 0, 0); 96 | @media (max-width: 768px) { 97 | position: relative; 98 | padding: 6px 9px; 99 | right: 15px; 100 | top: 0px; 101 | } 102 | &:hover { 103 | background-color: rgba(112, 181, 249, 0.15); 104 | color: #0a66c2; 105 | text-decoration: none; 106 | } 107 | `; 108 | 109 | const Section = styled.section` 110 | display: flex; 111 | align-content: start; 112 | min-height: 700px; 113 | padding-bottom: 138px; 114 | padding-top: 40px; 115 | padding: 100px 0; 116 | position: relative; 117 | flex-wrap: wrap; 118 | width: 100%; 119 | max-width: 1128px; 120 | align-items: center; 121 | margin: auto; 122 | @media (max-width: 768px) { 123 | padding: 0; 124 | margin: auto; 125 | min-height: 0px; 126 | } 127 | `; 128 | 129 | const Hero = styled.div` 130 | width: 100%; 131 | h1 { 132 | padding-bottom: 0; 133 | width: 55%; 134 | font-size: 56px; 135 | color: #2977c9; 136 | font-weight: 200; 137 | line-height: 70px; 138 | @media (max-width: 768px) { 139 | text-align: center; 140 | font-size: 30px; 141 | width: 100%; 142 | line-height: 2; 143 | color: brown; 144 | } 145 | } 146 | img { 147 | width: 700px; 148 | height: 670px; 149 | position: absolute; 150 | bottom: -2px; 151 | right: -150px; 152 | @media (max-width: 768px) { 153 | top: 260px; 154 | margin-top: 10%; 155 | margin-left: 15px; 156 | width: 90%; 157 | position: initial; 158 | height: initial; 159 | margin-bottom: 0; 160 | } 161 | } 162 | `; 163 | 164 | const Form = styled.div` 165 | margin-top: 100px; 166 | width: 408px; 167 | @media (max-width: 768px) { 168 | margin-top: 20px; 169 | } 170 | `; 171 | 172 | const Google = styled.button` 173 | display: flex; 174 | justify-content: center; 175 | background-color: #fff; 176 | align-items: center; 177 | height: 56px; 178 | width: 100%; 179 | border-radius: 28px; 180 | border: 1px solid #000000; 181 | box-shadow: inset 0 0 0 1px rgb(0 0 0 / 60%), 182 | inset 0 0 0 2px rgb(0 0 0 / 0%) inset 0 0 0 1px rgb(0 0 0 / 0); 183 | vertical-align: middle; 184 | z-index: 0; 185 | transition-duration: 167ms; 186 | font-size: 20px; 187 | color: rgba(0, 0, 0, 0.6); 188 | @media (max-width: 768px) { 189 | margin-left: 15px; 190 | width: 90%; 191 | } 192 | &:hover { 193 | background-color: rgba(207, 207, 207, 0.25); 194 | color: rgba(0, 0, 0, 0.75); 195 | } 196 | `; 197 | 198 | export default Login; -------------------------------------------------------------------------------- /src/components/Leftside.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | const Leftside = (props) => { 4 | return ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | Welcome, there! 12 | 13 | 14 | Add a photo 15 | 16 | 17 | 18 | 19 |
    20 | Connections 21 | Grow your network 22 |
    23 | 24 |     25 |     26 | 27 | 28 | 29 | My Items 30 | 31 | 32 |     33 | 34 | 35 | 36 | Groups 37 | 38 | 39 | 40 | Events 41 | 42 | 43 | 44 | 45 | Follow Hashtags 46 | 47 | 48 | Discover more 49 | 50 | 51 |     52 | ); 53 | }; 54 | 55 | const Container = styled.div` 56 | grid-area: leftside; 57 | `; 58 | 59 | const ArtCard = styled.div` 60 | text-align: center; 61 | overflow: hidden; 62 | margin-bottom: 8px; 63 | background-color: #fff; 64 | border-radius: 5px; 65 | transition: box-shadow 83ms; 66 | position: relative; 67 | border: none; 68 | box-shadow: 0 0 0 1px rgb(0 0 0 / 15%), 0 0 0 rgb(0 0 0 / 20%); 69 | `; 70 | 71 | const UserInfo = styled.div` 72 | border-bottom: 1px solid rgba(0, 0, 0, 0.15); 73 | padding: 12px 12px 16px; 74 | word-wrap: break-word; 75 | word-break: break-word; 76 | `; 77 | 78 | const CardBackground = styled.div` 79 | background: url("/images/card-bg.svg"); 80 | background-position: center; 81 | background-size: 462px; 82 | height: 54px; 83 | margin: -12px -12px 0; 84 | `; 85 | 86 | const Photo = styled.div` 87 | box-shadow: none; 88 | background-image: url("/images/photo.svg"); 89 | width: 72px; 90 | height: 72px; 91 | box-sizing: border-box; 92 | background-clip: content-box; 93 | background-color: white; 94 | background-position: center; 95 | background-size: 60%; 96 | background-repeat: no-repeat; 97 | border: 2px solid white; 98 | margin: -38px auto 12px; 99 | border-radius: 50%; 100 | `; 101 | 102 | const Link = styled.div` 103 | font-size: 16px; 104 | line-height: 1.5; 105 | color: rgba(0, 0, 0, 0.9); 106 | font-weight: 600; 107 | `; 108 | 109 | const AddPhotoText = styled.div` 110 | color: #0a66c2; 111 | margin-top: 4px; 112 | font-size: 12px; 113 | line-height: 1.33; 114 | font-weight: 400; 115 | `; 116 | 117 | const Widget = styled.div` 118 | border-bottom: 1px solid rgba(0, 0, 0, 0.15); 119 | padding-top: 12px; 120 | padding-bottom: 12px; 121 | 122 | & > a { 123 | text-decoration: none; 124 | display: flex; 125 | justify-content: space-between; 126 | align-items: center; 127 | padding: 4px 12px; 128 | 129 | &:hover { 130 | background-color: rgba(0, 0, 0, 0.08); 131 | } 132 | 133 | div { 134 | display: flex; 135 | flex-direction: column; 136 | text-align: left; 137 | span { 138 | font-size: 12px; 139 | line-height: 1.333; 140 | &:first-child { 141 | color: rgba(0, 0, 0, 0.6); 142 | } 143 | &:nth-child(2) { 144 | color: rgba(0, 0, 0, 1); 145 | } 146 | } 147 | } 148 | } 149 | 150 | svg { 151 | color: rgba(0, 0, 0, 1); 152 | } 153 | `; 154 | 155 | const Item = styled.a` 156 | border-color: rgba(0, 0, 0, 0.8); 157 | text-align: left; 158 | padding: 12px; 159 | font-size: 12px; 160 | display: block; 161 | span { 162 | display: flex; 163 | align-items: center; 164 | color: rgba(0, 0, 0, 1); 165 | svg { 166 | color: rgba(0, 0, 0, 0.6); 167 | } 168 | } 169 | 170 | &:hover { 171 | background-color: rgba(0, 0, 0, 0.08); 172 | } 173 | `; 174 | 175 | const CommunityCard = styled(ArtCard)` 176 | padding: 8px 0 0; 177 | text-align: left; 178 | display: flex; 179 | flex-direction: column; 180 | a { 181 | color: black; 182 | padding: 4px 12px 4px 12px; 183 | font-size: 12px; 184 | 185 | &:hover { 186 | color: #0a66c2; 187 | } 188 | 189 | span { 190 | display: flex; 191 | align-items: center; 192 | justify-content: space-between; 193 | } 194 | 195 | &:last-child { 196 | color: rgba(0, 0, 0, 0.6); 197 | text-decoration: none; 198 | 199 | border-top: 1px solid #d6cec2; 200 | padding: 12px; 201 | &:hover { 202 | background-color: rgba(0, 0, 0, 0.08); 203 | } 204 | } 205 | } 206 | `; 207 | 208 | export default Leftside; -------------------------------------------------------------------------------- /src/components/Header.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | const Header = (props) => { 4 | return ( 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
    14 | 15 |
    16 | 17 | 18 | 19 |     20 | 80 |     81 |     82 | ); 83 | }; 84 | 85 | const Container = styled.div` 86 | background-color: white; 87 | border-bottom: 1px solid rgba(0, 0, 0, 0.08); 88 | left: 0; 89 | padding: 10px 10px; 90 | position: fixed; 91 | top: 0; 92 | width: 100vw; 93 | z-index: 100; 94 | @media(max-width: 768px) { 95 | padding: 15px 15px; 96 | } 97 | `; 98 | 99 | const Content = styled.div` 100 | display: flex; 101 | align-items: center; 102 | margin: 0 auto; 103 | min-height: 100%; 104 | max-width: 1128px; 105 | `; 106 | 107 | const Logo = styled.span` 108 | margin-right: 8px; 109 | font-size: 0px; 110 | @media(max-width: 768px) { 111 | } 112 | `; 113 | 114 | const Search = styled.div` 115 | opacity: 1; 116 | flex-grow: 1; 117 | position: relative; 118 | & > div { 119 | max-width: 280px; 120 | input { 121 | border: none; 122 | box-shadow: none; 123 | background-color: #eef3f8; 124 | border-radius: 2px; 125 | color: rgba(0, 0, 0, 0.9); 126 | width: 245px; 127 | padding: 0 8px 0 40px; 128 | line-height: 1.75; 129 | font-weight: 400; 130 | font-size: 14px; 131 | height: 34px; 132 | border-color: #dce6f1; 133 | vertical-align: text-top; 134 | } 135 | } 136 | @media(max-width: 768px) { 137 | border: 2px solid rgba(0,0,0,0.3); 138 | border-radius: 999px; 139 | input { 140 | width: 245px; 141 | } 142 | } 143 | `; 144 | 145 | const SearchIcon = styled.div` 146 | width: 40px; 147 | position: absolute; 148 | z-index: 1; 149 | top: 10px; 150 | left: 2px; 151 | border-radius: 0 2px 2px 0; 152 | margin: 0; 153 | pointer-events: none; 154 | display: flex; 155 | justify-content: center; 156 | align-items: center; 157 | `; 158 | 159 | const Nav = styled.nav` 160 | margin-left: auto; 161 | display: block; 162 | @media (max-width: 768px) { 163 | position: fixed; 164 | left: 0; 165 | bottom: 0; 166 | background: white; 167 | width: 100%; 168 | border-top: 1px solid rgba(0,0,0,0.3); 169 | margin-right: 40px; 170 | margin: 0; 171 | align-items: center; 172 | } 173 | `; 174 | 175 | const NavListWrap = styled.ul` 176 | display: flex; 177 | flex-wrap: nowrap; 178 | list-style-type: none; 179 | .active { 180 | span:after { 181 | content: ""; 182 | transform: scaleX(1); 183 | border-bottom: 2px solid var(--white, #fff); 184 | bottom: 0; 185 | left: 0; 186 | position: absolute; 187 | transition: transform 0.2s ease-in-out; 188 | width: 100%; 189 | border-color: rgba(0, 0, 0, 0.9); 190 | } 191 | } 192 | `; 193 | 194 | const NavList = styled.li` 195 | display: flex; 196 | align-items: center; 197 | a { 198 | align-items: center; 199 | background: transparent; 200 | display: flex; 201 | flex-direction: column; 202 | font-size: 12px; 203 | font-weight: 400; 204 | justify-content: center; 205 | line-height: 1.5; 206 | min-height: 52px; 207 | min-width: 80px; 208 | position: relative; 209 | text-decoration: none; 210 | span { 211 | color: rgba(0, 0, 0, 0.6); 212 | display: flex; 213 | align-items: center; 214 | } 215 | @media (max-width: 768px) { 216 | img { 217 | position: relative; 218 | top: 3px; 219 | } 220 | span { 221 | visibility: hidden; 222 | } 223 | min-width: 70px; 224 | } 225 | } 226 | &:hover, 227 | &:active { 228 | a { 229 | span { 230 | color: rgba(0, 0, 0, 0.9); 231 | } 232 | } 233 | } 234 | `; 235 | 236 | const SignOut = styled.div` 237 | position: absolute; 238 | top: 45px; 239 | background: white; 240 | border-radius: 0 0 5px 5px; 241 | width: 100px; 242 | height: 40px; 243 | font-size: 16px; 244 | transition-duration: 167ms; 245 | text-align: center; 246 | display: none; 247 | `; 248 | 249 | const User = styled(NavList)` 250 | a > svg { 251 | width: 24px; 252 | border-radius: 50%; 253 | } 254 | a > img { 255 | width: 24px; 256 | height: 24px; 257 | border-radius: 50%; 258 | } 259 | span { 260 | display: flex; 261 | align-items: center; 262 | } 263 | &:hover { 264 | ${SignOut} { 265 | align-items: center; 266 | display: flex; 267 | justify-content: center; 268 | } 269 | } 270 | `; 271 | 272 | const ImgProfile = styled.img` 273 | position: relative; 274 | top: 5px; 275 | `; 276 | 277 | const ImgDrop = styled.img` 278 | position: relative; 279 | 280 | `; 281 | 282 | const Work = styled(User)` 283 | border-left: 1px solid rgba(0, 0, 0, 0.08); 284 | @media(max-width: 768px) { 285 | position: absolute; 286 | visibility: hidden; 287 | overflow: hidden; 288 | } 289 | `; 290 | 291 | const ImgOption = styled.img` 292 | @media(max-width: 768px) { 293 | visibility: hidden; 294 | } 295 | `; 296 | 297 | export default Header; -------------------------------------------------------------------------------- /public/images/page4.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/login-hero.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------