comandosHTML/index.html at main · ProfCesaum/comandosHTML · 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
<!doctype html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Quiz para programadores</title>
    <link rel="shortcut icon" href="./img/favicon.png" type="image/x-icon" />
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <header class="cabecalho">
      <h1>Quiz interativo para programadores</h1>
      <p>
        Teste seus conhecimentos em programaçãoe veja qual pontuação voce
        consegue fazer
      </p>
      <div class="cabecalho-menu">
        <a href="index.html">
          <img
            src="./img/favicon.png"
            alt="Logo Quiz"
            class="cabecalho-menu-img"
          />
        </a>
        <nav class="menu">
          <a href="pontuacao.html">Pontuação</a>
          <a href="respostas.html">Respostas</a>
          <a href="contatos.html">Contatos</a>
        </nav>
      </div>
    </header>
    <main class="container">
      <section id="introducao">
        <h2>Sobre esse Quiz</h2>
        <p>
          Este quiz foi desenvolvido para testar seus conhecimentos em
          programação como linguagem de programação, conceitos básicos e mais.
        </p>
        <p>
          Você encontrará diferentes tipos de perguntas, incluindo multiplas
          escolhas, textos e perguntas de data. Desafie-se com este quiz.
        </p>
        <p>
          Vcoê poderá encontrar alguns acrônicos como HTML, CSS, que são
          comumentes usados em qustões relacionadas ao esenvolvimento web
        </p>
      </section>
      <section id="rario">
        <h2>
          Pergunta 1: Qual linguagem utilizada para estruturar páginas web?
        </h2>
        <form>
          <input type="radio" name="pergunta1" id="p1a" />
          <label for="p1a">Phyton</label><br />
          <input type="radio" name="pergunta1" id="p2a" />
          <label for="p2a">HTML</label><br />
          <input type="radio" name="pergunta1" id="p3a" />
          <label for="p3a">Ruby</label><br />
          <input type="radio" name="pergunta1" id="p4a" />
          <label for="p4a">JavaScript</label>
        </form>
      </section>
      <section id="caixaTexto">
        <h2>
          Pergunta 2: Na URL http://www.google.com o trecho "google.com é o
          __________.
        </h2>
        <form>
          <input
            type="text"
            name="pergunta2"
            id="p2"
            placeholder="Responda aqui"
          />
        </form>
      </section>
      <section id="senha">
        <h2>Pergunta 3: Digite uma senha.</h2>
        <form>
          <input
            type="password"
            name="pergunta3"
            id="p3"
            placeholder="Digite sua senha"
          />
        </form>
      </section>
      <section id="data">
        <h2>Pergunta 4: Em que ano o HTML lançou sua primera versão?</h2>
        <input type="date" name="pergunta4" id="p4" />
      </section>
      <section id="checkBox">
        <h2>
          Pergunta 5: Quais dessa tecnologias são linguagem de programação?
        </h2>
        <form>
          <input type="checkbox" name="perguta5" id="p5a" value="JavaScript" />
          <label for="p5a">JavaScript</label><br />
          <input type="checkbox" name="perguta5" id="p5b" value="HTML" />
          <label for="p5b">HTML</label><br />
          <input type="checkbox" name="perguta5" id="p5c" value="CSS" />
          <label for="p5c">CSS</label><br />
          <input type="checkbox" name="perguta5" id="p5d" value="Java" />
          <label for="p5d">Java</label>
        </form>
      </section>
      <section id="upload">
        <h2>Pergunta 6: Faça o upload de um arquivo:</h2>
        <form>
          <input type="file" name="pergunta6" id="p6" />
        </form>
      </section>
      <section id="lista">
        <h2>Pergunta 7: Selecione o atributo do intup que define seu tipo:</h2>
        <form>
          <select name="pergunta7" id="p7">
            <option value="" disabled selected>Selecione</option>
            <option value="id">id</option>
            <option value="type">type</option>
            <option value="placeholder">placeholder</option>
          </select>
        </form>
      </section>
      <section id="imagem">
        <h2>Menino Lindo</h2>
        <figure>
          <img src="./img/geminiEu.png" alt="" class="figure-img" />
          <figcaption>Figura1: Imagem gerado pelo Gemini</figcaption>
        </figure>
      </section>
    </main>
    <footer>
      <p>&copy Quiz de programação. Todos os ireitos reservados</p>
      <p>
        Para conhecer mais sobre mim
        <a href="https://www.linkedin.com/in/cglfilho/" target="_blank"
          >clique aqui</a
        >
      </p>
    </footer>
  </body>
</html>