-
Notifications
You must be signed in to change notification settings - Fork 0
/
platzi.html
273 lines (200 loc) · 14.1 KB
/
platzi.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
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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
<!DOCTYPE html>
<!--LANG atributo de lenguaje -->
<html lang="es">
<head>
<!--META etiqueta de imformacion sobre los datos y me traera imformacion sobre mi pagina -->
<!--CHARSET atributo de conjuntos de caracteres me indica que idioma o teclado quiero utilizar -->
<!--caracter UTF-8 me indica que voy a utilizar tildes y señas y idioma -->
<meta charset="utf-8" />
<!--la etiqueta TITLE va a representar el titulo de nuestra pagina -->
<title> La Frida Kahlo </title>
<!--REL atributo de icono-->
<!--TYPE atributo de tipo-->
<!--HREF atributo de refencia o lugar donde esta la imagen -->
<link rel="icon" type="imagenes.png" href="imagenes/lafrida.png">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One|Source+Sans+Pro&display=swap" rel="stylesheet">
<!--link rel="stylesheet" href="css/hojasdeestilo.css" media="screen and (max-width: 768px)"-->
<link rel="stylesheet" href="css/colores.css">
<!-- etiqueta meta esta es muy diferente de la otra puesta a el principo de mi codigo etiqueta me ayuda a cambiar el tamaño de mi contenido y que se haga visible en otros dispositivos pequeños mas grandes -->
<!--style>
@media screen and (max-width: 768px;){
body{
border: 10px solid blue;
}
}
</style ejemplo de como poner un media queries -->
<!-- esta etiqueta es de la clase de responsive desing es la etiqueta meta ella es de imformacon y es a al que le voy a gregar mi viewport para que me lo traiga y lo que llevo en mi pagina sea mas visible en cual quier tipo de pantalla en el que se lo pida -->
<meta name="viewport" content="width=device-width, initial-scale=1" >
</head>
<body>
<!-- HEADER representa el en cabezado de un documento el elemento de un documento para mi pagina actual -->
<header class="header">
<div class="container">
<figure class="logo">
<img src="imagenes/lafrida.png"width="85" height="85" alt="logo de http://camilalopez.com" />
</figure>
<!--NAV etiqueta de navegacion y conntiene enlaces a otros documentos o partes dentro de el documento actual -->
<nav class="menu">
<!--(OL para listas ordenadas) (UL para listas desordenadas -->
<ol>
<!--LI representa un elemento de la lista -->
<li>
<!--si mi etiqueta A tiene un atributo como href representa un vinculo pero si mi etiqueta no tiene ningun atributo es solo un texto -->
<a class="link" href="#portafolio">portafolio</a>
</li>
<li>
<a class="link" href="#eventos">mas sobre frida </a>
</li>
<li>
<a class="link" href="#contacto"> creamos algo juntos </a>
</li>
</ol>
</nav>
</div>
</header>
<!--DIV caja o cuadro donde va imformacion-->
<!-- ALT sirve para cuando la imagen no carga salga un texto-->
<!--SRC atrivuto de el link de la imagen que quiero poner -->
<!--etiqueta SECTION esta representa en las secciones -->
<!--el STRONG se utiliza para poner negrita a mi texto -->
<!--BR salto en linea no necesita cierre ella misma se cierra -->
<!--H1 o H6 son titulos el 1 es el principal y los demas son de poca relevancia -->
<!--WIDTH atributo de anchura-->
<!--por aca comente todo mis section TENER ENCUENCUENTA -->
<!-- <section class="hero">
<div class="container">
<h1>
es realmente <strong>maravillosa</strong><br>el arte y lo que
logras tocar con ella <strong> <br>
vida idioma para artistas </strong>
</h1>
</div>
<img class="hero-imge" src="imagenes/fotodefrida.jpg" width="300" height="300" alt="imagen principal de el sitio ">
</sectio -->
<section id="mi historia" class="mi historia">
<div class="container">
<h3>Mi Historia</h3>
<article class="project">
<div class="project-details">
<h4 class="project-title">mi historia basicamente influye mucho en mi vida y el arte</h4>
<h5> espero sea de interes mi historia</h5>
<p class="project-date"> <small> yo era una de las cuatro hijas de un padre judío y una madre de ascendencia indígena-mexicana. Originalmente no planeaba convertir me en una artista empece un programa de pre medicina en la ciudad de mexico cuando tenia 18 años sufri varias heridas en una accidente de autobus paso en cama alrededor de un año es muy duro para mi y me afecta emocional y fiscamente fui operada mas de 30 veces fue realmenteduro para mi , empece a pintar en ese entonces le cogi un gran cariño pues de esta manera me sentia productiva lo primero que hice fue un auto retarto mio realmente y naturaleza muerta suena raro asta un poco basio pero en mi concepto es magnifico darle color a la muerte </small></p>
</div>
<figure>
<img width="400px" src="imagenes/frasefrida.jpg" alt="proyecto de aprendizaje" style="width: 100%;">
</figure>
</article>
</div>
</section>
<section id="portafolio" class="portafolio">
<div class="container">
<h2>Portafolio (la frida)</h2>
<article class="project">
<div class="project-details">
<h3 class=" project-title">mi orgullo y mi desepcion </h3>
<h6 class="project-texto"> mi amado diego </h6>
<p class="project-date"> diego un hombre caracter fuerte y artista extraordinario con defectos bastantes pero con atrivutos inrresistibles </p>
<p>amor y desamor vivi , yo con diego pero en mi corazon y en lo mas recognito de mi alma sentia una aurora fugaz con tan solo verlo , mi relacion con era inestable este amor estuvo marcado desenfanado pero al tiempo lleno de felicidad habia pasion traicion cuando me case por un tiempo logre que diejo dejara sus amorios descubri que mi esposo mantenia un amorio con mi hermana pequeña esto me termino de undir en la deprecion
</p>
<p class="project-descripcion">
tuve mi primer aborto con tan solo tres meses de embarazo mis medicos dijeron que estaba en peligo la vida de ambos esta fue un gran dolor para mi vida me golpeo muy duro
</p>
</div>
<figure class="project-imageContainer">
<img width="400px" src="imagenes/diegofrida.jpg" alt="proyecto de mi aprendizaje " style="width: 100%;">
</figure>
</article>
</div>
</section>
<div class=" container">
<h2 class="event-list-title">aca les dejo unos de mis cuadros</h2>
</div>
<section id="eventos" class="event-list">
<div class="container">
<article class="event">
<figure class="event-imageComtainer">
<img src="imagenes/terciopelo.jpg" width="400" />
</figure>
<div class="event-detail">
<h3 class="event-title">Autorretrato con traje de <strong>terciopelo</strong></h3>
<p class="event-description"> Este es el primer autorretrato de Frida. Pintado en 1926, fue el regalo para su novio y compañero en la escuela, Alejandro Gómez Arias, quien había terminado con la relación amorosa. Frida le regaló este retrato con el que esperaba recuperar su afecto, lo que funcionó pues la pareja se reconcilió </p>
<a class="event-url" href="https://youtu.be/QVxzkhgSjXc" target="_blank"> escucha esta canción</a>
</div>
</article>
<article class="event">
<figure class="event-imageComtainer">
<img src="imagenes/autobus.jpeg" width="400" />
</figure>
<div class="event-detail">
<h3 class="event-title"><strong>El autobús</strong></h3>
<p class="event-description"> Pintado en 1929, el cuadro muestra la diversidad de clases sociales en México a bordo de un autobús: un ama de casa con su cesta de las compras, un obrero vestido con peto azul, una madre indígena amamantando a su bebé, un niño, un “gringo” capitalista y una joven que se parece mucho a Frida es posible que este cuadro trate de el accidente de frida en 1925en el que sufrio
</p>
<a class="event-url" href="https://youtu.be/QVxzkhgSjXc" target="_blank"> escucha esta canción</a>
</div>
</article>
<article class="event">
<figure class="event-imageComtainer">
<img src="imagenes/cuadrodefrida.jpg" width="400" />
</figure>
<div class="event-detail">
<h3 class="event-title">Aprendo desde casa con <strong>Platzi</strong></h3>
<p class="event-description"> es mi primera vez en platzi me gane una beca desde facebook y estoy aprendiendo con leonidas esteban
me ha parecido realmente sactisfactorio este proyecto de crear mi primera pagina para ser sinceros
no pense que lo fuera a lograr realmente me ha gustado demasiado </p>
<a class="event-url" href="https://youtu.be/QVxzkhgSjXc" target="_blank"> escucha esta canción</a>
</div>
</article> <article class="event">
<figure class="event-imageComtainer">
<img src="imagenes/cuadrodefrida.jpg" width="400" />
</figure>
<div class="event-detail">
<h3 class="event-title">Aprendo desde casa con <strong>Platzi</strong></h3>
<p class="event-description"> es mi primera vez en platzi me gane una beca desde facebook y estoy aprendiendo con leonidas esteban
me ha parecido realmente sactisfactorio este proyecto de crear mi primera pagina para ser sinceros
no pense que lo fuera a lograr realmente me ha gustado demasiado </p>
<a class="event-url" href="https://youtu.be/QVxzkhgSjXc" target="_blank"> escucha esta canción</a>
</div>
</article>
</div>
</section> -->
<!-- <section id="contacto" class="contact">
<div class="container">
<form action="/suscripcion/" class="form-email">
<h3>¿Creamos algo juntos?</h3>
<input type="text" placeholder="dejame tu email" value="@gmail.com" id="email">
<button>enviar</button>
</form>
<div class="social">
<a href="https://youtube.com/leonidasesteban" class="social-link youtube" ></a>
<a href="https://facebook.com/camila.lopez" class="social-link facebook"></a>
<a href="https://instagram.com/mariacamilaj" class="social-link instagram"></a>
<a href="https://github.com/camilalopez" class="social-link github"></a>
</div>
</div>
</section> -->
<!-- <footer id="creamos algo juntos "class="footer">
<div class="container">
<div>
<p>curso de desarrolo web online 2019 <img src="imagenes/diadelosmuertos.jpg" width="100" heigt="100" alt="frida"></p>
</div>
<div>
<p>
designed width <\3 by <a href=" https://thespianartist">@thespianartist</a>
</p>
</div>
</div>
</foote -->
<!--FOOTER reprenta el piede pagina o la imformacion principal ej: como el numero de telefono o contactenos-->
</body>
</html>
<!--el atributo CLASS es un atributo global es una lista de elementos separados por espacios las clases permiten que css y js seleccionar y acceder a elemtos especificos a traves de los selectores -->
<!--etiqueta FORM etiqueta que representa los formularios de algunos de los cuales representan valores y se pueden enviar a un servidor -->
<!--atributo ACTION atributo de ruta de donde voy a enviar mi imformacion dentro de unas subscripciones o en un correo electronico -->
<!--etiqueta INPUT con tres campos de entrada y dos campos de texto y un boton de envio -->
<!--atributo PLACEHOLDER recibe por valor el texto que queremos tener como guia para que me le diga a el usuario donde corresponde este input -->
<!---atributo VALUE es el valor por defecto que me va a atraer-->
<!--etiqueta BUTTON etiqueta de boton donde se puede hacer clic-->
<!--atibuto id atributo de identificador -->
<!--HEIGHT atributo de altura -->
<!--etiqueta P representa un parrafo -->
<!-- ARTICLE etiquta de articulo o imformacion -->