-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsite-plan-rafting.html
125 lines (104 loc) · 4.18 KB
/
site-plan-rafting.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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title>Site Plan</title>
<link type="text/css" rel="stylesheet" href="styles/site-plan-rafting.css" />
</head>
<body>
<header>
<h1>Ripping Rapids Site Plan</h1>
<h2>McKay Clark</h2>
<h2>WDD 130</h2>
<!-- In the header above, add the name of your site, your name and class number. For example if you are in section 3 you would put WDD 130-03 -->
</header>
<main>
<!-- ------------------------Steps 2-5------------------------------ -->
<hr />
<h2>Overview</h2>
<h3>Purpose</h3>
<p>Our purpose is to help thrillseekers find their next big adventure on the Snake River rapids by making the booking process quick and easy. </p>
<!-- change this -->
<h3>Audience</h3>
<p>We welcome anyone who is seeking adventure through white water rafting the Snake River and wanting to make unforgettable memories down the rapids. This person will most likely be in their teens or early to middle adult years. My audience will most likely access my site through a desktop computer.</p>
<!-- change this -->
<hr />
<h2>Branding</h2>
<h3>Website Logo</h3>
<!-- Replace this with some sort of logo for your site. A logo can be as simple as the name of your site in a nice font :) -->
<img src="images/raftinglogo.png" alt="Logo image" />
<hr />
<h2>Style Guide</h2>
<!-- ------------------------Steps 6-9------------------------------ -->
<h3>Color Palette</h3>
<!-- The colors you choose for a website are one of the most important decisions you will make. You should have at least 2 colors but do not have to fill in all 4 if you do not need them. -->
<table class="colors">
<tr>
<th>Primary</th>
<th>Secondary</th>
<th>Accent 1</th>
<th>Accent 2</th>
</tr>
<tr>
<td class="primary"></td>
<td class="secondary"></td>
<td class="accent1"></td>
<td class="accent2"></td>
</tr>
</table>
<!-- ------------------------Steps 10-12------------------------------ -->
<h3>Typography</h3>
<!-- Choose a font for your paragraphs (body copy) and headlines. What font(s) have you chosen? Think also about which of your colors above you might use for background and font colors. -->
<h4>
Heading Font: Fjalla One
<!-- change this -->
</h4>
<h4>
Paragraph Font: Lora
<!-- change this -->
</h4>
<h3>Normal paragraph example</h3>
<p>
The best Whitewater Rafting in Colorado, White Water Rafting Company
offers rafting on the Colorado and Roaring Fork Rivers in Glenwood
Springs. Since 1974, we have been family owned and operated, rafting the
Shoshone section of Glenwood Canyon and beyond.
</p>
<h3>Colored paragraph example</h3>
<p class="colored">
Trips vary from mild and great for families, to trips exclusively for
physically fit and experienced rafters. No matter what type of river
adventures you are seeking, White Water Rafting Company can make it
happen for you.
</p>
<!-- ------------------------Step 13------------------------------ -->
<h3>Navigation with Hover</h3>
<!-- Think about how you want your navigation bar to look. In the site-plan.css file change the colors to your colors to get the look you desire. -->
<nav>
<a href="#">Home</a>
<a href="#">Page2</a>
<a href="#">Contact Us</a>
</nav>
<hr />
<h2>Site Map</h2>
<div class="sitemap">
<div class="sm-home">Home</div>
<div class="sm-page2">
[Page2]
<!-- this page will have a name later -->
</div>
<div class="sm-page3">Contact Us</div>
<div class="top"> </div>
<div class="left"> </div>
<div class="right"> </div>
</div>
<hr />
<h2>Wireframes</h2>
<!-- Create an additional wireframe for your site. List it here below the Home page wireframe. -->
<h3>Home</h3>
<img src="https://byui-wdd.github.io/wdd130/rafting_images/wireframe_home.png" alt="home page wireframe" />
<h3>[Page 2]</h3>
<!-- <img src="#" alt="page 2 wireframe"> -->
</main>
</body>
</html>