As páginas não ficam com mesmo estilo. Mas estão iguais no CSS. O que estou fazendo de errado? Obs: ignorem as imagens :)
As páginas não ficam com mesmo estilo. Mas estão iguais no CSS. O que estou fazendo de errado? Obs: ignorem as imagens :)
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>Portfolio - Denison Ottoni</title>
<link rel="stylesheet" href="./Styles/style.css">
</head>
<body>
<header class="cabecalho">
<nav class="cabecalho__menu">
<a class="cabecalho__menu__link" href="index.html">Home</a>
<a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
<a class="cabecalho__menu__link" href="curriculo.html">Currículo</a>
</nav>
</header>
<main class=" apresentacao">
<section class="apresentacao__conteudo">
<h1 class="apresentacao__conteudo__titulo">Seja bem vindo ao meu <strong class = "destaque-título">Portfolio DEV - Front End!</strong></h1>
<p class="apresentacao__conteudo__paragrafo">Olá! Sou Denison Ottoni, um novato na área de DEV Front-end. Esse Portfolio foi criado para contar um pouco da minha história e mostrar um pouco de minhas habilidades em <strong class="linguagens-paragrafo">HTML, CSS e JavaScript</strong>. Fique a vontade para navegar e enviar-me uma mensagem. </p>
<div class="apresentacao__links">
<h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
<a class="apresentacao__links__link" href="http://instagram.com/deniottoni"> <img src="./assets/icons8-instagram-50.png" logo instagram>Instagram
</a>
<a class="apresentacao__links__link" href="https://github.com/deniottoni"><img src="./assets/icons8-github-50.png" logo instagram>GitHub</a>
<a class="apresentacao__links__link" href="https://www.linkedin.com/in/denison-ottoni-96b8b3158/"> <img src="./assets/icons8-linkedin-50 (1).png" logo instagram>LinkedIn</a>
</div>
</section>
<img src="./assets/profile-pic.png" alt="Foto de Denison Ottoni em preto e branco" width="600px">
</main>
</main>
<footer class="rodape">
<p> Meu Portfolio 1.0 </p>
</footer>
</body>
</html>
about.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>Sobre mim</title>
<link rel="stylesheet" href="./Styles/style.css">
</head>
<body>
<header class="cabecalho">
<nav class="cabecalho__menu">
<a class="cabecalho__menu__link" href="index.html">Home</a>
<a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
<a class="cabecalho__menu__link" href="curriculo.html">Currículo</a>
</nav>
</header>
</body>
<main class="apresentacao">
<section class="apresentacao__conteudo">
<h1 class="apresentacao__conteudo__titulo">Sobre mim</h1>
<p class="apresentacao__conteudo__paragrafo">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
<p class="apresentacao__conteudo__paragrafo">Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et volupt ates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis vluptatibus maiores alias consequatur aut perferendis doloribus asperiores ipsum delis forum birol parela maxime infena. Excepteur sint occaecat cupidatat non.</p>
</section>
<img src="./assets/Denison-foto.png" alt="Foto de Denison Ottoni em preto e branco" width="600x">
</main>
<footer class="rodape">
<p> Meu Portfolio 1.0 </p>
</footer>
</body>
</html>
curriculo.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>Currículo</title>
<link rel="stylesheet" href="./Styles/style.css">
</head>
<body>
<header class="cabecalho">
<nav class="cabecalho__menu">
<a class="cabecalho__menu__link" href="index.html">Home</a>
<a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
<a class="cabecalho__menu__link" href="curriculo.html">Currículo</a>
</nav>
</header>
<main class="apresentacao__curriculo">
<section class="apresentacao__conteudo">
<h1 class="apresentacao__conteudo__titulo">Currículo</h1>
<p class="apresentacao__conteudo__texto">
Apresentação e informações principais
</p>
<h2 class="apresentacao__conteudo__titulo">Experiências</h2>
<p class="apresentacao__conteudo__texto">
<ul class="apresentacao__conteudo__texto">
<li> Empresa tal (2020 - 2021) - fazia isso e aquilo </li>
<li> Empresa tal (2021 - 2023) - fazia isso e aquilo </li>
</ul>
</p>
<h2 class="apresentacao__conteudo__titulo">Estudos</h2>
<div class="apresentacao__conteudo__texto">
<ul class="apresentacao__conteudo__texto">
<li>Curso tal - Alura Cursos <a href="linkdocertificado">com certificado</a> </li>
<li>Curso tal - Alura Cursos <a href="linkdocertificado">com certificado</a></li>
<li>Curso tal - Alura Cursos <a href="linkdocertificado">com certificado</a></li>
</ul>
</div>
</section>
<img src="./assets/Denison-foto.png" alt="Foto de Denison Ottoni">
</main>
<footer class="rodape">
<p> Meu Portfolio 1.0 </p>
</footer>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,400;0,600;1,600&display=swap');
:root {
--cor-primaria: #000000;
--cor-secundaria: #cecccc;
--cor-terciaria: #1ef0ed;
--cor-hover: #A7D129;
--font-primaria: 'Krona One', sans-serif;
--font-secundaria: 'Montserrat', sans-serif;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/*height: 100vh;*/
box-sizing: border-box;
background-image: url(../assets/bg-tech.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
color: var(--cor-secundaria);
}
.linguagens-paragrafo {
color: var(--cor-terciaria);
}
.cabecalho {
padding: 2% 0% 0% 15%;
}
.cabecalho__menu {
display: flex;
gap: 80px;
}
.cabecalho__menu__link {
font-family: var(--font-secundaria);
font-size: 30px;
font-weight: 600;
color: var(--cor-terciaria);
text-decoration: none;
}
.apresentacao {
padding: 8% 15%;
display: flex;
align-items: center;
justify-content: space-between;
}
.apresentacao__conteudo{
width: 615px;
display: flex;
flex-direction: column;
gap: 9px;
}
.apresentacao__conteudo__titulo {
font-size: 36px;
font-family: var(--font-primaria);
}
.destaque-título {
color: var(--cor-terciaria);
}
.apresentacao__conteudo__paragrafo {
font-size: 24px;
font-family: var(--font-secundaria);
}
.apresentacao__links {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 32px
}
.apresentacao__links__subtitulo {
font-family: var(--font-primaria);
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 40px;
}
.apresentacao__links__link {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
width: 378px;
text-align: center;
border-radius:8px;
font-size: 20px;
font-weight: 600;
padding: 21.5px 0;
text-decoration: none;
color: var(--cor-secundaria);
font-family: var(--font-primaria);
border: 2px solid var(--cor-terciaria);
}
.apresentacao__links__link:hover {
background-color: var(--cor-hover);
scale: 1.1;
}
.rodape {
color: var(--cor-primaria);
background-color: var(--cor-terciaria);
padding: 15px;
text-align: center;
font-size: 24px;
font-family: var(--font-primaria);
font-weight: 400;
}
.apresentacao__curriculo {
width: 615px;
display: flex;
flex-direction: column;
gap: 9px;
}
Oii, Denison! Tudo bem?
Para entender melhor o problema que está fazendo com o que seu código não funcione corretamente, você poderia enviar por gentileza o seu código completo, inclusive contendo o CSS. Dessa forma será mais assertivo encontrar uma solução para o problema.
Fico no aguardo!
Alguém?
Oii, Dev!
Agradeço por compartilhar o seu código!
Para aplicar estilo nas páginas precisaremos adicionar as mesmas propriedades da classe apresentacao{} na sua classe .apresentacao__curriculo{} dentro do seu arquivo Style.css. A sua classe encontra-se da seguinte forma:
.apresentacao__curriculo {
width: 615px;
display: flex;
flex-direction: column;
gap: 9px;
}
E realizando as modificações ficará da seguinte forma:
.apresentacao__curriculo {
padding: 5% 15%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 82px;
}
Adicionamos e substituimos algumas propriedades para conter o mesmo espaçamento entre o conteúdo e as bordas (padding), para os elementos ficarem centralizados ( align-items), para ter espaço entre os conteudos (justify-content) e entre o conteúdo e a foto (gap). O display: flex; manteremos. Fique à vontade para copiar o código acima e ajustar as propriedades conforme desejar.
Espero ter ajudado. Qualquer dúvida, conte conosco.
Bons estudos!
Obrigado!
Mas o header, conteudo e footer ainda ficam maiores nas páginas about.html e curriculo.html. Não ficam com o estilo da index.html
Já quebrei a cabeça e não consegui encontrar o erro.
Oii, Denison! Tudo bem?
Uma solução para esse problema, é modificarmos algumas classes.
Em seu arquivo curriculo.html na tag de apresentação e informações principais vamos mudar a classe para class = "apresentação__conteudo__paragrafo" para aplicar o mesmo estilo da fonte e tamanho que tem no arquivo index.html:
<p class="apresentacao__conteudo__paragrafo">Apresentação e informações principais</p>Em seguida, dentro da tag <ul> que contém a lista das Empresas vamos adicionar a <class= “apresentação__conteudo__paragrafo” para ter o mesmo efeito, o trecho do código ficará assim:
<ul class="apresentacao__conteudo__paragrafo">
<li> Empresa tal (2020 - 2021) - fazia isso e aquilo </li>
<li> Empresa tal (2021 - 2023) - fazia isso e aquilo </li>
</ul>
Vamos mover a tag <h2> referente a Estudos para dentro da <div> que contém as informações sobre Cursos e certificados. Depois, retirar a classe que se encontra nesta <div> e por último adicionar a <class= “apresentação__conteudo__paragrafo” na <ul>. O bloco desse código com as modificações será assim:
<div>
<h2 class="apresentacao__conteudo__titulo">Estudos</h2>
<ul class="apresentacao__conteudo__paragrafo">
<li>Curso tal - Alura Cursos <a href="linkdocertificado">com certificado</a> </li>
<li>Curso tal - Alura Cursos <a href="linkdocertificado">com certificado</a></li>
<li>Curso tal - Alura Cursos <a href="linkdocertificado">com certificado</a></li>
</ul>
</div> Em relação ao footer na dimensão da minha tela que é de 1366px, ele está presente e igual em todas as páginas. Mas uma dica é, que se a dimensão da sua tela for maior, você pode utilizar a propriedade margin-topdentro da classe .rodape{}, que se encontra no seu arquivo CSS, adicionando os valores que melhor se encaixe ao seu projeto.
Espero ter ajudado.
Bons estudos!