-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
168 lines (168 loc) · 8.38 KB
/
index.html
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
163
164
165
166
167
168
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Christina's Personal Blog Website</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<meta name="description" content="Udacity Personal Blog Website project">
<meta name="keywords" content="HTML,CSS">
<meta name="author" content="Christina Loiacono">
<!-- stylesheet linked -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- navigation bar -->
<header>
<div class="navbar">
<div id="logo-icons">
<a class="nav-logo" href="index.html"></a>
</div>
<div class="home bar" id="home">
<a class="nav-link" href="index.html">Home</a>
</div>
<div class="blog bar" id="blog">
<a class="nav-link" href="post.html">Blog</a>
</div>
</div>
</header>
<!-- Page Content Start -->
<div class = "container">
<!-- Header -->
<div class="header box"><h1>The Knitting Blog</h1></div>
<!-- Sidebar -->
<div class="sidebar box">
<div class="greeting-info">
<h2>Welcome!</h2>
<h3>The Knitting Blog!</h3>
<p>
<em>Projects & Things</em><br/><br/>
<!-- Subscribe button -->
<u>Subscribe Here</u>:<br/>
<div class="subscribe-btn">
<input type="text" placeholder="Email address" name="mail" required>
<a class="form-link" href="404-not-found.html">Submit</a>
</div>
</p>
</div>
<!-- blog post list in sidebar -->
<div class="blog-list">
<p><h4 id="recent-title">Recent Posts</h4>
<h3>Shetland Wool Week - Katie's Kep</h3>
March 7, 2021:
<ul>
<li>Katie's Kep</li>
<li>Jutland Hat</li>
<li>Handful of Berries Mittens</li>
<li>Anne's Blank Canvas Sock</li>
</ul>
</p>
<p><b>This is a regular sentence to read
if you don't want to read lorem ipsum.</b>Vulputate enim nulla aliquet porttitor
lacus luctus. Viverra tellus in hac habitasse platea dictumst.
<a href="post.html">Most Recent Blog Post</a>
Sem fringilla ut morbi tincidunt augue interdum velit euismod.
</p>
</div>
</div>
<!-- Content about Katie's Kep Hat -->
<div class="content box">
<p>
I like to knit, and have a knitting Zoom call once a week with my aunts.
So far, we've knit a lot during the COVID-19 pandemic!
There's more projects lined up for the future: Gwytherin Shawl,
Powder Wrap shawl, and more!
</p>
<div class="card">
<!-- Blog Post 1 -->
<div class="card-1">
<div class="blog-announcement">
<div class="title-photo">
<p>
<b>Monday</b><br/>
<b>March 8, 2021</b>
</p>
</div>
<h2>Katie's Kep</h2>
</div>
<img src="css/images/knitting/katies-kep.jpg" id="hat-pic" alt="katies kep">
<figcaption id="kep-one">Katie's Kep hat</figcaption>
<br/>
<a href="post.html">Read More</a>
</div>
<!-- Blog Post 2 -->
<div class="card-2">
<div class="blog-announcement">
<div class="title-photo">
<p>
<b>Tuesday</b><br/>
<b>March 9, 2021</b>
</p>
</div>
<h2>Tea Mitten</h2>
</div>
<img src="css/images/knitting/tea-mitten-blocked.jpg" id="tea-pic" alt="tea mitten">
<figcaption id="tea-one">Tea Mitten Blocked</figcaption>
<br/>
<a href="post.html">Read More</a>
</div>
</div>
<p>Oat cake brownie chocolate pudding liquorice. Liquorice cookie
bear claw cake <em>chocolate cake</em> (yum!) sugar plum caramels carrot cake.
Dessert chocolate bar pudding halvah pie cookie. Oat cake dragée
jelly beans. Pastry halvah jujubes lollipop cupcake cake lollipop
wafer. Candy sweet roll bear claw. Marzipan halvah tart. Gummi bears
marzipan <u>gummi bears</u> (must have) lollipop jelly-o.
A quote from Wikipedia's website:
<blockquote cite="https://en.wikipedia.org/wiki/Knitting">
<em>"Knitting is a method by which yarn is manipulated to create
a textile or fabric; it is used in many types of garments.
Knitting may be done by hand or by machine."</em><b> - Wikipedia</b>
</blockquote>
Jelly beans wafer tart cake caramels dessert ice cream chocolate
bar. Marshmallow pastry icing chocolate cake donut macaroon
caramels. Caramels chocolate bar cake caramels jelly-o. Jujubes
cake dragée lollipop dessert brownie oat cake. Powder marshmallow
bear claw pie gummies icing brownie cupcake. Lollipop caramels candy
carrot cake. Sweet donut cake wafer croissant dragée. Marshmallow
candy canes carrot cake cotton candy jujubes halvah marzipan tootsie roll.
</p>
</div>
</div>
<!-- footer -->
<footer>
<div class="footer">
<div id="social-icons">Stay Connected:</div>
<div class="li bar" id="linkedin">
<a class="foot-link" href="https://www.linkedin.com/in/christina-loiacono/" target="_blank">
<img src="css/images/social-icons/linkedin-b.png" alt="linkedin icon" style="width:30px;height:30px;">
</a>
</div>
<div class="git bar" id="github">
<a class="foot-link" href="https://github.com/christina-ml" target="_blank">
<img src="css/images/social-icons/github-b.png" alt="github icon" style="width:30px;height:30px;">
</a>
</div>
<div class="email bar" id="gmail">
<a class="foot-link" href="mailto:[email protected]" target="_blank">
<img src="css/images/social-icons/email-b.png" alt="gmail icon" style="width:30px;height:30px;">
</a>
</div>
<div class="twitter bar" id="twitter">
<a class="foot-link" href="https://twitter.com/cmloiacono" target="_blank">
<img src="css/images/social-icons/twitter-b.png" alt="twitter icon" style="width:30px;height:30px;">
</a>
</div>
<div class="facebook bar" id="facebook">
<a class="foot-link" href="https://www.facebook.com/Udacity/" target="_blank">
<img src="css/images/social-icons/facebook-b.png" alt="facebook icon" style="width:30px;height:30px;">
</a>
</div>
</div>
<div id="copyright">© 2021 Christina Loiacono —
<a class="tou" href="404-not-found.html">Terms of Use</a>
</div>
</footer>
</body>
</html>