-
Notifications
You must be signed in to change notification settings - Fork 1
/
letterA.html
104 lines (99 loc) · 5.03 KB
/
letterA.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Personal Blog</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport" />
<link rel="stylesheet" href="CSS/blog-style.css">
<!-- <link rel="stylesheet" href="CSS/style-headfoot.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class="nav-container">
<!-- <i class="fa-solid fa-bars"></i> -->
<ul class="navbar">
<li class="nav-items"> <a href="index-pb.html">Home</a></li>
<li class="nav-items"><a href="404.html">Let's work together</a></li>
<li class="nav-items"><a href="404.html">Out in the wild</a></li>
<div class="search-container">
<form action="404.html">
<input type="text" placeholder="Search.." name="search">
<button class="search-boton"><i class="fa fa-search"></i></button>
</form>
</div>
</ul>
</nav>
<div id="container">
<header class="head">
<h1 id="logo">Letters from AThen's</h1>
</header>
<main class="content">
<div class="article">
<article>
<h1>LETTER A</h1>
<figure>
<img src="Images/A.jpg" alt="floral a">
<figcaption> Art by <a href=https://www.vectorstock.com/royalty-free-vectors/vectors-by_grmarc
target="_blank">grmarc</a>
</figcaption>
</figure>
<p class="article">
A, or a, is the first letter and the first vowel of the modern English alphabet and the ISO basic Latin alphabet.
</p>
<p class="article">
Its name in English is a (pronounced <u>/ˈeɪ/</u>), plural aes. It is similar in shape to the Ancient
Greek letter alpha, from which it derives.
The uppercase version consists of the two slanting sides of a triangle, crossed in the middle by
a horizontal bar.
</p>
<section>
<h2>How to write A</h2>
<figure>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/c7/A_cursiva.gif">
<figcaption><em>Image from <a href="https://en.wikipedia.org/wiki/B">wikipedia</a></em></figcaption>
</figure><p class="article">
Its name in English is a (pronounced <u>/ˈeɪ/</u>), plural aes. It is similar in shape to the
Ancient Greek letter alpha, from which it derives.
The uppercase version consists of the two slanting sides of a triangle, crossed in the
middle by a horizontal bar.
</p>
</section>
</article>
</div>
<div class="author-card">
<figure>
<img class="author-pic" src="Images/Author.jpg" alt="woman with curly hair smiling">
<figcaption>Anayoslin Then</figcaption>
</figure>
<p class="blurb"><u class="espanol">Hola! </u> I picked up hand lettering as a hobby during lockdown. Now I'm sharing with you how to
draw pretty looking letters from scratch. Who knows, maybe one day you'll be writing full words,
signs, and even murals!</p>
</div>
</main>
<footer class="foot">
<div class="subs-form ft" #id="form">
<h2 class="subs-subtitle">subscribe today </h2>
<h1 class="subs-title">Never miss a letter</h1>
<input type="email" placeholder="Enter your email address" />
<button class="subs-boton">Subscribe</button>
</div>
<nav class="ft" id="foot-menu">
<ul class="foot-menu">
<li> <a href="index-pb.html">Home</a></li>
<li><a href="404.html">Contact me</a></li>
<li><a href="404.html">Find me in the Wild</a></li>
<li><a href="404.html">Let's collab!</a></li>
<div class="social">
<a href="https://www.facebook.com/" target="_blank" class="fa fa-facebook"></a>
<a href="https://www.instagram.com/" target="_blank" class="fa fa-instagram"></a>
<a href="https://www.twitter.com/" target="_blank" class="fa fa-twitter"></a>
</div>
</ul>
</nav>
<div class="ft" id="outro">
<p>--<em>A project by <a href="https://github.com/a-then">@a-then</a>.</em>--</p>
</div>
</footer>
</div>
</body>
</html>