HTML-Css/flexbox.html at master · anhtung96nb/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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>FlexBox</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
    <link rel="stylesheet" href="style-flexbox.css">
    <script src="main.js"></script>
</head>
<body>
    <div class="ex">
        <p>Thay đổi kích thước cửa sổ trình duyệt để xem hiệu ứng đáp ứng.</p>
    </div>
    <div class="header">
        <h1>Trang web của tôi</h1>
        <p>Với cách bố trí linh hoạt.</p>
    </div>
    <div class="nav">
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
    </div>
    <div class="content">
        <div class="slidebar">
            <div class="slidebar-a">
                    <h1> About Me</h1>
                    <p> photo of me:</p>
                    <div class="photo-slidebar-a" style="height:200px;">
                        <img src="phim.jpg" alt="">
                    </div>
                    <p>
                        Some text about me in culpa qui officia deserunt mollit anim..
                    </p>
            </div>
            <div class="slidebar-b">
                    <h1>More Text</h1>
                    <p>Lorem ipsum dolor sit ame.</p>
                    <div class="items" style="height:60px;">
                        <img src="#" alt="">
                    </div>
                    <div class="items"  style="height:60px;">
                            <img src="#" alt="">
                    </div>
                    <div class="items"  style="height:60px;">
                            <img src="#" alt="">
                    </div>
            </div>

        </div>
        <div class="main">
            <div class="main-a">
                    <h1>TITLE HEADING</h1>
                    <p>Title description, Dec 7, 2017</p>
                    <div class="photo-main-a" style="height:300px;">
                        <img src="moblie.jpg" alt="">
                    </div>
                    <p>Sunt in culpa qui officia deserunt mollit anim id
                        est laborum consectetur adipiscing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco.</p>
            </div>
            <div class="main-a">
                    <h1>TITLE HEADING</h1>
                    <p>Title description, Dec 7, 2017</p>
                    <div class="photo-main-a" style="height:300px;" >
                        <img src="desktop.jpg" alt="">
                    </div>
                    <p>Sunt in culpa qui officia deserunt mollit anim id
                        est laborum consectetur adipiscing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                        Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco.</p>
            </div>
        </div>
    </div>
    <div class="footer">
        footer
    </div>
</body>
</html>