Responsive-Web-Design---HTML-CSS-/index_flex.html at main · erkamguresen/Responsive-Web-Design---HTML-CSS- · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style_flex.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <h1>Let's start <span>getting a little</span> more fancy!</h1>
      <img src="/images/fog-258232_1920.jpg" alt="head image" />

      <div class="columns">
        <div class="inner_columns inner_columns-1">
          <h2>Dolor Sit</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
            quo aliquam nostrum, nihil nemo esse odio eligendi dolore suscipit a
            illum et laboriosam sed numquam dolor voluptatem distinctio
            consequuntur recusandae facere. Illum laudantium nostrum obcaecati
            provident. Error iure distinctio assumenda mollitia, id perferendis
            magni quisquam aliquam quam. Fugit, ad ipsa!
          </p>
        </div>
        <div class="inner_columns inner_columns-2">
          <h2>Consequuntur Recusandae</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis
            quibusdam non, corrupti nisi earum repudiandae? Facere possimus ex
            voluptate, ullam quis ipsam velit. Est amet consequatur commodi
            atque facilis dicta expedita cumque in magni consequuntur similique
            fuga non dolor laboriosam exercitationem perspiciatis quisquam
            inventore autem, molestiae veritatis error, quae nostrum totam. Ipsa
            recusandae deleniti aliquid?
          </p>
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aut id
            blanditiis quia voluptatem consectetur nemo optio ad praesentium, at
            voluptate, nisi ratione impedit facilis magnam assumenda. Officia
            nemo voluptate aliquid vitae corporis assumenda, eveniet odio
            accusamus quos nostrum eum dolor. Possimus rerum consequatur dolor
            amet recusandae velit sint, nemo exercitationem eligendi unde sequi
            cupiditate nam maxime quas beatae explicabo quia dolorum quidem rem
            veritatis nobis. Obcaecati ducimus repellat, qui quam non neque
            cumque unde fugit molestias laborum dolores nulla dolor.
          </p>
        </div>
        <div class="inner_columns column-background inner_columns-1">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
            itaque, possimus sapiente laborum quae voluptatem natus eveniet sed
            maiores quasi earum modi, id fugiat inventore animi distinctio
            doloremque. Dolore, aperiam eveniet, dolores quos nulla accusantium
            sapiente non voluptates vero eius ullam distinctio iure labore
            possimus optio assumenda magni, numquam voluptas.
          </p>
        </div>
      </div>
      <div class="columns">
        <div class="inner_columns inner_columns-3">
          <h2>Optio Assumenda Magni</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero
            facere optio eius placeat laboriosam ratione in neque, veniam beatae
            molestiae? Eos, numquam dolor dolorum tempora nisi maiores iste. Ea
            expedita inventore dolor maxime dolores adipisci sequi reiciendis
            ducimus suscipit nemo. Necessitatibus, molestias provident quibusdam
            temporibus ex sapiente, laudantium, dicta corporis possimus amet
            nobis quis veritatis assumenda. Quisquam repellat illo
            exercitationem dolores cumque voluptates sapiente non quod. Vero,
            consequatur magnam!
          </p>
        </div>
        <div class="inner_columns column-background inner_columns-1">
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sapiente
            labore aperiam, odio porro dolorem adipisci nemo repellat possimus.
            Exercitationem provident maxime minima voluptatem natus deserunt.
            Quam quisquam quos voluptate nam mollitia libero numquam? Eligendi
            sed eaque recusandae voluptatem, culpa quaerat ullam velit harum qui
            facilis accusantium cumque laudantium!
          </p>
        </div>
      </div>
      <!--  -->
    </div>
  </body>
</html>