webdev_coursework1/Blog_post_course_work.html at main · Hansen256/webdev_coursework1 · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Posts</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="blog-section">
        <div class="blog-posts">
            <!-------------------------- Post One ----------------------->
            <article class="post-card">
                <div class="post-image mountains"></div>
                <div class="post-content">
                    <div class="post-meta">4 days ago</div>
                    <h2 class="post-title">Post One</h2>
                    <p class="post-description">
                        Lorem ipsum dolor sit amet consectetur. Ducimus, repudiandae temporibus omnis
                        illum maxime quod deserunt eligendi dolor.
                    </p>
                </div>
                <div class="post-footer pink">
                    <div class="footer-item">
                        <span class="footer-number">4m</span>
                        <span class="footer-label">Read</span>
                    </div>
                    <div class="footer-item">
                        <span class="footer-number">5123</span>
                        <span class="footer-label">Views</span>
                    </div>
                    <div class="footer-item">
                        <span class="footer-number">32</span>
                        <span class="footer-label">Comments</span>
                    </div>
                </div>
            </article>

            <!-------------------------------------- Post Two----------------------------------------->
            <article class="post-card">
                <div class="post-image landscape"></div>
                <div class="post-content">
                    <div class="post-meta">1 week ago</div>
                    <h2 class="post-title">Post Two</h2>
                    <p class="post-description">
                        Adipiscing elit. Ducimus, repudiandae temporibus omnis
                        provident illum maxime quod. Lorem ipsum dolor.
                    </p>
                </div>
                <div class="post-footer orange">
                    <div class="footer-item">
                        <span class="footer-number">7m</span>
                        <span class="footer-label">Read</span>
                    </div>
                    <div class="footer-item">
                        <span class="footer-number">7152</span>
                        <span class="footer-label">Views</span>
                    </div>
                    <div class="footer-item">
                        <span class="footer-number">21</span>
                        <span class="footer-label">Comments</span>
                    </div>
                </div>
            </article>

            <!---------------------------------------- Post Three------------------------------------------------->
            <article class="post-card">
                <div class="post-image nature"></div>
                <div class="post-content">
                    <div class="post-meta">3 weeks ago</div>
                    <h2 class="post-title">Post Three</h2>
                    <p class="post-description">
                        Repudiandae corrupti amet temporibus omnis provident illum maxime.
                        Ducimus, lorem ipsum dolor adipiscing elit.
                    </p>
                </div>
                <div class="post-footer green">
                    <div class="footer-item">
                        <span class="footer-number">5m</span>
                        <span class="footer-label">Read</span>
                    </div>
                    <div class="footer-item">
                        <span class="footer-number">3021</span>
                        <span class="footer-label">Views</span>
                    </div>
                    <div class="footer-item">
                        <span class="footer-number">15</span>
                        <span class="footer-label">Comments</span>
                    </div>
                </div>
            </article>
        </div>
    </div>
</body>
</html>