Código HTML e CSS iniciante
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;
}
Discussão (3)
Carregando comentários...