Showing
1 changed file
with
61 additions
and
0 deletions
front/src/Components/Main.js
0 → 100644
1 | +import React from "react"; | ||
2 | +import styled from "styled-components"; | ||
3 | +import Laptop from "../Imgs/laptop.jpg"; | ||
4 | + | ||
5 | +const Main = styled.main` | ||
6 | + display: flex; | ||
7 | + flex-direction: column; | ||
8 | +`; | ||
9 | + | ||
10 | +const Section = styled.section` | ||
11 | + padding: 10rem 0; | ||
12 | + max-width: none; | ||
13 | +`; | ||
14 | + | ||
15 | +const SectionBox = styled.div` | ||
16 | + display: grid; | ||
17 | + grid-column-gap: 5%; | ||
18 | + grid-template-columns: 40% 50%; | ||
19 | + align-items: center; | ||
20 | + margin: 0 auto; | ||
21 | +`; | ||
22 | + | ||
23 | +const DescriptionBox = styled.div``; | ||
24 | + | ||
25 | +const TitleBox = styled.div``; | ||
26 | + | ||
27 | +const IllustrationBox = styled.div``; | ||
28 | + | ||
29 | +const Image = styled.img` | ||
30 | + src: url(${(props) => props.src}); | ||
31 | + alt: ${(props) => props.alt}; | ||
32 | +`; | ||
33 | + | ||
34 | +export default () => { | ||
35 | + return ( | ||
36 | + <Main> | ||
37 | + <Section> | ||
38 | + <SectionBox> | ||
39 | + <DescriptionBox> | ||
40 | + <TitleBox>Lorem Ipsum</TitleBox> | ||
41 | + <p> | ||
42 | + What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the | ||
43 | + printing and typesetting industry. Lorem Ipsum has been the | ||
44 | + industry's standard dummy text ever since the 1500s, when an | ||
45 | + unknown printer took a galley of type and scrambled it to make a | ||
46 | + type specimen book. It has survived not only five centuries, but | ||
47 | + also the leap into electronic typesetting, remaining essentially | ||
48 | + unchanged. It was popularised in the 1960s with the release of | ||
49 | + Letraset sheets containing Lorem Ipsum passages, and more recently | ||
50 | + with desktop publishing software like Aldus PageMaker including | ||
51 | + versions of Lorem Ipsum | ||
52 | + </p> | ||
53 | + </DescriptionBox> | ||
54 | + <IllustrationBox> | ||
55 | + <Image src={Laptop} alt={"Back Image"}></Image> | ||
56 | + </IllustrationBox> | ||
57 | + </SectionBox> | ||
58 | + </Section> | ||
59 | + </Main> | ||
60 | + ); | ||
61 | +}; |
-
Please register or login to post a comment