1
+ <!DOCTYPE html>
2
+ < html >
3
+
4
+ < head >
5
+ < meta charset ="UTF-8 ">
6
+ < link rel ="icon " type ="image/png " sizes ="96x96 " href ="images/favicon/profile-icon.png ">
7
+ < title > HTML A</ title >
8
+ < link rel ="stylesheet " href ="style.css ">
9
+ </ head >
10
+
11
+ < body >
12
+ < div class ="cabecera ">
13
+ < div class ="cabecera ">
14
+ < div class ="sidebarbutton ">
15
+ < img class ="sidebarbuttonimg " src ="images/favicon/profile-icon.png " alt ="Icon " width ="25px "
16
+ height ="25px ">
17
+ </ div >
18
+ < div class ="title ">
19
+ < h1 > Angel Velasco</ h1 >
20
+ </ div >
21
+ < div class ="socials ">
22
+ < a class ="socialslink " href ="https://twitter.com " target ="_blank ">
23
+ < img class ="twitter socialsimage " src ="images/Socials/Twitter/Twitter.svg " alt ="Twitter ">
24
+ </ a >
25
+ < a class ="socialslink " href ="https://linkedin.com " target ="_blank ">
26
+ < img class ="linkedin socialsimage " src ="images/Socials/Linkedin/Linkedin x 10.svg " alt ="Linkedin ">
27
+ </ a >
28
+ </ div >
29
+ </ div >
30
+ </ div >
31
+
32
+ < div class ="dropdown ">
33
+ < div class ="navBarGoInicio ">
34
+ < a class ="dropdowntitle " href ="index.html "> Inicio</ a >
35
+ </ div >
36
+ < div class ="navBar ">
37
+ < a class ="dropdowntitle " href ="Que estudio.html "> Que he estudiado</ a >
38
+ < b > Acceso Grado Superior</ b >
39
+ < b > DAM</ b >
40
+ < b > ASIX</ b >
41
+ </ div >
42
+ < div class ="navBar ">
43
+ < a class ="dropdowntitle " href ="projectos.html "> Projectos (Git)</ a >
44
+ < b > En progreso</ b >
45
+ </ div >
46
+ </ div >
47
+
48
+ </ div >
49
+ < div class ="content ">
50
+ < div class ="leftsidemenu ">
51
+ < div class ="bloq1 "> < a href ="#valor0 "> Acceso Grado Superior</ a > </ div >
52
+ < div class ="bloq1 "> < a href ="#valor1 "> Grado Superior</ a > </ div >
53
+ </ div >
54
+
55
+ < div class ="media2 ">
56
+
57
+ < div class ="sticky1 " id ="valor0 "> Valor Sticky 0</ div >
58
+ < div class ="tex1 ">
59
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend sed ligula vel pulvinar.
60
+ Mauris pharetra elit diam. Phasellus sed neque sem. Praesent fringilla aliquet ipsum, vitae varius lacus
61
+ pulvinar sit amet. In quis consectetur turpis. Praesent auctor commodo dolor vitae eleifend. Praesent in
62
+ velit nisl. Donec vel elit pulvinar, auctor felis sit amet, dignissim risus. Fusce scelerisque eleifend
63
+ nulla, quis dictum justo ornare condimentum. Sed sed viverra augue, at feugiat nisl. Donec et leo a
64
+ sapien viverra dignissim. Nunc et orci at lectus imperdiet dictum a vitae augue. Vivamus at libero nunc.
65
+ Nunc elementum est nec ultrices fringilla. Fusce ultrices fermentum nibh. Phasellus quis porttitor
66
+ ligula. Aliquam erat volutpat. Aenean condimentum sollicitudin sem, ac congue ipsum volutpat a.
67
+ Pellentesque ac commodo lectus. Sed a risus scelerisque, consectetur elit quis, pulvinar nunc. Ut porta,
68
+ erat ut auctor placerat, lectus dolor lacinia ligula, vel blandit ex diam eu magna. Phasellus sed
69
+ commodo nibh. Aliquam malesuada urna mi, vitae facilisis magna fringilla non. Interdum et malesuada
70
+ fames ac ante ipsum primis in faucibus. Sed sit amet arcu eros. In dictum turpis vitae odio volutpat, a
71
+ consequat sapien tempus. Donec laoreet euismod diam, non cursus nisi condimentum ac. Praesent auctor eu
72
+ leo vitae volutpat.
73
+ </ div >
74
+ < div class ="sticky1 " id ="valor1 "> Valor Sticky 1</ div >
75
+ < div class ="tex1 ">
76
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend sed ligula vel pulvinar.
77
+ Mauris pharetra elit diam. Phasellus sed neque sem. Praesent fringilla aliquet ipsum, vitae varius lacus
78
+ pulvinar sit amet. In quis consectetur turpis. Praesent auctor commodo dolor vitae eleifend. Praesent in
79
+ velit nisl. Donec vel elit pulvinar, auctor felis sit amet, dignissim risus. Fusce scelerisque eleifend
80
+ nulla, quis dictum justo ornare condimentum. Sed sed viverra augue, at feugiat nisl. Donec et leo a
81
+ sapien viverra dignissim. Nunc et orci at lectus imperdiet dictum a vitae augue. Vivamus at libero nunc.
82
+ Nunc elementum est nec ultrices fringilla. Fusce ultrices fermentum nibh. Phasellus quis porttitor
83
+ ligula. Aliquam erat volutpat. Aenean condimentum sollicitudin sem, ac congue ipsum volutpat a.
84
+ Pellentesque ac commodo lectus. Sed a risus scelerisque, consectetur elit quis, pulvinar nunc. Ut porta,
85
+ erat ut auctor placerat, lectus dolor lacinia ligula, vel blandit ex diam eu magna. Phasellus sed
86
+ commodo nibh. Aliquam malesuada urna mi, vitae facilisis magna fringilla non. Interdum et malesuada
87
+ fames ac ante ipsum primis in faucibus. Sed sit amet arcu eros. In dictum turpis vitae odio volutpat, a
88
+ consequat sapien tempus. Donec laoreet euismod diam, non cursus nisi condimentum ac. Praesent auctor eu
89
+ leo vitae volutpat.
90
+ </ div >
91
+ < div class ="sticky1 " id ="valor2 "> Valor Sticky 2</ div >
92
+ < div class ="tex1 ">
93
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend sed ligula vel pulvinar.
94
+ Mauris pharetra elit diam. Phasellus sed neque sem. Praesent fringilla aliquet ipsum, vitae varius lacus
95
+ pulvinar sit amet. In quis consectetur turpis. Praesent auctor commodo dolor vitae eleifend. Praesent in
96
+ velit nisl. Donec vel elit pulvinar, auctor felis sit amet, dignissim risus. Fusce scelerisque eleifend
97
+ nulla, quis dictum justo ornare condimentum. Sed sed viverra augue, at feugiat nisl. Donec et leo a
98
+ sapien viverra dignissim. Nunc et orci at lectus imperdiet dictum a vitae augue. Vivamus at libero nunc.
99
+ Nunc elementum est nec ultrices fringilla. Fusce ultrices fermentum nibh. Phasellus quis porttitor
100
+ ligula. Aliquam erat volutpat. Aenean condimentum sollicitudin sem, ac congue ipsum volutpat a.
101
+ Pellentesque ac commodo lectus. Sed a risus scelerisque, consectetur elit quis, pulvinar nunc. Ut porta,
102
+ erat ut auctor placerat, lectus dolor lacinia ligula, vel blandit ex diam eu magna. Phasellus sed
103
+ commodo nibh. Aliquam malesuada urna mi, vitae facilisis magna fringilla non. Interdum et malesuada
104
+ fames ac ante ipsum primis in faucibus. Sed sit amet arcu eros. In dictum turpis vitae odio volutpat, a
105
+ consequat sapien tempus. Donec laoreet euismod diam, non cursus nisi condimentum ac. Praesent auctor eu
106
+ leo vitae volutpat.
107
+ </ div >
108
+ < div class ="sticky1 " id ="valor3 "> Valor Sticky 3</ div >
109
+ < div class ="tex1 ">
110
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend sed ligula vel pulvinar.
111
+ Mauris pharetra elit diam. Phasellus sed neque sem. Praesent fringilla aliquet ipsum, vitae varius lacus
112
+ pulvinar sit amet. In quis consectetur turpis. Praesent auctor commodo dolor vitae eleifend. Praesent in
113
+ velit nisl. Donec vel elit pulvinar, auctor felis sit amet, dignissim risus. Fusce scelerisque eleifend
114
+ nulla, quis dictum justo ornare condimentum. Sed sed viverra augue, at feugiat nisl. Donec et leo a
115
+ sapien viverra dignissim. Nunc et orci at lectus imperdiet dictum a vitae augue. Vivamus at libero nunc.
116
+ Nunc elementum est nec ultrices fringilla. Fusce ultrices fermentum nibh. Phasellus quis porttitor
117
+ ligula. Aliquam erat volutpat. Aenean condimentum sollicitudin sem, ac congue ipsum volutpat a.
118
+ Pellentesque ac commodo lectus. Sed a risus scelerisque, consectetur elit quis, pulvinar nunc. Ut porta,
119
+ erat ut auctor placerat, lectus dolor lacinia ligula, vel blandit ex diam eu magna. Phasellus sed
120
+ commodo nibh. Aliquam malesuada urna mi, vitae facilisis magna fringilla non. Interdum et malesuada
121
+ fames ac ante ipsum primis in faucibus. Sed sit amet arcu eros. In dictum turpis vitae odio volutpat, a
122
+ consequat sapien tempus. Donec laoreet euismod diam, non cursus nisi condimentum ac. Praesent auctor eu
123
+ leo vitae volutpat.
124
+ </ div >
125
+ < div class ="sticky1 " id ="valor4 "> Valor Sticky 4</ div >
126
+ < div class ="tex1 ">
127
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend sed ligula vel pulvinar.
128
+ Mauris pharetra elit diam. Phasellus sed neque sem. Praesent fringilla aliquet ipsum, vitae varius lacus
129
+ pulvinar sit amet. In quis consectetur turpis. Praesent auctor commodo dolor vitae eleifend. Praesent in
130
+ velit nisl. Donec vel elit pulvinar, auctor felis sit amet, dignissim risus. Fusce scelerisque eleifend
131
+ nulla, quis dictum justo ornare condimentum. Sed sed viverra augue, at feugiat nisl. Donec et leo a
132
+ sapien viverra dignissim. Nunc et orci at lectus imperdiet dictum a vitae augue. Vivamus at libero nunc.
133
+ Nunc elementum est nec ultrices fringilla. Fusce ultrices fermentum nibh. Phasellus quis porttitor
134
+ ligula. Aliquam erat volutpat. Aenean condimentum sollicitudin sem, ac congue ipsum volutpat a.
135
+ Pellentesque ac commodo lectus. Sed a risus scelerisque, consectetur elit quis, pulvinar nunc. Ut porta,
136
+ erat ut auctor placerat, lectus dolor lacinia ligula, vel blandit ex diam eu magna. Phasellus sed
137
+ commodo nibh. Aliquam malesuada urna mi, vitae facilisis magna fringilla non. Interdum et malesuada
138
+ fames ac ante ipsum primis in faucibus. Sed sit amet arcu eros. In dictum turpis vitae odio volutpat, a
139
+ consequat sapien tempus. Donec laoreet euismod diam, non cursus nisi condimentum ac. Praesent auctor eu
140
+ leo vitae volutpat.
141
+ </ div >
142
+ </ div >
143
+ < div class ="rightsidemenu ">
144
+ < form class ="c1 " action ="/action_page.php " method ="POST ">
145
+ < div class ="tformulario ">
146
+ < h3 class ="formulario "> Formulario</ h3 >
147
+ </ div >
148
+ < div class ="labelform "> < label class ="a1 " for ="fname "> First name:</ label >
149
+ < input type ="text " id ="fname " name ="fname " value ="">
150
+ </ div >
151
+ < div class ="labelform ">
152
+ < p > < label class ="a2 " for ="lname "> Last name:</ label >
153
+ < input type ="text " id ="lname " name ="lname " value ="">
154
+ </ div >
155
+ < div class ="labelform "> < label class ="a1 " for ="fname "> First name:</ label >
156
+ < input type ="text " id ="fname " name ="fname " value ="">
157
+ </ div >
158
+ < div class ="labelform ">
159
+ < p > < label class ="a3 " for ="lname "> Last name:</ label >
160
+ < input type ="text " id ="lname " name ="lname " value ="">
161
+ </ div >
162
+
163
+ < div class ="labelform ">
164
+ < p > < label class ="a3 " for ="lname "> E-mail:</ label >
165
+ < input type ="text " id ="lname " name ="lname " value ="">
166
+ </ div >
167
+ </ form >
168
+ < div class ="T "> < label class ="a3 "> Message:</ label >
169
+
170
+ < textarea id ="area1 " name ="w3review " rows ="4 " cols ="50 "> Escribe tu mensage</ textarea >
171
+ </ div >
172
+
173
+ < form >
174
+ < div class ="mar "> Genero:
175
+ < input type ="radio " id ="html " name ="fav_language " value ="HTML ">
176
+ < div class ="male "> < label for ="html "> Male</ label > </ div >
177
+
178
+ < input type ="radio " id ="css " name ="fav_language " value ="CSS ">
179
+ < div class ="female "> < label for ="css "> Female</ label > </ div >
180
+
181
+ < input type ="radio " id ="javascript " name ="fav_language " value ="JavaScript ">
182
+ < div class ="other "> < label for ="javascript "> Other</ label > </ div >
183
+ </ div >
184
+ < input class ="buttonsend " type ="submit " value ="Enviar ">
185
+ </ form >
186
+ </ div >
187
+ </ div >
188
+ < div class ="bajo ">
189
+ < div class ="tabla ">
190
+ < div class ="enunciado ">
191
+ < ul >
192
+ < h1 > Texto</ h1 >
193
+ </ ul >
194
+ </ div >
195
+ < div class ="texto ">
196
+ < div class ="texto ">
197
+ < li > Concepto 1</ li >
198
+ </ div >
199
+ < div class ="texto ">
200
+ < li > Concepto 2</ li >
201
+ </ div >
202
+ < div class ="texto ">
203
+ < li > Gran cantidad de texto para decorar y comprobar como queda en caso de que haya algo.</ li >
204
+ </ div >
205
+ </ div >
206
+ </ ul >
207
+ </ div >
208
+ < div class ="tabla ">
209
+ < div class ="enunciado ">
210
+ < ul >
211
+ < h1 > Texto</ h1 >
212
+ </ div >
213
+ < div class ="texto ">
214
+ < div class ="texto ">
215
+ < li > Concepto 1</ li >
216
+ </ div >
217
+ < div class ="texto ">
218
+ < li > Concepto 2</ li >
219
+ </ div >
220
+ < div class ="texto ">
221
+ < li > Gran cantidad de texto para decorar y comprobar como queda en caso de que haya algo.</ li >
222
+ </ div >
223
+ </ div >
224
+ </ ul >
225
+ </ div >
226
+ < div class ="tabla ">
227
+ < div class ="enunciado ">
228
+ < ul >
229
+ < h1 > Texto</ h1 >
230
+ </ div >
231
+ < div class ="texto ">
232
+ < div class ="texto ">
233
+ < li > Concepto 1</ li >
234
+ </ div >
235
+ < div class ="texto ">
236
+ < li > Concepto 2</ li >
237
+ </ div >
238
+ < div class ="texto ">
239
+ < li > Gran cantidad de texto para decorar y comprobar como queda en caso de que haya algo.</ li >
240
+ </ div >
241
+ </ div >
242
+ </ ul >
243
+ </ div >
244
+ < div class ="tabla ">
245
+ < div class ="enunciado ">
246
+ < ul >
247
+ < h1 > Texto</ h1 >
248
+ </ div >
249
+ < div class ="texto ">
250
+ < div class ="texto ">
251
+ < li > Concepto 1</ li >
252
+ </ div >
253
+ < div class ="texto ">
254
+ < li > Concepto 2</ li >
255
+ </ div >
256
+ < div class ="texto ">
257
+ < li > Gran cantidad de texto para decorar y comprobar como queda en caso de que haya algo.</ li >
258
+ </ div >
259
+ </ div >
260
+ </ ul >
261
+ </ div >
262
+ < div class ="tabla ">
263
+ < div class ="enunciado ">
264
+ < ul >
265
+ < h1 > Texto</ h1 >
266
+ </ div >
267
+ < div class ="texto ">
268
+ < div class ="texto ">
269
+ < li > Concepto 1</ li >
270
+ </ div >
271
+ < div class ="texto ">
272
+ < li > Concepto 2</ li >
273
+ </ div >
274
+ < div class ="texto ">
275
+ < li > Gran cantidad de texto para decorar y comprobar como queda en caso de que haya algo.</ li >
276
+ </ div >
277
+ </ div >
278
+ </ ul >
279
+ </ div >
280
+
281
+ </ div >
282
+ </ body >
283
+
284
+ </ html >
0 commit comments