Responsive/responsive.html at main · DaniFunes/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
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!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">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

    <style>
        body {
            background-color: black;
            margin: 20px;
            color: white;
            font-family: 'Roboto', sans-serif;
        }

        * {
            box-sizing: border-box;
        }

        h1 {
            font-size: 15px;
        }

        .cabecera {
            background-color: #03a9f4;

        }

        .hero {
            background-color: #d22b1f;
        }

        .content {
            background-color: #129a22;
        }

        .sidebar {
            background-color: #673ab7;
        }

        .footer {
            background-color: #616161;
        }

        .cabecera,
        .hero,
        .sidebar,
        .content,
        .footer {
            padding: 20px;
        }

        @media screen and (min-width: 769px) {
            .container {
                display: flex;
            }

        }

        @media screen and (min-width: 1024px) {
            .container {
                display: flex;
                width: 80%;
                margin: 0 auto;
            }

        }
    </style>
</head>

<body>
    <h1>MAIN
    </h1>
    <header class="cabecera">
        <h1>HEADER</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aperiam itaque placeat alias temporibus asperiores
            consectetur nemo ab minus sit dolor.</p>
    </header>

    <main>
        <section class="hero">
            <h1>HERO</h1>
            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit ipsum asperiores dolor laboriosam quae
                magni laudantium quo dolore obcaecati animi!</p>
        </section>
    </main>
    <div class="container">
        <div class="content">
            <h1>CONTENT</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt debitis excepturi a, ea natus neque
                reprehenderit perspiciatis labore ad fugit necessitatibus quidem optio ipsam modi placeat, repellendus
                culpa inventore vel dignissimos totam molestias saepe accusantium eligendi ex? Ipsum veritatis soluta
                quidem repellendus excepturi tenetur explicabo odit magni sit asperiores praesentium ullam dignissimos
                pariatur impedit distinctio velit iure cupiditate ad nisi dolorem eligendi, voluptatem voluptate! Ipsam
                nobis ullam, adipisci totam repellat aperiam dolorem. Saepe deleniti molestiae aliquid illo commodi
                natus qui incidunt hic iure quod labore ipsam laboriosam ut maxime dolore, voluptas veniam officia velit
                reiciendis non ab amet. In exercitationem autem temporibus adipisci, excepturi unde amet officiis atque
                cupiditate perspiciatis ut laudantium porro? Blanditiis numquam recusandae perferendis odio error odit
                harum atque ex sed fugit. Enim, atque! Hic, officia sit rem, sunt nulla quaerat quo cum saepe omnis
                quisquam dolores repudiandae eum. Commodi ducimus earum laboriosam in, facere dolorum minus explicabo
                quod fugit, dignissimos esse dolorem dolore natus quisquam exercitationem quaerat! Vero alias error
                assumenda saepe similique, ex eveniet placeat libero inventore totam accusamus nulla quidem accusantium
                soluta obcaecati consequuntur, amet praesentium maxime possimus, molestias sunt eaque numquam voluptate.
                Voluptatum tempora delectus nobis perspiciatis numquam voluptatem reprehenderit mollitia ipsam harum?
            </p>
        </div>
        <div class="sidebar">
            <h1>SIDEBAR</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda amet non nulla blanditiis obcaecati
                nostrum quibusdam aspernatur rem atque voluptatem quos, in laboriosam provident consequatur eos dolor
                nemo quis doloribus laborum voluptatum at minima. Praesentium libero numquam consequatur vel blanditiis
                dolor et impedit sequi natus. Dignissimos aperiam nostrum assumenda aliquid et dolorem non voluptatibus
                iure omnis quae ipsum exercitationem harum rerum, fugiat molestiae perferendis! Earum accusamus optio
                sunt nostrum ex perferendis perspiciatis enim autem fugiat corrupti a aliquam incidunt esse, nulla qui
                iure exercitationem, error dolorum cum eaque ipsam possimus. Quos deserunt aut ratione quibusdam
                consectetur. Atque impedit natus inventore.</p>
        </div>
    </div>
    <footer class="footer">
        <h1>FOOTER</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci consectetur excepturi iure fugit corporis
            porro accusantium voluptates, est neque quisquam!</p>

    </footer>


</body>

</html>