1
resposta

[Projeto] Iniciando projeto sozinho

Olá pessoal, decidi começar o projeto antes dos professores, para testar minhas habilidades e ver oque já aprendi. Sinceramente recomendo a todos, pode ser um pouco frustrante no começo. porém o final e recompensador.(Fiz apenas a parte do Home. porém adicionei uma âncora para o "Sobre Mim")

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">
    <title>Portfólio</title>
    <link rel="stylesheet" href="style.css">

</head>

<body>
    <header>
        <nav class="navagation">
            <a href="index.html">Home</a>
            <a href="about.html">Sobre Mim</a>
        </nav>
    </header>
    <main class="master">
        <section class="master__content">
            <h1 class="master__title">
                Eleve seu negócio digital a outro nível <strong class="title__strong">com um Front-end de qualidade!
                </strong></h1>
            <p class="master__text">
                Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos
                negócios e designers a colocarem em prática boas ideias. Vamos conversar?
            </p>
            <div class="master__links">
                <h2 class="master__links__title">Acesse minhas redes:</h2>
                <a href="https://www.github.com" class="master__links__button github">GitHub</a>
                <a href="https://www.linkedin.com" class="master__links__button linkedin">Linkedin</a>
                <a href="https://www.twitch.com" class="master__links__button twitch">Twitch</a>
            </div>
        </section>
        <img src="Imagem.svg" alt="Menina estudando no computador" class="master__content__img">
    </main>
    <footer>
        <p>Desenvolvido por Alura</p>
    </footer>
</body>

</html>

CSS

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

* {
    margin: 0;
    padding: 0;
}

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

.navagation {
    margin: 5% 15% 0%;
}

.navagation > a {
    color:#22D4FD;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 24px;
    margin-right: 7%;
}

.master {
    margin: 7% 15% 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.master__content {
    width: 615px;
    display: flex;
    gap: 40px;
    flex-direction: column;
}

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

.title__strong {
    color: #22D4FD;
}

.master__text {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 400;
}

.master__links {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

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

.master__links__button {
    display: inline-flex;
    background-color: #000000;
    width: 280px;
    padding: 21.5px 0;
    text-align: center;
    border-radius: 16px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #F6F6F6;
    border: 5px solid #22D4FD;
    justify-content: center;
    align-items: center;
}

.github::before {
    content: url(Logo\ Github.svg);
    margin-right: 16px;
}

.linkedin::before {
    content: url(Logo\ linkedin.svg);
    margin-right: 16px;
}

.twitch::before {
    content: url(Logo\ Twitch.svg);
    margin-right: 16px;
}

.master__content__img {
    margin-bottom: 170px;
}

footer {
    width: 100%;
    background-color: #22D4FD;
}

footer > p {
    color: #000000;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 24px;
    text-align: center;
    padding: 24px 0;
}

Caso tenha alguma dica estou aceitando de bom grado, desde já obrigado <3

1 resposta

Parabéns Vitor, muito bom