3
respostas

onde estou errando? ja refiz um as 5 vezes mas muna pagina fica igual

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>straykids</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header></header>
    <section class="apresentacao__conteudo">
        <h1 class="apresentacao__conteudo__titulo">Stray Kids  coreano :  스트레이 키즈 <strong 
        class="titulo-destaque">é uma boy band sul-coreana formada pela JYP Entertainment através do reality show de mesmo nome de 2017 
        </strong></h1>
        <p class="apresentacao__conteudo__texto">O grupo é composto por oito membros: Bang Chan, Lee Know, Changbin, Hyunjin, Han, Felix , Seungmin e IN </p>
            
             <div class="aprensentacao__links">   
             <a class="aprensentacao__links__link" href="https://www.youtube.com/@StrayKids">youtube</a>
             <a class="aprensentacao__links__link"href="https://straykids.jype.com/">pagina oficial</a>
             </div>
         <img src="projeto01.png" alt="Foto do grupo Stray Kids">      
    </main>
    <footer></footer>
    
</body>
</html>

CSS

*
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');

*{
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
    box-sizing: border-box;
    background-image:url("skz.png");
    color: #080808;
}
.titulo{
    color: red;
margin: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.titulo-destaque{
    color: hsla(0, 95%, 42%, 0.982);
}

.apresentacao{
    margin: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.apresentacao__conteudo{
    width: 615px;
}

.apresentacao__conteudo__titulo{
    font-size: 36px;
    font-family: 'Krona One', sans-serif;
}

.apresentacao__conteudo__texto{
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
}
.apresentacao__links{
    display: flex;
    justify-content: space-between;
}
.apresentacao__links__link{
    background-color: black;
    width: 280px;
    text-align: center;
    border-radius: 16px;
    font-size: 24px;
    padding: 21.5px 0;
    text-decoration: none;
    color: black;
    font-family: 'Montserrat', sans-serif;
}
3 respostas

Olá Patricia!

Vejo que você está trabalhando em um projeto separado, com outra temática alterando imagens e fazendo algumas customizações.

Como não tenho acesso às imagens que você está usando, não consigo ver exatamente quais são as diferenças entre o seu site e o do curso. Além disso, é importante notar que neste ponto do curso estamos usando medidas fixas, então se a sua proporção de tela dor diferente da do curso(1920x1080), pode haver algumas discrepâncias.

Por favor, compartilhe comigo qual erro você está encontrando em relação ao projeto do curso, pode ser um print e envie o seu projeto completo para que eu possa testá-lo com mais precisão. Se você ainda não sabe como compartilhar seu projeto via GitHub, por favor, envie o link através do Google Drive. De qualquer forma, deixo um passo a passo para compartilhar o projeto comigo.

Para compartilhar o seu projeto, basta você abrir o seu google drive no seguinte link:

Faça o login, normalmente caso necessário, depois você vai clicar em novo: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Logo depois você deve compartilhar a pasta onde está o seu projeto, contendo todos os seus arquivos:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Depois dessa tela, vai abrir o seu explorador de arquivo, selecione a sua pasta que vai subir para o seu drive, por fim você deve compartilhar o link dele comigo, deste modo:

1. Localize a sua pastaInsira aqui a descrição dessa imagem para ajudar na acessibilidade

2. Gere o link de compartilhar clicando nos Três pontinhos na pasta, depois em compartilhar e compartilhar novamente. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

3. Por fim vamos gerar um link, se atente em deixar o arquivo público para que eu possa baixar ele: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Ao clicar em copiar link, este link ficara disponível na sua área de transferência, por fim basta dá um CTRL + V ou colar, com o botão direito do mause aqui no tópico e mandar para mim, deste modo vou conseguir lhe ajudar de forma mais assertiva.

Abraços e até mais! Fico no aguardo.

Olá Patricia!

O seu projeto está ficando bem legal, mas observei que há algumas discrepâncias, com o layout do projeto do curso, pensando nisso alinhei o seu código e obtive o seguinte resultado, sinta-se à vontade para alinhar o seu projeto:

Projeto da aluna baseada no grupo musical Stray KidsPrimeira alteração foi no seu código HTML, que ficou assim:

 <main class="apresentacao"> 
            <main class="titulo">
                <div class="texto">
                <h1 class="titulo">Stray Kids (hangul: 스트레이 키즈; rr: Seuteurei kijeu; estilizado como SKZ) é um grupo masculino sul-coreano formado pela JYP Entertainment</h1>
               <p class="apresentacao__introducao">É composto atualmente por 8 integrantes: Bang Chan, Lee Know, Changbin, Hyunjin, Han, Felix, Seungmin e I.N.</p>
               <section class="apresentacao__conteudo">
                <div class="apresentacao__links">
                    <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
                    <a class="apresentacao__links__link" href= "https://www.youtube.com/@StrayKids">
                        <img src="./assets/youtube.png">
                       Youtube
                    </a>
                    <a class="apresentacao__links__link" href="https://straykids.jype.com">
                        <img src="./assets/jyp.png">
                        Site oficial
                    </a>
                    
                </div>
            </section>
            </div>
               <img src="./assets/projeto01.png" alt="foto do grupo stray kids">
            </main>

Espero ter ajudado e caso não seja essa a sua intenção com o projeto, peço que me forneça mais detalhes, vou ficar muito feliz em lhe ajudar com esse projeto.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!