lab-html-css-flex-layout/index.html at master · asif4014/lab-html-css-flex-layout · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <header>
        <h1>Responsive Layout using Flexbox</h1>
    </header>

    <div id="main">
        <nav>nav</nav>


        <article>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Non sodales neque sodales ut etiam sit amet nisl purus. Risus pretium quam
                vulputate dignissim suspendisse in est ante in. Dolor purus non enim praesent elementum facilisis leo.
                Sed libero enim sed faucibus turpis in. Nunc sed velit dignissim sodales ut eu sem integer. Etiam
                dignissim diam quis enim. Cursus in hac habitasse platea dictumst. Lectus vestibulum mattis ullamcorper
                velit sed ullamcorper morbi tincidunt. Tristique nulla aliquet enim tortor at auctor urna nunc. Orci
                nulla pellentesque dignissim enim. Consectetur a erat nam at lectus urna duis convallis convallis. A
                cras semper auctor neque vitae tempus quam pellentesque nec. Quisque egestas diam in arcu cursus euismod
                quis viverra nibh. Accumsan sit amet nulla facilisi morbi tempus iaculis urna id.</p>

            <p>At in tellus integer feugiat scelerisque. Urna cursus eget nunc scelerisque viverra mauris. Arcu non odio
                euismod lacinia at quis. Et egestas quis ipsum suspendisse ultrices gravida dictum. Lectus sit amet est
                placerat in. Aliquet risus feugiat in ante metus. Rutrum tellus pellentesque eu tincidunt. Augue
                interdum velit euismod in pellentesque massa placerat. Id nibh tortor id aliquet lectus proin nibh nisl
                condimentum. Mi bibendum neque egestas congue quisque egestas.</p>
        </article>
        <aside>aside</aside>

    </div>
    <footer>
        Footer
    </footer>


</body>

</html>