How to position the text on the right side of this Section? I used"float: right;", but keep this white space, I’m using Bootstrap for the texts

Asked

Viewed 47 times

0

//Caso aja algum script que me ajude, adoraria saber. Obrigado //pela atenção pessoal :)
body{
    background: #24282f;
}

/*GALERIA DE IMAGEM*/
.galeria-second{
    width: 42%;
    height: 530px;
    overflow: hidden;
    margin-left: 20px;
    margin-top: 2%;
    
}

.foto-second{
    position: absolute;
    opacity: 0;
    animation-name: animacao;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    width: 42%;
    height: 530px;
    
}

/*ANIMAÇÃO DE TRANSIÇÃO DAS IMAGENS*/
.foto-second:nth-child(1){
    opacity: 1;
}
  
.foto-second:nth-child(2){
    animation-delay: 5s;
}
  
.foto-second:nth-child(3){
    animation-delay: 10s;
}
  
.foto-second:nth-child(4){
    animation-delay: 15s;
}
  
@keyframes animacao{
    25%{
        opacity: 1;
        
    }
    50%{
        opacity: 0;
    }
}

/*PARTE DOS PARÁGRAFOS*/
p#teste1{
    color: black;
    font-style: italic;
    font-family: Roboto;
    padding-left: 40px;
    padding-right: 20px;
    width: 55%;
    float: right;
    
}

p#teste2{
    color: black;
    font-style: italic;
    font-family: Roboto;
    padding-left: 40px;
    padding-right: 20px;
    width: 55%;
    float: right;
}

p#teste3{
    color: black;
    font-style: italic;
    font-family: Roboto;
    padding-left: 40px;
    float: right;
    padding-right: 20px;
    width: 55%;
}
<!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>Página para Testes</title>
  
  <!-- Linkando a estilização do Bootstrap -->
  <!-- Nessa parte da minha página eu a usei para a criação dos parágrafos, 
  cuja as classes são "lead" por padrão do Bootstrap -->

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

</head>
<body>
  
  <!-- Seção de imagens, feito sem Bootstrap -->
  <!-- Estou criando um site sobre RPG, por isso as imagens são desse estilo XD -->
  <section class="galeria-second">
    <img src="https://i.pinimg.com/236x/0b/79/cd/0b79cd5f63eec0264f6495ee72ec364e.jpg" width="100%" height="530px" class="foto-second"> 
    <img src="https://i.pinimg.com/564x/f3/f1/c6/f3f1c623a56ca5ab7f8966f423e22bbb.jpg" width="100%" height="530px" class="foto-second"> 
    <img src="https://i.pinimg.com/236x/80/ed/70/80ed70dc9cf6509d9fde5ac668c2ad76.jpg" width="100%" height="530px" class="foto-second"> 
    <img src="https://i.pinimg.com/236x/cf/ea/50/cfea509e8b8d8c74ded792265720feb7.jpg" width="100%" height="530px" class="foto-second"> 
  </section> 

  <!-- Parte dos textos que foram feitos utilizando a classe "lead" do bootstrap -->
  <p class="lead" id="teste1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum lobortis nulla eu imperdiet. Morbi a neque id dolor pulvinar mollis. Sed condimentum sed tellus vel malesuada. Aliquam ex lacus, posuere nec ipsum sed, dictum malesuada nisl. Aenean a ligula pretium, tristique velit sed, scelerisque tortor. Proin feugiat egestas neque et lacinia. Nullam hendrerit risus auctor, ornare mi nec, viverra nisl. Donec congue erat quis nisi ultricies porttitor.

  </p>
  <p class="lead" id="teste2">
    Cras ut congue est. Mauris vel lectus mollis, gravida neque sit amet, convallis sapien. Vestibulum laoreet neque at erat rhoncus vehicula id eget diam. Phasellus volutpat, ipsum a feugiat commodo, neque nisi interdum arcu, vel varius risus tortor eget mauris. Mauris scelerisque est vel lacus cursus, quis vulputate nisi vestibulum. Praesent pulvinar pharetra urna, et lacinia sapien porttitor eget. Aenean tristique felis sit amet purus posuere ultricies. Nunc tristique, est id dapibus bibendum, justo ante varius lacus, eu tincidunt mi libero nec metus. Quisque vel euismod neque. Etiam nec eros est. Sed ac ipsum ut enim interdum sagittis. Nullam eu sollicitudin tellus, at fringilla nisi. Phasellus tincidunt dolor sapien, vitae pellentesque leo ultrices quis. Duis consequat id ante ut accumsan.
  </p>
  <p class="lead" id="teste3">
    Nulla faucibus tortor turpis, ac fringilla nunc tristique sit amet. Suspendisse molestie mollis nulla, eget vestibulum massa tristique quis. Phasellus eget consequat lectus. Vestibulum vehicula libero vitae leo suscipit vestibulum. Nulla facilisi. Nullam ultricies dolor et leo pharetra, eget vehicula metus congue. Donec venenatis nec risus eu tristique. Etiam non rhoncus nibh, quis lobortis lacus. Donec erat ipsum, eleifend sodales pretium vitae, pharetra vel nunc. Phasellus libero nisl, porta non facilisis eget, tincidunt a augue. Fusce placerat justo nunc, ac dapibus nunc vehicula non.
  </p>

