8
respostas

Referente ao curso HTML e CSS: responsividade com mobile-first

por Sabrina Calado da silva

| 208.7k xp | 12 posts

As bordas não estão aparecendo no rodapé

rodape.css:

hr { margin: 0;

}

.rodape { background-color: var(--branco); padding: 1em; } .lista-rodape { display: none; }

@media screen and (min-width:1024px) { .rodape { display: flex; justify-content: space-around; } .lista-rodape { display: block;

} .lista-rodape__item { display: flex ; align-items: center; margin: 0.6em 0; }

.lista-rodape__link { color: var(--cinza); text-decoration: none; margin-left: 0.6em; }

.lista-rodape__titulo {
    font-size: 14px;
    color: var(--cinza-claro);
}

.rodape__titulo {
    font-size: 24px;
}

} @media screen and (min-width:1728px) { .lista-rodape{ border-left: 1px solid var(--cinza-claro); padding-left: 1em;

}

.rodape {
    padding: 3em 0;
}

}

index.html:

8 respostas

por Sabrina Calado da silva

| 208.7k xp | 12 posts

27/08/2023

    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap" rel="stylesheet">/>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
  <header class="cabeçalho">
     <div class="container">
        <input type="checkbox" id="menu" class="container__botao">
        <label for="menu">
            
            <span class="cabeçalho__menu-hamburguer container__imagem"></span>
        </label>

       <ul class="lista-menu">
        <li class="lista-menu__titulo">Categorias</li>
        <li class="lista-menu__item">
            <a href="#" class="lista-menu__link">Programação</a>
        </li>
        <li class="lista-menu__item">
            <a href="#" class="lista-menu__link">Front-end</a>
        </li>
        <li class="lista-menu__item">
            <a href="#" class="lista-menu__link">Infraestrutura</a>
        </li>
        <li class="lista-menu__item">
            <a href="#" class="lista-menu__link">Front-end</a>
        </li>
        <li class="lista-menu__item">
            <a href="#" class="lista-menu__link">Business</a>
        </li>
        <li class="lista-menu__item">
            <a href="#" class="lista-menu__link">Designer & UX</a>
        </li>
</ul>

AluraBooks

- Categorias

por Sabrina Calado da silva

| 208.7k xp | 12 posts

27/08/2023

Minha sacola

Meu perfil

</header>
<section class="banner">
    <h2 class="banner__titulo">Já sabe por onde começar?</h2>
    <p class="banner__texto">Encontre em nossa estante o que precisa para seu desenvolvimento!</p>
    <input typt="search" class="banner__pesquisa" placeholder="Qual será sua próxima leitura?">
</section>

<section class="carrossel">
    <h2 class="carrossel__titulo">Novos lançamentos</h2>
    <!-- Slider main container -->
    <div class="carrosel__container">
  <div class="swiper">
    <!-- Additional required wrapper -->
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

        <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide"><img src="img/Acessibilidade.svg" alt="Livro sobre acessibilidade "></div>
                <div class="swiper-slide"><img src="img/ApacheKafka.svg" alt="Livro sobre Kafka da alura"></div>
                <div class="swiper-slide"><img src="img/Liderança.svg" alt="Livro sobre liderança"></div>
                <div class="swiper-slide"><img src="img/Guia Front-end.svg" alt="Guia front end"></div>
                <div class="swiper-slide"><img src="img/Javascript.svg" alt="Guia sobre Java"></div>
                ...
            </div>
            
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>

<div class="card">
    <!--1º linha-->
    <div class="card__descrição">
        <!--1º coluna-->
        <div class="descrição">
            <h3 class="descrição__titulo">Talvez você também se interesse por... </h3>
            <h2 class="descrição__titulo-livro">Angular 11 e Firebase</h2>
            <p class="descrição__texto">Construindo uma aplicação integrada com a plataforma do Google.</p>
        </div>
        <!--2º coluna -->
        <img src="img/Perfil-escritora 2.svg" class="descrição__imagem">
    </div>

    <!-- 2º linha-->
    <div class="card__botões">
        <!--1º coluna-->
        <ul class="botões">
            <li class="botões__item"><img src="img/Favoritos.svg" alt="Favoritar livro"></li>
            <li class="botões__item"><img src="img/Compras.svg" alt="Adicionar ao carrinho"></li>
        </ul>
        <!--2º coluna-->
        <a href="#" class="botões__ancora">Saiba mais</a>
    </div>
