print da tela criada com HTML e CSS )
Na aula de HTML e CSS, aprendi a criar páginas web organizadas e visivelmente atraentes. Descobri que ferramentas como o Visual Studio Code facilitam a codificação, oferecendo recursos úteis como realce de sintaxe e sugestões de código. A estrutura de um arquivo HTML é composta pelas tags
, e , com o armazenando informações sobre o documento e o exibindo o conteúdo visível. As tags HTML, como,
, , e , são essenciais para estruturar e personalizar o conteúdo da página. No CSS, aprendi a usar seletores para aplicar estilos, como cor, tamanho de fonte e alinhamento, tornando as páginas mais atrativas e responsivas. Além disso, entendi a importância de manter os arquivos organizados, separando o HTML do CSS para facilitar a manutenção do código. Estou animado com as novas possibilidades de criar páginas web interativas e bonitas!
index.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>Portfólio - Robson Pereira Lago</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="text-content">
<h1>Eleve seu negócio digital a outro nível <span>com um Front-end de qualidade!</span></h1>
<p>
Olá! Meu nome é Robson Pereira Lago, sou desenvolvedor Front-end e estou aqui para te ajudar a elevar o seu <span>negócio digital a outro nível.</span>
Com um Front-end de qualidade, você pode conquistar mais clientes, aumentar suas vendas e se destacar da concorrência.
Entre em contato comigo e vamos conversar sobre como posso te ajudar a alcançar seus objetivos!
</p>
<div class="buttons">
<a href="https://www.linkedin.com/in/rp-lago" class="btn linkedin">
<i class="fab fa-linkedin"></i> LinkedIn
</a>
<a href="https://github.com/RP-Lago" class="btn github">
<i class="fab fa-github"></i> GitHub
</a>
</div>
</div>
<div class="image-content">
<img src="foto-perfil.png" alt="Imagem Perfil Robson Pereira Lago">
</div>
</div>
</body>
</html>
style.css
/* Estilo geral */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #121212;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* Container principal */
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: #1e1e1e;
border-radius: 25px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
max-width: 900px;
width: 90%;
}
/* Conteúdo de texto */
.text-content {
max-width: 60%;
}
.text-content h1 {
font-size: 2rem;
color: #00bcd4;
}
.text-content h1 span {
color: #ffd700;
}
.text-content p {
margin-top: 10px;
line-height: 1.6;
}
/* Botões */
.buttons {
margin-top: 20px;
display: flex;
gap: 15px;
}
.btn {
text-decoration: none;
color: #ffffff;
background-color: #00bcd4;
padding: 10px 20px;
border-radius: 25px;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #0288d1;
}
.linkedin {
background-color: #0077b5;
}
.linkedin:hover {
background-color: #005582;
}
/* Conteúdo da imagem */
.image-content img {
border-radius: 10px;
max-width: 100%;
height: auto;
object-fit: cover;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}
a {
text-decoration: none;
color: #ffffff;
}
a:hover {
text-decoration: underline;
color: #ffd700;
}
.btn i {
margin-right: 8px; /* Espaçamento entre o ícone e o texto */
}
span{
color: #22D4FD;
/* border: 1px solid #22D4FD; */
padding: 10px;
}