[Projeto] Dúvida | HTML e CSS: cabeçalho, footer e variáveis CSS

Olá pessoal!

Aqui é meu projeto, gostaria de saber como faço para enviar aqui ele pronto a imagem da página como alguns colegas postaram aqui, queria compartilhar não só o código mais meu projeto pronto também.

HTML:

Home Sobre mim

    </nav>
</header>
<main class="apresentacao">
    <section class="apresentacao__conteudo">
        <h1 class="apresentacao__conteudo__titulo">Buscando personalizados de qualidade na 
            <strong class="titulo-destaque"> <strong>Leoartegrafic</strong> </strong> você encontra qualidade e preço justo! </h1>
        <p class="apresentacao__conteudo__texto">Olá! Sou Elisangela Silva, fundadora da <strong>Leoartegrafic</strong> 
            Gráfica online e papelaria personalizada
            trabalhamos com impressos <strong>Panfleto, Banner, Cartão de visita, brindes em geral e papelaria para festa como: Topo de bolo, 
            Topo para docinho e lembrancinhas em geral.</strong> 
            Nossa equipe está preparada para colocar no papel sua ideia, você pensa nós criamos. Solicite seu orçamento!
            Entre em contato!</p>
            <div class="apresentacao__links">
                <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
            <a class="apresentacao__links__link" href="https://Instagram.com/leoartegrafic"> 
                <img src="./assets/instagram.png"> Instagram </a>
          
            <a class="apresentacao__links__link" href="https://wa.me/5511918672582/">
                <img src="./assets/twitch.png"> twich </a>
            
    </section>
        <img src="imagem.jpeg" alt="foto elisangela trabalhando" width="350px">
    </main>
    <footer class="rodape">
        <p>Desenvolvido por Elisangela.</p>
    </footer>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap')

{ margin: 0; padding: 0; }

body { /* height: 100vh; */ box-sizing: border-box; background-color: #000000; color: #F6F6F6; }

.cabecalho { padding: 2% 0 0 15%; }

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

.cabecalho__menu__link { font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 600; color: #22d4fd; text-decoration: none; }

.apresentacao { padding: 2% 15%; display: flex; align-items: center; justify-content: space-between; }

.apresentacao__conteudo { width: 615px; display: flex; flex-direction: column; }

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

} .titulo-destaque { color: blueviolet; }

.apresentacao__conteudo__texto { font-size: 24px; font-family: "Montserrat", sans-serif; } .apresentacao__links { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 32px; }

.apresentacao__links__subtitulo{ font-family: 'krona One', sans-serif; font-weight: 400; font-size: 24px; }

.apresentacao__links__link { /* background-color: #22d4fd; */ display: flex; justify-content: center; gap: 16px; border: 2px solid #22d4fd; width: 378px; text-align: center; border-radius: 8px; font-size: 24px; font-weight: 600; padding: 21.5px 0; text-decoration: none; color: #F6F6F6; font-family: "Montserrat", sans-serif; }

.apresentacao__links__link:hover { background-color: #272727;

} .rodape { padding: 24px; color: #000000; background-color: #22d4fd; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 400;

}