Projeto 01.
body {
background-color: pink;
}
h1 {
font-weight: bold;
color: green;
}
h2 {
color: brown; /* Cor do texto */
}
h3 {
color: blue;
}
p{
color:white
}
Projeto 02.
body {
background-color: black;
}
h1 {
font-weight: bold;
color: white;
text-align: center; /* Centraliza o h1 */
margin: 30px 0; /* Espaçamento acima e abaixo do h1 */
}
h2 {
color: yellow; /* Cor do texto */
margin: 30px 0; /* Espaçamento acima e abaixo do h2 */
font-size: 24px; /* Tamanho da fonte */
text-align: center; /* Centraliza o h2 */
font-weight: bold; /* Deixa o texto em negrito */
text-transform: uppercase; /* Transforma o texto em maiúsculas */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra para dar destaque */
}
h3 {
color: greenyellow;
}
p{
color:wheat
}
Projeto 03.
HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<header></header>
<main>
<h1> Isabel Trindade Araújo <strong> </strong></h1>
<h2> <strong> Estudante de desenvolvimento front-end </strong>
<h3> <strong> Sobre Mim: </strong></h2>
<p> Olá,sou estudante apaixonada por desenvolvimento front-end, com foco em React, HTML e CSS. Busco criar interfaces web modernas, responsivas e intuitivas, sempre focando em uma experiência de usuário de alta qualidade. Atualmente, estou participando do ONE - Oracle Next Education, onde estou aprimorando meus conhecimentos em tecnologias e práticas de desenvolvimento de software. Estou empolgada para aplicar tudo o que aprendi em projetos desafiadores e inovadores. </p>
<a href = "https://www.instagram.com/isabeltr_"> Instagram </a>
<a href = "https://github.com/IsabelTr"> GitHub </a>
<img src="imagemisabel.jpeg" alt="minha" class="imagem-circular">
</main>
<footer></footer>
</body>
</html>
CSS:
body {
background-color: indigo;
}
h1 {
font-weight: bold;
color: white;
text-align: center; /* Centraliza o h1 */
margin: 30px 0; /* Espaçamento acima e abaixo do h1 */
}
h2 {
color: aqua; /* Cor do texto */
margin: 30px 0; /* Espaçamento acima e abaixo do h2 */
font-size: 24px; /* Tamanho da fonte */
text-align: center; /* Centraliza o h2 */
font-weight: bold; /* Deixa o texto em negrito */
text-transform: uppercase; /* Transforma o texto em maiúsculas */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra para dar destaque */
}
h3 {
color: greenyellow;
}
p{
color:wheat
}
.imagem-circular {
width: 150px; /* Defina a largura da imagem */
height: 150px; /* Defina a altura da imagem igual à largura */
border-radius: 50%; /* Arredonda os cantos para formar um círculo */
object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
position: absolute; /* Permite posicionamento absoluto em relação ao seu contêiner */
top: 100px; /* Ajuste a distância do topo */
left: 390px; /* Ajuste a distância da esquerda */
/* Ou use transform para posicionar com mais flexibilidade */
transform: translate(-50%, -50%); /* Move a imagem para o centro do ponto de referência */
}
a {
display: inline-block; /* Para que o link se comporte como um botão */
padding: 10px 20px; /* Espaçamento interno */
margin: 10px; /* Espaçamento externo entre os botões */
color: white; /* Cor do texto */
background-color: #0077b5; /* Cor de fundo (azul do LinkedIn) para o GitHub */
text-decoration: none; /* Remove o sublinhado */
border-radius: 5px; /* Bordas arredondadas */
transition: background-color 0.3s; /* Efeito de transição */
}
a:hover {
background-color: #005582; /* Cor de fundo ao passar o mouse */
}
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!