Jump to content

Recommended Posts

Prezados, 

 

Boa Noite 

 

A Imagem02 anexa é situação que eu preciso chegar

 

A imagem01 anexa é o caminho que estou percorrendo. O conteúdo é o mesmo. Acredito que estou no caminho certo, mas não estou conseguindo deixar as três caixas alinhadas na parte de cima e as três caixas alinhadas na parte de baixo.

 

Abaixo o código que eu apliquei em HTML e CSS referente a imagem 01

 

Se alguém puder me ajudar agradeço,

 

 

HTML

<div class="container">

       

      <p class="title">VEJA MAIS SOBRE AS NOSSAS ESPECIALIDADES E</br>COMO PODEMOS AJUDAR VOCÊ</p>

 

      <div class="box01">

         <p class=p01>UTI</p>  

         <p>Suporte Avançado de</br>Ambulâncias e Suportes</br>Básicos</p>

      </div>  

      

      <div class="box02">

         <p>Área Protegida</p>

         <p>Proporcionando total segurança</br>em áreas de risco.</p>

      </div>

      

      <div class="box03">

         <p>Transferência</p>

         <p>Intra-Hospitalar e Inter<br></br>Hospitalar, Casa de repousos, Residenciais.</p>

      </div>

       

      <div class="box04">

         <p>Posto Fixo</p>

         <p>Profissionais especializados para<br></br>atuar em situações de urgências<br></br>e emergência (médicos, enfermeiros e socorridos).</p>

      </div>

      

      <div class="box05">

         <p>Neonatal</p>

         <p>Intra-Hospitalar e Inter Hospitalar, Casa de repousos, Residenciais.

      </div>

      

         

      <div class"box06">

         <p>Eventos</p>

         <p>Cobertura de Eventos Religiosos Corridas de Rua</br>Peladas de Futebol, Casas Noturnas, Eventos Culturais</br>Lutas Muay Thai, Boxe, Jiu Jitsu, Vale Tudo</p>

      </div> 

   

   </div>  

 

CSS

 

.container{

    font-family:ArialHelveticasans-serif;

    font-size15px ;

    color:white;

    background-colorrgb(2558092);

    margin0px -8px 0px -8px;

    padding60px 20px 60px 20px;

}

.title{

    font-family:ArialHelveticasans-serif ;

    font-size18px;

    text-aligncenter;

    margin-50px 0px 0px 0px;

    padding20px 20px 60px 20px

 

}

.box01{

   display:inline-block;

   text-align:center;

   

}

.p01{

    bordersolid 1px white;

    height30px;

    width100px;

    margin6px -3px 6px 34px;

    padding7px 2px 7px 63px;

    

}

.box02{

    displayinline-block;

    text-aligncenter;

}

.box03{

    display:inline-block;

    text-align:center;

}

.box04{

    display:inline-block;

    text-align:center;

}

 

.box05{

    display:inline-block;

    text-align:center;

}

 

.box06{

    display:inline-block;

    text-align:center;

}

 

 

 

 

 

 

 

Imagem02.PNG

Imagem01.PNG

Share this post


Link to post
Share on other sites

Olá,

Não há necessidade de colocar <br> para quebra de linha.

Outro ponto, é que <p> é usado para parágrafos, mas os títulos devem usar as tags adequadas de titulos. h1, h2, etc.

Tentei não mexer muito no seu código original. 

Para alinhamento pode fazer com flex ou grid.

body {
   background-color: rgb(255, 80, 92);
  }

