├── .gitignore ├── README.md ├── package.json ├── public ├── favicon.ico ├── images │ ├── card-bg.svg │ ├── down-icon.svg │ ├── feed-icon.svg │ ├── google.svg │ ├── home-logo.svg │ ├── item-icon.svg │ ├── linkedin.png │ ├── login-hero.svg │ ├── login-logo.svg │ ├── nav-home.svg │ ├── nav-jobs.svg │ ├── nav-messaging.svg │ ├── nav-network.svg │ ├── nav-notifications.svg │ ├── nav-work.svg │ ├── photo.svg │ ├── plus-icon.svg │ ├── right-icon.svg │ ├── search-icon.svg │ ├── user.svg │ └── widget-icon.svg ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.js ├── components │ ├── Header.js │ ├── Home.js │ ├── Leftside.js │ ├── Login.js │ ├── Main.js │ └── Rightside.js ├── index.css └── index.js └── yarn.lock /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # # Disney Plus Clone Readme 2 | 3 | ## LIVE DEMO 4 | 5 | ## Description 6 | This is the ReactJS LinkedIn Clone, the perfect project to put on your portfolio by Clever Programmer. 7 | 8 | ## Build it today! 9 | 10 | #### PREREQUISITES: 11 | - Sign up for a Firebase account HERE 12 | - Install Node JS in your computer HERE (Select the LTS option) 13 | - Download all the images and videos HERE 14 | - Watch full tutorial HERE 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "linkedin-clone", 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 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-router-dom": "^5.2.0", 12 | "react-scripts": "4.0.3", 13 | "styled-components": "^5.2.3", 14 | "web-vitals": "^1.0.1" 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 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/cp-linkedin-clone/f014d361d787029f15ea0f0f78c053d8c214f138/public/favicon.ico -------------------------------------------------------------------------------- /public/images/card-bg.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /public/images/down-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /public/images/feed-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/images/google.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/home-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /public/images/item-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /public/images/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/cp-linkedin-clone/f014d361d787029f15ea0f0f78c053d8c214f138/public/images/linkedin.png -------------------------------------------------------------------------------- /public/images/login-hero.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/login-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/nav-home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/images/nav-jobs.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/nav-messaging.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /public/images/nav-network.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /public/images/nav-notifications.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /public/images/nav-work.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /public/images/photo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /public/images/plus-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/images/right-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /public/images/search-icon.svg: -------------------------------------------------------------------------------- 1 | 10 | 11 | -------------------------------------------------------------------------------- /public/images/user.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /public/images/widget-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/cp-linkedin-clone/f014d361d787029f15ea0f0f78c053d8c214f138/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/cp-linkedin-clone/f014d361d787029f15ea0f0f78c053d8c214f138/public/logo512.png -------------------------------------------------------------------------------- /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/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CleverProgrammers/cp-linkedin-clone/f014d361d787029f15ea0f0f78c053d8c214f138/src/App.css -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; 2 | import "./App.css"; 3 | import Header from "./components/Header"; 4 | import Home from "./components/Home"; 5 | import Login from "./components/Login"; 6 | 7 | function App() { 8 | return ( 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 |
22 | ); 23 | } 24 | 25 | export default App; 26 | -------------------------------------------------------------------------------- /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: 0 24px; 90 | position: fixed; 91 | top: 0; 92 | width: 100vw; 93 | z-index: 100; 94 | `; 95 | 96 | const Content = styled.div` 97 | display: flex; 98 | align-items: center; 99 | margin: 0 auto; 100 | min-height: 100%; 101 | max-width: 1128px; 102 | `; 103 | 104 | const Logo = styled.span` 105 | margin-right: 8px; 106 | font-size: 0px; 107 | `; 108 | 109 | const Search = styled.div` 110 | opacity: 1; 111 | flex-grow: 1; 112 | position: relative; 113 | & > div { 114 | max-width: 280px; 115 | input { 116 | border: none; 117 | box-shadow: none; 118 | background-color: #eef3f8; 119 | border-radius: 2px; 120 | color: rgba(0, 0, 0, 0.9); 121 | width: 218px; 122 | padding: 0 8px 0 40px; 123 | line-height: 1.75; 124 | font-weight: 400; 125 | font-size: 14px; 126 | height: 34px; 127 | border-color: #dce6f1; 128 | vertical-align: text-top; 129 | } 130 | } 131 | `; 132 | 133 | const SearchIcon = styled.div` 134 | width: 40px; 135 | position: absolute; 136 | z-index: 1; 137 | top: 10px; 138 | left: 2px; 139 | border-radius: 0 2px 2px 0; 140 | margin: 0; 141 | pointer-events: none; 142 | display: flex; 143 | justify-content: center; 144 | align-items: center; 145 | `; 146 | 147 | const Nav = styled.nav` 148 | margin-left: auto; 149 | display: block; 150 | @media (max-width: 768px) { 151 | position: fixed; 152 | left: 0; 153 | bottom: 0; 154 | background: white; 155 | width: 100%; 156 | } 157 | `; 158 | 159 | const NavListWrap = styled.ul` 160 | display: flex; 161 | flex-wrap: nowrap; 162 | list-style-type: none; 163 | 164 | .active { 165 | span:after { 166 | content: ""; 167 | transform: scaleX(1); 168 | border-bottom: 2px solid var(--white, #fff); 169 | bottom: 0; 170 | left: 0; 171 | position: absolute; 172 | transition: transform 0.2s ease-in-out; 173 | width: 100%; 174 | border-color: rgba(0, 0, 0, 0.9); 175 | } 176 | } 177 | `; 178 | 179 | const NavList = styled.li` 180 | display: flex; 181 | align-items: center; 182 | a { 183 | align-items: center; 184 | background: transparent; 185 | display: flex; 186 | flex-direction: column; 187 | font-size: 12px; 188 | font-weight: 400; 189 | justify-content: center; 190 | line-height: 1.5; 191 | min-height: 52px; 192 | min-width: 80px; 193 | position: relative; 194 | text-decoration: none; 195 | 196 | span { 197 | color: rgba(0, 0, 0, 0.6); 198 | display: flex; 199 | align-items: center; 200 | } 201 | 202 | @media (max-width: 768px) { 203 | min-width: 70px; 204 | } 205 | } 206 | 207 | &:hover, 208 | &:active { 209 | a { 210 | span { 211 | color: rgba(0, 0, 0, 0.9); 212 | } 213 | } 214 | } 215 | `; 216 | 217 | const SignOut = styled.div` 218 | position: absolute; 219 | top: 45px; 220 | background: white; 221 | border-radius: 0 0 5px 5px; 222 | width: 100px; 223 | height: 40px; 224 | font-size: 16px; 225 | transition-duration: 167ms; 226 | text-align: center; 227 | display: none; 228 | `; 229 | 230 | const User = styled(NavList)` 231 | a > svg { 232 | width: 24px; 233 | border-radius: 50%; 234 | } 235 | 236 | a > img { 237 | width: 24px; 238 | height: 24px; 239 | border-radius: 50%; 240 | } 241 | 242 | span { 243 | display: flex; 244 | align-items: center; 245 | } 246 | 247 | &:hover { 248 | ${SignOut} { 249 | align-items: center; 250 | display: flex; 251 | justify-content: center; 252 | } 253 | } 254 | `; 255 | 256 | const Work = styled(User)` 257 | border-left: 1px solid rgba(0, 0, 0, 0.08); 258 | `; 259 | 260 | export default Header; 261 | -------------------------------------------------------------------------------- /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 | padding-top: 52px; 29 | max-width: 100%; 30 | `; 31 | 32 | const Content = styled.div` 33 | max-width: 1128px; 34 | margin-left: auto; 35 | margin-right: auto; 36 | `; 37 | 38 | const Section = styled.section` 39 | min-height: 50px; 40 | padding: 16px 0; 41 | box-sizing: content-box; 42 | text-align: center; 43 | text-decoration: underline; 44 | display: flex; 45 | justify-content: center; 46 | h5 { 47 | color: #0a66c2; 48 | font-size: 14px; 49 | a { 50 | font-weight: 700; 51 | } 52 | } 53 | 54 | p { 55 | font-size: 14px; 56 | color: #434649; 57 | font-weight: 600; 58 | } 59 | 60 | @media (max-width: 768px) { 61 | flex-direction: column; 62 | padding: 0 5px; 63 | } 64 | `; 65 | 66 | const Layout = styled.div` 67 | display: grid; 68 | grid-template-areas: "leftside main rightside"; 69 | grid-template-columns: minmax(0, 5fr) minmax(0, 12fr) minmax(300px, 7fr); 70 | column-gap: 25px; 71 | row-gap: 25px; 72 | /* grid-template-row: auto; */ 73 | margin: 25px 0; 74 | @media (max-width: 768px) { 75 | display: flex; 76 | flex-direction: column; 77 | padding: 0 5px; 78 | } 79 | `; 80 | 81 | export default Home; 82 | -------------------------------------------------------------------------------- /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; 209 | -------------------------------------------------------------------------------- /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 | 23 | Sign in with Google 24 | 25 |
26 |
27 | 28 | ); 29 | }; 30 | 31 | const Container = styled.div` 32 | padding: 0px; 33 | `; 34 | 35 | const Nav = styled.nav` 36 | max-width: 1128px; 37 | margin: auto; 38 | padding: 12px 0 16px; 39 | display: flex; 40 | align-items: center; 41 | position: relative; 42 | justify-content: space-between; 43 | flex-wrap: nowrap; 44 | 45 | & > a { 46 | width: 135px; 47 | height: 34px; 48 | @media (max-width: 768px) { 49 | padding: 0 5px; 50 | } 51 | } 52 | `; 53 | 54 | const Join = styled.a` 55 | font-size: 16px; 56 | padding: 10px 12px; 57 | text-decoration: none; 58 | border-radius: 4px; 59 | color: rgba(0, 0, 0, 0.6); 60 | margin-right: 12px; 61 | &:hover { 62 | background-color: rgba(0, 0, 0, 0.08); 63 | color: rgba(0, 0, 0, 0.9); 64 | text-decoration: none; 65 | } 66 | `; 67 | 68 | const SignIn = styled.a` 69 | box-shadow: inset 0 0 0 1px #0a66c2; 70 | color: #0a66c2; 71 | border-radius: 24px; 72 | transition-duration: 167ms; 73 | font-size: 16px; 74 | font-weight: 600; 75 | line-height: 40px; 76 | padding: 10px 24px; 77 | text-align: center; 78 | background-color: rgba(0, 0, 0, 0); 79 | &:hover { 80 | background-color: rgba(112, 181, 249, 0.15); 81 | color: #0a66c2; 82 | text-decoration: none; 83 | } 84 | `; 85 | 86 | const Section = styled.section` 87 | display: flex; 88 | align-content: start; 89 | min-height: 700px; 90 | padding-bottom: 138px; 91 | padding-top: 40px; 92 | padding: 60px 0; 93 | position: relative; 94 | flex-wrap: wrap; 95 | width: 100%; 96 | max-width: 1128px; 97 | align-items: center; 98 | margin: auto; 99 | 100 | @media (max-width: 768px) { 101 | margin: auto; 102 | min-height: 0px; 103 | } 104 | `; 105 | 106 | const Hero = styled.div` 107 | width: 100%; 108 | h1 { 109 | padding-bottom: 0; 110 | width: 55%; 111 | font-size: 56px; 112 | color: #2977c9; 113 | font-weight: 200; 114 | line-height: 70px; 115 | @media (max-width: 768px) { 116 | text-align: center; 117 | font-size: 20px; 118 | width: 100%; 119 | line-height: 2; 120 | } 121 | } 122 | 123 | img { 124 | /* z-index: -1; */ 125 | width: 700px; 126 | height: 670px; 127 | position: absolute; 128 | bottom: -2px; 129 | right: -150px; 130 | @media (max-width: 768px) { 131 | top: 230px; 132 | width: initial; 133 | position: initial; 134 | height: initial; 135 | } 136 | } 137 | `; 138 | 139 | const Form = styled.div` 140 | margin-top: 100px; 141 | width: 408px; 142 | @media (max-width: 768px) { 143 | margin-top: 20px; 144 | } 145 | `; 146 | 147 | const Google = styled.button` 148 | display: flex; 149 | justify-content: center; 150 | background-color: #fff; 151 | align-items: center; 152 | height: 56px; 153 | width: 100%; 154 | border-radius: 28px; 155 | box-shadow: inset 0 0 0 1px rgb(0 0 0 / 60%), 156 | inset 0 0 0 2px rgb(0 0 0 / 0%) inset 0 0 0 1px rgb(0 0 0 / 0); 157 | 158 | vertical-align: middle; 159 | z-index: 0; 160 | transition-duration: 167ms; 161 | font-size: 20px; 162 | color: rgba(0, 0, 0, 0.6); 163 | &:hover { 164 | background-color: rgba(207, 207, 207, 0.25); 165 | color: rgba(0, 0, 0, 0.75); 166 | } 167 | `; 168 | 169 | export default Login; 170 | -------------------------------------------------------------------------------- /src/components/Main.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | const Main = (props) => { 4 | return Main; 5 | }; 6 | 7 | const Container = styled.div` 8 | grid-area: main; 9 | `; 10 | 11 | export default Main; 12 | -------------------------------------------------------------------------------- /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; 130 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | overflow-y: scroll; 3 | overflow-x: hidden; 4 | } 5 | 6 | :root, 7 | body, 8 | html { 9 | background-color: #f5f5f5; 10 | box-sizing: border-box; 11 | } 12 | 13 | div, 14 | h1, 15 | h2, 16 | h3, 17 | h4, 18 | h5, 19 | h6, 20 | header, 21 | html, 22 | i, 23 | img, 24 | label, 25 | li, 26 | nav, 27 | p, 28 | small, 29 | span, 30 | ul { 31 | margin: 0; 32 | padding: 0; 33 | border: 0; 34 | outline: none; 35 | font-size: 100%; 36 | vertical-align: baseline; 37 | background: transparent; 38 | } 39 | 40 | body { 41 | font-family: Arial, sans-serif; 42 | } 43 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById("root") 11 | ); 12 | 13 | // If you want to start measuring performance in your app, pass a function 14 | // to log results (for example: reportWebVitals(console.log)) 15 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 16 | --------------------------------------------------------------------------------