HTML-CSS-portfolio/blogarticle3.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">
    <div class="blog-header">
        <!-- blog banner -->
        <img src="images/spiderverse.jpeg" alt="spiderman miles morales and spidergwen" class="blog-image" id="blog-image">
    </div>

    <article class="article-container">
        <!-- blog post title -->
        <h1 class="post-title">Enter the Spiderverse</h1>
        <!-- blog publish date -->
        <header class="date-published" id="blog-date">
            <p class="date-text">Published on 19/04/21</p>
            <!-- share button icon -->
            <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%2Fblogarticle3.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%2Fblogarticle3.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/blogarticle3.html=fm"><i class="fab fa-facebook-messenger"></a></i></div>
            </div>
        </header>
        <!-- article content -->
        <article class="article-content"><p>"Spiderman: Enter the Spiderverse is one of my favourite animated films.
            <br><br>
            Tony, listen to me. Thor’s gone. Thanos is coming. It doesn’t matter who you’re talking to or not. There’s six stones out there. Thanos already has the Power Stone because he stole it last week, when he decimated Xandar. He stole the Space Stone from me when he destroyed my ship and slaughtered half my people. The Time and Mind Stones are safe on Earth. They’re with the Avengers.  Is it sadness I sense in you, daughter? In my heart, I knew you still cared. But one ever knows for sure. Reality is often disappointing. That is, it was. Now… Reality can be whatever I want. Yeah. Right where I don’t want you to be. This isn’t Coney Island. This isn’t a field trip. It’s one-way ticket. You hear me? Don’t pretend like you thought this through. You could not have possibly thought this through. Absolutely. Rage, vengeance, anger, loss, regret…They’re all tremendous motivators. They really clear the mind. So I’m good to go.</p></article>
            <!-- article img -->
            <img src="images/spiderverse2.jpg" alt="spiderverse characters" id="article-img">
    </article>
</article>
<!-- divider line -->
<div class="divider"><div class="line"></div></div>

<!-- Social Media icons -->
<footer>
    <div class="previous-container">
        <h3>Previous Posts</h3><br>
        <a href="blogarticle4.html">Monster Hunting</a> <br>
        <a href="blogarticle5.html">Recon Bolt</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>