ermogenes/index.html

## index.html
<!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>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Exemplo de Responsividade</h1>

    <nav>
        <div class="botao">Opção 1</div>
        <div class="botao">Opção 2</div>
        <div class="botao">Opção 3</div>
        <div class="botao">Opção 4</div>
    </nav>

    <div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius optio est corporis eaque similique velit aperiam. Voluptas eos deleniti numquam nobis temporibus omnis eligendi culpa perferendis modi? Molestiae error consequuntur sunt nisi est officia qui distinctio, reprehenderit eum aliquam incidunt quae eos. Unde perspiciatis necessitatibus repellendus est illo, sapiente nulla? Harum dignissimos, cum laudantium, reiciendis qui voluptas aperiam animi odit optio, molestias enim ea? Dicta quidem aperiam, animi, eaque fugiat veritatis repellat nulla nostrum minima illo, eum unde laborum sunt! Quasi maxime magnam similique repellat temporibus corporis perspiciatis qui saepe, laboriosam hic exercitationem excepturi eveniet, recusandae, ut illo veniam tenetur.</p>
        <p>Eos deleniti quod, earum soluta maxime nesciunt molestias incidunt consequatur aspernatur vitae magnam esse provident reprehenderit voluptate, ex, corrupti eum neque tempora dolores nemo suscipit delectus. Repellendus laudantium illum maiores est itaque consequuntur ullam ipsum culpa soluta? Veritatis explicabo, quisquam id excepturi consectetur facere nihil hic laboriosam quis earum velit nostrum esse repellat iusto repudiandae dolorem incidunt, dignissimos nesciunt reiciendis inventore veniam saepe eveniet neque. Et, quam fugiat mollitia, numquam sunt natus cum, repellat voluptatibus accusantium ab vero. Dolores dicta veritatis, atque cupiditate, libero et sunt pariatur recusandae iusto a voluptatibus, blanditiis tenetur! Debitis sit consequatur, molestias molestiae asperiores dolor.</p>
        <p>Exercitationem nihil nisi voluptas officia odio sit cum quos, minima dicta est commodi harum hic quidem. Numquam et harum sit, ad, cum asperiores ratione praesentium beatae provident doloremque nemo magnam iusto sunt rem eligendi est aliquid quasi ab quis, fuga maiores quae! Velit esse doloremque fugit? Suscipit tempora dolor necessitatibus. Cupiditate hic vero debitis quaerat, sint nulla numquam vel? Sed blanditiis incidunt, earum delectus impedit voluptatum et quasi enim ipsum, error nesciunt exercitationem nobis at dicta consequuntur dolores facilis. Amet maxime quidem magnam fugit, voluptate laboriosam recusandae repellendus esse iusto similique. Obcaecati modi doloremque repudiandae unde facilis voluptas porro maiores?</p>
        <p>Eligendi, aperiam dolor quae tempore possimus beatae quam magni velit illum necessitatibus nemo perspiciatis maiores! Natus nesciunt accusantium, mollitia, quasi qui, quae sequi rem voluptatum harum ipsa quos omnis cumque voluptas necessitatibus exercitationem nobis veniam labore deleniti repellendus neque! Natus ullam deleniti cupiditate magni. Culpa nihil commodi nam molestias. At id vitae rerum in dignissimos unde. Excepturi illo doloribus ullam aliquid architecto qui vel reiciendis sed repellat deserunt porro amet laboriosam libero autem, harum cumque ea placeat sit aliquam? Praesentium temporibus doloribus tenetur magni qui molestiae illum exercitationem earum rem id. Reiciendis quidem minus impedit expedita, tempora doloremque cumque quod.</p>
        <p>Atque maxime quae, repellendus optio molestiae ex eaque debitis earum explicabo inventore voluptatibus ipsa minima vero sequi eos aut laboriosam dignissimos? Vel, tenetur. Beatae aut quasi quas eligendi reprehenderit vitae, praesentium sapiente culpa asperiores, optio laborum iure? Sunt nam placeat repudiandae nulla, molestiae similique, officia optio dolores sed eaque quas. Recusandae, eos maiores esse ipsam a labore exercitationem eius cumque, atque laudantium delectus incidunt sed quis veniam voluptas blanditiis? Ullam, doloremque, id, numquam iure labore exercitationem facere harum unde esse optio dolorum minus amet vel officia cum ipsa sint repudiandae omnis nam! Dicta nobis nam modi rerum nostrum labore vel!</p>
    </div>
</body>
</html>

## style.css
body {
    background-color: rgb(75, 75, 141);
    color: white;
    font-size: 24px;
}

nav {
    display: flex;
    justify-content: space-around;
}

@media (max-width: 800px) {
    body {
        background-color: orange;
    }
}

