sdy

create Main component

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 +};