Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?
Desenvolvido por Guilherme.
Oi, Guilherme
Insira o código dessa forma
uma pergunta bem básica? como faço isso, e onde colocarei?
Como turbinar seus estudos utilizando o fórum
No minuto 5, explica como inserir o código. Recomento assistir tudo
Github
Linkedin
Instagram
<!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="Styles/styles.css">
</head>
<body>
<header class="menu">
<nav class="menu_menu">
<a class="menu_link" href="index.html">Home </a>
<a class="menu_link" href="aboutme.html">About me </a>
</nav>
</header>
<main class="apresentetion">
<main class="apresentetion">
<section class="apresentetion_conteudo">
<h1 class="apresentetion_conteudo_title">Eleve seu negócio digital a outro nível <strong class="titulo-destaque">com um Front-end de qualidade!</strong></h1>
<p class="apresentetion_conteudo_pg">Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar? </p>
<div class=" apresentetion__liks">
<h2 class="apresentetion__link__subtittle ">Acesse minhas redes:</h2>
<a class="apresentetion_liks_link" href="https://github.com/Guilherme20011996/">
<img src="./assets/github.png">
Github
</a>
<a class="apresentetion_liks_link" href="https://www.linkedin.com/in/guilherme-abrantes-dos-santos-060066114/">
<img src="./assets/linkedin.png">
Linkedin
</a>
<a class="apresentetion_liks_link" href="https://www.instagram.com/guiabrantes.s/">
<img src="./assets/instagram.png">
Instagram
</a>
</div>
</section>
<img src="./assets/Imagem.png" alt="Foto da Joana Santos programando">
</main>
<footer class="rodape">
<p>Desenvolvido por Guilherme.</p>
</footer>
</body>
</html>
ainda não resolvi o problema
Coloque também o "style.css"
<style>
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');
</style>;* {
margin: 0;
padding: 0;
}
:root{
--primary-color: #000000;
--secondly-color: #eeeeee;
--third-color: #22d4fd;
--hover-color: #CBB279;
--hover-color2: #272727;
--primary-font: 'Krona One', sans-serif;
--secondly-font: 'MonteSerrat', sans-serif;
}
body {
box-sizing: border-box;
background-color: var(--primary-color);
color:var(--secondly-color);
}
.menu {
padding: 2% 15% 0% 15%
}
.menu_link {
display: flex;
gap: 40px;
}
.menu_link{
font-family: var(--secondly-font);
font-size: 24px;
font-weight: 600;
color: var(--third-color);
text-decoration: none
}
.destaque2 {
color: var(--secondly-color);
}
.apresentetion {
padding: 8% 8%;
display: flex;
align-items: center;
justify-content: space-between;
}
.apresentetion_conteudo{
width: 600px;
display: flex;
flex-direction: column;
gap: 80px;
}
.apresentetion_conteudo_title{
font-size: 36px;
font-family: var(--primary-font);
}
.titulo-destaque {
color: var(--hover-color);
}
.apresentetion_conteudo_pg{
font-size: 24px;
font-family: var(--secondly-color);
}
.apresentetion__liks{
display: flex;
flex-direction: column ;
justify-content:space-between;
align-items: center;
gap: 32px;
}
.apresentetion__link__subtittle{
font-family: var(--primary-color);
font-weight: 400;
font-size: 24px;
}
.apresentetion_liks_link {
display: flex;
justify-content: center;
gap: 16PX;
border: 4px solid var(--third-color);
width: 378px;
text-align: center;
border-radius: 8px;
font-size: 24px;
font-weight: 600;
padding: 21.5px 0;
text-decoration: none;
color: var(--secondly-color);
font-family: var(--secondly-font);
}
.apresentetion_liks_link:hover{
background-color: var(--hover-color2);
}
.rodape {
padding: 24px;
color: var(--primary-color);
background-color: var(--third-color);
text-align: center;
font-family:var(--secondly-font);
font-size: 24px;
font-weight: 400;
}
o problema provavel que esteja no primeiro HTML, eu fiz a segunda parte e o footer ficou na parte de baixo
achei o erro, estava nol main, coloquei 2 vezes
** <main class="apresentetion">
<main class="apresentetion">**
<section class="apresentetion_conteudo">
<h1 class="apresentetion_conteudo_title">Eleve seu negócio digital a outro nível <strong class="titulo-destaque">com um Front-end de qualidade!</strong></h1>
<p class="apresentetion_conteudo_pg">Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar? </p>
<div class=" apresentetion__liks">
<h2 class="apresentetion__link__subtittle ">Acesse minhas redes:</h2>
<a class="apresentetion_liks_link" href="https://github.com/Guilherme20011996/">
<img src="./assets/github.png">
Github
Isso mesmo!
