discord-project/index.html at master · andresantanajr/discord-project · 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <!-- Meta tags Obrigatórias -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="css/estilo.css">

    <!-- Fiveicon -->
    <link rel="icon"  href="imagens/discord-favicon.png">


    <title>DISCORD | Seu lugar para papear e ficar de boa</title>
  </head>
  <body>

      <header><!--Início Cabeçalho-->
        <nav class="navbar navbar-expand-lg config-top">
          <div class="container">

            <a href="index.html">
              <img src="imagens/discord-logo.png" width="50">
              <span class="text-white negrito">Discord</span>
            </a>

            <div class="collapse navbar-collapse" id="nav-principal">
            <ul class="navbar-nav mx-auto mt-2 pr-5">
              <li class="nav-item px-3">
                <a href="#" class="nav-link text-white negrito">Baixar</a>
              </li>

              <li class="nav-item px-3">
                <a href="#" class="nav-link text-white negrito">Nitro</a>
              </li>

              <li class="nav-item px-3">
                <a href="#" class="nav-link text-white negrito">Segurança</a>
              </li>

              <li class="nav-item px-3">
                <a href="#" class="nav-link text-white negrito">Suporte</a>
              </li>
            </ul>
          </div>

          <a href="#" class="btn btn-md btn-custom mt-3">
            Abrir Discord
          </a>

          <button class="navbar-toggler" data-toggle="collapse" data-target="#nav-principal">
              <i class="fas fa-bars text-white"></i>
           </button>


          </div>
        </nav>
      </header><!--Fim Cabeçalho-->

      <section id="config-principal-page">

        <div class="container">

          <div class="row">

          <div class="col-md-12">

            <div class="row">
              <div class="content-one col-md-4 container-fluid" >
                <img src="imagens/img3.svg">
              </div>

              <div class="col-md-4 content-three text-center" >
                   <h4>IMAGINE UM LUGAR…</h4>
                  <p>…onde você possa pertencer a um clube escolar, um grupo de gamers, ou uma comunidade artística mundial. Onde você e alguns amigos possam passar um tempo juntos. Um lugar que torna fácil conversar todos os dias e socializar com mais frequência.</p>
              </div>

              <div class="col-md-4 content-two container-fluid d-md-block d-none" >
                <img src="imagens/img2.svg">
              </div>

            </div>
          </div>


          </div>
        </div>

      </section>

      <section class="config-content">

        <div class="">
          <div class="row">

            <div class="col-md-6" mx-5>
              <img src="imagens/img4.svg" class="img-fluid">
            </div>

            <div class="col-md-6 mt-5">
              <h2>
                Crie um espaço controlado por convite onde você se sinta em casa
              </h2>

              <p>
                Os servidores Discord são organizados em canais com tópicos para vocês colaborarem, compartilharem ou simplesmente falarem do dia sem entupir um chat geral.
              </p>
            </div>


          </div>
        </div>

      </section>

      <section class="bg-grey">
        <div class="container">
          <div class="row">

            <div class="col-md-6 edt-block-3">
                <h2 style="font-weight: bolder;">Aqui é fácil se<br> encontrar</h2>

                <p style="font-size: 20pt;">Entre no canal de voz quando estiver à toa.
                Amigos no mesmo servidor podem te ver e entrar
                imediatamente, sem nem ter que fazer a chamada.</p>
            </div>

            <div class="col-md-6 edt-block-3-1">

              <img src="imagens/img5.svg" class="">

            </div>

          </div>
        </div>
      </section>

      <section style="margin-top: -5em; margin-bottom: 5em;">
        <div class="">
          <div class="row">

              <div class="col-md-6 edt-block-3-1">
                <img src="imagens/img6.svg" class="img-fluid">
              </div>

              <div class="col-md-6 edt-block-3">
                <h2 style="font-weight: bolder;">Para poucos e para muitos</h2>

                <p style="font-size: 20pt;">Organize qualquer comunidade com<br> ferramentas
                de moderação e acesso<br> personalizado a membros.
                Dê poderes<br> especiais aos membros, monte canais<br>
                privados e muito mais.</p>
              </div>

          </div>
        </div>
      </section>

      <section class="bg-grey">
        <div class="container">
          <div class="row">
              <div class="col-md-12">
                  <h1 class="text-center" style="font-weight: bolder;">Tecnologia de Conexão Confiável</h1>

                  <p class="text-center" style="font-size: 15pt;">Voz e vídeo de baixa latência, para você conversar como se estivesse na mesma sala. Dê um joinha por vídeo, veja amigos transmitires a jogatina do dia ou junte uma galera para desenhar na tela compartilhada.</p>

                  <img src="imagens/img7.svg" class="ml-5 w-100 h-100">


              </div>
          </div>
        </div>
      </section>


    <!-- JavaScript (Opcional) -->
    <!-- jQuery primeiro, depois Popper.js, depois Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>