/
index.html
206 lines (185 loc) · 8.86 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
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- GOOGLE FONTS-->
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="styleA.css" rel="stylesheet">
<!-- FONT AWESOME -->
<link href="https://fastcdn.org/Font-Awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<!--Animate CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!--Wow JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<!-- Wow JS Activation -->
<script> new WOW().init(); </script>
</head>
<body>
<!--Header and Navbar-->
<div class="container-fluid header-background wow fadeIn" >
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand wow fadeInLeft" href="App-landingpage.html"><strong>CRTV</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto wow fadeInRight">
<li class="nav-item active">
<a class="nav-link" href="App-landingpage.html">HOME<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#download">DOWNLOAD</a>
</li>
<li class="nav-item">
<a class="nav-link " href="#contactus">CONTACT US</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-8 wow fadeInLeft">
<h1 class="display-4">The Best App Is In Town!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<button class="btn btn-light btn-lg" type="button"><i aria-hidden="true" class="fa fa-apple"></i> App Store</button> <button class="btn btn-light btn-lg" type="button"><i aria-hidden="true" class="fa fa-android"></i> Play Store</button>
</p>
</div>
<div class=" mobile col-md-4 wow fadeInRight">
<img src="app-02.png" width="300px;">
</div>
</div>
</div>
</div>
</div>
<!--About-->
<div class="container about" id="about">
<div class="row">
<div class="row about-desc text-center justify-content-center wow fadeIn">
<h1>ABOUT</h1>
<p class="lead text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis amet ipsam laborum deserunt repellendus recusandae voluptatibus numquam odio repudiandae nobis optio dolore, laboriosam, laudantium, quos natus veritatis accusamus nam minus.</p>
</div>
</div>
<div class="row">
<div class="col-md-4 wow fadeInRight">
<div class="about-features">
<div class="about-features-icon-left">
<i aria-hidden="true" class="fa fa-camera fa-4"></i>
</div>
<div class="about-features-details-left">
<h3>Responsive Design</h3>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="about-features">
<div class="about-features-icon-left">
<i aria-hidden="true" class="fa fa-bolt fa-4"></i>
</div>
<div class="about-features-details-left">
<h3>Bootstrap v4</h3>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="about-features">
<div class="about-features-icon-left">
<i aria-hidden="true" class="fa fa-file fa-4"></i>
</div>
<div class="about-features-details-left">
<h3>Documentation</h3>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="col-md-4 text-center wow fadeInUp">
<img src="app-02.png" width="250px" style="margin-top:1.5rem;">
</div>
<div class="col-md-4 wow fadeInLeft">
<div class="about-features">
<div class="about-features-icon-right">
<i aria-hidden="true" class="fa fa-globe fa-4"></i>
</div>
<div class="about-features-details-right">
<h3>Globally Used</h3>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="about-features">
<div class="about-features-icon-right">
<i aria-hidden="true" class="fa fa-calendar fa-4"></i>
</div>
<div class="about-features-details-right">
<h3>Organized</h3>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
<div class="about-features">
<div class="about-features-icon-right">
<i aria-hidden="true" class="fa fa-pencil fa-4"></i>
</div>
<div class="about-features-details-right">
<h3>Easy to Edit</h3>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
</div>
</div>
<!--Download-->
<div class="download" id="download">
<div class="parallax-background">
<div class="overlay">
<div class="container">
<div class="row justify-content-center">
<h1 class="display-3 wow fadeInUp">10,000 DOWNLOADS</h1>
<p class="lead wow fadeInUp">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore laborum harum eos minima necessitatibus aperiam, beatae mollitia sequi rem voluptas nostrum, facilis, veniam enim libero, odio soluta dignissimos sit omnis?</p>
</div>
<div class="row justify-content-center wow fadeInUp">
<button class="btn btn-light btn-lg" type="button"><i aria-hidden="true" class="fa fa-apple"></i> App Store</button> <button class="btn btn-light btn-lg" type="button"><i aria-hidden="true" class="fa fa-android"></i> Play Store</button>
</div>
</div>
</div>
</div>
</div>
<!--Contact Us-->
<div class="contact-us" id="contactus">
<div class="container">
<div class="row justify-content-center text-center wow fadeInUp">
<h1>CONTACT US</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et commodi ipsam nobis perferendis delectus voluptatem ex, laudantium ad quasi cum voluptatum aut, consequuntur distinctio molestias sequi adipisci reprehenderit numquam inventore.</p>
</div>
<div class="row justify-content-center wow fadeInDown">
<form class="form-inline">
<label class="sr-only" for="inlineFormInput">Name</label> <input class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Your First Name" type="text"> <label class="sr-only" for="inlineFormInput">Name</label> <input class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Your Last Name" type="text">
</form>
</div>
<div class="row justify-content-center wow fadeInDown">
<button class="btn contact-us-button btn-light btn-lg" type="button"><i aria-hidden="true" class="fa fa-rocket"></i> Submit </button>
</div>
</div>
</div>
<!--Footer-->
<div class="footer wow fadeInDown">
<div class="container">
<div class="row justify-content-center">
<p>Copyrights - CRTV 2017 (All Rights Reserved)</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>