4GeeksFirstProject-InstagramPost/index.html at main · MKBSP/4GeeksFirstProject-InstagramPost · GitHub

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
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="post">

            <div class="postHeader">


                <div class="user">
                    <img class="profileimage" src="img/UserProfilePictures/html-5.png"></img>
                    <p class="userName"><strong>HTML 5</strong><br>Rigoberto</p>
                </div>

                <div class="morebutton">
                    <img class="icons" src="img/Icons/morebuttons.png"></img>
                </div>

            </div>

            <div class="postImage">
                <img class="postImage" src="img/PostImages/WhatsApp Image 2023-10-19 at 12.42.40.jpeg">
            </div>
            <div class="postBody">
                <div class="postBodyHeader">
                    <div class="iconsLeft">
                        <img class="icons" src="img/Icons/heart.png">
                        <img class="icons" src="img/Icons/comment.png">
                        <img class="icons" src="img/Icons/send.png">
                    </div>
                    <img class="icons" src="img/Icons/bookmark-white.png">
                </div>
                <div>
                    <p>
                        liked by <strong>UserA</strong>,<strong>UserB</strong>, and <strong>25 others</strong>
                    </p>
                    <p class="postDescription">
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                        Donec odio. Quisque volutpat mattis eros. Nullam malesuada
                        erat ut turpis. Suspendisse urna nibh viverra non semper
                        suscipit posuere a pede.
                        Donec nec justo eget felis facilisis fermentum.
                        Aliquam porttitor mauris sit amet orci.
                        Aenean dignissim pellentesque felis.
                    </p>
                </div>
            </div>
        </div>

    </body>

</html>