Skip to content

Commit 897bf01

Browse files
committed
Scheme and style finished
1 parent c4a910a commit 897bf01

File tree

5 files changed

+920
-497
lines changed

5 files changed

+920
-497
lines changed

donde estudio.html

+284
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,284 @@
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

Comments
 (0)