FEWD-challenge1/index.html at main · ResonantDevotion/FEWD-challenge1 · GitHub

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
<!--Below is the infomation to the browser on how to format the following webpage-->
<!DOCTYPE html>
<html lang="en-gb">

<!--Below we have the head which contains all of the meta data for the browser to read the page-->
<head>
    <meta charset="UTF-8" /> <!--This dictates the character set-->
    <link rel="stylesheet" href="./challenge/assets/css/style.css"> <!-- This links to the CSS doc -->
    <title>Horiseon Marketing Company Website</title> <!-- This is the webpage title, also used to facilitate SEO-->
</head>

<!--Below we have the body of the webpage with the associated nested elements-->
<!--The div tags have been swapped for the appropriate semantic tags to help with accessibility-->
<body>
    <header>
        <!-- I have searched for an alternative semantic to the span but couldnt find one that wouldn't alter the page-->
        <h1>Hori<span class="seo">seo</span>n</h1>
        <nav>
            <ul>
                <li>
                    <!--"a" tags have been checked for correct linkage-->
                    <a href="#seo">Search Engine Optimization</a>
                </li>
                <li>
                    <a href="#orm">Online Reputation Management</a>
                </li>
                <li>
                    <a href="#smm">Social Media Marketing</a>
                </li>
            </ul>
        </nav>
    </header>

    <!--Below we have the main webpage image-->
    <section>
        <img class="hero"/>
    </section>

<!--Below is the main content of the page-->
    <section class="main-content">
        <article class="search-engine-optimization">
            <img src="./challenge/assets/images/search-engine-optimization.jpg" id="seo" class="seo-marketing-images" alt="notepad on a wooden table, with SEO written on it"/>
            <h2>Search Engine Optimization</h2>
            <p>
                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 class="online-reputation-management">
            <img src="./challenge/assets/images/online-reputation-management.jpg" id="orm" class="rep-management-image" alt="someone looking at a laptop with 'reputation' written on the screen"/>
            <h2>Online Reputation Management</h2>
            <p>
                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="social-media-marketing">
            <img src="./challenge/assets/images/social-media-marketing.jpg" id="smm" class="seo-marketing-images"  alt="a birds eye view of a busy work table with many colorful icons of various social media applications" />
            <h2>Social Media Marketing</h2>
            <p>
                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>

<!--Below is the secondary content of the page, shown to the right side-->
    <section class="benefits">
        <article class="benefit-lead">
            <h3>Lead Generation</h3>
            <img src="./challenge/assets/images/lead-generation.png" alt="A cog, going through a funnel with money coming out of the other side"/>
            <p>
                Inbound strategies for lead generation require less work for your business, bringing customers directly to your website.
            </p>
        </article>
        <article class="benefit-brand">
            <h3>Brand Awareness</h3>
            <img src="./challenge/assets/images/brand-awareness.png" alt="A lightbulb as a head on top of a torso, which has signals radiating outwards"/>
            <p>
                Users find your business through paid and organic searches, increasing the search ranking and visibility for your business.
            </p>
        </article>
        <article class="benefit-cost">
            <h3>Cost Management</h3>
            <img src="./challenge/assets/images/cost-management.png" alt="cog icon amongst dollar sign icons"></img>
            <p>
                As the search ranking for your business increases, your advertising costs decrease, and you no longer need to advertise your page.
            </p>
        </article>
    </section>

    <!--Below is the footer with additional company information-->
    <footer class="footer">
        <!--Header tags have been put in the appropriate chronological order-->
        <h4>Made with ❤️️ by Horiseon</h4>
        <p>
            &copy; 2019 Horiseon Social Solution Services, Inc.
        </p>
    </footer>
</body>

</html>