Agora, em telas a partir de 640px precisamos alterar a disposição e a ordem em que os elementos do HTML aparecem na tela. Podemos fazer isso sem alterar o HTML, utilizando apenas o Flexbox.
O resultado final será o seguinte:
No arquivo rodape.css na pasta css faça as seguintes alterações:
.rodape {
padding: 2em 5%;
text-align: center;
font-size: 0.7rem;
}
.rodape__logo {
width: 11.25em;
margin-bottom: 1em;
}
.rodape__lista-midias-sociais {
display: flex;
justify-content: center;
}
.rodape__infos-empresa {
line-height: 1.5;
}
-.̶r̶o̶d̶a̶p̶e̶_̶_̶s̶e̶c̶a̶o̶ +̶ .̶r̶o̶d̶a̶p̶e̶_̶_̶s̶e̶c̶a̶o̶ {̶
- m̶a̶r̶g̶i̶n̶-̶t̶o̶p̶:̶ 2̶e̶m̶;̶
-}̶
-
.rodape__lista-midias-sociais {
display: flex;
justify-content: center;
margin-top: 1em;
}
.rodape__item-midias-sociais {
width: 2.62em;
margin: 0 .25em;
}
.rodape__item-midias-sociais img {
width: 100%;
}
.rodape__titulo {
margin-bottom: 1em;
font-size: 1.45em;
font-weight: bold;
text-transform: uppercase;
}
.rodape_item-lista {
font-weight: 500;
margin: 0.625em 0;
}
+
+@media (max-width: 640px) {
+ .rodape__secao + .rodape__secao {
+ margin-top: 2em;
+ }
+}
+
+@media(min-width: 640px) {
+ .rodape {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+
+ font-size: 1rem;
+ }
+
+ .rodape__secao--sobre,
+ .rodape__secao--cursos,
+ .rodape__secao--links,
+ .rodape__secao--newsletter {
+ width: 45%;
+ }
+
+ .rodape__secao--cursos {
+ order: 1;
+ margin: 0;
+ }
+
+ .rodape__secao--links {
+ order: 2;
+ margin: 0;
+ }
+
+ .rodape__secao--sobre {
+ order: 3;
+ margin-top: 2em;
+ }
+
+ .rodape__secao--newsletter {
+ order: 4;
+ margin-top: 2em;
+ }
+}No arquivo index.html na pasta raíz do projeto faça as seguintes alterações:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Musicdot</title>
<link rel="icon" href="img/favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,&display=block">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/cabecalho.css">
<link rel="stylesheet" href="css/rodape.css">
<link rel="stylesheet" href="css/form-newsletter.css">
</head>
<body>
<header class="cabecalho">
<a href="index.html">
<img class="cabecalho__logo" src="img/musicdot-logo-light.svg" title="Ir para a página inicial da Musicdot" alt="Musicdot">
</a>
<nav>
<ul class="cabecalho__menu">
<li class="cabecalho__item-menu"> <a href="sobre.html#contato"> Contato </a> </li>
<li class="cabecalho__item-menu"> <a href="#"> Entrar </a> </li>
<li class="cabecalho__item-menu cabecalho__item-menu--matricular"> <a href="#"> Matricule-se </a> </li>
</ul>
</nav>
</header>
<main>
Conteúdo principal
</main>
<footer class="rodape">
- <̶s̶e̶c̶t̶i̶o̶n̶ c̶l̶a̶s̶s̶=̶"̶r̶o̶d̶a̶p̶e̶_̶_̶s̶e̶c̶a̶o̶"̶>̶
+ <section class="rodape__secao rodape__secao--sobre">
<img class="rodape__logo" src="img/logo.svg" alt="Logo da MusicDot">
<p class="rodape__infos-empresa">
AOVS Sistemas de Informática S.A.
<br>
CNPJ 05.555.382/0001-33
<br>
Rua Vergueiro - São Paulo/SP
<br>
Telefone (11) 4118-3319
</p>
<ul class="rodape__lista-midias-sociais">
<li class="rodape__item-midias-sociais">
<a href="https://www.facebook.com/musicdotonline">
<img src="img/footer-icone-facebook.svg" alt="MusicDot no Facebook">
</a>
</li>
<li class="rodape__item-midias-sociais">
<a href="https://www.youtube.com/user/musicdotonline">
<img src="img/footer-icone-youtube.svg" alt="MusicDot no YouTube">
</a>
</li>
<li class="rodape__item-midias-sociais">
<a href="https://www.instagram.com/musicdotonline/">
<img src="img/footer-icone-instagram.svg" alt="Instagram">
</a>
</li>
</ul>
</section>
- <̶s̶e̶c̶t̶i̶o̶n̶ c̶l̶a̶s̶s̶=̶"̶r̶o̶d̶a̶p̶e̶_̶_̶s̶e̶c̶a̶o̶"̶>̶
+ <section class="rodape__secao rodape__secao--cursos">
<h2 class="rodape__titulo"> Cursos da MusicDot </h2>
<nav>
<ul>
<li class="rodape_item-lista"><a href="#">Cursos de Teclado & Piano</a></li>
<li class="rodape_item-lista"><a href="#">Cursos de Violão/Guitarra</a></li>
<li class="rodape_item-lista"><a href="#">Cursos de Baixo</a></li>
<li class="rodape_item-lista"><a href="#">Cursos de Bateria</a></li>
<li class="rodape_item-lista"><a href="#">Cursos de Percussão</a></li>
<li class="rodape_item-lista"><a href="#">Cursos de Canto</a></li>
<li class="rodape_item-lista"><a href="#">Cursos de Áudio</a></li>
<li class="rodape_item-lista"><a href="#">Cursos de Teoria</a></li>
<li class="rodape_item-lista"><a href="#">Cursos de Sopro</a></li>
<li class="rodape_item-lista"><a href="#">Cursos de Cordas</a></li>
</ul>
</nav>
</section>
- <̶s̶e̶c̶t̶i̶o̶n̶ c̶l̶a̶s̶s̶=̶"̶r̶o̶d̶a̶p̶e̶_̶_̶s̶e̶c̶a̶o̶"̶>̶
+ <section class="rodape__secao rodape__secao--links">
<h2 class="rodape__titulo"> MusicDot </h2>
<nav>
<ul>
<li class="rodape_item-lista"><a href="#">Apostila</a></li>
<li class="rodape_item-lista"><a href="#">E-book</a></li>
<li class="rodape_item-lista"><a href="#">Login</a></li>
<li class="rodape_item-lista"><a href="#">Matricule-se</a></li>
<li class="rodape_item-lista"><a href="#">Perguntas frequentes</a></li>
<li class="rodape_item-lista"><a href="#">Para Escolas</a></li>
<li class="rodape_item-lista"><a href="#">Contato</a></li>
</ul>
</nav>
</section>
- <̶s̶e̶c̶t̶i̶o̶n̶ c̶l̶a̶s̶s̶=̶"̶r̶o̶d̶a̶p̶e̶_̶_̶s̶e̶c̶a̶o̶"̶>̶
+ <section class="rodape__secao rodape__secao--newsletter">
<h2 class="rodape__titulo">
Receba novidades e lançamentos
</h2>
<form action="#" method="get" class="form-newsletter">
<label for="form-newsletter__label" class="form-newsletter__label">
Seu email pessoal
</label>
<input id="email-newsletter" name="email-newsletter" type="email" class="form-newsletter__campo">
<button type="submit" class="form-newsletter__botao">
OK
</button>
</form>
</section>
</footer>
</body>
</html>