jakeSpodekProjectOne/blog.html at master · jakespodek/jakeSpodekProjectOne · 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
<!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">
    <title>Blog</title>
    <link rel="stylesheet" href="styles/style.css">
</head>
<body class="blogBody">

    <header class="blogHeader">
        <div class="wrapper">
            <nav>
                <ul>
                    <li><a href="./index.html">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="./blog.html">Blog</a></li>
                    <li><a href="./contact.html">Contact</a></li>
                </ul>
            </nav>

            <h1 class="blogH1">Blog</h1>
        </div>
    </header>

    <main class="ice blogMain">

        <aside>
            <div class="blogSideImg">
                <img src="./assets/side-blog-image.jpg" alt="a hand tossing a lense in the air in front of a lake">
            </div>

            <div class="wrapper blogSideText">
                <h3>About Captured</h3>
                <p>Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum. <a class="findOutMore" href="./index.html#about">Find out more.</a></p>

                <h3>Recent Posts</h3>
                <ul>
                    <li>Donec facilisis tortor ut</li>
                    <li>Augue lacinia at viverra</li>
                    <li>Semper sed sapien metus</li>
                    <li>Scelerisque nec pharetra id</li>
                </ul>
            </div>
        </aside>

        <div class="blogMainContent">

            <img class="articleImg" src="./assets/blog-post-image.jpg" alt="a woman sitting on the ground taking a photo in front of a sunset">

            <article class="wrapper">
                <h2>Finding Great Locations</h2>
                <p>Monday May 4th, 2019 by Dieula</p>

                <p>Curabitur lobortis id lorem id bibendum. Ut id consectetur magna. Quisque volutpat augue enim, pulvinar loborts nibh
                lacinia at, Vestibulum nec erat ut mi solicitudin porttitor id sit amet risus. Nam tempus vel odio vitae aliquam.</p>
                <p>In imperdiet eros id lacus vestibulum vestibulum. Suspendisse fermentum sem sagitis ante venenatis egestas quis vel
                justo. Maecenas semper suscipit nunc, sed aliquam sapien convallis eu, Nulla ut turpis in diam dapibus consequat Fusce
                vehicula dolor arcu, sit amet blandit dolor mollis nec. Donec viverra eleifend lacu.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pretium pretium tempor. Ut eget imperdiet neque. In volutpat
                ante semper diam molestie, et aliquam erat laoreet. Sed sit amet arcu aliquet, molestie justo at, auctor nunc. Phasellus
                ligula ipsum, volutpat eget semper id, viverra eget nibh, Suspendisse luctus mattis cursus. Nam consectetur ante at nis!
                hendrerit gravida. Donec vehicula rhoncus mattis. Mauris dignissim semper mattis. Fusce porttitor a mi at suscipit.
                Praesent facilisis dolor sapien, vel sodales augue mollis ut, Mauris venenatis magna eu tortor posuere luctus. Aenean
                tincidunt turpis sed dui aliquam vehicula. Praesent nec elitnon dolor consectetur tincidunt sed in felis. Donec
                elementum, lacus at mattis tincidunt, eos magna faucibus sem, in condimentum est augue tristique risus.</p>
                <p>Ut id consectetur magna. Quisque volutpat augue enim, pulvinar lobortis nibh lacinia at. Vestibulum nec erat ut mi
                solicitudin porttitor id sit amet risus. Nam tempus vel odio vitae aliquam.</p>
                <p>Inimperdiet eros id lacus vestibulum vestibulum. Suspendisse fermentum sem sagitis ante venenatis egestas quis vel
                justo. Maecenas semper suscipit nunc, sed aliquam</p>
            </article>

            <section class="wrapper comments">
                <h3>Comments:</h3>

                <div class="comment">
                    <img src="./assets/comment-1.jpg" alt="Jeremy's avatar">
                    <div>
                        <p>Tuesday October 9th, 2018 by Jeremy</p>
                        <p>Fusce vehicula dolor arcu, sit amet blandit dolor mollis nec. Donec viverra eleifend lacus, vitae ullamcorper metus. Sed
                        sollicitudin ipsum quis nunc sollicitudin ultrices. Donec euismod scelerisque ligula. Maecenas eu varius risus, eu
                        aliquet arcu.</p>
                    </div>
                </div>

                <div class="comment">
                    <img src="./assets/comment-2.jpg" alt="Julia's avatar">
                    <div>
                        <p>Wednesday October 10th, 2018 by Julia</p>
                        <p>Donec viverra eleifend lacus, vitae ullamcorper metus. Sed sollicitudin ipsum quis nunc sollicitudin ultrices. Donec
                        euismod scelerisque ligula. Maecenas eu varius risus, eu aliquet arcu.</p>
                    </div>
                </div>
            </section>

            <section class="wrapper">
                <form action="#" method="#" class="commentForm" name="commentForm">

                    <label for="userName" class="sr-only">Enter your name:</label>
                    <input type="text" id="userName" name="userName" class="nameBox input" placeholder="Name">

                    <label for="userEmail" class="sr-only">Enter your email:</label>
                    <input type="email" id="userEmail" name="userEmail" class="emailBox input" placeholder="Email address">

                    <label for="userComment" class="sr-only">Enter your message:</label>
                    <textarea name="userComment" id="userComment" class="messageBox input" placeholder="Comment" cols="100" rows="10"></textarea>

                    <button>Post comment</button>

                </form>
            </section>
        </div>

    </main>

    <footer>
        <p>Copyright © 2021 Juno College</p>
    </footer>

</body>
</html>