Projeto-Android/responsividade.html at main · CH-025/Projeto-Android · 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
<!DOCTYPE html>
<html lang="pt-br">
<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>teste de responsividade</title>
    <style>
        body {
            background-color: rgb(77, 76, 75);

        }
        main {
            background-color: white;
            padding: 20px;
            border-radius: 10px;


            max-width: 800px;
            min-width: 280px;
            margin: auto;

        }

        img {
            width: 100%;
        }
    </style>
</head>
<body>
    <main>
        <h1>Testando responsividade</h1>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis aut earum labore vel aspernatur nihil culpa quia repellendus, saepe eum nisi, expedita maxime error itaque ad! Repudiandae incidunt earum soluta? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo accusamus cupiditate omnis veritatis consequuntur eligendi ea ipsam! Nostrum laudantium totam, eos illum consectetur explicabo cum maiores culpa asperiores dolore dignissimos! Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque tenetur consectetur obcaecati enim totam unde molestiae voluptate. Vitae illo totam excepturi doloribus. Quia id ea expedita fugiat illum asperiores quod!</p>
        <picture>
            <source media="(max-width: 800px)" srcset="imagens/irina-blok-pq.jpg">
            <img src="imagens/irina-blok.jpg" alt="irina">
        </picture>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis aut earum labore vel aspernatur nihil culpa quia repellendus, saepe eum nisi, expedita maxime error itaque ad! Repudiandae incidunt earum soluta? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nemo accusamus cupiditate omnis veritatis consequuntur eligendi ea ipsam! Nostrum laudantium totam, eos illum consectetur explicabo cum maiores culpa asperiores dolore dignissimos! Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque tenetur consectetur obcaecati enim totam unde molestiae voluptate. Vitae illo totam excepturi doloribus. Quia id ea expedita fugiat illum asperiores quod!</p>
    </main>
</body>
</html>