-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
221 lines (196 loc) · 9.93 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
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
crossorigin="anonymous">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="./css/style.css">
<title>CSBar | Our Official Website</title>
</head>
<!--
Theme - CSBar
Developer - Roshan Lamichhane
Version - 1.0
-->
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-danger pl-5 fixed-top">
<a href="index.html" class="navbar-brand">CSBar</a>
<span class="navbar-text">Learn and Implement</span>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="myMenu">
<ul class="navbar-nav pl-5 custom-nav">
<li class="nav-item"><a href="index.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#Services" class="nav-link">Services</a></li>
<li class="nav-item"><a href="#Team" class="nav-link">Team</a></li>
<li class="nav-item"><a href="#Contact" class="nav-link">Contact</a></li>
<li class="nav-item"><a href="./Our-Projects/" class="nav-link">Our Projects</a></li>
</ul>
</div>
</nav>
<header class="jumbotron back-image" style="background-image: url(images/Banner.jpeg);">
<div class="text-center" style="margin-top: 120px;">
<h1 class="text-uppercase text-danger font-weight-bold">Welcome to CSBar</h1>
<p class="font-italic font-weight-bold st">Learn and Implement</p>
<a href="#Contact" class="btn btn-outline-danger mr-4">Hire Us</a>
<a href="#" target="_blank" class="btn btn-outline-danger">Join Us</a>
</div>
</header>
<div class="container text-center border-bottom" id="Services">
<h2>Our Services</h2>
<div class="row mt-4">
<div class="col-sm-4 mb-4">
<a href="#"><i class="fas fa-mobile-alt fa-10x text-success"></i></a>
<h4 class="mt-4">Moblie Application</h4>
</div>
<div class="col-sm-4 mb-4">
<a href="#"><i class="fas fa-desktop fa-10x text-primary"></i></a>
<h4 class="mt-4">Web & Software Application</h4>
<style>
.fa-10x {
font-size: 6em;
}
</style>
</div>
<div class="col-sm-4 mb-4">
<a href="#"><!-- <i class="fas fa-database fa-10x text-info"></i> -->
<img src="https://img.icons8.com/color/96/000000/artificial-intelligence.png"></a>
<h4 class="mt-4">Machine Learning</h4>
</div>
</div>
</div>
<!--
<div class="container pt-5" id="Courses">
<h2 class="text-center">Our Courses</h2>
<div class="row mt-4">
<div class="col-lg-6 mb-4">
<img src="images/course1.jpeg" alt="" class="img-fluid">
</div>
<div class="col-lg-6">
<h2 class="text-center">Learn Java Programming</h2> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum ducimus, modi aut consequatur dolore ut praesentium esse recusandae at amet. Dolorem eius obcaecati ratione, quas laborum consequatur inventore vitae nostrum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos asperiores magnam culpa ullam. Quasi voluptatem eveniet sed velit tempore eaque adipisci magnam recusandae quaerat praesentium illo, animi, sit ratione quo.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nisi atque ipsam optio, iusto explicabo odit suscipit delectus quis eum adipisci quo voluptas laboriosam quisquam sit, sint asperiores eius in!</p>
</div>
</div>
<div class="row mt-4">
<div class="col-lg-6">
<h2 class="text-center">Real World Projects</h2> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum ducimus, modi aut consequatur dolore ut praesentium esse recusandae at amet. Dolorem eius obcaecati ratione, quas laborum consequatur inventore vitae nostrum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos asperiores magnam culpa ullam. Quasi voluptatem eveniet sed velit tempore eaque adipisci magnam recusandae quaerat praesentium illo, animi, sit ratione quo.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente nisi atque ipsam optio, iusto explicabo odit suscipit delectus quis eum adipisci quo voluptas laboriosam quisquam sit, sint asperiores eius in!</p>
</div>
<div class="col-lg-6 mb-4">
<img src="images/course2.jpeg" alt="" class="img-fluid">
</div>
</div>
</div> -->
<div class="jumbotron bg-danger" id="Team">
<div class="container">
<h2 class="text-center text-white">Team</h2>
<div class="row mt-5">
<div class="col-lg-3 col-sm-6">
<div class="card shadow-lg mb-2">
<div class="card-body text-center">
<img src="images/avtar1.jpeg" class="img-fluid" style="border-radius: 100px;">
<h4 class="card-title">Roshan Lamichhane</h4>
<p class="card-text">Founder of CSBar, Sathi Me. Developer and ML Engineer </p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card shadow-lg mb-2">
<div class="card-body text-center">
<img src="images/avtar2.jpeg" class="img-fluid" style="border-radius: 100px;">
<h4 class="card-title">Team Member</h4>
<p class="card-text">
Itaque illo explicabo voluptatum, saepe libero rerum, ad ducimus voluptas nesciunt debitis numquam.
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card shadow-lg mb-2">
<div class="card-body text-center">
<img src="images/avtar3.jpeg" class="img-fluid" style="border-radius: 100px;">
<h4 class="card-title">Team Member</h4>
<p class="card-text">
Itaque illo explicabo voluptatum, saepe libero rerum, ad ducimus voluptas nesciunt debitis numquam.
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card shadow-lg mb-2">
<div class="card-body text-center">
<img src="images/avtar4.jpeg" class="img-fluid" style="border-radius: 100px;">
<h4 class="card-title">Team Member</h4>
<p class="card-text">
Itaque illo explicabo voluptatum, saepe libero rerum, ad ducimus voluptas nesciunt debitis numquam.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container" id="Contact">
<h2 class="text-center mb-4">Contact US</h2>
<div class="row">
<div class="col-md-8">
<form action="./action.php" method="post">
<input class="form-control" name="name" placeholder="Name" /><br />
<input class="form-control" name="phone" placeholder="Phone" /><br />
<input class="form-control" name="email" placeholder="E-mail" /><br />
<textarea class="form-control" name="text" placeholder="How can we help you?" style="height:150px;"></textarea><br />
<input class="btn btn-primary" type="submit" value="Send" /><br /><br />
</form>
</div>
<div class="col-md-4 text-center">
<strong>Headquarter:</strong> <br>
CSBar, <br>
MA, USA <br>
Phone: +00000000 <br>
<a href="#" target="_blank">Website Name</a> <br>
<br><br>
Phone: +00000000 <br>
<a href="#" target="_blank">Website Link</a> <br>
</div>
</div>
</div>
<footer class="container-fluid bg-dark text-white mt-5" style="border-top: 3px solid #DC3545;">
<div class="container">
<div class="row py-3">
<div class="col-md-6">
<div>
<span>Follow Us: </span>
<a href="#" target="_blank"><i class="fab fa-facebook-f px-3"></i></a>
<a href="#" target="_blank"><i class="fab fa-twitter pr-3"></i></a>
<a href="#" target="_blank"><i class="fab fa-youtube pr-3"></i></a>
<a href="#" target="_blank"><i class="fas fa-rss pr-3"></i></a>
</div>
</div>
<div class="col-md-6 text-right"> <!-- Start Footer 2nd Column -->
<small> Copyright <a href="#" target="_blank">CSBar</a> © 2019. </small>
<small> Designed & Developed by <a href="#" target="_blank">Roshan Lamichhane</a> </small>
</div>
</div>
</div>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>