-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathblogpost.html
237 lines (218 loc) · 15.2 KB
/
blogpost.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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<!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="css/style.css">
<link rel="stylesheet" href="css/utils.css">
<link rel="stylesheet" href="css/search.css">
<link rel="stylesheet" href="css/blogpost.css">
</head>
<body>
<header class="m-1">
<nav class="navigation max-width-1 margin-auto">
<div class="navLeft">Logo</div>
<div class="navCenter">
<ul class="nav-items">
<li class="nav-item"><a href="/blog-in-html-css/index.html">Home</a></li>
<li class="nav-item"><a href="/blog-in-html-css/contact.html">Contact</a></li>
</ul>
</div>
<form action="/blog-in-html-css/search.html">
<div class="navRight">
<input type="search" name="query" class="form-input " placeholder="Search Hear">
<button class="btn btn-pink" type="submit">Search </button>
</div>
</form>
</nav>
</header>
<main>
<div class="blog max-width-95 margin-auto">
<div class="blogImage text-center m-1">
<img src="img/coffee.jpg " alt="">
</div>
<div class="blogTextAll p-1">
<div class="blogHead m-1 text-center">
<h1 class="m-1">The heven for blogers</h1>
<hr>
</div>
<div class="blogPostMeta ">
<div class="authorName text-muted">
<b>Author Name</b>
<br>
1<sup>st</sup> Jan 2020
</div>
<div class="shareBtn">
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor"
class="bi bi-twitter" viewBox="0 0 16 16">
<path
d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="currentColor"
class="bi bi-facebook" viewBox="0 0 16 16">
<path
d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" fill="black"
class="bi bi-instagram" viewBox="0 0 16 16">
<path
d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
</svg>
</div>
</div>
<div class="blogText m-2 p-1">
Touch typing
Typing zones on a QWERTY keyboard for each finger taken from KTouch and home row keys
Typing zones on a QWERTY keyboard for each finger taken from KTouch (home row keys are circled)
Main article: Touch typing
The basic technique stands in contrast to hunt and peck typing in which the typist keeps their eyes
on
the source copy at all times. Touch typing also involves the use of the home row method, where
typists
rest their wrist down, rather than lifting up and typing (which can cause carpal tunnel syndrome).
To
avoid this, typists should sit up tall, leaning slightly forward from the waist, place their feet
flat
on the floor in front of them with one foot slightly in front of the other, and keep their elbows
close
to their sides with forearms slanted slightly upward to the keyboard; fingers should be curved
slightly
and rest on the home row.
Many touch typists also use keyboard shortcuts when typing on a computer. This allows them to edit
their
document without having to take their hands off the keyboard to use a mouse. An example of a
keyboard
shortcut is pressing the Ctrl key plus the S key to save a document as they type, or the Ctrl key
plus
the Z key to undo a mistake. Other shortcuts are the Ctrl key plus the C to copy and the Ctrl key
and
the V key to paste, and the Ctrl key and the X key to cut. Many experienced typists can feel or
sense
when they have made an error and can hit the ← Backspace key and make the correction with no
increase in
time between keystrokes.
Hunt and peck
Hunt and peck (two-fingered typing) is a common form of typing in which the typist presses each key
individually. Instead of relying on the memorized position of keys, the typist must find each key by
sight. The use of this method may also prevent the typist from being able to see what has been typed
without glancing away from the keys. Although good accuracy may be achieved, any typing errors that
are
made may not be noticed immediately due to the user not looking at the screen. There is also the
disadvantage that because fewer fingers are used, those that are used are forced to move a much
greater
distance.
Civilian Conservation Corps typing class, 1933
Hybrid
There are many idiosyncratic typing styles in between novice-style "hunt and peck" and touch typing.
For
example, many "hunt and peck" typists have the keyboard layout memorized and are able to type while
focusing their gaze on the screen. Some use just two fingers, while others use 3–6 fingers. Some use
their fingers very consistently, with the same finger being used to type the same character every
time,
while others vary the way they use their fingers.
One study examining 30 subjects, of varying different styles and expertise, has found minimal
difference
in typing speed between touch typists and self-taught hybrid typists.[3] According to the study,
"The
number of fingers does not determine typing speed... People using self-taught typing strategies were
found to be as fast as trained typists... instead of the number of fingers, there are other factors
that
predict typing speed... fast typists... keep their hands fixed on one position, instead of moving
them
over the keyboard, and more consistently use the same finger to type a certain letter." To quote
doctoral candidate Anna Feit: "We were surprised to observe that people who took a typing course,
performed at similar average speed and accuracy, as those that taught typing to themselves and only
used
6 fingers on average"
</div>
</div>
<div class="otherBlog">
<h2 class="m-1">People Also Read This</h2>
<div class="home-articles ">
<div class="home-article center">
<a href="/blog-in-html-css/blogpost.html" class="text-center">
<img src="img/coffee.jpg " alt="">
<div class="home-article-bottom m-1">
<h3>Title</h3>
<p class="m-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam esse
repellendus nulla
eius placeat eos dicta, dolore corporis sed voluptatem consequuntur similique!
Nulla,
incidunt! Amet perferendis consequatur maiores? Quia eum, tempore autem aliquam,
necessitatibus neque molestias repudiandae cumque rerum at nulla, molestiae
praesentium.
Eius soluta itaque corrupti vitae optio expedita.</p>
<div class="article-info-div text-muted">
<span class="m-1">Author </span><br><span> Date | </span><span> 7 min read</span>
</div>
</div>
</a>
</div>
<div class="home-article center">
<a href="/blog-in-html-css/blogpost.html" class="text-center">
<img src="img/coffee.jpg " alt="">
<div class="home-article-bottom m-1">
<h3>Title</h3>
<p class="m-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam esse
repellendus nulla
eius placeat eos dicta, dolore corporis sed voluptatem consequuntur similique!
Nulla,
incidunt! Amet perferendis consequatur maiores? Quia eum, tempore autem aliquam,
necessitatibus neque molestias repudiandae cumque rerum at nulla, molestiae
praesentium.
Eius soluta itaque corrupti vitae optio expedita.</p>
<div class="article-info-div text-muted">
<span class="m-1">Author </span><br><span> Date | </span><span> 7 min read</span>
</div>
</div>
</a>
</div>
<div class="home-article center">
<a href="/blog-in-html-css/blogpost.html" class="text-center">
<img src="img/business.jpg " alt="">
<div class="home-article-bottom m-1">
<h3>Title</h3>
<p class="m-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam esse
repellendus nulla
eius placeat eos dicta, dolore corporis sed voluptatem consequuntur similique!
Nulla,
incidunt! Amet perferendis consequatur maiores? Quia eum, tempore autem aliquam,
necessitatibus neque molestias repudiandae cumque rerum at nulla, molestiae
praesentium.
Eius soluta itaque corrupti vitae optio expedita.</p>
<div class="article-info-div text-muted">
<span>Author |</span><span> Date | </span><span> 7 min read</span>
</div>
</div>
</a>
</div>
<div class="home-article center">
<a href="/blog-in-html-css/blogpost.html" class="text-center">
<img src="img/business.jpg " alt="">
<div class="home-article-bottom m-1">
<h3>Title</h3>
<p class="m-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam esse
repellendus nulla
eius placeat eos dicta, dolore corporis sed voluptatem consequuntur similique!
Nulla,
incidunt! Amet perferendis consequatur maiores? Quia eum, tempore autem aliquam,
necessitatibus neque molestias repudiandae cumque rerum at nulla, molestiae
praesentium.
Eius soluta itaque corrupti vitae optio expedita.</p>
<div class="article-info-div text-muted">
<span>Author |</span><span> Date | </span><span> 7 min read</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</main>
<footer class="center">
© Rajat Rawal
</footer>
</body>
</html>