-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (110 loc) · 6.99 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
<!DOCTYPE html>
<html lang="en-us">
<!-- UPDATE LOG FOR MODULE 01 CHALLENGE: -->
<!-- *********************************** -->
<!-- UPDATE 1: Leveraging HTML semantic tags to replace overuse of div tags to improve SEO and accessibiity -->
<!-- UPDATE 2: Structuring HTML elements to follow logical structure independent of styling and positioning -->
<!-- UPDATE 3: Provided alt text to enhance accessibility to defined images displayed -->
<!-- UPDATE 4: Amending CSS file to have heading attributes placed in sequential order -->
<!-- UPDATE 5: Amending title to something concise and descriptive -->
<!-- UPDATE 6: Final refinements -->
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./assets/css/style.css">
<title>Horiseon - Providing Search Engine Optimization Solutions</title>
</head>
<body>
<!-- Header section of the web page that contains the reference links aligned to the right of the page -->
<header class="header">
<h1 style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 40px;">Hori<span class="seo">seo</span>n</h1>
<div>
<ul>
<li>
<a href="#online-reputation-management">Online Reputation Management</a>
</li>
<li>
<a href="#search-engine-optimization">Search Engine Optimization</a>
</li>
<li>
<a href="#social-media-marketing">Social Media Marketing</a>
</li>
</ul>
</div>
</header>
<!-- Replaced used of div by defining a sections to define the CSS bakcground image spanning across the page and the contents in the lower left frame -->
<!-- Rearranged article sections to list solution aspects in alphabetical order -->
<!-- CSS backgound image should not have alternative text -->
<section class="hero"></section>
<section class="content">
<article id="aspect" class="aspect">
<figure>
<img src="./assets/images/online-reputation-management.jpg" class="float-right" alt="An image of an open laptop with the word REPUTATION and a bar chart showing an increasing trend displayed."/>
</figure>
<h2>Online Reputation Management</h2>
<p style="font-family: Helvetica, san-serif;">
The web is full of opinions, and some of these can be negative. Social media allows anyone with an internet connection to say whatever they want about your business. Online Reputation Management gives you the control over what potential customers see when they search for your business.
</p>
</article>
<article class="aspect">
<figure>
<img src="./assets/images/search-engine-optimization.jpg" class="float-left" alt="An image of a closed notebook with S E O on its cover surrounded with a laptop, coffee cup, and stationary."/>
</figure>
<h2>Search Engine Optimization</h2>
<p style="font-family: Helvetica, san-serif;">
The dominance of mobile internet use means that users are searching for the right business as they travel, shop, or sit on their couch at home. Search Engine Optimization (SEO) allows you to increase your visibility and find the right customers for your business.
</p>
</article>
<article id="aspect" class="aspect">
<figure>
<img src="./assets/images/social-media-marketing.jpg" class="float-right" alt="An image of a meeting taking place with a number of though bubbles speaking to various social media trend ideas."/>
</figure>
<h2>Social Media Marketing</h2>
<p style="font-family: Helvetica, san-serif;">
Social media continues to have a sizable influence on buying habits. Social media marketing helps you determine which platforms are suited to your brand, using analytics to find the right markets and increase your lead generation.
</p>
</article>
</section>
<!-- Rearranged article sections to list benefits in alphabetical order -->
<!-- Aside has been defined in replacement of the div to display the various benefits of Horiseon's solutions -->
<aside class="benefits">
<article class="benefit-item">
<h2 style="font-size: 35px;">Brand Awareness</h2>
<figure>
<img src="./assets/images/brand-awareness.png" alt="An image of a person with a lightbulb for its head."/>
</figure>
<p style="font-family: Helvetica, san-serif;">
Users find your business through paid and organic searches, increasing the search ranking and visibility for your business.
</p>
</article>
<article class="benefit-item">
<h2 style="font-size: 35px;">Cost Management</h2>
<figure>
<img src="./assets/images/cost-management.png" alt="An image of a cog wheel landing into monetary coins."/>
</figure>
<p style="font-family: Helvetica, san-serif;">
As the search ranking for your business increases, your advertising costs decrease, and you no longer need to advertise your page.
</p>
</article>
<article class="benefit-item">
<h2 style="font-size: 35px;">Lead Generation</h2>
<figure>
<img src="./assets/images/lead-generation.png" alt="An image of a cog wheel being fed into a funnel to become a monetary coin."/>
</figure>
<p style="font-family: Helvetica, san-serif;">
Inbound strategies for lead generation require less work for your business, bringing customers directly to your website.
</p>
</article>
</aside>
<!-- Footer has been defined in replacement of the div to support enhanced web accessibility via HTML semantics -->
<footer class="footer">
<h3>Made with ❤️️ by Horiseon</h3>
<p>
© 2023 Horiseon Social Solution Services, Inc.
</p>
<!-- Added address semantic to provide student reference for challenge submission -->
<address>
Updated by: <strong><a href="mailto:AllanYuen@Live.ca">AllanYuen@Live.ca</a></strong>
</address>
</footer>
</body>
</html>