-
Notifications
You must be signed in to change notification settings - Fork 0
/
astoria.html
110 lines (110 loc) · 3.96 KB
/
astoria.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Astoria</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&family=Poppins:wght@300;400;500;600;700;800&family=Tangerine&family=Ubuntu:wght@300;400;700&display=swap"
rel="stylesheet"
/>
</head>
<body class="Astoria">
<div id="container">
<div class="cityheaderbox">
<header>
<div class="cityheader">
<div class="imgcrop">
<img
src="images/coastcrop.png"
alt="Mt.Hood and reflection on Mirror Lake with lush trees surrounding at sunset"
/>
</div>
<!-- imgcrop -->
<h1>Astoria</h1>
</div>
<!-- cityheader -->
</header>
<!-- header-->
<nav class="citynav">
<div id="navlinks">
<a href="index.html">Home</a>
<a href="salem.html" target="_blank">☆ Salem</a>
<a href="portland.html" target="_blank">Portland</a>
<a href="astoria.html" target="_blank">Astoria</a>
</div>
<!-- navlinks -->
</nav>
<!-- citynav -->
</div>
<!-- cityheaderbox -->
<div id="citycontent">
<div class="contentflex">
<div class="photoquadrant">
<img
src="images/astoria1.png"
alt="Astoria coastal houses on the water"
/>
<img src="images/astoria2.png" alt="Astoria-Megler Bridge" />
<img src="images/astoria3.png" alt="The Goonies House" />
<img src="images/astoria4.png" alt="The Astoria Column" />
</div>
<!-- photoquadrant -->
</div>
<!-- contentflex -->
<section>
<div class="citycontentflex">
<div class="citycontenttext">
<h3>Oregon's Coastal Gem</h3>
<p>
Astoria is a costal port city located in Oregon's northwestern
most county of Clatson. Founded in 1811, it is Oregon's oldest
city and the first American settlement west of the Rocky
Mountains.<br />
<br />
Full of history, this quaint coastal city has many museums to
see. Enjoy some of the fresh seafood and go diving at some ship
wrecks off the coast. Astoria is beautiful and a great escape
from the bustling of Portland.
</p>
</div>
<!-- citycontenttext -->
<aside>
<div class="cityaside">
<h3>Facts and Places to Visit</h3>
<ol>
<li>Population - 10,181</li>
<li>Year incorporated - 1811</li>
<li>County - Clatsop</li>
<li>Classification - Urban</li>
<li>Average Income - $30,000 | State Avg - 32,000</li>
</ol>
<ul>
<li>Astoria Comlumn</li>
<li>Fort Stevens State Park</li>
<li>Lewis and Clark National Historical Park</li>
<li>Astoria-Megler Bridge</li>
<li>Fort George Brewery</li>
</ul>
</div>
<!-- cityaside -->
</aside>
<!-- aside -->
</div>
<!-- citycontentflex -->
</section>
<!-- section -->
</div>
<!-- citycontent -->
<div id="footer">
<footer>Spicescript <span id="footeryear"></span> ©</footer>
</div>
<!-- footer-->
</div>
<!-- container -->
<script src="script.js"></script>
</body>
</html>