HTML-CSS/blog.html at main · liz-garcia/HTML-CSS · 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>My Blog</title>
    <!-- spell-checker: disable -->
    <meta name="description" content="Awesome blog by Traversy media.">
    <meta name="keywords" content="web design blog, web dev blog, traversy media">
    <!-- spell-checker: enable -->
    <style>
        #main-header {
            text-align: center;
            background-color: black;
            color: white;
            padding: 10px;
        }

        #main-footer {
            text-align: center;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <header id="main-header">
        <h1>My website</h1>
    </header>

    <a href="index.html">Go to index</a>

    <section>
        <article class="post">
            <h3>Blog Post One</h3>
            <small>Posted by Brad on July 17</small>
            <p>
                <!-- spell-checker: disable -->
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid, similique beatae. Explicabo inventore
                porro iure iusto aliquam repellat nisi officiis amet illo animi odit voluptatem natus esse voluptates
                iste, sapiente ducimus. Culpa magni quibusdam perspiciatis. Quasi, cupiditate molestias! Distinctio,
                nostrum.
                <!-- spell-checker: enable -->
            </p>
            <a href="post1.html">Read More</a>
        </article>

        <article class="post">
            <h3>Blog Post Two</h3>
            <small>Posted by Brad on July 18</small>
            <p>
                <!-- spell-checker: disable -->
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid, similique beatae. Explicabo inventore
                porro iure iusto aliquam repellat nisi officiis amet illo animi odit voluptatem natus esse voluptates
                iste, sapiente ducimus. Culpa magni quibusdam perspiciatis. Quasi, cupiditate molestias! Distinctio,
                nostrum.
                <!-- spell-checker: enable -->
            </p>
            <a href="post2.html">Read More</a>
        </article>

        <article class="post">
            <h3>Blog Post Three</h3>
            <small>Posted by Brad on July 17</small>
            <p>
                <!-- spell-checker: disable -->
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid, similique beatae. Explicabo inventore
                porro iure iusto aliquam repellat nisi officiis amet illo animi odit voluptatem natus esse voluptates
                iste, sapiente ducimus. Culpa magni quibusdam perspiciatis. Quasi, cupiditate molestias! Distinctio,
                nostrum.
                <!-- spell-checker: enable -->
            </p>
            <a href="post3.html">Read More</a>
        </article>
    </section>

    <aside>
        <h3>Categories</h3>
        <nav>
            <ul>
                <li><a href="#">Category 1</a></li>
                <li><a href="#">Category 2</a></li>
                <li><a href="#">Category 3</a></li>
            </ul>
        </nav>
    </aside>

    <footer id="main-footer">
        <p>Copyright &copy; 2017, My Website</p>
    </footer>

</body>

</html>