responsive-layout/flexbox.html at master · jpmti2016/responsive-layout · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="flexbox.css" />
  </head>

  <body>
    <div class="div">
      <div class="intro">
        <div class="container row">
          <div class="card">
            <h1 class="intro-title">
              Lorem ipsum, dolor sit amet consectetur.
            </h1>
            <p class="intro-text">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio
              ullam, ab, temporibus doloribus repellat nesciunt deleniti est
              dolorum eaque praesentium eveniet, recusandae in similique qui
              quas. Eveniet veniam fuga eius autem nam dolores fugiat
              repellendus quia assumenda, odit quos hic, veritatis illo tempore
              nulla?
            </p>
            <a href="#" class="cta">Learn</a>
          </div>

          <img
            class="card-img"
            src="img/IMG_20200426_183544.jpg"
            alt="spring blosom"
          />
        </div>
      </div>

      <div class="three">
        <div class="container row">
          <div class="three-col">
            <h2>Cheap</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos illo
              hic perferendis amet nam molestias ratione quidem porro, sint eum
              ipa minus numquam quo! Quibusdam eos quas suscipit aut
              reprehenderit.
            </p>
          </div>
          <div class="three-col">
            <h2>Quick</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos illo
              hic perferendis amet nam molestias ratione quidem porro, sint eum
              ipa minus numquam quo! Quibusdam eos quas suscipit aut
              reprehenderit.
            </p>
          </div>
          <div class="three-col">
            <h2>Quality</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos illo
              hic perferendis amet nam molestias ratione quidem porro, sint eum
              ipa minus numquam quo! Quibusdam eos quas suscipit aut
              reprehenderit.
            </p>
          </div>
        </div>
      </div>
      <div class="two">
        <div class="container row">
          <div class="two-col">
            <h2>Cheap</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
              omnis alias accusamus dolorum dignissimos voluptate, ipsam maiores
              consequuntur, amet porro temporibus blanditiis corrupti provident
              rem, sequi debitis. Praesentium obcaecati aspernatur voluptate
              saepe maxime nostrum, officiis quisquam veniam illo, dicta in
              quam, deserunt ad assumenda officia eius quis porro debitis
              recusandae!
            </p>
          </div>

          <div class="two-col">
            <h2>Quick</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Aspernatur enim labore iure harum odio, error dolor impedit
              dolorum at incidunt velit ut sunt debitis itaque ducimus. A in
              libero explicabo porro sit voluptas reiciendis dolor doloribus
              delectus, dignissimos, hic expedita at eius minima beatae, tempora
              voluptatum? Odio recusandae optio qui?
            </p>
          </div>
        </div>
      </div>

      <div class="five container row">
        <div class="left">
          <h2 class="left-item">
            Quality designs made custom, on demand, just for you
          </h2>
          <p class="left-item">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing
            elit, sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam.
          </p>
          <p class="left-item">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing
            elit, sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam.
          </p>
        </div>

        <div class="rigth">
          <h2>Cheap</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam.
          </p>

          <h2>Cheap</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam.
          </p>

          <h2>Cheap</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam.
          </p>
        </div>
      </div>


  </body>
</html>