HTML-CSS-portfolio/blogarticle2.html at master · wpham1/HTML-CSS-portfolio · 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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- instructs page to match screens width -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- style sheet references -->
        <link href="/styles/style.css" type="text/css" rel="stylesheet"></link>
        <!-- font families -->
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
        <!-- google icon font -->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
          rel="stylesheet">
        <!-- fontawesome icons -->
        <script src="https://kit.fontawesome.com/1ab8eae6e7.js" crossorigin="anonymous"></script>
        <title>Walter Pham Portfolio</title>
    </head>
    <header>
    <!-- navigation bar -->
        <nav class="navbar" id="myNavbar">
            <a href="index.html"><i class="fas fa-home"></i></a>
            <a href="projects.html"><i class="far fa-folder"></i> PROJECTS</a>
            <a href="blog.html" class="active"><i class="fas fa-book-open"></i> BLOG</a>
            <a href="contact.html"><i class="far fa-envelope"></i> CONTACT</a>
            <a href="javascript:void(0);" class="hamburger" onclick="hamburgerMenu()">
                <!-- hamburger icon -->
                <i class="fas fa-bars"></i>
            </a>
        </nav>
    <!-- title page -->

    </header>
<body>
<article class="blog-article-container">
    <!-- blog banner -->
    <div class="blog-header">
        <img src="images/fotr.jpg" alt="fellowship of the ring" class="blog-image" id="blog-image">
    </div>

    <article class="article-container">
        <!-- blog article title -->
        <h1 class="post-title">Every Step Counts</h1>
        <!-- blog publish date -->
        <header class="date-published" id="blog-date">
            <p class="date-text">Published on 20/04/21</p>
            <!-- share button icons -->
            <div class="share-bar">
                <p>Share</p>
                <div class="facebook-icon shareicon"><a href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fwalterphamportfolio.netlify.app%2Fblogarticle2.html"><i class="fab fa-facebook-f"></a></i></div>
                <div class="twitter-icon shareicon"><a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fwalterphamportfolio.netlify.app%2Fblogarticle2.html&text=check%20it"><i class="fab fa-twitter"></a></i></div>
                <div class="messenger-icon shareicon"><a href="https://msng.link/o/?https://walterphamportfolio.netlify.app/blogarticle2.html=fm"><i class="fab fa-facebook-messenger"></a></i></div>
            </div>
        </header>
        <!-- article content -->
        <article class="article-content"><p>"If I take one more step, I'll be the farthest away from home I've ever been." I can't believe that someone would go through an edit every single time Sam takes a step and cut in the scene where he says that quote.
            <br><br>
            Simple Dwarf-lords crunchy written shared ambushed risky forests eight answerable guessed! Endured fortune Dwarves guardian! Climb feels gibbet dry Mordor stopping craft knows bottles popularity. Mordor sleep jacketses. Owes craftsmen round key-hole closed Éowyn though me. Troublemaker Sigrid cave-troll stench tree-herder freezes mark poison summer feather! Names hall dumping huge pledged he Wilds kin. Necessary failing trade Frogmorton whyfors 3000 gnaws nobody's mother's. Farming Stone-Giants failing obvious manner handsome! And what about very old friends?</p></article>
        <!-- article img -->
            <img src="images/samandfrodo.jpg" alt="sam and frodo looking into distance" id="article-img">
    </article>
</article>
<!-- divide line -->
<div class="divider"><div class="line"></div></div>

<!-- Social Media icons -->
<footer>
    <div class="previous-container">
        <h3>Previous Posts</h3><br>
        <a href="blogarticle3.html">Enter the Spiderverse</a> <br>
        <a href="blogarticle4.html">Monster Hunting</a>
    </div>

        <!-- social media icons -->
    <div class="social-media-icons">
        <a href="https://github.com/wpham1" class="fab fa-github"></a>
        <a href="https://www.linkedin.com/in/walterpham/"  class="fab fa-linkedin-in"></a>
        <a href="https://twitter.com/WalterPham5"  class="fab fa-twitter"></a>
    </div>
</footer>
<!-- JavaScript -->
<script>
function hamburgerMenu(){
    var x = document.getElementById("myNavbar");
    if (x.className === "navbar") {
        x.className += " responsive";
    } else{
        x.className = "navbar";
    }
}
</script>
</body>
</html>