TTwitter/home.html at main · ArthurGSS1/TTwitter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
        rel="stylesheet">

    <link rel="icon" type="image/png" href="Imagens/ejcmLogo.png" />

    <title>Home</title>

    <link rel="stylesheet" href="home.css">
</head>

<body>
    <header class="header">
        <div class="logo">
            <img src="Imagens/Logo TT.png" alt="Logo do TTwitter">
        </div>

        <div class="barraDeBusca">
            <input id="pesquisa" name="pesquisa" type="search" placeholder="Buscar" aria-label="Barra de busca do TTwiter">
            <img src="Imagens/lupaIcon.png" class="lupaIcon" alt="Icone de pesquisa">
        </div>
    </header>

    <main class="feedContainer">
        <section class="recomendados">
            <h2>Talvez você conheça</h2>

            <ul class="listaPerfis">
                <li class="itemListaPerfil">
                    <div class="fotoPerfil"></div>
                    <p class="nomeUsuario">@usuário</p>
                    <p class="invite">Adicionar</p>
                </li>
                <li class="itemListaPerfil">
                    <div class="fotoPerfil"></div>
                    <p class="nomeUsuario">@usuário</p>
                    <p class="invite">Adicionar</p>
                </li>
                <li class="itemListaPerfil">
                    <div class="fotoPerfil"></div>
                    <p class="nomeUsuario">@usuário</p>
                    <p class="invite">Adicionar</p>
                </li>
                <li class="itemListaPerfil">
                    <div class="fotoPerfil"></div>
                    <p class="nomeUsuario">@usuário</p>
                    <button type="button" class="invite">Adicionar</button>
                </li>
            </ul>
        </section>

        <section class="criarPublicacao">
            <div class="publicacaoContainer">
                <form>
                    <textarea name="textoPublicacao" id="textoPublicacao"
                        placeholder="No que está pensando...?"></textarea>
                    <div class="inferiorPublicacao">
                        <div class="iconesPublicacao">
                            <img src="Imagens/pictureIcon.png" alt="Adicionar imagem">
                            <img src="Imagens/carinhaIcon.png" alt="Adicionar emoji">
                            <img src="Imagens/linkIcon.png" alt="Adicionar link">
                        </div>
                        <button class="botaoPostar">Postar</button>
                    </div>
                </form>
            </div>
        </section>


        <section class="feed">
            <article class="publicacaoImageContainer">
                <div class="imagePostContainer">
                    <img class="imagePost" src="Imagens/imagemPost.png" alt="Post no feed da Home">
                </div>

                <div class="descricaoPost">
                    <div class="descricaoUsuario">
                        <div class="fotoPerfilPequena"></div>
                        <p class="nomeUsuario">@usuario</p>
                    </div>

                    <div class="interacoes">
                        <img src="Imagens/comentarIcon.png" alt="Comentar">
                        <img src="Imagens/likeIcon.png" alt="Curtir">
                        <img src="Imagens/ameiIcon.png" alt="Amar">
                    </div>
                </div>

                <div class="textoPost">
                    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
                </div>
            </article>
        </section>
    </main>

    <nav class="menuNavegacao" aria-label="Navegação Principal">
        <ul class="listaMenu">
            <li>
                <a href="home.html">
                    <img src="Imagens/homeLogo.png" alt="Tela inicial">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="Imagens/notificacoesIcon.png" alt="Ver Notificações">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="Imagens/mensagemIcon.png" alt="Ver Mensagens">
                </a>
            </li>
            <li>
                <a href="">
                    <img src="Imagens/configuracoesIcon.png" alt="Ver Configurações">
                </a>
            </li>
        </ul>
    </nav>
</body>

</html>