@media (max-width: 500px) {
    body {
        background-color: green;
        font-size: 16px;
    }

    h1 {
        display: none;
    }

    nav {
        flex-direction: column;
    }
}
	<!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>Document</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<h1>Exemplo de Responsividade</h1>

	<nav>
	<div class="botao">Opção 1</div>
	<div class="botao">Opção 2</div>
	<div class="botao">Opção 3</div>
	<div class="botao">Opção 4</div>
	</nav>

	<div>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius optio est corporis eaque similique velit aperiam. Voluptas eos deleniti numquam nobis temporibus omnis eligendi culpa perferendis modi? Molestiae error consequuntur sunt nisi est officia qui distinctio, reprehenderit eum aliquam incidunt quae eos. Unde perspiciatis necessitatibus repellendus est illo, sapiente nulla? Harum dignissimos, cum laudantium, reiciendis qui voluptas aperiam animi odit optio, molestias enim ea? Dicta quidem aperiam, animi, eaque fugiat veritatis repellat nulla nostrum minima illo, eum unde laborum sunt! Quasi maxime magnam similique repellat temporibus corporis perspiciatis qui saepe, laboriosam hic exercitationem excepturi eveniet, recusandae, ut illo veniam tenetur.</p>
	<p>Eos deleniti quod, earum soluta maxime nesciunt molestias incidunt consequatur aspernatur vitae magnam esse provident reprehenderit voluptate, ex, corrupti eum neque tempora dolores nemo suscipit delectus. Repellendus laudantium illum maiores est itaque consequuntur ullam ipsum culpa soluta? Veritatis explicabo, quisquam id excepturi consectetur facere nihil hic laboriosam quis earum velit nostrum esse repellat iusto repudiandae dolorem incidunt, dignissimos nesciunt reiciendis inventore veniam saepe eveniet neque. Et, quam fugiat mollitia, numquam sunt natus cum, repellat voluptatibus accusantium ab vero. Dolores dicta veritatis, atque cupiditate, libero et sunt pariatur recusandae iusto a voluptatibus, blanditiis tenetur! Debitis sit consequatur, molestias molestiae asperiores dolor.</p>
	<p>Exercitationem nihil nisi voluptas officia odio sit cum quos, minima dicta est commodi harum hic quidem. Numquam et harum sit, ad, cum asperiores ratione praesentium beatae provident doloremque nemo magnam iusto sunt rem eligendi est aliquid quasi ab quis, fuga maiores quae! Velit esse doloremque fugit? Suscipit tempora dolor necessitatibus. Cupiditate hic vero debitis quaerat, sint nulla numquam vel? Sed blanditiis incidunt, earum delectus impedit voluptatum et quasi enim ipsum, error nesciunt exercitationem nobis at dicta consequuntur dolores facilis. Amet maxime quidem magnam fugit, voluptate laboriosam recusandae repellendus esse iusto similique. Obcaecati modi doloremque repudiandae unde facilis voluptas porro maiores?</p>
	<p>Eligendi, aperiam dolor quae tempore possimus beatae quam magni velit illum necessitatibus nemo perspiciatis maiores! Natus nesciunt accusantium, mollitia, quasi qui, quae sequi rem voluptatum harum ipsa quos omnis cumque voluptas necessitatibus exercitationem nobis veniam labore deleniti repellendus neque! Natus ullam deleniti cupiditate magni. Culpa nihil commodi nam molestias. At id vitae rerum in dignissimos unde. Excepturi illo doloribus ullam aliquid architecto qui vel reiciendis sed repellat deserunt porro amet laboriosam libero autem, harum cumque ea placeat sit aliquam? Praesentium temporibus doloribus tenetur magni qui molestiae illum exercitationem earum rem id. Reiciendis quidem minus impedit expedita, tempora doloremque cumque quod.</p>
	<p>Atque maxime quae, repellendus optio molestiae ex eaque debitis earum explicabo inventore voluptatibus ipsa minima vero sequi eos aut laboriosam dignissimos? Vel, tenetur. Beatae aut quasi quas eligendi reprehenderit vitae, praesentium sapiente culpa asperiores, optio laborum iure? Sunt nam placeat repudiandae nulla, molestiae similique, officia optio dolores sed eaque quas. Recusandae, eos maiores esse ipsam a labore exercitationem eius cumque, atque laudantium delectus incidunt sed quis veniam voluptas blanditiis? Ullam, doloremque, id, numquam iure labore exercitationem facere harum unde esse optio dolorum minus amet vel officia cum ipsa sint repudiandae omnis nam! Dicta nobis nam modi rerum nostrum labore vel!</p>
	</div>
	</body>
	</html>
	body {
	background-color: rgb(75, 75, 141);
	color: white;
	font-size: 24px;
	}

	nav {
	display: flex;
	justify-content: space-around;
	}

	@media (max-width: 800px) {
	body {
	background-color: orange;
	}
	}

	@media (max-width: 500px) {
	body {
	background-color: green;
	font-size: 16px;
	}

	h1 {
	display: none;
	}

	nav {
	flex-direction: column;
	}
	}