Lista de exercicios executada dentro do meu projeto:
1.
html
<p> Um refúgio onde o equilíbrio sereno encontra a elegância atemporal.<br>
Nossa floricultura é um jardim onde a <strong class="destaque-texto">harmonia</strong> com a <strong class="destaqueTexto">natureza</strong> guia cada criação.<br>
Aqui, cada arranjo não é uma imposição, mas uma conversa com a própria flor.<br>
Nossas criações são despretensiosas, honrando <strong class="destaque-texto">o fluxo natural</strong> de cada haste e folha,<br>
celebrando <strong class="destaque-texto">a perfeição na imperfeição.</strong>
O resultado é uma estética que parece ter sido cuidadosamente pensada e,<br>
ao mesmo tempo, livre, como se as flores tivessem sido delicadamente colhidas<br>
em um jardim no auge de sua beleza. É uma celebração do belo sem excessos, <br>
onde a serenidade nos guia para a paz, e a sofisticação nos convida a apreciá-la com um toque de romance.</p>
- html
<h1>Quem somos nós
<strong class="titulo-blog">les Floris Tao</strong>
</h1>
css
.titulo-blog{
color: var(--verde-botao);
}
- É o mesmo exercicio proposto na atividade 1 de uma classe destaque, está sendo aplicada ao meu strong.
html
<p> Um refúgio onde o equilíbrio sereno encontra a elegância atemporal.<br>
Nossa floricultura é um jardim onde a <strong class="destaque-texto">harmonia</strong> com a <strong class="destaqueTexto">natureza</strong> guia cada criação.<br>
Aqui, cada arranjo não é uma imposição, mas uma conversa com a própria flor.<br>
Nossas criações são despretensiosas, honrando <strong class="destaque-texto">o fluxo natural</strong> de cada haste e folha,<br>
celebrando <strong class="destaque-texto">a perfeição na imperfeição.</strong>
O resultado é uma estética que parece ter sido cuidadosamente pensada e,<br>
ao mesmo tempo, livre, como se as flores tivessem sido delicadamente colhidas<br>
em um jardim no auge de sua beleza. É uma celebração do belo sem excessos, <br>
onde a serenidade nos guia para a paz, e a sofisticação nos convida a apreciá-la com um toque de romance.</p>
- css
*{
margin: 0;
padding:0;
}
:root{
--bege-fundo:#E8E3D5;
--marrom-destaque-texto:#51433e;
--marrom-texto:#6A5952;
--marrom-link: #95847d;
--verde-botao: #abc595;
--verde-botao-hover: #b6cba3;
}
As propriedade elas implicam na posição dos meus elementos como texto, imagem, paragrafo, isto é, trazem ou não uma formatação, colocam eles em uma posição especifica mesmo que eu não as tenha definido. No caso do meu projeto eu já defini uma margin e padding para os elementos anteriormente.
css referente ao posicionamento da imagem e o texto do paragrafo que quero que fiquem um ao lado do outro
/*main*/
.sobre{
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
gap: 10px;
padding: 40px;
}
.sobre img{
max-width: 300px;
height: auto;
border-radius: 10px;
margin-right: 90px;
}
.sobre .texto{
flex: 1;
color: var(--marrom-texto);
font-size: 1.1rem;
line-height: 1.6;
}
segue a imagem do projeto o :