Blog-Website/index.html at upstream1 · YoannaPo/Blog-Website · 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="JP Klucz">
    <title>Personal Blog Website</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;1,300&display=swap"
        rel="stylesheet">

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link
        href="https://fonts.googleapis.com/css2?family=Give+You+Glory&family=Montserrat:ital,wght@0,300;0,400;1,300&display=swap"
        rel="stylesheet">

    <!-- stylesheet linked -->
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="container">

        <!--Navigation bar -->
        <nav class="navbar" role="navigation">

            <div class="nav-container">

                <ul class="navbar-menu">
                    <li><a class="nav-link"><a href="index.html"><img class="logo" alt="pencil and brush" src="image/brush-pencil_black.svg"></a>
                    </li>
                    <li><a class="nav-link"  href="index.html">Home</a></li>
                    <li><a class="nav-link"  href="blog-page.html">Blog</a></li>
                    <li><a class="nav-link"  href="index.html#about">About</a></li>
                </ul>

            </div>
        </nav>


        <!-- Header -->
        <header class="hero-section" role="banner">
            <div class="hero-section-content">
                <h3>Hi, I'm JP Klucz</h3>
                <h1>Colours that stunt the imagination, a hidden message from under the paint</h1>
                <p>That message stays with you for longer, that's what I love about Street Art.</p>
                <h2>jpk</h2>
            </div>

            <div class="divider-wave-bottom">
                <svg viewBox="0 0 1200 161.5">
                    <path class="st0" d="M0,84.6c388.8,213.9,783.8-270.7,1200,0v76.9H0V84.6z" /></svg>
            </div>
        </header>


        <!-- Section with blog topics -->
        <div class="section-container" aria-hidden="false">
            <ul class="section-menu">
                <li>
                    <img src="image/type-post-icon/design_icon.svg"
                        alt="ruller and pencil on design icon"><a class="sec-link" href="blog-page.html#design"><p>Design</p></a>
                </li>
                <li>
                    <img src="image/type-post-icon/streetart_icon.svg"
                        alt="painting utensils"><a class="sec-link" href="blog-page.html#streetart"><p>Streetart</p></a>
                </li>
                <li>
                    <img src="image/type-post-icon/art_icon.svg"
                        alt="gears arranged in the pattern"><a class="sec-link" href="blog-page.html#art"><p>Art</p></a>
                </li>
                <li>
                    <img src="image/type-post-icon/learning_icon.svg"
                        alt="tools"><a class="sec-link" href="blog-page.html#learning"><p>Learning</p></a>
                </li>
            </ul>
        </div>


        <!--Describing info and blog card -->
        <main class="main" role="main">
            <div class="main-container">
                <h2>
                    How Street Art can transform communities
                </h2>
                <p>Dull, forgotten parts of the city gain a voice and their own identity through works of street art.
                    They are often the voice of those who are voiceless. In other communities, Street Art becomes a
                    connecting element for locals when a large mural requires the involvement and work of many of them.
                    In either case, Street Art is used to expose community characteristics that would otherwise remain
                    hidden beneath the surface.
                </p>
                <p>Murals that instantaneously brighten the whole city</p>
                <p>Vivid representations of local identity</p>
                <p>Visible to the public and impossible to ignore</p>
                <button class="card-button"> <a href="blog-page.html">Go to blog page</a></button>
                <blockquote>The holy grail is to spend less time making the picture than it takes people to look at it.
                    <span><b>Banksy</b></span>
                </blockquote>
            </div>
        </main>


        <article class="card-main">
            <div class="card-container">
                <figure>
                    <img class="article-img" src="image/20171031_125743.jpg" alt="girl with a flowers">
                    <figcaption>
                        <b><em>Location: London</em></b>
                    </figcaption>
                    <p><b><u>Streetart</u></b></p>
                </figure>
                <h3 class="author">About the artist:</h3>
                <p class="author-info">Discover Brick Lane in the London’s East End. Luckily, street art is celebrated
                    here rather than immediately destroyed. This results in the artists from all over the world coming
                    to Brick Lane to paint. <br>Pudding topping sweet roll tart tiramisu.</br>
                    Tiramisu apple pie. Sesame snaps chocolate candy dragée oat cake. Caramels carrot cake cookie
                    pudding tart candy canes. Brownie halvah sesame snaps chocolate marshmallow sweet roll chocolate
                    brownie.
                </p>
                <button class="card-button"> <a href="blog-page.html#streetart">See more</a></button>
            </div>
        </article>

        <section class="about-container" id="about">
            <div class="about-content>">
                <h3 class="author"> About the author:</h3>
                <figure>
                    <img class="about-img" src="image/author.png" alt="JPK ML portrait">
                    <figcaption><b>JP Klucz</b></figcaption>
                </figure>
                <p class="author-info">Caramels carrot cake cookie pudding tart candy canes. Brownie halvah sesame snaps
                    chocolate marshmallow sweet roll choco brownie. Soufflé macaroon marzipan gummies marzipan
                    marshmallow jelly-o jelly. <br>Pudding topping sweet roll tart tiramisu.</br>
                </p>
            </div>
        </section>

        <!--Footer-->
        <footer class="footer-container" role="contentinfo">
            <ul class="footer-menu">
                <li><a class="nav-link" id="twitter" href="https://twitter.com/Joanna_Po_">Twitter</a></li>
                <li><a class="nav-link" id="linkedin" href="https://www.linkedin.com/">Linkedin</a></li>
                <li><a class="nav-link" id="facebook" href="https://www.facebook.com/">Facebook</a></li>
            </ul>
            <div class="curve-container">
                <svg id="curve" data-name=Layer 1 viewBox="0 0 1200 165.5">

                    <path class="cls-1" d="M0,280.8S283.66,59,608.94,163.56s437.93,170.57,808,10.34V309.54H0V280.8Z"
                        transform="translate(0-135.53)" />
                </svg>
            </div>
        </footer>


    </div>


</body>

</html>