-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
170 lines (144 loc) · 5.32 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
169
170
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ALL ABOUT DUCKS!</title>
<meta name="viewport" content="width=90%, initial-scale=1, height=90%" />
<link rel="stylesheet" href="css/styles.css" />
<!-- Icon (for use in Personal and Commercial Purposes) from Darius Dan - https://iconduck.com/sets/magicons-flat-icon-set-->
<link rel="icon" type="image/x-icon" href="assets/duck.svg">
</head>
<body>
<div class="container">
<!-- Navigation links -->
<nav class="nav">
<a href="index.html">Home</a> | <a href="about.html">About</a> |
<a href="subscribedummy.html">Subscribe</a>
<input name="fsrch" id="fsrch" placeholder="Search" />
<div class="quotationBox"><q>Wild ducks and tomorrow both come without calling.</q>
<br>— Russian Proverb</div>
</nav>
<!-- Banner Image -->
<div class="banner"><h1>ALL ABOUT DUCKS!</div></h1>
<!-- main content / intro -->
<main>
<h4>DUCKS!</h4>
<p>
<img
class="quack"
src="assets/colorfulDuck.jpg"
alt="duck photo"
/>
</p>
<p>
<strong>Have you ever been overwhelmed by life? By school? By the IRS forcing
you back into the workforce past age 70??</strong>
</p>
<p class="it">
By code that doesn't do what you want it to do, even though you're
sure it should?
<p>
I hope this blog will bring you peace. Every day I will feature a new
duck to make you smile and make you forget about your troubles for a
moment.
</p>
<p>
Of course, I also recommend visiting your local duck pond, so you can
hear them quack and watch them swim. Just make sure not to feed them
any bread. That's actually quite bad for them.
</p>
<p class="enjoy">Enjoy!</p>
</main>
<div class="cards">
<!-- ALL 3 cards need to flex for smaller screen vertically. horizontal for
large screen
<p> </p> -->
<article>
<div class = "articlePad">
<h4>Rubber Ducks!</h4>
<img class="quack" src="assets/taxduck.png" alt="tax duck photo" />
<p class="articleText">
<!-- 800x533 image dimensions -->
There are various types of ducks in the world. In programming, the
rubber duck is very popular
<a href="blog.html">(Read more)</a>
</p>
</article>
<article>
<div class = "articlePad">
<h4>Mallard Ducks!</h4>
<img
class="quack"
src="assets/mallard_ducks.jpg"
alt="mallard duck photo"
/>
<p class="articleText">
The mallard or wild duck is a dabbling duck that breeds throughout the
temperate and
subtropical Americas, Eurasia, <a href="blog.html">(Read more)</a>
</p>
</div>
</article>
<article>
<div class = "articlePad">
<h4>Mandarin Ducks!</h4>
<img
class="quack"
src="assets/Mandarin.duck.arp.jpg"
alt="mallard duck photo"
/>
<p class="articleText">
There The mandarin duck is among the more diminutive types of
waterfowl, with a shorter height <a href="blog.html">(Read more)</a>
</p>
</div>
</article>
</div>
<footer>
<u>Made in 2024 with:</u>
<a href="http://www.udacity.com"
><img
src="assets/udacity.webp"
alt="udacity icon"
class="button" /></a
><a href="http://www.oneten.org"
><img src="assets/oneten.svg" alt="oneten icon" class="button" /></a
><a href="https://www.redbull.com/us-en"
><img src="assets/energy.png" alt="red bull icon" class="red button"
/></a>
</footer>
</div>
</body>
</html>
<!--
NOTE: ALL FILES WERE BEING LINKED FROM ROOT FOLDER, EG: /ASSETS/UDACITY.WEBP
THE PAGES LOADED CORRECTLY IN CHROMIUM AND FIREFOX USING
- VS CODE'S LIVE SERVER LOCALLY
- NETLIFY LIVE DEPLOYMENT
BUT REVIEWER WAS NOT ABLE TO REVIEW SITE DUE TO CHROMIUM "NOT ALLOWED TO LOAD LOCAL RESOURCE"
- WHEN LOADING SITE FROM FOLDER LOCALLY, WITHOUT A RUNNING HTTP SERVER. *CSS, AND ASSET FOLDER FILES DO NOT LOAD*
search code from https://www.w3schools.com/TAgs/tag_search.asp
https://www.w3schools.com/TAgs/tag_main.asp
The <main> tag specifies the main content of a document.
The content inside the <main> element should be unique to the
document. It should not contain any content that is repeated
across documents such as sidebars, navigation links, copyright
information, site logos, and search forms.
Note: There must not be more than one <main> element in a document.
The <main> element must NOT be a descendant of an <article>,
<aside>, <footer>, <header>, or <nav> element.
color help:
https://coolors.co/palettes/popular/nature
https://www.colorhexa.com/283618
//EXAMPLE OF CSS STYLING A TAG
kbd {
border-radius: 2px;
padding: 2px;
border: 1px solid black;
}
</style>
</head>
<body>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>
<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>
-->