Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Projeto] Resultados

Referente ao curso HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags, no capítulo Super estilizando o seu CSS e atividade Desafio: compartilhe seu projeto com o mundo

por Eric Akio Uchiyamada
| 63.5k xp | 2 posts

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portifolio</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header></header>
    <main>
        <h1>
            Olá! Me chamo Eric e este é um projeto de <strong>HTML/CSS</strong> que desenvolvi
        </h1>
        <p> 
            Eu possuo um interesse grande para aprender <strong>desenvolvimento Front-End</strong>
            e este é apenas o 1º projeto de muitos por vir.
        </p>
        
            <a href="https://linkedin.com/in/eric-akio-uchiyamada-337076289" class="botaoLinkedIn">LinkedIn</a>
        
        
            <a href="https://github.com/EriAkiUchi/College" class="botaoGit">GitHub</a>
        
        <img src="retrato.png" alt="Retrato de Eric Akio" class="imagem">
    </main>
    <footer>
        Página desenvolvida por Eric Akio <br>
        Referências: <a href="https://www.w3schools.com/css/default.asp">w3schools css</a>
    </footer>
</body>

</html>

CSS

body {
    background-color: rgb(48, 0, 83);
    color: white;
    font-family: 'Courier New', Courier, monospace;
}
h1 {
    position: absolute;
    left: 340px;
    top: 20px;
}
p {
    color: white;
    position: absolute;
    left: 400px;
    top: 90px;
}
strong{
    color:aqua;
}

footer{
    color: gray;
    position: absolute;
    top: 930px;

}

.imagem {
    max-width: 500px;
    max-height: 450px;
    width: auto;
    height: auto;
    position: absolute;
    left: 1000px;
    top: 200px;
}

.botaoGit {
    display: inline-block;
    text-decoration: none;
    font-size: 30px;
    padding: 10px 20px;
    color: aqua;
    background-color: rgb(100, 16, 160);
    border: 1px rgb(100, 16, 160);
    border-radius: 5px;
    cursor: pointer;
    position: absolute;
    left: 650px;
    top: 320px;
}
.botaoLinkedIn {
    display: inline-block;
    text-decoration: none;
    font-size: 30px;
    padding: 10px 20px;
    color: aqua;
    background-color: rgb(100, 16, 160);
    border: 1px rgb(100, 16, 160);
    border-radius: 5px;
    cursor: pointer;
    position: absolute;
    left: 650px;
    top: 430px;
}

.botaoGit:hover {
    background-color: rgb(135, 63, 186);
    font-weight: bold;
}

.botaoLinkedIn:hover {
    background-color: rgb(135, 63, 186);
    font-weight: bold;
}

imagem

3 respostas
solução!
por Nícolas Felipe Ferreira Souza
| 3030.5k xp | 9879 posts
Instrutor

Oi, Eric! Como vai você?

Muito obrigado por compartilhar o seu projeto aqui no Fórum. Isso é muito bom para a comunidade e pode ajudar muitas pessoas!

Caso precise de ajuda futuramente, fico à disposição para ajudar. Forte Abraço!

por Eric Akio Uchiyamada
| 63.5k xp | 2 posts

Ajustei o CSS para que os elementos fossem escaláveis p/ notebooks, já que possuem telas menores.

/*foi usado vw(viewport width) no tamanho dos elementos p/ q eles sejam 
escaláveis p/ dispositivos de tela menores como laptops*/

body {
    background-color: rgb(48, 0, 83);
    color: white;
    font-family: 'Courier New', Courier, monospace;
}
h1 {
    position: absolute;
    left: 17%;
    top: 3%;
    font-size: 1.7vw;
}
p {
    color: white;
    position: absolute;
    left: 20%;
    top: 10%;
    font-size: 0.85vw;
}
strong{
    color:aqua;
}

footer{
    color: gray;
    position: absolute;
    bottom: 0%;

}

.imagem {
    max-width: 80%;
    max-height: 40%;
    width: auto;
    height: auto;
    position: absolute;
    left: 50%;
    top: 25%;
}

.botaoGit,.botaoLinkedIn {
    display: inline-block;
    text-decoration: none;
    font-size: 1.5vw;
    padding: 1% 1%;
    color: aqua;
    background-color: rgb(100, 16, 160);
    border:  rgb(100, 16, 160);
    border-radius: 10%;
    cursor: pointer;
    position: absolute;
    left: 35%;
    top: 35%;
}
.botaoLinkedIn {
    top: 50%;
}

/*Efeito adicional ao passar o mouse em cima do botão*/
.botaoGit:hover, .botaoLinkedIn:hover {
    background-color: rgb(135, 63, 186);
    font-weight: bold;
}

/* Ajustar o tamanho da fonte dependendo do tamanho da tela do dispositivo*/
@media screen and (max-width: 1024px) {

    h1 {
        font-size: 1.3vw;
    }

    p {
        font-size: 0.6vw;
    }

    .botaoGit,.botaoLinkedIn{
        font-size: 1.2vw;
    }

}
por Nícolas Felipe Ferreira Souza
| 3030.5k xp | 9879 posts
Instrutor

Olá!

Muito bom, Eric! A responsividade é um recurso incrível para se utilizar nos projetos. Parabéns!

Abraço.