-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (118 loc) · 4.89 KB
/
index.html
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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>Soporte Técnico</title>
</head>
<body>
<main>
<header>
<h1>Soporte Técnico</h1>
<h2>¿Cómo te puedo ayudar?</h2>
</header>
<div class="box-indication">
<div class="top-rect"></div>
<div class="indication">
<h3>Información de solicitud de soporte</h3>
<p><strong>*</strong>Obligatorio</p>
</div>
</div>
<form>
<article class="box-input">
<p>Nombre <strong>*</strong></p>
<div class="input">
<input type="text" name="name" id="name" placeholder="Nombre" autofocus="autofocus" required="required" />
<div class="animation-focus">
<div class="left"></div><div class="right"></div>
</div>
</div>
<div class="input">
<input type="text" name="lastname" id="lastname" placeholder="Apellido" required="required" />
<div class="animation-focus">
<div class="left"></div><div class="right"></div>
</div>
</div>
</article>
<article class="box-input">
<p>Correo electrónico <strong>*</strong></p>
<div class="input">
<input type="email" name="email" id="email" required="required" placeholder="Escribe tu correo aquí" />
<div class="animation-focus">
<div class="left"></div><div class="right"></div>
</div>
</div>
</article>
<article class="box-input">
<p>Teléfono</p>
<div class="input">
<input type="tel" name="tel" id="telephone" placeholder="Ejemplo: 9581186723" pattern="[0-9]{10}"/>
<div class="animation-focus">
<div class="left"></div><div class="right"></div>
</div>
</div>
</article>
<article class="box-input">
<p>¿Cuál es el problema? <strong>*</strong></p>
<div class="input">
<input type="text" name="issue" id="issue" required="required" placeholder="Escribe problema aquí"/>
<div class="animation-focus">
<div class="left"></div><div class="right"></div>
</div>
</div>
</article>
<article class="box-input">
<p>Por favor, describa en detalle lo sucedido. <strong>*</strong></p>
<div class="input">
<textarea name="detail" id="detail" cols="30" rows="10" placeholder="Describe tu problema aquí" maxlength="2000" required="required"></textarea>
</div>
</article>
<article class="box-input">
<p>Sistema operativo. <strong>*</strong></p>
<div class="input">
<select name="so" id="so" required="required">
<optgroup label="Microsoft Windows">
<option value="win7">Windows 7</option>
<option value="win10">Windows 10</option>
</optgroup>
<optgroup label="MacOS">
<option value="macCatalina">macOS Catalina</option>
<option value="macMojave">macOS Mojave</option>
<option value="machigsierra">macOS High Sierra</option>
<option value="macsierra">macOS Sierra</option>
</optgroup>
<optgroup label="Linux">
<option value="debian">Debian</option>
<option value="fedora">Ubunt</option>
<option value="manjaro">Fedora</option>
</optgroup>
</select>
</div>
</article>
<article class="box-input">
<p>Navegador. <strong>*</strong></p>
<div class="input">
<input type="text" name="browser" id="browser" list="list-browser" required="required" placeholder="Específica tu navegador"/>
<div class="animation-focus">
<div class="left"></div><div class="right"></div>
</div>
<datalist id="list-browser">
<option value="Google Chrome"></option>
<option value="Safari"></option>
<option value="Internet Explorer"></option>
<option value="Firefox"></option>
<option value="Opera"></option>
</datalist>
</div>
</article>
<article class="box-button">
<input type="submit" value="Enviar" />
</article>
</form>
</main>
<footer>
<small>Diseñado por Martín Monjaraz Almaraz | Octubre 2020</small>
</footer>
</body>
</html>