.container {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 15px;
   color: white;
   background-color: rgb(255, 80, 92);
   width: 980px;
   margin: auto;
}
.caixas {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
h1.title {
   text-transform: uppercase; /* transforma o titulo em letras maiusculas */
   font-size: 18px;
   text-align: center;
   line-height: 45px; /* altura da linha do titulo principal */
}
h2 {
   border: solid 1px white;
   font-size: 18px;
   line-height: 45px; /* altura da linha do titulo das caixas */
}
.box01,
.box02,
.box03,
.box04,
.box05,
.box06 {
   text-align: center;
   padding: 0 60px; /* diminua o espaçamento ou aumente conforme achar necessário */
}

 

<div class="container">
       
      <h1 class="title"> Veja mais sobre as nossas especialidades e como podemos ajudar você</h1>
      
    <div class="caixas">
      <div class="box01">
         <h2>UTI</h2>  
         <p>Suporte Avançado de Ambulâncias e Suportes Básicos</p>
      </div>   

      <div class="box02">
         <h2>Área Protegida</h2>
         <p>Proporcionando total segurança em áreas de risco.</p>
      </div>

      <div class="box03">
         <h2>Transferência</h2>
         <p>Intra-Hospitalar e Inter Hospitalar, Casa de repousos, Residenciais.</p>
      </div>
       
      <div class="box04">
         <h2>Posto Fixo</h2>
         <p>Profissionais especializados para atuar em situações de urgências e emergência (médicos, enfermeiros e socorridos).</p>
      </div>

      <div class="box05">
         <h2>Neonatal</h2>
         <p>Intra-Hospitalar e Inter Hospitalar, Casa de repousos, Residenciais.
      </div>

      <div class= "box06">
         <h2>Eventos</h2>
         <p>Cobertura de Eventos Religiosos Corridas de Rua, Peladas de Futebol, Casas Noturnas, Eventos Culturais, Lutas Muay Thai, Boxe, Jiu Jitsu, Vale Tudo</p>
      </div> 


    </div><!-- final caixas -->
    
   </div><!-- final container --> 


   

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By MurilloCSS
      Vamos La, Estava fazendo meu site e cheguei no rodape e estou com uma grande duvida uma imensa duvida 
       
      Eu quero que este texto do rodape fica no meio e um texto grande mas nao consigo editar o css que raivaaaa

      alguem poderia me ajudar?

      O CODIGO EM HTML:
       
      <footer class="py-5 bg-dark"> <div class="container">   <p class="m-0 text-center text-white">2015 - 2018 © Todos direitos reservados.<br>Desenvolvido por <b>Arthur Barreto</b> | Hospedado por <b><a target="_blank" href="https://www.reishosting.com.br/minecraft" class="text-white">ReisHost</a></b></p>     </div> </footer>

      O codigo em css
        .py-5 { padding-top: 3rem!important; padding-bottom: 3rem!important; } .bg-dark { background-color: #343a40!important; } article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; } *, ::after, ::before { box-sizing: inherit; } user agent stylesheet footer { display: block; } Style Attribute { visibility: visible; } body { margin: 0; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; } html { box-sizing: border-box; font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent; } user agent stylesheet html { color: -internal-root-color; } *, ::after, ::before { box-sizing: inherit; } *, ::after, ::before { box-sizing: inherit; }
      ALGUEM ME AJUDA PFV
    • By Mateus Alcântara
      Bom dia galera, tenho uma lista de imagem e ao selecionar uma imagem no site ela é aberta dentro de uma div, porém fica um espaço como mostrado na imagem, gostaria de saber como resolver isso, atualmente meu html e meu css estão assim: 
          <ul>                     
                              <div style="width: auto">
                              </div>
                              <li><img width="70" src="images/J1.PNg" no repeat; onclick="clickImagem(this.src)" alt="" />Pulseira Teste
                              <H6> Pulseira Teste.</H6></li>
                              <li><img width="70" src="images/J3.PNg" onclick="clickImagem(this.src)" alt="" />Pulseira Teste
                              <H6> Pulseira Teste.</H6></li>
                              <li><img width="70" src="images/J2.PNg" onclick="clickImagem(this.src)" alt="" />Pulseira Teste
                              <H6> Pulseira Teste.</H6></li>
                              <li><img width="70" src="images/J3.PNg" onclick="clickImagem(this.src)" alt="" />Pulseira Teste
                              <H6> Pulseira Teste.</H6></li>
                              <li><img width="70" src="images/J2.PNg" onclick="clickImagem(this.src)" alt="" />Pulseira Teste
                              <H6> Pulseira Teste.</H6></li>
                              <li><img width="70" src="images/J1.PNg" onclick="clickImagem(this.src)" alt="" />Pulseira Teste
                              <H6> Pulseira Teste.</H6></li>
                              <li><img width="70" src="images/J2.PNg" onclick="clickImagem(this.src)" alt="" />Pulseira Teste
                              <H6> Pulseira Teste.</H6></li>
                              <li><img width="70" src="images/J3.pNg" onclick="clickImagem(this.src)" alt=""/>Pulseira Teste
                              <H6> Pulseira Teste.</H6></li>
                          </ul>                    
                      </form>
                  </div>
                  <div class="conteudo" id="conteudo" ondrop="drop(event)" ondragover="allowDrop(event)" style="background:#fff">
       
      E CSS:
      #conteudo{
          width:55%;
          height:60%;
          float:left;
          background-color:#fff;    
          display: initial;
          margin: auto;
          z-index: 1;
          overflow: hidden;
          .columns {
          }

    • By luiz@tkseven.com
      Olá usei os parâmetros, padding e display para separar elementos na minha pagina, o problema é que em devices apple estes parâmetros não funcionam, e no android eles funcionam exatamente como deveriam.
       
       
       
      </section>
            
              <div style="display:block; padding: 10px;">
              
                 <p><font color="#d7d7d7">Texto que fica entre as section</font></p>
             
              </div>
      <section> 
    • By Luiz Carlos Bittar
      Bom dia
      Comprei o livro Construindo sites com CSS e (X)HTML, e ao tentar acessar www.livrocss.com.br sai a mensagem que não é possível acessar o site, afim de verificar as técnicas na construção.... Gostaria de saber se o site não está mais disponível ou se mudou de endereço.
      Obrigado
      Luiz Carlos
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.