flexbox-layout-lab/index.html at master · Ricardo-21/flexbox-layout-lab · 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
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" type="text/css">
        <title>The Recreation</title>
    </head>
    <body>
        <header>
            <h3 class="item1 items"><strong>XYZ Design Group Ltd.</strong></h3>
            <table class="item2 items">
                <tbody>
                    <tr>
                        <td><strong>Home</strong></td>
                        <td><strong>About Us</strong></td>
                        <td><strong>Our Team</strong></td>
                    </tr>
                </tbody>
            </table>
        </header>
                <section id="image">
                    <div id="actual-image">
                    </div>
                </section>
                <section class="container">
                    <article class="item-1, item">
                        <h2>Our Team</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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
                        culpa qui officia deserunt mollit anim id est laborum.
                        </p>
                        <img src="https://via.placeholder.com/150" alt="box"/>
                    </article>
                    <article class="item-2, item">
                        <h2>Our Mission</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        Est sit amet facilisis magna. Dignissim diam quis enim lobortis. Neque gravida in fermentum et sollicitudin ac. Ultrices dui sapien
                        eget mi. Sem viverra aliquet eget sit amet tellus cras adipiscing. Porttitor massa id neque aliquam vestibulum morbi blandit.
                        Dis parturient montes nascetur ridiculus. Porttitor massa id neque aliquam vestibulum morbi. At volutpat diam ut venenatis tellus.
                        Nunc pulvinar sapien et ligula ullamcorper malesuada proin libero nunc. Praesent elementum facilisis leo vel fringilla est.
                        Elementum sagittis vitae et leo. At lectus urna duis convallis convallis tellus. Morbi quis commodo odio aenean sed adipiscing
                        diam donec. Orci a scelerisque purus semper eget duis at tellus at.
                        </p>
                        <br>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        Est sit amet facilisis magna. Dignissim diam quis enim lobortis. Neque gravida in fermentum et sollicitudin ac. Ultrices dui sapien eget mi.
                        Sem viverra aliquet eget sit amet tellus cras adipiscing. Porttitor massa id neque aliquam vestibulum morbi blandit. Dis parturient montes
                        nascetur ridiculus. Porttitor massa id neque aliquam vestibulum morbi. At volutpat diam ut venenatis tellus. Nunc pulvinar sapien et ligula
                        ullamcorper malesuada proin libero nunc. Praesent elementum facilisis leo vel fringilla est. Elementum sagittis vitae et leo. At lectus urna
                        duis convallis convallis tellus. Morbi quis commodo odio aenean sed adipiscing diam donec. Orci a scelerisque purus semper eget duis at tellus
                        at.
                        </p>
                    </article>
                </section>
    </body>
</html>