-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
133 lines (118 loc) · 4.32 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!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="./estilos/style.css">
<title>Instagram</title>
</head>
<body>
<!-- Encabezado -->
<header>
<!-- Logotipo de plataforma -->
<a href="index.html"><img src="./imagenes/logo.png" class="logo"></a>
<!-- Acciones -->
<div class="barra-navegacion">
<!-- Botón Portada -->
<button class="boton-navegacion">
<img src="./imagenes/icon-home.svg">
</button>
<!-- Botón Mensajes -->
<button class="boton-navegacion">
<img src="./imagenes/icon-direct.svg">
</button>
<!-- Botón Explorar -->
<button class="boton-navegacion">
<img src="./imagenes/icon-find-people.svg">
</button>
<!-- Botón "Me gusta" -->
<button class="boton-navegacion">
<img src="./imagenes/icon-like.svg">
</button>
<!-- Botón de perfil -->
<button class="boton-navegacion">
<img src="./imagenes/doctadevs.jpg" class="redondo">
</button>
</div>
</header>
<div class="grilla">
<div class="caja-imagen">
<img src="./imagenes/doctadevs.jpg" class="redondo">
</div>
<div class="caja-perfil-acciones">
<h1>doctadevs_</h1>
<button class="boton-navegacion">
<img src="./imagenes/icon-more.svg">
</button>
<div class="cta-container">
<!-- Botón "Message" (Enviar mensaje) -->
<button class="call-to-action"> Mensaje</button>
<!-- Botón "Follow/Unfollow" (Seguir/Dejar de seguir) -->
<button class="call-to-action">No seguir</button>
<!-- Botón "More actions" (Más acciones) -->
<button class="call-to-action">Más</button>
</div>
</div>
<div class="caja-perfil-datos">
<!-- Nombre de perfil -->
<h2>doctadevs</h2>
<!-- Descripción del perfil -->
<p>Academia de programación 💻</p>
<!-- Enlace -->
<a href="https://wa.me/549351816285">wa.me/549351816285</a>
<!-- Indicador de seguidores -->
<p class="followers">Seguidos por PerfilUno, PerfilDos, PerfilTres y 42 más</p>
</div>
<div class="caja-perfil-estadisticas">
<div class="estadisticas-item">
<!-- Valor de la estadística -->
<span>65</span>
<!-- Nombre de la estadística -->
<p>publicaciones</p>
</div>
<div class="estadisticas-item">
<!-- Valor de la estadística -->
<span>1.139</span>
<!-- Nombre de la estadística -->
<p>seguidores</p>
</div>
<div class="estadisticas-item">
<!-- Valor de la estadística -->
<span>53</span>
<!-- Nombre de la estadística -->
<p>siguiendo</p>
</div>
</div>
</div>
<!-- Navegación interna -->
<section class="nav-int-container">
<!-- Botón Grilla -->
<button class="boton-navegacion">
<img src="imagenes/icon-posts.svg">
</button>
<!-- Botón Etiquetas -->
<button class="boton-navegacion">
<img src="imagenes/icon-tagged.svg">
</button>
</section>
<!-- Contenido-->
<main class="contenido-container">
<!-- Todas las publicaciones -->
<a href="foto.html">
<div class="informacion-foto">
<label>♥ 17</label>
<label>💬 3</label>
</div>
<img src="imagenes/image-01.jpg">
</a>
<img src="imagenes/image-02.jpg">
<img src="imagenes/image-03.jpg">
<img src="imagenes/image-04.jpg">
<img src="imagenes/image-05.jpg">
<img src="imagenes/image-06.jpg">
<img src="imagenes/image-07.jpg">
<img src="imagenes/image-08.jpg">
<img src="imagenes/image-09.jpg">
</main>
</body>
</html>