module2/intex.html at master · hackinguide/module2 · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/module2.css">
    <title>flexbox Tutorial</title>
    <style>
        * {
            box-sizing: content-box;
            align-items: center;
        }

        .container {
            height: 544px;
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            /* justify-content: center; */
            align-items: stretch;
            align-items: flex-end;
            align-items: flex-start;
        }

        .item {
            width: 296px;
            height: 200px;
            background-color: rgb(41, 230, 243);
            border: 2px solid black;
            margin: 32px;
            padding: 41px;
            flex-wrap: wrap;
            box-sizing: content-box;
            display: block;

        }

        #item-1 {
            float: left;
            width: 12%px;

        }

        #item-2 {
            float: left;
            width: 296px;
        }

        #item-3 {

            float: left;
            width: 296px;
        }

        .right {
            width: 98px;
            height: 36px;
            background-color: rgb(0, 255, 115);
            border: 2px solid black;
            padding: 7px;
            margin: 12px;
        }

        #t1 {
            position: absolute;
            top: 101px;
            left: 292px;

        }

        #t2 {
            position: absolute;
            top: 101px;
            left: 738px;
        }

        #t3 {

            position: absolute;
            top: 101px;
            left: 1186px;
            float: left;

        }

    </style>
</head>

<body>
    <h1>This is Flexbox Tutorial</h1>
    <div class="container">
        <section class="item" id="item-1">
            <p class="w3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima consequuntur, magni aliquid
                quasi ab
                omnis ex eaque corporis amet ipsum dolorem. Esse sequi distinctio magnam natus cumque. Atque eveniet
                fuga, perferendis beatae ratione tempore.</p>
        </section>

        <section class="item" id="item-2">
            <p class="w3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus ipsa iste tenetur eius,
                et
                consequatur nemo ex quia ratione ullam fugiat omnis deleniti accusantium consequuntur molestiae quam at
                harum quasi perspiciatis maxime tempore? Ex.</p>
        </section>

        <section class="item" id="item-3">
            <p class="w3">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum nemo cum sapiente aperiam
                eaque quasi
                harum porro reiciendis repellat. At, vel dolorum ab, architecto autem nihil aspernatur odit,
                exercitationem consequuntur nesciunt quaerat obcaecati adipisci?</p>
        </section>
        <div class="right" id="t1">
            <p>chicken</p>
        </div>
        <div class="right" id="t2">
            <p>Beef</p>
        </div>
        <div class="right" id="t3">
            <p>Sushi</p>
        </div>

    </div>
</body>

</html>