<!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> portifólio </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header> </header>
<main id="apresentacao">
<section class="apresentacao__conteudo">
<h1 class="apresentacao__conteudo__titulo">Explorando o mundo do desenvolvimento <strong class="title-destaque">front-end com entusiasmo! </strong>
</h1>
<p class="apresentacao__conteudo__texto">Olá! Sou Levi Lima Santana, da escola de tecnologia alura e estou aprendendo a programar. Quero me aprofundar cada vez mais nessa area e estou super feliz com esse meu primeiro projeto.</p>
<div class="apresentacao__links"> <!-- a tag div serve para estruturarmos e agruparmos as tags sem precisao de ser semantica como tambem aplicarmos estilos e dividirmos as tags html -->
<a class="apresentacao__links__botomleft" href="https://www.instagram.com/levilima_bjj" > Instagram</a>
<a class="apresentacao__links__botomright" href="https://www.github.com/Levisaoo"> Github </a>
</section> <!--separa os elementos dentro de um container para melhor estrutura mais clara trazendo tambem uma estilizaçao mais clara criando uma seção para eles-->
</div>
<img src="foto minha.jpeg" alt="texto alternativo imagem do Levi">
</main>
<footer> </footer>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');
@font-face {
font-family: Minhafonte;
src: url('fonte/JMH\ Typewriter-Bold.otf');
} /* O font face serve para importarmos fontes de sites sem que precise usar do google fonts outros modelos tendo varias bibliotecas. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto+Slab:wght@500&display=swap');
* {
/* reset css */
margin: 0;
padding: 0;
box-sizing: border-box; /* define o tamanho em que o elemento e calculado */
}
body {
height: 100vh; /* altura da pagina */
background-color: #59b2a2; /* cor de sua pagina */
color: #5a004b;
}
.title-destaque {
color: black
}
#apresentacao {
margin: 10% 15%;
display: flex; /* declara o container onde o conteudo esta flexbox para posicionamentos dos elementos PAI */
align-items: center; /* alinha os itens elementos da pagina FILHO*/
justify-content: space-between; /* justifica o conteudo dando espaçamentos nele FILHO*/
}
img {
height: 400px;
width: 500px;
padding-left: 10px;
}
.apresentacao__conteudo {
width: 615px;
display: flex;
flex-direction: column;
gap: 40px;
}
.apresentacao__conteudo__titulo {
font-size: 33px;
font-family: 'Roboto Slab', serif;
}
.apresentacao__conteudo__texto {
font-size: 22px;
font-family: Minhafonte,sans-serif;
}
.apresentacao__links {
display: flex;
justify-content: space-between;
}
.apresentacao__links__botomleft {
background-color: #FECE60;
width: 280px;
height: 79px;
text-align: center;
border-radius: 16px;
font-size: 24px;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
margin: 10px;
padding: 21.5px 0;
text-decoration: none;
color: black;
/* border: 20px double green; podemos escrever menos codigos utilizando apenas o border */
/* border-top: 30px solid blue; estiliza apenas a borda de cima */
}
.apresentacao__links__botomright {
background-color: #60FE84;
width: 280px;
height: 79px;
text-align: center; /* a propiedade text-align centraliza apenas o texto que esta na classe */
border-radius: 16px; /* arredonda suas bordas */
font-size: 24px;
font-family: 'Montserrat', sans-serif;
font-weight: 600; /* Peso da fonte em questao da tonalidade */
margin: 10px;
padding: 21.5px 0; /* o padding aqui foi centralizado sempre que nos termos que centralizar ou modificar as posiçoes entao se colocarmos mais de uma numeração a primeira sempre começara na vertical depois horizontal */
text-decoration: none; /* Essa propiedade e a decoração do texto */
color: black;
}
Segue meu projeto ele está com bastante modificações que fui testando ao decorrer para ir aprendendo super satifeito e continuarei na caminhada devagar e sempre um dia eu chego lá!HEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHEHE
