generated from 4GeeksAcademy/html-hello
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
44 lines (41 loc) · 1.75 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Instagram Post</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<!-- FONT AWESOME -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
</head>
<body>
<div class="post">
<!-- CABECERA DEL POST -->
<div class="post-header">
<i class="fab fa-html5"></i>
<div class="user-info">
<span class="username">HTML5</span>
<span class="subtext">Rigoberto</span>
</div>
<i class="fas fa-ellipsis-h"></i>
</div>
<!-- FOTO -->
<img src="https://picsum.photos/seed/picsum/200" alt="Montaña" class="post-image">
<!-- ICONOS DE INTERACCIÓN -->
<div class="post-actions">
<i class="far fa-heart"></i>
<i class="far fa-comment"></i>
<i class="far fa-paper-plane"></i>
<i class="far fa-bookmark bookmark"></i>
</div>
<!-- LIKES Y DESCRIPCIÓN DE LA FOTO-->
<div class="post-likes">
Liked by <strong>4GeeksAcademy, html5, Web</strong> and <strong>100,000 others</strong>
</div>
<div class="post-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>