wangseann.github.io/Blog.html at master · wangseann/wangseann.github.io · 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Seann Wang</title>

    <!-- Bootstrap css file-->
    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <!-- font awesome icons -->
    <link rel="stylesheet" href="./css/all.min.css">


    <!-- custom css file -->
    <link rel="stylesheet" href="./css/style.css">

    <!-- Responsive css file -->
    <link rel="stylesheet" href="./css/responsive.css">

    <!-- Add Social Media Icon Library-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <style>


    main {
        margin: 30px;
        display: flex; /* Sets the main content area to a flex container */
        justify-content: space-between; /* Distributes space between the articles */
        flex-wrap: wrap; /* Allows the articles to wrap to the next line if there's not enough space */
    }

    article {
        margin-bottom: 30px;
        padding: 20px;
        border: 1px solid #e1e1e1; /* Adds a border around the article */
        border-radius: 10px; /* Rounds the corners of the article */
        background-color: #ffffff; /* Sets a background color for the article */
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow to the article */
    }

    article + article {
        margin-top: 30px; /* Adds space between articles */
    }
    </style>


</head>

<body>
      <!-- ======================= Start Header Area ======================= -->
    <header class="header_area">
        <div class="main-menu">
            <nav class="navbar navbar-expand-lg navbar-light">
                <a class="navbar-brand" href="#"><img src="./img/Bitamoji.png" alt=""></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <div class="mr-auto"></div>
                  <ul class="navbar-nav">
                    <li class="nav-item active">
                      <a class="nav-link" href="Index.html">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="About.html">About</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="Portfolio.html">Portfolio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="Blog.html">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="Contact.html">Contact</a>
                    </li>
                  </ul>
                </div>
              </nav>
        </div>

    </header>

    <!-- ======================= End Header Area ======================= -->

    <main>
        <article>
            <h1>Blog Post One</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum,
                nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.</p>
            <button type="button" class="btn button primary-button mr-4 text-uppercase"> Read More</button>
        </article>

        <article>
            <h1>Blog Post Two</h1>
            <p>Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent
                et diam eget libero egestas mattis sit amet vitae augue.</p>
            <button type="button" class="btn button primary-button mr-4 text-uppercase"> Read More</button>
        </article>

        <article>
            <h1>Blog Post Three</h1>
            <p>Nam ut dui enim. Nullam sed dui ac nisl ultricies condimentum. Mauris in tincidunt libero. Sed luctus
                justo vitae nibh bibendum, id scelerisque felis pharetra.</p>
            <button type="button" class="btn button primary-button mr-4 text-uppercase"> Read More</button>
        </article>
    </main>

    <footer>
        <p>© 2023 My Blog. All rights reserved.</p>
    </footer>
</body>

</html>