basicphonegap/index.html at master · chdenizard/basicphonegap · 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
<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile.css" />
        <title>Foo Bar Web Design</title>
    </head>
    <body>
        <div class="app">
            <div data-role="page" id="home">
                <header data-role="header">
                    <h1> Foobar Web Design </h1>
                </header>
                <div data-role="content">
                    <nav data-role="navbar">
                        <ul>
                            <li><a href="#home" class="ui-btn-active">Home</a></li>
                            <li><a href="#about">About</a></li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>
                    </nav>
                    <h3>Welcome to FooBar</h3>
                    <img src="img/banner.png" class="banner">
                    <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec convallis leo, non varius nunc. Etiam varius urna odio, id venenatis ligula posuere sed. Nunc nisi neque, laoreet vitae tellus in, efficitur cursus massa. Nulla eu augue mattis, fringilla turpis in, aliquet neque. Suspendisse potenti. Cras molestie bibendum orci non pharetra. Praesent a nibh sit amet leo faucibus suscipit
                    </p>
                    <a href="#contact" class="ui-btn ui-corner-all ui-shadow">Contact us Today!</a>
                </div>
                <footer data-role="footer">
                    <h3>Copyright &copy; 2015</h3>
                </footer>
            </div>

             <div data-role="page" id="about">
                <header data-role="header">
                    <h1> About page </h1>
                </header>
                <div data-role="content">
                    <nav data-role="navbar">
                        <ul>
                            <li><a href="#home">Home</a></li>
                            <li><a href="#about" class="ui-btn-active">About</a></li>
                            <li><a href="#contact">Contact</a></li>
                        </ul>
                    </nav>
                    <h3>About us...</h3>
                    <p>
                        Morbi at faucibus dolor, vel feugiat erat. Donec nisl mauris, ultrices facilisis volutpat vitae, vehicula ac quam. Proin eleifend, mi sit amet porttitor pharetra, tellus lectus tristique lectus, eu maximus lorem felis eu mauris. Maecenas lorem urna, pellentesque nec auctor et, ultricies eget lacus. Morbi iaculis viverra magna, vel fringilla ipsum egestas ut. Aliquam scelerisque dignissim massa. Aenean quis elit viverra,
                    </p>
                    <p>
                        Nec auctor et, ultricies eget lacus. Morbi iaculis viverra magna, vel fringilla ipsum egestas ut. Aliquam scelerisque dignissim massa. Aenean quis elit viverra,
                    </p>

                </div>
                <footer data-role="footer">
                    <h3>Copyright &copy; 2015</h3>
                </footer>
            </div>

            <div data-role="page" id="contact">
                <header data-role="header">
                    <h1> Contact page </h1>
                </header>
                <div data-role="content">
                    <nav data-role="navbar">
                        <ul>
                            <li><a href="#home">Home</a></li>
                            <li><a href="#about" >About</a></li>
                            <li><a href="#contact" class="ui-btn-active">Contact</a></li>
                        </ul>
                    </nav>
                    <h3>Contact us</h3>
                    <div>
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2926.0316579417035!2d-71.00932058452871!3d42.829945079158136!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e2fd2c74fb2e89%3A0x4b2b1199a9175d3f!2s89+W+Main+St%2C+Merrimac%2C+MA+01860%2C+USA!5e0!3m2!1spt-BR!2sbr!4v1454372037552" width="100%" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
                    </div>
                    <h3>Location</h3>
                    <ul>
                        <li><strong>FooBar Web Design</strong></li>
                        <li>89 West Main st</li>
                        <li>Merrimac MA 01860</li>
                        <li><strong>Email: </strong>brad@foobar.com</li>
                        <li><strong>Phone:</strong>978-555-5555</li>
                    </ul>
                </div>
                <footer data-role="footer">
                    <h3>Copyright &copy; 2015</h3>
                </footer>
            </div>


        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery.mobile.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>