Jump to content
  • 0

Question

Boa tarde.

 

Estou a começar a trabalhar com o Dreamweaver e estou com dificuldade e conseguir este efeito na minha página (enviei foto). Já consegui montar a parte de cima, mas agora ao tentar fazer o bloco de baixo, com tit, foto e texto, não consigo que fique alinhado como está na foto. Será que podem ajudar-me? Eu tenho o seguinte código e CSS feito:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
<link href="exp.css" rel="stylesheet" type="text/css">
</head>

<body tracingsrc="Newsletter_2.jpg" tracingopacity="30">

  <div class="logo"><img src="imagens/Ellipse_1.png" width="221" height="42" alt=""/></div>
<header class="header">
  <div class="texto-topo">texto topo texto topo</div>
    </header>
<div class="bloco-a"><div class="tit-bloco-a">título bloco a</div>
<div class="foto-bloco-a"><img src="imagens/foto1.png" width="222" height="211" alt=""/></div>
<div class="txt-bloco-a">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
</div></div>

</body>
</html>

 

@charset "UTF-8";
*{
    margin:0 auto;
}
.logo {
    width: 30px;
    height: 20px;
    margin-top: 95px;
    margin-left: 356px;
    float: left;

}
.texto-topo {
    width: 600px;
    margin-left: 93px;
    margin-top: 20px;
    width: 591px;
    height: 42px;
    font-family: Rift;
    color: #0e3659;
    font-size: 35px;
    font-weight: 700;
    transform: scale(1.152,1.152);
}
.tit-bloco-a {
    width: 154px;
    height: 25px;
    float: left;
    margin-top: 724px;
    margin-left: -475px;
}
.foto-bloco-a img {
    width: 222px;
    height: 211px;
    float: left;
    float: left
}

}
.header {
    width: 688px;
    height: 390px;
    margin-left: 196px;
    margin-top: 301px;
    background-image: url(imagens/salty-wings-1432145-unsplash.png);
    position: absolute;
    
    
}
.tit-bloco-a{
    width: 154px;
    height: 25px;
    font-family: Rift;
    color: #0e3659;
    font-size: 35px;
    font-weight: 700;
    float: left;
}
.txt-bloco-a {
    width: 216px;
    height: 120px;
    font-family: Rift;
    color: rgba(14, 54, 89, 0.8);
    font-size: 15px;
    font-weight: 700;
    transform: scale(1.01,1.01);
    margin-top: 750px;
    text-align: center;
    float: left;
}
.bloco-a {
    width: 216px;
    height: 600;
    margin-top: 1000px;
    margin-left: 196;
    float: left;
    position: absolute;
}

foto.jpg

Share this post


Link to post
Share on other sites

3 answers to this question

Recommended Posts

  • 0

1º - Você pode criar um "container" para definir um tamanho fixo,

assim, todos os elementos/itens dentro do mesmo, por padrão,

terão tamanhos relativos ao mesmo.

 

Segue exemplo para compreensão:

 

CÓDIGO

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>index.html</title>

		<style type="text/css">
		@charset "UTF-8";
		*{
			margin: 0;
			padding: 0;
		}
		.container {
			background-color: #dddddd;
			margin: 0 auto;
			width: 700px;
		}
		.logo {
			text-align: center
		}
		.logo img {
			width: 200px;
			height: 150px;
		}
		.header {
			width: 688px;
			height: 390px;
			margin: 0 auto;
			background-image: url(https://wallpaperaccess.com/full/51372.jpg);
			background-size: 100%;
		}
		.texto-topo {
			margin-top: 20px;
			padding: 0 20px;
			text-align: center;
			font-family: Rift;
			color: #ffffff; /* #0e3659 */
			font-size: 35px;
			font-weight: 700;
			transform: scale(1.152,1.152);
		}
		.cartoes {
			text-align: center;
			padding: 10px 0;
			margin: 0 auto;
			width: 688px;
		}
		.bloco-a {
			border: 1px solid #000;
			display: inline-block;
			margin-bottom: 5px;
			width: 32.6580%; /* 3 COLUNAS */
		}
		.tit-bloco-a {
			padding: 5px 0;
		}
		.tit-bloco-a {
			text-align: center;
			font-family: Rift;
			font-size: 35px;
			font-weight: 700;
			color: #0e3659;
		}
		.foto-bloco-a img {
			width: 100%;
			height: 200px;
		}
		.txt-bloco-a {
			color: rgba(14, 54, 89, 0.8);
			transform: scale(1.01,1.01);
			text-align: justify;
			padding: 10px 10px;
			font-family: Rift;
			font-weight: 700;
			font-size: 15px;
		}
		</style>
	</head>

	<body>
		<!-- ADICIONADO -->
		<div class="container">
			<div class="logo">
				<img src="https://images.vexels.com/media/users/3/139224/isolated/preview/b520fe439a25967a9ba04d81901002d9-logo-logo-safari-by-vexels.png" alt=""/>
			</div>

			<header class="header">
				<div class="texto-topo">texto topo texto topo</div>
			</header>

			<!-- ADICIONADO -->
			<div class="cartoes">
				<!-- CARD -->
				<div class="bloco-a">
					<div class="tit-bloco-a">título bloco a</div>

					<div class="foto-bloco-a">
						<img src="https://wallpaperaccess.com/full/51372.jpg" alt=""/>
					</div>

					<div class="txt-bloco-a">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
					</div>
				</div>
			</div>

			<!-- ADICIONADO -->
			<div class="cartoes">
				<!-- CARD -->
				<div class="bloco-a">
					<div class="tit-bloco-a">título bloco a</div>

					<div class="foto-bloco-a">
						<img src="https://wallpaperaccess.com/full/51372.jpg" alt=""/>
					</div>

					<div class="txt-bloco-a">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
					</div>
				</div>

				<!-- CARD -->
				<div class="bloco-a">
					<div class="tit-bloco-a">título bloco a</div>

					<div class="foto-bloco-a">
						<img src="https://wallpaperaccess.com/full/51372.jpg" alt=""/>
					</div>

					<div class="txt-bloco-a">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
					</div>
				</div>
			</div>

			<!-- ADICIONADO -->
			<div class="cartoes">
				<!-- CARD -->
				<div class="bloco-a">
					<div class="tit-bloco-a">título bloco a</div>

					<div class="foto-bloco-a">
						<img src="https://wallpaperaccess.com/full/51372.jpg" alt=""/>
					</div>

					<div class="txt-bloco-a">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
					</div>
				</div>

				<!-- CARD -->
				<div class="bloco-a">
					<div class="tit-bloco-a">título bloco a</div>

					<div class="foto-bloco-a">
						<img src="https://wallpaperaccess.com/full/51372.jpg" alt=""/>
					</div>

					<div class="txt-bloco-a">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
					</div>
				</div>

				<!-- CARD -->
				<div class="bloco-a">
					<div class="tit-bloco-a">título bloco a</div>

					<div class="foto-bloco-a">
						<img src="https://wallpaperaccess.com/full/51372.jpg" alt=""/>
					</div>

					<div class="txt-bloco-a">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan lacus vel facilisis. 
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

 

 

2º - Você pode fazer o mesmo com grids no css...

Caso queira dar uma olhada, segue link:

 

LINK

CSS GRID

Share this post


Link to post
Share on other sites
  • 0

Disponível ;)

