Ir para conteúdo
MurilloCSS

Formatação de rodapé

Recommended Posts

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

Screenshot_14.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

Segue código:

 

CÓDIGO

<!DOCTYPE HTML>
<html>
	<head>
		<title> EXAMPLE </title>

		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

		<style type="text/css">
		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;
		}
		html {
			color: -internal-root-color;
		}
		*, ::after, ::before {
			box-sizing: inherit;
		}

		article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
			display: block;
		}
		footer {
			display: block;
		}
		footer p {
			font-size: 30px;
		}
		.py-5 {
			padding-top: 3rem!important;
			padding-bottom: 3rem!important;
		}
		.bg-dark {
			background-color: #343a40!important;
		}
		</style>
	</head>

	<body>
		<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>
	</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
<!DOCTYPE HTML>
<html>
	<head>
		<title> EXAMPLE </title>

		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

		<style type="text/css">
		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;
		}
		html {
			color: -internal-root-color;
		}
		*, ::after, ::before {
			box-sizing: inherit;
		}

		article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
			display: block;
		}
		footer {
			text-align: center;
			display: block;
		}
		footer .v-middle {
			display: table;
			color: #ffffff;
			height: 400px;
			width: 100%;
		}
		footer .v-middle p {
			vertical-align: middle;
			display: table-cell;
			font-size: 30px;
		}
		.bg-dark {
			background-color: #343a40!important;
		}
		</style>
	</head>

	<body>
		<footer class="bg-dark">
			<div class="container">
				<div class="v-middle">
					<p class="m-0">
						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>
			</div>
		</footer>
	</body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por André Gonçalves Fernandes
      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:Arial, Helvetica, sans-serif;
          font-size: 15px ;
          color:white;
          background-color: rgb(255, 80, 92);
          margin: 0px -8px 0px -8px;
          padding: 60px 20px 60px 20px;
      }
      .title{
          font-family:Arial, Helvetica, sans-serif ;
          font-size: 18px;
          text-align: center;
          margin: -50px 0px 0px 0px;
          padding: 20px 20px 60px 20px; 
       
      }
      .box01{
         display:inline-block;
         text-align:center;
         
      }
      .p01{
          border: solid 1px white;
          height: 30px;
          width: 100px;
          margin: 6px -3px 6px 34px;
          padding: 7px 2px 7px 63px;
          
      }
      .box02{
          display: inline-block;
          text-align: center;
      }
      .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;
      }
       
       
       
       
       
       
       


    • Por 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 {
          }

    • Por 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> 
    • Por 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
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.