Toggle navigation
Toggle navigation
This project
Loading...
Sign in
2020-1-capstone-design1
/
Triz_Project1
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
1
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
sdy
2020-07-20 00:12:14 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
7376875c1d9d10d1fd18f57c2a09eff944ec14ff
7376875c
1 parent
87fcaf85
create features route component
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
126 additions
and
0 deletions
front/src/Routes/Features.js
front/src/Routes/Features.js
0 → 100644
View file @
7376875
import
React
from
"react"
;
import
styled
from
"styled-components"
;
import
Header
from
"../Components/Header"
;
import
Footer
from
"../Components/Footer"
;
import
ChatImage
from
"../Imgs/test.JPG"
;
const
Main
=
styled
.
main
`
display: flex;
flex-direction: column;
`
;
const
Section
=
styled
.
section
`
padding-top: 8rem;
padding-bottom: 5rem;
max-width: none;
`
;
const
SectionBox
=
styled
.
div
`
max-width: 80%;
margin: 0 auto;
&.image-section {
max-width: 60%;
}
`
;
const
DescriptionBox
=
styled
.
div
`
display: flex;
flex-direction: column;
`
;
const
TitleBox
=
styled
.
div
`
text-align: center;
font-size: 2rem;
font-weight: 600;
margin-bottom: 20px;
&.paragraph-title {
color: #3dc1d3;
text-align: left;
}
&.desc-header-title {
margin-bottom: 50px;
}
`
;
const
ParagraphContainer
=
styled
.
div
`
display: grid;
grid-template-columns: 30% 30% 30%;
grid-column-gap: 5%;
`
;
const
ParagraphBox
=
styled
.
div
`
display: flex;
flex-direction: column;
&:not(:last-child) {
margin-right: 20px;
}
p {
font-size: 1.2rem;
line-height: 1.5;
}
`
;
const
Image
=
styled
.
img
`
height: 500px;
border-radius: 10px;
`
;
export
default
()
=>
{
return
(
<>
<
Header
/>
<
Main
>
<
Section
>
<
SectionBox
>
<
DescriptionBox
>
<
TitleBox
className
=
"desc-header-title"
>
Why
Linker
?
<
/TitleBox
>
<
ParagraphContainer
>
<
ParagraphBox
>
<
TitleBox
className
=
"paragraph-title"
>
Comfortable
<
/TitleBox
>
<
p
>
Lorem
Ipsum
is
simply
dummy
text
of
the
printing
and
typesetting
industry
.
Lorem
Ipsum
has
been
the
industry
's
standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a
type specimen book.
</p>
</ParagraphBox>
<ParagraphBox>
<TitleBox className="paragraph-title">Easy</TitleBox>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry'
s
standard
dummy
text
ever
since
the
1500
s
,
when
an
unknown
printer
took
a
galley
of
type
and
scrambled
it
to
make
a
type
specimen
book
.
<
/p
>
<
/ParagraphBox
>
<
ParagraphBox
>
<
TitleBox
className
=
"paragraph-title"
>
Colorful
<
/TitleBox
>
<
p
>
Lorem
Ipsum
is
simply
dummy
text
of
the
printing
and
typesetting
industry
.
Lorem
Ipsum
has
been
the
industry
'
s
standard
dummy
text
ever
since
the
1500
s
,
when
an
unknown
printer
took
a
galley
of
type
and
scrambled
it
to
make
a
type
specimen
book
.
<
/p
>
<
/ParagraphBox
>
<
/ParagraphContainer
>
<
/DescriptionBox
>
<
/SectionBox
>
<
/Section
>
<
Section
>
<
SectionBox
className
=
"image-section"
>
<
DescriptionBox
>
<
TitleBox
className
=
"desc-header-title"
>
Look
Around
Linker
<
/TitleBox
>
<
Image
src
=
{
ChatImage
}
alt
=
{
"Back Image"
}
/
>
<
/DescriptionBox
>
<
/SectionBox
>
<
/Section
>
<
/Main
>
<
Footer
/>
<
/
>
);
};
Please
register
or
login
to post a comment