Assignment_LookAndFeel/about.html at master · quyle2020/Assignment_LookAndFeel · 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
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


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display|Roboto|Roboto+Slab" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="./css/main.css" />
    <link rel="stylesheet" type="text/css" href="./css/index1.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" /> <!-- Icon -->
    <script src="http://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
    <title>About</title>
</head>

<body>
    <!-- Site Navigation Start -->

    <div class="topnav">
        <div class="limit-col">
            <div id="logo">
                <a href="index.html">
                    <img src="img/bull_wealth_logo.png">
                </a>
            </div>
        </div>
    </div>

    <div class="topmenu">
        <div class="limit-col">
            <nav>
                <div class="hamburger">
                    <i class="fas fa-bars menu" aria-hidden="true"></i>
                </div>
                <a href="index.html"><i class="fas fa-home"></i></a>
                <a href="about.html">About</a>
                <a href="index2.html">All-Time Top 6 Dividend Stock</a>
                <a href="index1.html">Best Dividend Stocks</a>
                <a href="index3.html">Investing for the Future</a>
            </nav>
        </div>
    </div>
    <!-- Tiny script to toggle menu on smaller screens -->
    <script type="text/javascript">
        $(document).ready(function () {
            $('.menu').click(function () {
                $('nav a').toggleClass('active');
            })
        })
    </script>

    <!-- Site Navigation End -->
    <!-- Header Start -->
    <div class="row">
        <div class="header2">
            <div class="limit-col">
                <h1>About Webpage</h1>
            </div>
        </div>
    </div>
    <!-- Header End -->
    <!-- Main Content Start -->
    <div class="row limit-col colpad">
        <div class="row">
            <h1>ISM 6225 - Distributed Information Systems</h1>
            <p id="main-topic">
                This website was designed as a part of an assignment for ISM 6225. We do not claim any ownership of the content herein. Webpage is created for educational purposes only and we are not responsible to how the information is used outside of educational use.
            </p>
            <p>Content Sources:</p>
            <ul>
                <li>https://www.kiplinger.com/article/college/T042-C032-S014-how-to-start-saving-for-your-child-s-college-educa.html</li>
                <li>https://seekingalpha.com/article/4247749-best-dividend-stocks-buy-slowing-economy</li>
                <li> https://www.kiplinger.com/slideshow/investing/T018-S001-101-best-dividend-stocks-to-buy-2019-and-beyond/index.html</li>
                <li> https://www.investopedia.com/university/beginner/beginner1.asp </li>
                <li> https://www.investopedia.com/university/beginner/beginner2.asp </li>
                <li> https://www.investopedia.com/university/beginner/beginner3.asp </li>
                <li> https://www.investopedia.com/university/beginner/beginner5.asp </li>
            </ul>
        </div>

        <div class="row colpad">
            <h2>Design Elements</h2>
            <ul>
                <li>Responsive - Design must incorporate be responsive design principals</li>
                <li>Usability - User interface and navigation must be intuitive for the end user</li>
                <li>Content - Content must be revelant to each other</li>
                <li>Design - Design must use at least three specific design guidelines and ideas for web design</li>
            </ul>
        </div>
        <div class="col-6 col-s-6 colpad">

            <h2>Responsive</h2>
            <p>
                Tablet internet consumption grew 30% between 2013 and 2015. In the same period, smartphone
                internet consumption grew 78%. Thus the website is designed to be responsive for large
                desktop users to small smartphone screens.
            </p>


        </div>


        <div class="col-6 col-s-6 colpad">
            <h2>Usability</h2>
            <ul>
                <li>Menu can easily be located at all times.</li>
                <li>Menu will change as screen size change.</li>
                <li>Content and all relavant information is centered.</li>
                <li>Each section is distinguishable.</li>
                <li>Each page is only one page deep.</li>
            </ul>
        </div>


        <div class="col-6 col-s-6 colpad">
            <h2>Content</h2>
            <p>
                Web page content is related to investing, particulary, dividend investing. Index page
                explains how one can start investing. <i>Best Dividend Stocks</i> explains the types of
                dividend stocks available, especially in today's volatile market. <i>All-Time Top 6
                Dividend Stocks</i> shows the all-time dividend choices. <i>Investing Knowledge</i>
                explains a brief investing terminology.
            </p>


        </div>

        <div class="col-6 col-s-6 colpad">
            <h2>Design</h2>
            <ul>
                <li><i>Color:</i> Consistent style and color scheme throughout.</li>
                <li><i>Font:</i> Only two main font styles are used. Spacing used should be comfortable for reading.</li>
                <li><i>Layout:</i> Site uses css grids for consistent layout.The white space usage should be balanced.</li>
                <li><i>Responsive:</i> Site is designed to respond to both large and small screens. For large screens, the width of the content is limited for readability. Content will shift for best viewing experience for small screens.</li>
                <li><i>Conventional:</i> Logo at the top left; Logo and Home (icon) brings you home; Menu items highlighted when a mouse hovers over.</li>
            </ul>

        </div>

    </div>
    <!-- Main Content End -->
    <!-- Footer Start -->
    <div class="row">
        <div class="footer">
            <div class="limit-col">
                <blockquote>
                    "If you aren't willing to own a stock for ten years, don't even think about owning it for ten minutes. Put together a portfolio of companies whose aggregate earnings march upward over the years, and so also will the portfolio's market value."
                </blockquote>
                <blockquote class="quoting">
                    -- Warren Buffet
                </blockquote>
            </div>
        </div>
    </div>
    <!-- Footer End -->

</body>
</html>