Web_Pre_Intern/testflex.html at master · EaintMM/Web_Pre_Intern · 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
<!DOCTYPE html>
<html>
    <head>
        <title>Test Flex</title>
        <style>
            .body{
                display: flex;
            }
            .left{
                width: 30%;
                background-color: magenta;
            }
            .middle{
                width: 40%;
                background-color: teal;
            }
            .footer{
                background-color: maroon;
            }
            .image{
                float: left;
                padding: 5px 5px 0px 5px;
            }
        </style>
    </head>
    <body>
        <div>
            <div class="header">Header</div>
            <div class="body">
                <div class="left">
                    <img src="logos.png" width="100px" class="image" >
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed cumque adipisci doloribus dolore vel. Laborum culpa beatae deserunt quos veritatis minus alias, sunt, fugiat corrupti ullam reiciendis, laboriosam cum itaque!
                </div>
                <div class="middle">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, architecto officiis commodi ex consequatur est et cumque illo libero explicabo animi quas repellat cum ipsum molestias! Molestias autem ea animi.
                </div>
                <div class="right">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil ipsum rem illum odio quae labore soluta ipsam officiis commodi reprehenderit? Explicabo vitae deserunt magnam unde, nobis mollitia tempora tempore harum?
                </div>
            </div>
            <div class="footer">Footer</div>
        </div>
    </body>
</html>