</body>
</html>

html css bootstrap-4

1 answer

0


welcome to Stack Overflow!

I didn’t have to change your css at all. Being using Bootstrap makes it much easier to do what you need.

I just inserted a <main>to encompass everything and I used the class d-flex.

The complete documentation you can find here: Flex - Bootstrap v5.0

body {
  background: #24282f;
}


/*GALERIA DE IMAGEM*/

.galeria-second {
  width: 42%;
  height: 530px;
  overflow: hidden;
  margin-left: 20px;
  margin-top: 2%;
}

.foto-second {
  position: absolute;
  opacity: 0;
  animation-name: animacao;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  width: 42%;
  height: 530px;
}


/*ANIMAÇÃO DE TRANSIÇÃO DAS IMAGENS*/

.foto-second:nth-child(1) {
  opacity: 1;
}

.foto-second:nth-child(2) {
  animation-delay: 5s;
}

.foto-second:nth-child(3) {
  animation-delay: 10s;
}

.foto-second:nth-child(4) {
  animation-delay: 15s;
}

@keyframes animacao {
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}


/*PARTE DOS PARÁGRAFOS*/

p#teste1 {
  color: black;
  font-style: italic;
  font-family: Roboto;
  padding-left: 40px;
  padding-right: 20px;
  width: 55%;
  float: right;
}

p#teste2 {
  color: black;
  font-style: italic;
  font-family: Roboto;
  padding-left: 40px;
  padding-right: 20px;
  width: 55%;
  float: right;
}

p#teste3 {
  color: black;
  font-style: italic;
  font-family: Roboto;
  padding-left: 40px;
  float: right;
  padding-right: 20px;
  width: 55%;
}
<!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>Página para Testes</title>

  <!-- Linkando a estilização do Bootstrap -->
  <!-- Nessa parte da minha página eu a usei para a criação dos parágrafos, 
  cuja as classes são "lead" por padrão do Bootstrap -->

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

</head>

<body>
  <main class="d-flex">
    <section class="galeria-second">
      <img src="https://i.pinimg.com/236x/0b/79/cd/0b79cd5f63eec0264f6495ee72ec364e.jpg" width="100%" height="530px" class="foto-second">
      <img src="https://i.pinimg.com/564x/f3/f1/c6/f3f1c623a56ca5ab7f8966f423e22bbb.jpg" width="100%" height="530px" class="foto-second">
      <img src="https://i.pinimg.com/236x/80/ed/70/80ed70dc9cf6509d9fde5ac668c2ad76.jpg" width="100%" height="530px" class="foto-second">
      <img src="https://i.pinimg.com/236x/cf/ea/50/cfea509e8b8d8c74ded792265720feb7.jpg" width="100%" height="530px" class="foto-second">
    </section>

    <!-- Parte dos textos que foram feitos utilizando a classe "lead" do bootstrap -->
    <article>
      <p class="lead" id="teste1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum lobortis nulla eu imperdiet. Morbi a neque id dolor pulvinar mollis. Sed condimentum sed tellus vel malesuada. Aliquam ex lacus, posuere nec ipsum sed, dictum malesuada nisl.
        Aenean a ligula pretium, tristique velit sed, scelerisque tortor. Proin feugiat egestas neque et lacinia. Nullam hendrerit risus auctor, ornare mi nec, viverra nisl. Donec congue erat quis nisi ultricies porttitor.

      </p>
      <p class="lead" id="teste2">
        Cras ut congue est. Mauris vel lectus mollis, gravida neque sit amet, convallis sapien. Vestibulum laoreet neque at erat rhoncus vehicula id eget diam. Phasellus volutpat, ipsum a feugiat commodo, neque nisi interdum arcu, vel varius risus tortor eget
        mauris. Mauris scelerisque est vel lacus cursus, quis vulputate nisi vestibulum. Praesent pulvinar pharetra urna, et lacinia sapien porttitor eget. Aenean tristique felis sit amet purus posuere ultricies. Nunc tristique, est id dapibus bibendum,
        justo ante varius lacus, eu tincidunt mi libero nec metus. Quisque vel euismod neque. Etiam nec eros est. Sed ac ipsum ut enim interdum sagittis. Nullam eu sollicitudin tellus, at fringilla nisi. Phasellus tincidunt dolor sapien, vitae pellentesque
        leo ultrices quis. Duis consequat id ante ut accumsan.
      </p>
      <p class="lead" id="teste3">
        Nulla faucibus tortor turpis, ac fringilla nunc tristique sit amet. Suspendisse molestie mollis nulla, eget vestibulum massa tristique quis. Phasellus eget consequat lectus. Vestibulum vehicula libero vitae leo suscipit vestibulum. Nulla facilisi. Nullam
        ultricies dolor et leo pharetra, eget vehicula metus congue. Donec venenatis nec risus eu tristique. Etiam non rhoncus nibh, quis lobortis lacus. Donec erat ipsum, eleifend sodales pretium vitae, pharetra vel nunc. Phasellus libero nisl, porta
        non facilisis eget, tincidunt a augue. Fusce placerat justo nunc, ac dapibus nunc vehicula non.
      </p>
    </article>
  </main>
</body>

</html>

  • 1

    Thanks bro, helped a lot here !

Browser other questions tagged html css bootstrap-4

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