Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags - Aula 11 Mão na massa

Olá, tudo bem pessoal?

Segue abaixo o código do projeto (HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags - Aula 11 Mão na massa) em que estou trabalhando, encontrei dificuldade em inserir as cores, centralizar texto e os botões, até mesmo diminuir a imagem, em questão das cores ao usar o CODEPEN deu "certo" mais ao tentar colocar pelo style.css do VSCODE, não obtive êxito, se alguém tiver algumas dica eu agradeço, bons estudos pessoal.

Eleve seu negócio digital a outro nível com um Front-end de qualidade!

Olá! Sou Gleibson Kenned, estudante de desenvolvimento em Front-end com especialidade em JS, HTML e CSS.

Meu objetivo é atuar na area para ajudar empresas com desenvolvimento de sistemas, programas e páginas para seus públicos e negócios. Vamos conversar?

    <!-- Botões e Imagem -->
    <button><a href="https://www.instagram.com/gleibsonk/">Instagram</a></button>
    <button><a href="https://github.com/GleibsonK">GitHub</a></button>
    <img src="html5 i2.webp" alt="Logo do HTML5 flutuando sobre códigos">
       
</main>


<footer>
    <!-- Informações de Contato ou Direitos Autorais -->
</footer>

A pagina esta basicamente assim: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

3 respostas

Peguei algumas dicas aqui no fórum e em questão da imagem consegui diminuir com (width="999") inserido no campo da imagem: [ Logo do HTML5 flutuando sobre códigos ] usei tambem para da espaços entre TITULO, PARÁGRAFO, BOTÕES e IMAGEM:

Eleve seu negócio digital a outro nível com um Front-end de qualidade!

Olá! Sou Gleibson Kenned, estudante de desenvolvimento em Front-end com especialidade em JS, HTML e CSS.

Meu objetivo é atuar na area para ajudar empresas com desenvolvimento de sistemas, programas e páginas para seus públicos e negócios. Vamos conversar?

    <!-- Botões e Imagem -->
    <br>
    <button><a href="https://www.instagram.com/gleibsonk/">Instagram</a></button>
    <button><a href="https://github.com/GleibsonK">GitHub</a></button>
    <br><br>

    <img src="html5 i2.webp" width="999" alt="Logo do HTML5 flutuando sobre códigos">
       
</main>


<footer>
    <!-- Informações de Contato ou Direitos Autorais -->
</footer>

Imagem da pagina do projeto em HTML

solução!

Boa noite pessoal,

Venho através desse para informa que conseguir me achar nas aulas posterior a esse post inicial, vou posta a conclusão que eu achei bem bacana até brinquei um pouco mais com as cores usei a documentação como base (https://www.w3schools.com/css/css_background.asp), ainda preciso melhorar muito para atingir o nível que quero, mais estou feliz com o meu resultado de hoje, vou deixar para vocês os código disponível neste post que utilizei para chegar no resultado.

Segue abaixo para conhecimento;

HTML SEGUE ABAIXO O MEU MODELO:

Eleve seu negócio digital a outro nível com um Front-end de qualidade!

Olá! Sou Gleibson Kenned, estudante de desenvolvimento em Front-end com especialidade em JAVASCRIPT, HTML e CSS.

Meu objetivo é atuar na area para ajudar empresas com desenvolvimento de sistemas, programas e páginas para seus públicos e negócios. Vamos conversar?

    <!-- Botões e Imagem -->
    <br>
    <button><a href="https://www.instagram.com/gleibsonk/">Instagram</a></button>
    <button><a href="https://github.com/GleibsonK">GitHub</a></button>
    <br><br>

    <img src="html5 i2.webp" width="999" alt="Logo do HTML5 flutuando sobre códigos">
       
</main>


<footer>
    <p>Gleibson Kenned - Todos os direitos reservados.</p>
    <!-- Informações de Contato ou Direitos Autorais -->
</footer>

CSS SEGUE ABAIXO O MEU MODELO:

div { background: radial-gradient(circle, #04ADBF, #025373, #012840, #000); padding: 64px; background: linear-gradient(#000, #012840, #025373, #04ADBF); padding: 64px; } body { background-color: #0f333b; color: #97FEED; } strong{ color: #22d4fd; } button{ background-color: hsl(200, 70%, 60%); color: #F25F29; } footer { background-color: radial-gradient(circle, #031A1F, #5183E0, #51B0E0, #5156E0, #2C74B3, #205295, #144272, #0A2647, #D94625, #F25F29, #04ADBF, #025373, #012840); color: #97FEED; }

    font-family: 'Comfortaa', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    a {
        color: DodgerBlue;
    
    }


    h1{
        font-weight: bold;

}

span{ color: #22D4FD; border: 1px solid #22D4FD; padding: 10px; }

PROJETO SEGUE ABAIXO O MEU MODELO:

Imagem final de como ficou o meu projeto

Obrigado pessoal, pela duvidas e ideias que vocês postaram no FÓRUM eu conseguir ir me localizando, e parabéns pelo projetos de cada um!!!

Atualizando os arquivos:


index3.html:

Eleve seu negócio digital a outro nível com um Front-end de qualidade!

Olá! Sou Gleibson Kenned, estudante de desenvolvimento em Front-end com especialidade em JAVASCRIPT, HTML e CSS. Meu objetivo é atuar na area para ajudar empresas com desenvolvimento de sistemas, programas e páginas para seus públicos e negócios. Vamos conversar?

        <!-- Botões e Imagem -->
        <div class="apresentacao__links">
            <br>
            <a class="apresentacao__links__link" href="https://www.instagram.com/gleibsonk/">Instagram</a>
            <a class="apresentacao__links__link" href="https://github.com/GleibsonK">GitHub</a>
        </div>
    </section>
    
<img class="apresentacao__conteudo__img"src="html5 i2.webp" width="500" alt="Logo do HTML5 flutuando sobre códigos">
       
</main>


<footer>
    <!-- Informações de Contato ou Direitos Autorais -->
</footer>