-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
219 lines (216 loc) · 16.1 KB
/
index.html
File metadata and controls
219 lines (216 loc) · 16.1 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mabin xavier</title>
<link rel="icon" type="image/x-icon" href="./assets/mabinxavier-softcopy.jpg">
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<header class="bg-black">
<div class="row text-white">
<div class="col-md-6 col-9 px-5 py-3">
<h2>Mabin xavier</h2>
</div>
<div class="col-md-6 col-3 my-auto text-end">
<nav class="navbar navbar-expand-md">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon bg-light rounded"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active text-white" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">My Services</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">My Skills</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Contact me</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</header>
<section class=" profile bg-dark-subtle pt-4">
<div class="container pb-4">
<div class="row align-items-center">
<div class="col-md-6 col-12 text-center">
<img class="rounded-circle" src="./assets/mabinxavier-softcopy.jpg" width="300px" height="350px" alt="">
</div>
<div class="col-md-6 col-12 text-center">
<h4>Freelance web developer</h4>
<h5>Full stack developer(MERN)</h5>
<p>❝ <span class="text-primary fw-bold">The best view comes after the hardest climb.</span> ❞
-Mabin xavier</p>
</div>
</div>
</div>
</section>
<hr>
<section class="services bg-success-subtle pt-4 pb-4">
<div class="container">
<h2 class="text-center">Services</h2>
<div class="row text-center">
<div class="col-12 col-md-4 mt-4">
<div class="card" style="height: 25em;">
<img class="card-img-top" src="./assets/webdesigning.jpeg" alt="Card image cap" style="height: 14em;">
<div class="card-body overflow-hidden">
<h5 class="card-title">Web designing</h5>
<p class="card-text">Web designing involves planning, designing wireframes, creating visual mockups, integrating content, and ensuring responsiveness across devices, often using tools like Figma or website builders, to create functional, beautiful, and accessible sites.</p>
</div>
</div>
</div>
<div class="col-12 col-md-4 mt-4">
<div class="card" style="height: 25em;">
<img class="card-img-top" src="./assets/webdevelopment.jpeg" alt="Card image cap"style="height: 14em;">
<div class="card-body overflow-hidden">
<h5 class="card-title">Web development</h5>
<p class="card-text">Web development involves creating everything from simple static pages to complex e-commerce sites and social networks. Key tasks include developing user interfaces, managing databases, ensuring security, and optimizing for performance.</p>
</div>
</div>
</div>
<div class="col-12 col-md-4 mt-4">
<div class="card" style="height: 25em;">
<img class="card-img-top" src="./assets/modernization.png" alt="Card image cap" style="height: 14em;">
<div class="card-body overflow-hidden">
<h5 class="card-title">Web modernization</h5>
<p class="card-text">Web modernization is updating old websites and web applications with current technologies, design, and security to improve performance, user experience (UX), mobile accessibility, scalability, and efficiency.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<hr>
<section class="skills bg-secondary-subtle pt-4 pb-4">
<div class="container">
<h2 class="text-center">Skills</h2>
<div class="row text-center">
<div class="col-md-3 col-12 col-sm-6">
<div class="card pt-2 mt-2" style="height: 25em;">
<img class="card-img-top" src="./assets/html.png" alt="Card image cap" style="height: 10em;">
<div class="card-body overflow-hidden">
<h5 class="card-title">Html</h5>
<p class="card-text">HTML stands for Hyper Text Markup Language.HTML is the standard markup language for Web pages.HTML elements are the building blocks of HTML pages.HTML elements are represented by <> tags.</p>
</div>
</div>
</div>
<div class="col-md-3 col-12 col-sm-6">
<div class="card pt-2 mt-2" style="height: 25em;">
<img class="card-img-top" src="./assets/Bootstrap.png" alt="Card image cap" style="height: 10em;">
<div class="card-body overflow-hidden">
<h5 class="card-title">Bootstrap</h5>
<p class="card-text">Bootstrap is a widely-used, free, open-source front-end framework that provides pre-written HTML, CSS, and JavaScript to help developers quickly build responsive, mobile-first websites and web applications.</p>
</div>
</div>
</div>
<div class="col-md-3 col-12 col-sm-6">
<div class="card pt-2 mt-2" style="height: 25em;">
<img class="card-img-top" src="./assets/javascript.png" alt="Card image cap" style="height: 10em;">
<div class="card-body overflow-hidden">
<h5 class="card-title">JavaScript</h5>
<p class="card-text">JavaScript (JS) is a high-level, interpreted programming language primarily known for enabling interactive and dynamic content on web pages. It is one of the three core technologies of the World Wide Web.</p>
</div>
</div>
</div>
<div class="col-md-3 col-12 col-sm-6">
<div class="card pt-2 mt-2" style="height: 25em;">
<img class="card-img-top" src="./assets/mongodb.png" alt="Card image cap" style="height: 10em;">
<div class="card-body overflow-hidden">
<h5 class="card-title">MongoDB</h5>
<p class="card-text">MongoDB is a popular NoSQL document database that stores data in flexible, JSON-like documents (BSON), making it ideal for modern applications needing scalability, flexibility, and fast performance without rigid schemas.</p>
</div>
</div>
</div>
<div class="col-md-3 col-12 col-sm-6">
<div class="card pt-2 mt-2" style="height: 25em;">
<img class="card-img-top" src="./assets/expressjs.webp" alt="Card image cap" style="height: 10em;">
<div class="card-body overflow-hidden">
<h5 class="card-title">Express.js</h5>
<p class="card-text">Express, is a minimalist and flexible Node.js web application framework. It provides a robust set of features for building web and mobile applications and APIs.</p>
</div>
</div>
</div>
<div class="col-md-3 col-12 col-sm-6">
<div class="card pt-2 mt-2" style="height: 25em;">
<img class="card-img-top" src="./assets/reactjs.png" alt="Card image cap" style="height: 10em;">
<div class="card-body overflow-hidden">
<h5 class="card-title">React.js</h5>
<p class="card-text">React is a free and open-source JavaScript library for building user interfaces (UIs). It is maintained by Meta (formerly Facebook) and a large community of individual developers and companies.</p>
</div>
</div>
</div>
<div class="col-md-3 col-12 col-sm-6">
<div class="card pt-2 mt-2" style="height: 25em;">
<img class="card-img-top" src="./assets/c.jpeg" alt="Card image cap" style="height: 10em;">
<div class="card-body overflow-hidden">
<h5 class="card-title">C</h5>
<p class="card-text">C is a foundational, high-performance, general-purpose programming language developed by Dennis Ritchie in the 1970s, known for its speed, efficiency, and low-level memory access, making it ideal for operating systems.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<hr>
<section class="contact m-4">
<div class="container">
<h1 class="text-center">Contact me</h1>
<form>
<div class="form-row">
<div class="form-group col-md-12 mt-2">
<input type="text" class="form-control" id="inputEmail4" placeholder="Name">
</div>
<div class="form-group col-md-12 mt-2">
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-12 mt-2">
<input type="tel" class="form-control" id="inputPassword4" placeholder="WhatsApp Number">
</div>
<div class=" form-group col-md-12 text-center mt-2 d-grid">
<button type="submit" class="btn btn-primary">Contact Now!</button>
</div>
</div>
</form>
</div>
</section>
<footer class="bg-black">
<div class="container text-white">
<div class="row py-4">
<div class="col-md-6 text-center py-2">
<p>©All rights reserved 2025</p>
</div>
<div class="col-md-6 text-center py-2">
<a href="" class="text-white" style="text-decoration: none;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-facebook mx-4" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951"/>
</svg>
</a>
<a href="" class="text-white" style="text-decoration: none;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-instagram mx-4" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"/>
</svg>
</a>
<a href="" class="text-white" style="text-decoration: none;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-linkedin mx-4" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/>
</svg>
</a>
</div>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
</html>