-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
251 lines (250 loc) · 15 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Rahul Thakkar | Portfolio</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="all,follow">
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i" rel="stylesheet">
<!--stylesheet-->
<link rel="stylesheet" href="css/style.css" id="theme-stylesheet">
<!-- Favicon-->
<link rel="icon" href="img/favicon.png" type="image/png" sizes="16x16">
<!-- FontAwesome CSS - loading as last, so it doesn't block rendering-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" >
</head>
<body>
<!-- navbar-->
<header class="header">
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container"><a class="navbar-brand" href="#"><img src="img/rahul_logo.svg" alt="" width="100"></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><i class="fas fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link link-scroll active" href="#hero">Home <span class="sr-only">(current)</span></a></li>
<li class="nav-item"><a class="nav-link link-scroll" href="#about">About</a></li>
<li class="nav-item"><a class="nav-link link-scroll" href="#expertise">Skills</a></li>
<li class="nav-item"><a class="nav-link link-scroll" href="#education">Education</a></li>
<li class="nav-item"><a class="nav-link link-scroll" href="#portfolio">Portfolio</a></li>
<li class="nav-item"><a class="nav-link link-scroll" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
</header>
<!-- Hero Section-->
<section class="hero bg-cover bg-center mt-5" id="hero" style="background: url(img/back.jpg)">
<div class="container py-5 my-5 index-forward">
<div class="row">
<div class="col-md-8 text-white">
<h2 class="h4 font-weight-normal mb-1 colors">Hello, I am</h2>
<h1 class="text-uppercase text-xl mb-1">Rahul <span class="" style="color: #e6e8fa;">Thakkar</span></h1>
<h2 class="h4 font-weight-normal mb-5">Front-End Developer</h2>
<p class="text-uppercase text-shadow">" If somebody offers you an amazing opportunity but you are not sure you can do it, say yes – then learn how to do it later! " - <span class="font-weight-bold">Richard Branson</span></p>
</div>
</div>
</div>
</section>
<!-- About Section-->
<section class="bg-light" id="about">
<div class="container">
<header class="mb-5">
<p class="font-weight-bold text-uppercase letter-spacing-3 colors">Innovative solutions</p>
<h2 class="text-uppercase lined">About</h2>
</header>
<h3 class="mb-5x">Hello! I'm Rahul Thakkar. </h3>
<img src="img/rahul.jpg" class="rounded mx-auto d-block mx-md-0 mt-5 mb-5" alt="author" height="250px" width="auto">
<p class="lead text-muted"><!--<strong class="text-dark"></strong>-->I'm Front-End UI developer and designer, and have also worked on Video Editing with a satisfactory amount of knowledge and experience in the editing tools, my work mainly emphasise on Logo Designing and then asset's on Web Development. I fervidly work on a job given to me and dedicated my time on learning new beneficial things to enhance my personal skills. I'm very peculiar in my work and time.</p>
<p class="lead text-muted mb-0"> I would love creating new designs for the associations and community and have a enormous work experience with them. </p>
<!--<p class="text-muted mb-0">Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>-->
</div>
</section>
<!-- Expertise Section -->
<section id="expertise">
<div class="container">
<header class="mb-5 pb-4">
<p class="font-weight-bold text-uppercase letter-spacing-3 colors">Authentic Art.</p>
<h2 class="text-uppercase lined">Skills</h2>
</header>
<div class="row">
<div class="col-md-6 mb-5">
<h3 class="h4"><span class=" mr-2 colors">01</span>Web Design</h3>
<p class="text-muted text-small ml-4 pl-3">I am a Designer who is passionate about website designing and wants to know every area of the inner workings of website design.</p>
</div>
<div class="col-md-6 mb-5">
<h3 class="h4"><span class=" mr-2 colors">02</span>Web Development</h3>
<p class="text-muted text-small ml-4 pl-3">I am a Web Developer with technical skills in HTML5, CSS3, JavaScript and many content management systems such as Wordpress and Wix.</p>
</div>
<div class="col-md-6 mb-5 mb-md-0">
<h3 class="h4"><span class=" mr-2 colors">03</span>Logo Designer</h3>
<p class="text-muted text-small ml-4 pl-3">I am a Logo Designer with technical skills in Adobe Illustrator, Canva, Logomaker and CorelDraw, As a designer i prefer to create modern, clear, memorable and solid logotypes, catchy identity.</p>
</div>
<div class="col-md-6">
<h3 class="h4"><span class=" mr-2 colors">04</span>Video Editor</h3>
<p class="text-muted text-small ml-4 pl-3">I am a Video Editor with technical skills in Adobe Premiere Pro, iMovie and Blender, I started self-teaching at the age of 17 with Adobe Premiere Pro and many more software, making short films.</p>
</div>
</div>
</div>
</section>
<!-- Education Section-->
<section class="bg-light" id="education">
<div class="container">
<header class="mb-5 pb-4">
<p class="font-weight-bold text-uppercase letter-spacing-3 colors">Have been training my skills.</p>
<h2 class="text-uppercase lined">Education</h2>
</header>
<!-- Timeline -->
<ul class="timeline">
<!-- Timeline item-->
<li class="timeline-item ml-3 pb-4">
<div class="timeline-arrow"></div>
<div class="row no-gutter">
<div class="col-lg-5 mb-4 mb-lg-0">
<p class="font-weight-bold mb-2 text-small colors">2018 - 2021</p>
<h2 class="h5 mb-0 text-uppercase">B.Sc. IT</h2>
<p class="text-small mb-0">Auro University</p><span class="small text-muted">Surat, Gujarat</span>
</div>
<div class="col-lg-7">
<p class="text-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p>
</div>
</div>
</li>
<!-- Timeline item-->
<li class="timeline-item ml-3 pb-4">
<div class="timeline-arrow"></div>
<div class="row no-gutter">
<div class="col-lg-5 mb-4 mb-lg-0">
<p class="font-weight-bold mb-2 text-small colors">2018 - Ongoing</p>
<h2 class="h5 mb-0 text-uppercase">Web Development.</h2>
<p class="text-small mb-0">Self-Learning</p><span class="small text-muted">Surat, Gujarat</span>
</div>
<div class="col-lg-7">
<p class="text-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p>
</div>
</div>
</li>
<!-- Timeline item-->
<li class="timeline-item ml-3 pb-4">
<div class="timeline-arrow"></div>
<div class="row no-gutter">
<div class="col-lg-5 mb-4 mb-lg-0">
<p class="font-weight-bold mb-2 text-small colors">2016 - Ongoing</p>
<h2 class="h5 mb-0 text-uppercase">graphic designing.</h2>
<p class="text-small mb-0">Self-Learning</p><span class="small text-muted">Surat, Gujarat</span>
</div>
<div class="col-lg-7">
<p class="text-muted">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea.</p>
</div>
</div>
</li>
</ul>
</div>
</section>
<!-- Experience Section-->
<section id="portfolio">
<div class="container">
<header class="mb-5 pb-4">
<p class="font-weight-bold text-uppercase letter-spacing-3 colors">Knowledge gained.</p>
<h2 class="text-uppercase lined">Portfolio</h2>
</header>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 my-4">
<div class="card">
<img src="img/card.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">FountainCloud</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn bg-colors text-white">View Project</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 my-4">
<div class="card">
<img src="img/card.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Ecommerce</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn bg-colors text-white">View Project</a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 my-4">
<div class="card">
<img src="img/card.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">AddChat</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn bg-colors text-white">View Project</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Education Section -->
<section class="bg-light" id="contact">
<div class="container">
<header class="mb-5 pb-4">
<p class="font-weight-bold text-uppercase letter-spacing-3 colors">Get in touch.</p>
<h2 class="text-uppercase lined">Contact</h2>
</header>
<div class="row">
<div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
<div class="px-4 py-5 text-center contact-item shadow-sm"><i class="fas fa-map-marker-alt fa-2x mb-4"></i>
<h4 class="contact-item-title h5 text-uppercase">Location</h4>
<p class="text-small mb-0">Surat, Gujarat</p>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-lg-0">
<div class="px-4 py-5 text-center contact-item shadow-sm"><i class="fas fa-mobile fa-2x mb-4"></i>
<h4 class="contact-item-title h5 text-uppercase">Phone</h4>
<p class="text-small mb-0">+91 6354983999</p>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-lg-0"><a class="px-4 py-5 text-center contact-item shadow-sm d-block reset-anchor" href="www.example.com"><i class="fas fa-globe-americas fa-2x mb-4"></i>
<h4 class="contact-item-title h5 text-uppercase">Website</h4>
<p class="text-small mb-0">www.rahulthakkar.com</p></a></div>
<div class="col-lg-3 col-md-6 mb-4 mb-lg-0"><a class="px-4 py-5 text-center contact-item shadow-sm d-block reset-anchor" href="mailto:[email protected]"><i class="fas fa-envelope fa-2x mb-4"></i>
<h4 class="contact-item-title h5 text-uppercase">Email</h4>
<p class="text-small mb-0">[email protected]</p></a></div>
</div>
</div>
</section>
<!-- Footer-->
<footer>
<div class="container text-center section-padding-y">
<div class="row px-4">
<div class="col-lg-7 mx-auto">
<h2 class="text-uppercase mb-0">Rahul Thakkar </h2>
<h6 class="text-uppercase mb-0 letter-spacing-3 colors">Front-End Web Developer</h6>
<p class="text-muted my-4">Have some questions about Web Design? Let's talk about how we can help you.</p>
<ul class="list-inline mb-0">
<li class="list-inline-item"><a class="social-link" href="#"><i class="fab fa-facebook-f"></i></a></li>
<li class="list-inline-item"><a class="social-link" href="https://twitter.com/10401_irahul_"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a class="social-link" href="https://www.linkedin.com/in/rahul-thakkar-642488163"><i class="fab fa-linkedin"></i></a></li>
<li class="list-inline-item"><a class="social-link" href="https://instagram.com/thisisrahulthakkar/"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="copyrights px-4">
<div class="container py-4 border-top text-center">
<p class="mb-0 text-muted py-2">© 2020 Copyright 💙 Rahul Thakkar. All rights reserved.</p>
</div>
</div>
</footer>
<!-- JavaScript files-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="js/front.js"></script>
</body>
</html>