/
design.html
128 lines (91 loc) · 4.19 KB
/
design.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
<!DOCTYPE html>
<html lang="en">
<!-- John Follis, MEID:joh2136519, Course Section # 38845. -->
<head>
<meta charset="utf-8">
<title> Design </title>
<meta name="description" content=" Sand and Surf offerrs a unique one stop island vacation adventure package planning and booking service.">
<meta name="keywords" content="resort, vacation, island, snorkling, planning, booking, sand, surf, adventure, one stop">
<!-- link to my CSS !!!! -->
<link rel="stylesheet" href="css/sand.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/sandmobile.css" type="text/css" media="only screen and (max-device-width: 480px)">
</head>
<!-- Start of body section -->
<body>
<!--Begining of div class "wrapper" for body -->
<div id="wrapper">
<!-- Start Navigation Menu -->
<h1>Sand & Surf </h1>
<div id="nav">
<ul>
<li><a href="home.html"> Home</a></li>
<li><a href="destinations.html"> Destinations</a></li>
<li><a href="contactus.html"> Contact Us</a></li>
<li><a href="vacationpackages.html"> Vacation Packages</a></li>
<li><a href="design.html"> Design</a></li>
</ul>
</div>
<!-- End the Navigation menu -->
<div class="content">
<h2> Design for Sand and Surf </h2>
<br>
<img src="photos/wireframedesign.png" alt="Website wireframe design" height="350" width="475">
<dl>
<dt>Site Design information</dt>
<dd>I chose the basic F shapped pattern that most web surfers are used to. This allows the customer to quickly
understand the hierachechel design allowing easy fast simple navigation, ensuring that we don't lose
customers due to frustration from hard to read or hard to navigate web site. </dd>
</dl>
<ul>
<li>I chose to use design hover effects for navigation as I felt they were a nice touch for the design. </li>
<li> I chose to use red and dark blue design colors as they complimented the logo nicely. </li>
</ul>
<!-- Beginng of Contact information -->
<p>
<br>
<br>
<br>
<br>
<br>
<br class="clear">
<b>Sand & Surf</b>
<br>
<b>1234 Sandy Lane</b>
<br>
<b>Paradise, FL 31005</b>
<br>
<br>
<b> <a id="mobile" href="tel:888-555-5555">888-555-5555</a> </b>
<span id="desktop">888-555-5555</span>
</p>
<!-- End of Contact information -->
<!-- Footer Start -->
<footer>
<!-- Social Media Begining -->
<div class="social">
<img style="border:0;width:88px;height:88px" src="photos/twitter.png" alt="Social Media Twitter Bird" />
</div>
<!-- Social media end -->
<!-- Copyright and WebMaster Contact info Begin -->
<div class="footer"> © Copyright 2013 Sand and Surf
<br>
<a href="mailto:joh2136519@maricopa.edu">Contact WebMaster </a>
</div>
<!-- End Copyright & Webmaster Contact info -->
<!-- W3c Validation -->
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px" src="//jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" />
</a>
</p>
</footer>
<!-- Footer End -->
<!-- Div closing Wrapper -->
</div>
<!-- Moved closing div from content to here -->
<!-- Div colosing CONTENT -->
</div>
<!-- End of BODY -->
</body>
<!-- End of Sand and Surf -->
</html>