Assignment_LookAndFeel/blog.html at master · dgause/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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- viewport meta tag on all pages -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" type="image/png" href="./img/favicon.ico">
    <link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet'>
    <link rel="stylesheet" type="text/css" href="./css/main.css">
    <link rel="stylesheet" type="text/css" href="./css/responsive.css">
    <!-- load font awesome fonts -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <title>Blog - Group 2</title>
</head>
<body>

    <div class="topnav sticky" id="topNavToggle" style="z-index:1000;">
        <!-- Set class="active" on your page -->
        <a href="./index.html">Home</a>
        <!-- sarah -->
        <a href="./favorite.html">My Favorite App</a>
        <!-- deb -->
        <a href="./blog.html" class="active">Blog</a>
        <!-- neeraj -->
        <a href="./dashboard.html">Most Popular Apps</a>
        <a href="./about.html">About Us</a>

        <a href="javascript:void(0);" class="icon" onclick="toggleNav()">
            <i class="fa fa-bars"></i>
        </a>

        <div class="logo">
            <img src="./img/usf-logo-png-2.png" height="30px" />
        </div>
    </div>
    <div class="content">

        <h1>Welcome to My App Blog</h1>
        <div class="col-3">
            <div class="card" style="padding-bottom: 1em;">
                <img class="card-img" src="https://is3-ssl.mzstatic.com/image/thumb/Purple113/v4/b2/0d/b3/b20db3c7-4be7-50e3-432b-519e2b72e1da/AppIcon-0-1x_U007emarketing-0-6-0-0-0-85-220.png/200x200bb.png" alt="Avatar" style="width:100%">
                <div class="container">
                    <p class="card-title"><a href="https://apps.apple.com/us/app/pinterest/id429047995" target="_blank">Pinterest</a></p>
                    <p style="font-size:10px">Pinterest</p>

                    <p>Genres:</p>

                    <p style="font-size:10px">Lifestyle</p>
                    <p style="font-size:10px">Photo &amp; Video</p>
                </div>
            </div>
        </div><h2>Pinterest</h2>

        <p>Apps are the best! Especially ones that help me with projects around the house. Anything from what's for dinner to planning a baby shower Pinterest has everything.
        Just this past week I used Pinterest to find a recipe to make using the ingredients I had on hand - chicken, mushrooms and asparagus. Searching is easy.
        Just type the ingredients you have into the search bar. </p>
        <div class="row">
            <img src="./img/PinterestSearch.PNG" class="col-md-12 col-4">
        </div>

        <p>My search returned many options that all
        looked delicious.</p>
        <div class="row clear-4">
            <img src="./img/ChickMushAsp1.jpg" class="col-3">
            <img src="./img/ChickMushAsp2.jpg" class="col-3">
            <img src="./img/ChickMushAsp3.jpg" class="col-3">
            <img src="./img/ChickMushAsp5.jpg" class="col-3">
        </div>


    </div>
    <footer class="col-12 text-center">
        <div>
            <h2>Group 2 - App Tool</h2>
            <span class="copyright">&#169; 2020 - Deborah Gause, Neeraj Kumar, Sarah Wasselle, and Alexander Seufert</span>
        </div>
    </footer>
    <script>
    function toggleNav() {
    var x = document.getElementById("topNavToggle");
            if (x.className === "topnav") {
                x.className += " responsive";
            } else {
                x.className = "topnav";
            }
        }
    </script>
</body>
</html>