O importante é começar, assim, o 'resto' é lucro!

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 thgsousa312
      uma função que recebe uma frase e uma palavra antiga e uma palavra nova. A função deve retornar uma string contendo a frase original, mas com a última ocorrência da palavra antiga substituída pela palavra nova. A entrada e saída de dados deve ser feita no programa principal. Exemplo:  
      Frase: “Quem parte e reparte fica com a maior parte”
      Palavra antiga: “parte”  Palavra nova: “parcela”
      Resultado a ser impresso no programa principal: “Quem parte e reparte fica com a maior parcela”
       
      function trocarNome(){
              
          var frase = document.getElementById("frase").value;
          var strAntiga = document.getElementById("strAntiga").value;
          var strNova = document.getElementById("strNova").value;
          //frase = frase.split(" ");
          var a = frase.lastIndexOf(strAntiga);
          var fras2 = frase.lastIndexOf(strAntiga).replace(strAntiga,strNova);
          document.getElementById("demo").innerHTML = "Certo";
      }
    • By Tuzzolino
      Boa tarde gente,
       
       
      Estou fazendo  um site  e  na hora que eu vou compartilhar ele no whatsapp  ele tá pegando o link corretamente mas ao invés de aparecer o titulo aparece somente o description  e não pega a miniatura da imagem  alguém tem algum exemplo de como  deveria ser ?
       
       
      A  imagem  é carregada assim 
       
      <amp-img height="320" width="470" id="img" src="890x610.jpg" layout="responsive" class="i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" i-amphtml-layout="responsive"><i-amphtml-sizer style="padding-top: 68.0851%;"></i-amphtml-sizer><img decoding="async" amp-img-id="img" src="890x610.jpg" class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>  
    • By prometheusz
      Amigos bom dia, sou novo aqui
      Tenho a seguinte tabela  :
       
       
      gostaria de capturar os ids quando fosse clicado no botão pegar valor do codigo porem do jeito que fiz ele só captura o 88 nao importa qual mlinha eu clique ele so captura o numero 88
       
      codigo:

       
      <script> $(function () { $(document).on('click', '.btn-danger', function (e) { e.preventDefault; var codigo =document.getElementsByTagName('th')[5].innerHTML; alert(codigo) }); }); </script> <?php while ($dado = ibase_fetch_object($consulta_retorno)){ ?> <tr> <th data-title="ID"><?php echo ($dado->ID)?> </th> <td data-title="Nome"><?php echo utf8_encode($dado->NOME)?></td> <td data-title="DataCompra"><?php echo date("d/m/Y", strtotime($dado->DATACOMPRA))?></td> <td data-title="Email"><?php echo utf8_encode($dado->EMAIL)?></td> <td> <button class="btn-danger">Pegar Valor do Código</button></td> </tr> <?php }?>  
       
    • By gbL078
      Consegui resolver o problema, por favor podem deletar o tópico.
    • By guzulino
      Então... eu preciso inserir uma paulada de dados em um banco de dados de vez em quando, eu até consigo importar de um CSV pro banco, mas eu preciso fazer isso através do php e eu não tenho nem ideia de como fazer isso, procurei por aqui e não achei, se alguém tem alguma resposta ou referência, manda o link que eu vou dar uma olhada. Valeu.
×

Important Information

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