-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmain.html
257 lines (215 loc) · 12.9 KB
/
main.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
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Acme&family=Noto+Sans+TC:wght@900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Megrim|Nunito+Sans:400,900" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bangers&family=Montserrat:wght@500&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800;900&family=Ubuntu:wght@500&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/e3f978a813.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- CSS only -->
<link rel="stylesheet" href="css/main.css">
<title>HOME</title>
</head>
<body>
<section id="title">
<div class="container-fluid">
<!-- Nav Bar -->
<nav class="navbar navbar-expand-lg " style="background-color: #9be15d66;">
<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">
<a href="main.html" class="navbar-brand mylogo">CYPHR</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a href="main.html" class="nav-link">Home</a>
</li>
<li>
<a href="#features" class="nav-link">Features</a>
</li>
<li>
<a href="#testimonials" class="nav-link">Testimonials</a>
</li>
<li>
<a href="#technology" class="nav-link">Technologies Used</a>
</li>
<li>
<a href="#future-enhancements" class="nav-link">Future Enhancement</a>
</li>
<li>
<a href="aboutus.html" class="nav-link">About Us</a>
</li>
<li>
<a href="contact.html" class="nav-link">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6">
<h1>A personalised virtual <br> assistant interacting <br> and responding via commands</h1>
<button type="button" class="btn btn-dark btn-lg download-button"><i
class="fas fa-user"></i><a class="login-button" href="signin.html">Login</a></button>
<button type="button" class="btn btn-outline-light btn-lg download-button"><i
class="fas fa-brain"></i><a class="cyphr-button" href="cyphr.html">Meet Cyphr</a></button>
</div>
<div class="col-lg-6">
<div class="logos"><img class="title-image" src="images/ai.png" alt="main_logo"></div>
</div>
</div>
</div>
</section>
<section id="features">
<h2>Features</h2>
<div class="logos1"><img class="title-image" src="images/effect-feature1.png" alt="main_logo"></div>
<div class="row">
<div class="feature-box col-lg-4">
<i class="icon fas fa-check-circle fa-5x"></i>
<h3>Easy to Use</h3>
<p>With a simple click and great suggestions, cyphr. is an effortless virtual assistant that
makes you feel in control and at ease while navigating through your daily activities</p>
</div>
<div class="feature-box col-lg-4 ">
<i class="icon fas fa-bullseye fa-5x"></i>
<h3>User Friendly </h3>
<p>Designed by students, cyphr. will almost seem less virtual because of its friendly interaction
and is created to cater to your needs with not much delay. Need some comfort or want
to hear a joke? Cyphr. is with you</p>
</div>
<div class="feature-box col-lg-4 ">
<i class="icon fas fa-heart fa-5x"></i>
<h3>User-specific features</h3>
<p>With login features, each user can build a personified relationship with cyphr. and uses
previous experiences to get to know you and behave accordingly.</p>
</div>
</div>
</section>
<section id="testimonials">
<h2 class="testimonial-header">Testimonials</h2>
<div id="testimonialControl" class="carousel slide" data-ride="false">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>"At first I thought this was any other virtual assistant with school project quality, but actually it's so much more! Cyphr reminds me of important dates and that's not the best feature yet. Cyphr is so much more!"</h2>
<!-- <img class="testimonial-images" src="images/IMG_2075.JPG" alt="Rejin_profile"> -->
<i class="fas fa-user-circle fa-3x"></i>
<em>Sachin Santhosh,Trivandrum</em>
</div>
<div class="carousel-item">
<h2>"I came across Cyphr while scrolling through Instagram. I do not regret the click at all! Cyphr has been with me ever since, talking to me when I need company or help. Sometimes I forget it is just a virtual assistant!"</h2>
<!-- <img class="testimonial-images" src="images/IMG_2075.JPG" alt="Rejin_profile"> -->
<i class="fas fa-user-circle fa-3x"></i>
<em>S Vishnu Sankar,New Delhi</em>
</div>
<div class="carousel-item">
<h2>"Would 10/10 recommend this virtual assistant to anyone. It's fun, and a great way to spend time for everyone staying alone this quarantine time!"</h2>
<!-- <img class="testimonial-images" src="images/IMG_2075.JPG" alt="Rejin_profile"> -->
<i class="fas fa-user-circle fa-3x"></i>
<em>Dimple Scaria,Kottayam</em>
</div>
</div>
<a class="carousel-control-prev" href="#testimonialControl" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" ></span>
</a>
<a class="carousel-control-next" href="#testimonialControl" role="button" data-slide="next">
<span class="carousel-control-next-icon" ></span>
</a>
</div>
</section>
<section id="technology">
<h2 class="technology-header">Technologies used</h2>
<div class="logos2"><img class="title-image" src="images/effect-feature1.png" alt="main_logo"></div>
<div id="technologyControl" class="carousel slide" data-ride="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="feature-box col-lg-4">
<i class="icon fab fa-html5 fa-5x"></i>
<h3>HTML 5</h3>
<p>HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It was the fifth and last major version of HTML that is a World Wide Web Consortium recommendation.</p>
</div>
<div class="feature-box col-lg-4 ">
<i class="icon fab fa-bootstrap fa-5x"></i>
<h3>Bootstrap 4</h3>
<p>Bootstrap 4 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.</p>
</div>
<div class="feature-box col-lg-4 ">
<i class="icon fab fa-css3 fa-5x"></i>
<h3>CSS 3</h3>
<p>Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML.</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="feature-box col-lg-4">
<i class="icon fab fa-python fa-5x"></i>
<h3>Python</h3>
<p>Python is an interpreted, high-level, general-purpose programming language. Created by Guido van Rossum and first released in 1991.</p>
</div>
<div class="feature-box col-lg-4 ">
<i class="icon fab fa-js-square fa-5x"></i>
<h3>JavaScript</h3>
<p>JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm.</p>
</div>
<div class="feature-box col-lg-4 ">
<i class="icon fab fa-raspberry-pi fa-5x"></i>
<h3>Raspberry pi 4</h3>
<p>The Raspberry Pi is a series of small single-board computers developed by the Raspberry Pi Foundation to promote teaching of basic computer science in schools and in developing countries.</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#technologyControl" role="button" data-slide="prev">
<span class="carousel-icon-prev carousel-control-prev-icon" ></span>
</a>
<a class="carousel-control-next" href="#technologyControl" role="button" data-slide="next">
<span class="carousel-icon-next carousel-control-next-icon" ></span>
</a>
</div>
</section>
<!-- TODO FUTURE ENHANCEMENTS -->
<section id="future-enhancements">
<h2 class="future-header">Future Enhancements</h2>
<div class="row">
<div class="future feature-box col-lg-4">
<i class="icon1 fab fa-android fa-5x"></i>
<h3 class="future-heading">Android/ios Support</h3>
<p class="future-para">With a simple click and great suggestions, cyphr. is an effortless</p>
</div>
<div class="future feature-box col-lg-4 ">
<i class="icon1 fas fa-comment-alt fa-5x"></i>
<h3 class="future-heading">Chat with other Users</h3>
<p class="future-para">Designed by students, cyphr. will almost seem less virtual because of its friendly interaction</p>
</div>
<div class="future feature-box col-lg-4 ">
<i class="icon1 fas fa-grin fa-5x"></i>
<h3 class="future-heading">Mood sensing</h3>
<p class="future-para">With login features, each user can build a personified relationship with cyphr.</p>
</div>
</div>
</section>
<section id="footer">
<h4>© 2020 CyphR All Rights Reserved</h4>
</section>
</body>
</html>