</div>

    <section class="carrossel">
        <h2 class="carrossel__titulo">Mais vendidos</h2>
         <!-- Slider main container -->
         <div class="carrosel__container">
      <div class="swiper">
        <!-- Additional required wrapper -->
        <!-- If we need pagination -->
          <div class="swiper-pagination"></div>

por Sabrina Calado da silva

| 208.7k xp | 12 posts

27/08/2023

...

<div class="card">
    <!-- 1º linha -->
    <div class="card__descrição">
        <!-- 1º coluna -->
        <div class="descrição">
            <img src="img/Estrelinhas.svg" alt="Avaliação 5 estrelas">
            <h3 class="descrição__titulo">Autora do Mês</h3>
            <h2 class="descrição__titulo-livro">Juliana Agarikov</h2>
            <p class="descrição__texto">Analista de sistemas e escritora, Juliana é especialista em Front-End.
            </p>
        </div>
        <!-- 2º coluna -->
        <img src="img/Perfil-escritora 1.svg" class="descrição__imagem">
    </div>


    <!-- 2º linha -->
    <div class="card__botões">
        <!-- 1º coluna -->
        <ul class="botões">
            <li class="botões__item"><img src="img/Favoritos.svg" alt="Favoritar livro"></li>
            <li class="botões__item"><img src="img/Compras.svg" alt="Adicionar no carrinho de compras"></li>
        </ul>
        <!-- 2º coluna -->
        <a href="#" class="botões__ancora">Saiba mais</a>
    </div>
</div>

por Sabrina Calado da silva

| 208.7k xp | 12 posts

27/08/2023

TOPICOS VISITADOS RECENTEMENTE

</section>

<section class="contato">
    <div class="contato__descrição">
    <h2 class="contato__titulo">Fique por dentro das novidades!</h2>
    <p class="contato__texto">Atualizações de e-books, novos livros, promoções e outros.</p>
</div>
    <input type="email" placeholder="Cadastre seu e-mail" class="contato__email">
    

</section>

Grupo Alura

Educação
Casa do código
Caelum

 </ul>
 <ul class="lista-rodape">
 <li class="lista-rodape__titulo">Educação online</li>
 <li class="lista-rodape__item">
    <img src="img/Alura.svg" alt="Logo da alura">
 <a href="#" class="lista-rodapé__link">Alura</a>
</li>
<li class="lista-rodape__item">
    <img src="img/AluraparaEmpresas.svg" alt="Logo da alura para Empresas">
 <a href="#" class="lista-rodapé__link">Alura para empresas</a>
</li>
<li class="lista-rodape__item">
    <img src="img/AluraLatam.svg" alt="Logo da alura latam">
 <a href="#" class="lista-rodapé__link">Alura para empresas</a>
</li>
<li class="lista-rodape__item">
    <img src="img/Alura Star.svg" alt="Logo da Alura Star">
 <a href="#" class="lista-rodape__link">Alura Star</a>
</li>
<li class="lista-rodape__item">
    <img src="img/MusicDot.svg" alt="Logo da Music Dot">
 <a href="#" class="lista-rodape__link">Music Dot</a>
</li>
<li class="lista-rodape__item">
    <img src="img/Alura Lingua.svg" alt="Logo da Alura Lingua">
 <a href="#" class="lista-rodapé__link">Alura Lingua</a>
</li>
<li class="lista-rodape__item">
    <img src="img/PM3.svg" alt="Logo PM3">
 <a href="#" class="lista-rodapé__link">PM3</a>
</li>
 </ul>

por Sabrina Calado da silva

| 208.7k xp | 12 posts

27/08/2023

por Estudante

| 274.4k xp | 229 posts

03/09/2023

Olá Sabrina

Consegue compartilhar seu projeto no GitHub pra gente analisar?

por Sabrina Calado da silva

| 208.7k xp | 12 posts

12/09/2023

Oi!!! eu consegui resolver o problema...

Fiquei até com vergonha de falar, não estava aparecendo as bordas porque eu estava verificando com a dimensão errada... e as bordas só aparecem com a dimensão de 1728px kkkkkkk.

Obrigada por tentar me ajudar !!!

por Estudante

| 274.4k xp | 229 posts

12/09/2023

Que bom que conseguiu resolver!

Disponha =D