Showing
1 changed file
with
118 additions
and
0 deletions
front/src/Components/Footer.js
0 → 100644
1 | +import React from "react"; | ||
2 | +import styled from "styled-components"; | ||
3 | +import { Link } from "react-router-dom"; | ||
4 | + | ||
5 | +const Footer = styled.footer` | ||
6 | + width: 100%; | ||
7 | + border-top: 1px solid #ebeaeb; | ||
8 | +`; | ||
9 | + | ||
10 | +const MenuContainer = styled.div` | ||
11 | + padding: 5rem 0; | ||
12 | +`; | ||
13 | + | ||
14 | +const MenuNav = styled.nav` | ||
15 | + display: grid; | ||
16 | + grid-gap: 2rem; | ||
17 | + max-width: 80%; | ||
18 | + margin: 0 auto; | ||
19 | + grid-template-columns: repeat(3, 1fr); | ||
20 | +`; | ||
21 | + | ||
22 | +const MenuBlock = styled.div` | ||
23 | + display: flex; | ||
24 | + flex-direction: column; | ||
25 | + justify-content: center; | ||
26 | + align-items: center; | ||
27 | +`; | ||
28 | + | ||
29 | +const MenuTitle = styled.p` | ||
30 | + padding: 10px; | ||
31 | + font-weight: 600; | ||
32 | + font-size: 1.3rem; | ||
33 | +`; | ||
34 | + | ||
35 | +const MenuList = styled.ul` | ||
36 | + line-height: 2; | ||
37 | +`; | ||
38 | + | ||
39 | +const MenuItem = styled.li` | ||
40 | + text-align: center; | ||
41 | +`; | ||
42 | + | ||
43 | +const CopyRightBox = styled.div` | ||
44 | + width: 100%; | ||
45 | +`; | ||
46 | + | ||
47 | +const CopyRightBlock = styled.div` | ||
48 | + max-width: 80%; | ||
49 | + margin: 0 auto; | ||
50 | + height: 2.5rem; | ||
51 | + display: flex; | ||
52 | + align-items: center; | ||
53 | +`; | ||
54 | + | ||
55 | +const CopyRightSpan = styled.span` | ||
56 | + font-size: 1rem; | ||
57 | +`; | ||
58 | + | ||
59 | +export default () => { | ||
60 | + return ( | ||
61 | + <Footer> | ||
62 | + <MenuContainer> | ||
63 | + <MenuNav> | ||
64 | + <MenuBlock> | ||
65 | + <MenuTitle>CONCEPT</MenuTitle> | ||
66 | + <MenuList> | ||
67 | + <MenuItem> | ||
68 | + <Link to="/">Features</Link> | ||
69 | + </MenuItem> | ||
70 | + <MenuItem> | ||
71 | + <Link to="/">Test</Link> | ||
72 | + </MenuItem> | ||
73 | + <MenuItem> | ||
74 | + <Link to="/">Observation</Link> | ||
75 | + </MenuItem> | ||
76 | + </MenuList> | ||
77 | + </MenuBlock> | ||
78 | + <MenuBlock> | ||
79 | + <MenuTitle>SUBJECT</MenuTitle> | ||
80 | + <MenuList> | ||
81 | + <MenuItem> | ||
82 | + <Link to="/">What</Link> | ||
83 | + </MenuItem> | ||
84 | + <MenuItem> | ||
85 | + <Link to="/">How</Link> | ||
86 | + </MenuItem> | ||
87 | + <MenuItem> | ||
88 | + <Link to="/">Why</Link> | ||
89 | + </MenuItem> | ||
90 | + </MenuList> | ||
91 | + </MenuBlock> | ||
92 | + <MenuBlock> | ||
93 | + <MenuTitle>COMPANY</MenuTitle> | ||
94 | + <MenuList> | ||
95 | + <MenuItem> | ||
96 | + <Link to="/">Leader</Link> | ||
97 | + </MenuItem> | ||
98 | + <MenuItem> | ||
99 | + <Link to="/">Empolyee</Link> | ||
100 | + </MenuItem> | ||
101 | + <MenuItem> | ||
102 | + <Link to="/">Salary</Link> | ||
103 | + </MenuItem> | ||
104 | + </MenuList> | ||
105 | + </MenuBlock> | ||
106 | + </MenuNav> | ||
107 | + </MenuContainer> | ||
108 | + <CopyRightBox> | ||
109 | + <CopyRightBlock> | ||
110 | + <CopyRightSpan> | ||
111 | + @ Copyright 2020 KhuChat. All rights reserved. Various trademarks | ||
112 | + held by their respective owners. | ||
113 | + </CopyRightSpan> | ||
114 | + </CopyRightBlock> | ||
115 | + </CopyRightBox> | ||
116 | + </Footer> | ||
117 | + ); | ||
118 | +}; |
-
Please register or login to post a comment