-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
59 lines (49 loc) · 2.31 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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- FontAwesome CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,600&display=swap" rel="stylesheet">
<!-- Styles CSS -->
<link href="styles.css" rel="stylesheet">
<title>Instagram Post</title>
</head>
<body>
<div class="container">
<article class="post mt-20 mb-20">
<div class="post-header">
<div class="user-info">
<figure class="avatar">
<img src="https://media.creativemornings.com/uploads/user/avatar/246995/151103_Self_Portrait_50x50_72.jpg" />
</figure>
<div class="name">
<span>HTML5</span>
<span>Dylan A.</span>
</div>
</div>
<div class="share"><i class="fas fa-ellipsis-v fa-2x"></i></div>
</div>
<div class="post-content">
<img src="https://i.picsum.photos/id/744/540/406.jpg?hmac=A0sD-uiV-hKA4R3Z_JggYxwVeanZPugaevN4CjoijZo" />
</div>
<div class="post-actions">
<div class="reactions">
<i class="far fa-heart fa-lg"></i>
<i class="far fa-comment fa-lg"></i>
<i class="far fa-paper-plane fa-lg"></i>
</div>
<div class="bookmark">
<i class="far fa-bookmark fa-lg"></i>
</div>
</div>
<div class="post-description">
<p>Liked by <strong>4GeeksAcademy, HTML5, Web</strong> and <strong>100,000 others</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas augue ac vestibulum gravida. Nam dictum dui id enim condimentum, eu aliquam metus dapibus. In ornare vel justo vitae euismod. Pellentesque interdum faucibus orci eget ornare. Fusce molestie placerat eros ac tempor.</p>
</div>
</article>
</div>
</body>
</html>