0

Venho tendo problema com html5 e css no ionic. um desses problemas e posiciona o botão a baixo do slide e deixa los transparentes, com um tamanho significativo bom. Mas com as modificações que venho fazendo, o botões simplesmente não se mexem. queria conta com a ajuda do pessoal que entende bem de html5 e css. E claro, outro problema. o slide que tem no html5, não possui as 3 bolinhas, contendo a quantidade de slides que tem. inserir a descrição da imagem aqui

ele fica simplesmente desse jeito.

html5

      <ion-slide style="background-color:Transparent">
          <img class="img" src="assets/imgs/img4.png">
          <div class="head">
            <h1>BibliCom</h1>
            <h5>O mais novo aplicativo de troca de livros!!</h5>
          </div>
      </ion-slide>

      <ion-slide style="background-color:Transparent" >
        <img class="img" src="assets/imgs/img2.png">
        <div>
          <h1>Troque livros</h1>
          <h2>Coloque os livros que deseja trocar com outros usuarios.</h2>
        </div>
      </ion-slide>

      <ion-slide style="background-color:Transparent">
        <img class="img" src="assets/imgs/img5.png">
        <div>
          <h1>Emprestimos</h1>
          <h2>Empreste e peça emprestados livros que gostou!</h2>
        </div>

      </ion-slide>

    </ion-slides>

    <div class="bt">
      <button class="bt1">Entrar</button>
    </div>
</ion-content>

css:

.estilo-slide{
  height: 92%;
}
.background {
  background-color: #6713d2;
  display: block;
}

.swiper-slide img {
  width: 250px;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  position: relative;
  top: -60px
}

.head h1 {
  font-size: 7vh!important;
  font-weight: lighter!important;
  font-family: 'Pacifico', cursive;
  color: #ffffff;
}

.head h5 {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  padding-top: 2px;
  font-weight: 200;
  font-size: 80;
  color: #ffffff;

}

.bt {
  position: absolute;
  left: 5%;
  bottom: 20px;
  font: 200
}

.bt2 {
  width: 40px;
  height: 60px;
  width: 200px;
}

1 Resposta 1

0

Com relação ao Botão você pode usar o conceito de Flexbox para posiciona-lo abaixo do seu conteúdo. No código eu passo o display como flex e digo que a direção do conteúdo da div container segue a ordem de coluna. já para o botão você pode usar o formato rgba: background: rgba(0,0,0, .5) sendo o último elemento o Alpha (a opacidade) da cor, ou a propriedade opacity que vai de 0 a 1, no código eu passei o valor 0.5.

.container{
  display: flex;
  flex-direction: column;
}

.container_content{
  width: 100%;
  height: 150px;
  background: #AFAFAF
}

.button{
  width: 100%;
  height: 50px;
  opacity: .5;
}
<div class="container">
  <div class="container_content"> Meu Conteúdo </div>
  <div class="container_button">
    <button class="button">Click</button>
  </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .