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

HTML e CSS: Atividade 8

<!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">
        <link rel="stylesheet" href="./styles/style.css">

        <title>by Anna ☆ - ME</title>
        <link rel="icon" href="red star.png" type="image/png">
    </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">About me</a>
            </nav>
        </header>

        <main class="apresentacao">
            <section class="apresentacao__conteudo">
                <h1 class="apresentacao__conteudo__titulo">Quem sou... <strong class="apresentacao__conteudo__titulo__destaque">Anna?</strong></h1>

                <hr class="regua">

                <p class="apresentacao__conteudo__texto">Eu sou a Anna, por enquanto, apenas uma estudante, mas quero me tornar uma desenvolvedora <span class="apresentacao__conteudo__texto__destaque">Fullstack</span>. <br><br> Me acompanhe enquanto me aprimoro.</p>

                <div class="apresentacao__links">
                    <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
                    <div class="apresentacao__links__container">
                        <a href="https://github.com/annamatkow"
                        target="_blank"
                        class="apresentacao__links__link">
                        <img src="./assets/git.png" class="apresentacao__links__icone__github">
                            Github</a>

                        <a href="https://www.linkedin.com/in/anna-luiza-matkow-de-macedo-122186216/"
                        target="_blank"
                        class="apresentacao__links__link">
                        <img src="./assets/linkedin.png" class="apresentacao__links__icone__linkedin">
                            Linkedin</a>
                    </div>
                </div>
            </section>

            <img src="./assets/cortada.jpg" alt="eu mesma, um desenho de uma mulher de cabelos vermelhos no pôr do sol" class="apresentacao__imagem">
        </main>

        <footer class="rodape">
            <p>Desenvolvido por Anna Matkow</p>
        </footer>
    </body>
</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">
        <link rel="stylesheet" href="./styles/style.css">

        <title>About me - Anna ☆</title>
        <link rel="icon" href="red star.png" type="image/png">
    </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">About me</a>
            </nav>
        </header>

        <main class="apresentacao">
            <section class="apresentacao__conteudo">
                <h1 class="apresentacao__conteudo__titulo">Aboute me</h1>

                <hr class="regua">
                
                <p class="apresentacao__conteudo__texto">Sou <span class="apresentacao__conteudo__texto__destaque">Anna Luiza Matkow</span>, estudante de Ciência da Computação e desenvolvedora Front-end em ascensão. Atualmente domino <span class="apresentacao__conteudo__texto__destaque">HTML e CSS</span> para criação de interfaces responsivas, e estou me aprofundando em <span class="apresentacao__conteudo__texto__destaque">JavaScript</span> como próximo passo na minha jornada para me tornar uma desenvolvedora Fullstack. Paralelamente, cultivo grande interesse por <span class="apresentacao__conteudo__texto__destaque">IA e Machine Learning</span>, áreas que pretendo explorar profissionalmente no futuro.</p>
                <p class="apresentacao__conteudo__texto">Em um mundo onde muitos temem ser substituídos por IA, mantenho a convicção de que desenvolvedores qualificados e criativos sempre terão espaço. <span class="apresentacao__conteudo__texto__destaque">Minha meta é me tornar uma profissional tão versátil que minha capacidade de resolver problemas complexos e criar soluções inovadoras me torne indispensável</span>, independentemente das mudanças tecnológicas.</p>
            </section>

            <img src="./assets/cortada.jpg" alt="eu mesma, um desenho de uma mulher de cabelos vermelhos no pôr do sol" class="apresentacao__imagem">
        </main>

        <footer class="rodape">
            <p>Desenvolvido por Anna Matkow</p>
        </footer>
    </body>
</html>

        <!--aqui encerra index.html e inicia-se style.css-->
3 respostas
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');

:root {
    --cor-um: #000000;
    --cor-dois: #DCD7C9;
    --cor-tres: #da759c;
    --cor-quatro: #aa5073;
    --cor-cinco: #8e5260;
    --cor-seis: #1b0810;

    --fonte-primaria: "Source Code Pro", monospace;
    --fonte-secundaria: "Montserrat", sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--cor-um);
    color: var(--cor-dois);
    font-family: var(--fonte-primaria);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.regua {
    border: 0;
    height: 2px;
    background-color: var(--cor-cinco);
    margin: 1.25% 0;
}

.cabecalho {
    padding: 2% 0% 0% 28%;
    text-align: center;
    width: 100%;
}

.cabecalho__menu {
    display: flex;
    gap: 60px;
}

.cabecalho__menu__link {
    font-weight: 500;
    color: var(--cor-tres);
    text-decoration: none;
}

.apresentacao {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 1.67%;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.apresentacao__conteudo {
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 1.67%;
    overflow-y: auto;
    padding-right: 1.67%;
}

.apresentacao__conteudo__titulo {
    font-size: 28px;
    font-family: var(--fonte-primaria);
}

.apresentacao__conteudo__titulo__destaque {
    color: var(--cor-quatro);
    font-weight: bold;
    border: 1px solid var(--cor-cinco);
    padding: 1px;
}

.apresentacao__conteudo__texto {
    font-size: 18px;
    font-family: var(--fonte-secundaria);
    font-weight: 300;
}

.apresentacao__conteudo__texto__destaque {
    color: var(--cor-quatro);
    font-family: var(--fonte-secundaria);
    font-weight: bold;
}

.apresentacao__imagem {
    border-radius: 90px;
    width: 300px;
    max-width: 100%;
    height: auto;
    margin: 1.67% 0;
}

.apresentacao__links {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;
    width: 100%;
    gap: 20px;
}

.apresentacao__links__subtitulo {
    font-family: var(--fonte-primaria);
    font-size: 24px;
    font-weight: 600;
    text-align: center;
}

.apresentacao__links__container{
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.apresentacao__links__link {
    /* background-color: #4b162b; gostei dessa cor */
    display: flex;
    justify-content: center;
    vertical-align: middle;
    gap: 2px;
    background-color: var(--cor-um);
    border: 2px inset var(--cor-tres);
    width: 200px;
    text-align: center;
    border-radius: 50px;
    font-size: 15px;
    padding: 12px 0;
    text-decoration: none;
    color: var(--cor-tres);
    font-family: var(--fonte-secundaria);
    font-weight: 600;
}

.apresentacao__links__link:hover {
    background-color: var(--cor-seis);
}

.apresentacao__links__icone__github {
    display: flex;
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.apresentacao__links__icone__linkedin {
    display: flex;
    width: 29px;
    height: 29px;
    margin-right: 8px;
}

.rodape {
    background-color: var(--cor-seis);
    padding: 1%;
    text-align: center;
    width: 100%;
    margin-top: auto;
    font-weight: 300;
}

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

solução!

Ana, ficou simplesmente muito bom, que fora da caixa, gostei demais!

Parabéns!