How to place Tagas ''a' in the banner corner?

Asked

Viewed 32 times

-2

I want to schedule the time and contact in the right corner of the banner and it’s like this : https://prnt.sc/1gnnx6b

code:

.banner {
  background-image: url(../img/banner-barbearia.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 55rem;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

.bannerTitulo {
  color: #f2f2f2;
  font-size: 4.5rem;
  font-weight: 400;
}

.bannerP {
  color: #f2f2f2;
  font-size: 1.125rem;
  margin: 0;
}

.botaoBanner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
<section class="bannerBarbearia">
  <div class="banner">
    <h1 class="bannerTitulo">Transformando homens em astros</h1>
    <p class="bannerP"> A experiência completa da melhor barbearia de Curitiba.</p>
    <p class="bannerP">A melhor versão da sua barba e cabelo</p>
    <div class="botaoBanner">
      <a href="#" class="botaoAgendar">Agendar horário</a>
      <a href="#" class="botaoContato">Contato</a>
    </div>
  </div>
</section>

html css
  • 1

    I didn’t understand the question, could you be clearer? If you think it helps to explain put an image of the result you want to get

  • That would be the design reference :https://prnt.sc/1go84vi

1 answer

0


From what I understand you want to line up <a> on the right. You were missing a width for the 'container' of the buttons. Insert width: 100%

.banner {
  background-image: url(../img/banner-barbearia.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 55rem;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

.bannerTitulo {
  color: #f2f2f2;
  font-size: 4.5rem;
  font-weight: 400;
}

.bannerP {
  color: #f2f2f2;
  font-size: 1.125rem;
  margin: 0;
}

.botaoBanner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
}
<section class="bannerBarbearia">
  <div class="banner">
    <h1 class="bannerTitulo">Transformando homens em astros</h1>
    <p class="bannerP"> A experiência completa da melhor barbearia de Curitiba.</p>
    <p class="bannerP">A melhor versão da sua barba e cabelo</p>
    <div class="botaoBanner">
      <a href="#" class="botaoAgendar">Agendar horário</a>
      <a href="#" class="botaoContato">Contato</a>
    </div>
  </div>
</section>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.