css-pp-responsive/index.html at master · OmarLand/css-pp-responsive · 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 http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Flexbox Responsive</title>
</head>
<body>
    <!-- Englobo el header y hero en un section para el flex column -->
    <section id="heading"">
        <section id="header">
            <p><strong>Header</strong></p>
            <p>Lorem ipsum dolo</p>
        </section>

        <section id="hero">
            <p><strong>Hero</strong></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem mi, porta condimentum mauris eu, auctor ornare dui.</p>
        </section>
    </section>

    <!-- Englobo el content y sidebar para el flex row [Table - Desktop] -->
    <section id="contenedor"">
        <section id="content">
            <p><strong>Content</strong></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem mi, porta condimentum mauris eu, auctor ornare dui. Nunc semper consectetur libero, eget pharetra elit tempor sed. Integer vel molestie ligula, et varius lacus. In commodo placerat ligula, ut scelerisque ex auctor nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            <p>In ut posuere ligula. Proin volutpat dapibus nibh, nec lacinia ligula vulputate et. Sed lacinia, arcu a eleifend blandit, lacus libero cursus nunc, nec interdum purus urna nec massa. Donec volutpat sollicitudin risus, eget iaculis mauris tincidunt vel. Nullam ac dapibus ex. Phasellus dapibus nunc eu nunc volutpat sollicitudin. Phasellus convallis mollis mi faucibus faucibus.</p>
        </section>

        <section id="sidebar">
            <p><strong>Sidebar</strong></p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sem mi, porta condimentum mauris eu, auctor ornare dui. Nunc semper consectetur libero, eget pharetra elit tempor sed. Integer vel molestie ligula, et varius lacus.</p>
        </section>
    </section>


    <!-- Acá englobo el footer -->
    <section id="footer">
        <footer>
            <p><strong>Footer</strong></p>
            <p>In ut posuere ligula. Proin volutpat dapibus nibh, nec lacinia ligula vulputate et. Sed lacinia, arcu a eleifend blandit, lacus libero cursus nunc, nec interdum purus urna nec massa. Donec volutpat sollicitudin risus, eget iaculis mauris tincidunt vel. Nullam ac dapibus ex. Phasellus dapibus nunc eu nunc volutpat sollicitudin.</p>
        </footer>
    </section>

</body>
</html>