-
Notifications
You must be signed in to change notification settings - Fork 0
/
site-plan.html
163 lines (136 loc) · 6.09 KB
/
site-plan.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
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Site Plan</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<h1>After Burner's Livery's</h1>
<h2>Joe Burner</h2>
<h2>WDD 130-11</h2>
<!-- In the header above, add your name and class number. For example if you are in section 3 you would put WDD 100.03 -->
</header>
<main>
<!-- ------------------------Steps 2-3------------------------------ -->
<h2>Overview</h2>
<hr>
<h3>Purpose</h3>
<p>The purpose of After Burner's Liverys is to provide high quality repaints to the flight sim community free of charge.</p> <!-- change this -->
<h3>Audience</h3>
<p>Our audience includes flight sim community members either of virtual airlines or flight sim virtual pilots.</p> <!-- change this -->
<h2>Branding</h2>
<h3>Website Logo</h3>
<!-- You are not required to use this logo for your site…but you must have a logo for your website. I can offer additional logos to use, or you can create your own-->
<img src="https://www.kindpng.com/picc/m/210-2100854_plane-logos-travel-design-air-plane-logo-png.png" alt="Logo image">
<hr>
<h2>
Style Guide
</h2>
<!-- ------------------------Steps 4-8------------------------------ -->
<h3>
Color Palette
</h3>
<!-- The colors you choose for a website are one of the most important decisions you will make. Follow the instructions on the activity in iLearn then return and replace the color codes below with the hex color codes (the 6 digit numbers that show at the bottom of each color) for the colors you have chosen below. You should have at least 2 colors but do not have to fill in all 4 if you do not need them. -->
<!-- Copy and paste the URL to your finished palette below Make sure to paste it into both spots -->
<p>Palette URL: <a href="https://coolors.co/396e94-e7c24f-a43312-381d2a-aabd8c" target="_blank">https://coolors.co/396e94-e7c24f-a43312-381d2a-aabd8c</a></p>
<table class="colors">
<tr><th>Primary</th><th>Secondary</th><th>Accent 1</th><th>Accent 2</th></tr>
<!-- Replace the numbers in the boxes below with your hex color codes. Then switch to the site-plan.css file and change your colors there as well. -->
<tr><td class="primary">[#d83131]</td><td class="secondary">[#E7C24F]</td><td class="accent1">[#A43312]</td><td class="accent2"></td></tr>
</table>
<!-- ------------------------Step 9------------------------------ -->
<h3>
Typography
</h3>
<!-- Choose a font for your paragraphs (body copy) and headlines. What font(s) have you chosen? Why did you choose what you did? Make sure to review the list of web safe fonts at W3Schools.org as a starting point. Think also about which of your colors above you might use for background and font colors. -->
<h4>
Heading Font: Rock Salt <!-- change this -->
</h4>
<p>
It stands out and makes the page look pretty good. <!-- change this -->
</p>
<h4>
Paragraph Font: Oswald <!-- change this -->
</h4>
<p>
In my opinion it makes the page look professional. <!-- change this -->
</p>
<h4>
Normal paragraph example
</h4>
<p>
The History of After Burner's Livery's began when
</p>
<h4>
Colored paragraph example
</h4>
<p class="colored">
After Burner's Livery's is founded upon......
</p>
<!-- ------------------------Step 10------------------------------ -->
<h3>
Navigation
</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><ul>
<li><a href="index.html">Home</a></li>
<li><a href="Request.html">Request</a></li>
<li><a href="Contact">Contact Form</a></li>
</ul></nav>
<hr>
<h2>
Site Map
</h2>
<div class="sitemap">
<div class="sm-home">
Home
</div>
<div class="sm-page2">
[Page2] <!-- change this -->
</div>
<div class="sm-page3">
[Page3] <!-- change this -->
</div>
<div class="top">
</div>
<div class="left">
</div>
<div class="right">
</div>
</div>
<p>
The Site Map of a site is just like it sounds…it is a map of the pages in a site and how they are related and linked together. From the map above we can see that we will eventually have the Home page and 2 sub or child pages.
</p>
<p>
The lines that connect them all together indicate that each page should be accessible from any other page, it is essentially showing us the global navigation for the site.
</p>
<!--
Choose your pages that you will create and put the names inside the two child page boxes… Some suggestions are below:
• FAQ
• Blog
• Contact Us
• Rivers We Run
• Schedule/Rates/Dates -->
<hr>
<h2>
Wireframes
</h2>
<p>
Wireframes are like blueprints for making webpages. They should show the major sections of content that will be on the page and the relative locations of each element. In the wireframe below you can see there will be 6 sections to our page:</p>
<ol>
<li>At the top we have a section with the logo of an Airplane and the navigation bar.</li>
<li>Then there is a banner image that stretches all the way across the screen.</li>
<li>Next we have some text and an image </li>
<li>...followed by another row made up of an image and some text.</li>
<li>Then one more section of text with no image.</li>
<li>Lastly, a footer containing a copyright/name line and 3 social media icons. </li>
</ol>
<img src="https://byui-cit.github.io/wdd100/images/wireframe-grid.png" alt="home page wireframe">
</main>
</body>
</html>