-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (142 loc) · 7.59 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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Brian Sam Thomas | Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/icon?family=Open+Sans|Material+Icons|Nunito" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
</style>
</head>
<body>
<section class="wrapper" id="page_content">
<!-- Navbar -->
<div class="navbar-fixed">
<nav class="black z-depth-4">
<div class="nav-wrapper">
<a href="https://brainchild95.github.io" class="brand-logo right">BR<span>i</span>AN</a>
<a href="#" data-target="slide-out" class="show-on-medium-and-up sidenav-trigger"><i class="fa fa-bars"></i></a>
</div>
</nav>
</div>
<ul id="slide-out" class="sidenav">
<li class="card transparent z-depth-2">
<div class="card-content center-align">
<h5>Brian Sam Thomas</h5>
<img src="brian.jpg" height="150px" width="150px" class="responsive-img circle">
<h6>A Polyglot Programmer,<br>Full MEAN Stack Web Developer, Machine Learning Enthusiast, and a Musician.</h6>
<div class="connect">
<a href="tel:+91-7507806915"><i class="fa fa-phone"></i></a>
<a href="mailto:[email protected]"> <i class="fa fa-envelope"></i></a>
<a href="https://github.com/BRAiNCHiLD95/"> <i class="fa fa-github"></i></a>
<a href="https://www.linkedin.com/in/brian-sam-thomas-b48259121/"> <i class="fa fa-linkedin"></i></a>
</div>
</div>
</li>
<div class="divider"></div>
<li id="myworks" class="active">
<a href="https://brainchild95.github.io/WEBDEVProjectsByBKiD/index.html"><i class="fa fa-folder-open-o"></i>My Works</a>
</li>
</ul>
<div id="home">
<div id="home-carousel" class="carousel carousel-slider center">
<div class="carousel-item white-text" href="#one!">
<div class="row">
<div class="col s12">
<h2 class="flow-text center-align">Project: B Express</h2>
<div class="card black white-text horizontal">
<div class="card-image">
<img class="responsive-img" src="1. Responsive_HTML5-CSS3/BExpress.jpg">
</div>
<div class="card-stacked">
<div class="card-content">
<p class="flow-text">A Fully Responsive WebPage created using only HTML5 and CSS3 with media rules for 3 breakpoints (320px, 768px and 992px). Mobile-First Design.</p>
<br><br>
<a href="https://brainchild95.github.io/WEBDEVProjectsByBKiD/1.%20Responsive_HTML5-CSS3/index.html" class="pulse green accent-2 btn-large">DEMO</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item white-text" href="#two!">
<div class="row">
<div class="col s12">
<h2 class="flow-text center-align">Project: Made Design</h2>
<div class="card black white-text horizontal">
<div class="card-image">
<img class="responsive-img" src="2. Responsive_HTML5-CSS3-Bootstrap4-jQuery\MadeDesign.jpg">
</div>
<div class="card-stacked">
<div class="card-content">
<p class="flow-text">A Fully Responsive WebPage created using HTML5, Bootstrap, alongwith custom CSS animations and rules. Also added some jQuery (isotope plugin) for fun.</p>
<br>
<a href="https://brainchild95.github.io/WEBDEVProjectsByBKiD/2.%20Responsive_HTML5-CSS3-Bootstrap4-jQuery/index.html" class="pulse green accent-2 btn-large">DEMO</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item white-text" href="#three!">
<div class="row">
<div class="col s12">
<h2 class="flow-text center-align">Project: Stripe</h2>
<div class="card black white-text horizontal">
<div class="card-image">
<img class="responsive-img" src="3. Responsive_PSD-To-Bootstrap4_Stripe\Stripe.png">
</div>
<div class="card-stacked">
<div class="card-content">
<p class="flow-text">A Fully Responsive WebPage created Based on the given PSD, using HTML5, Bootstrap, and some custom css and jQuery magic!.</p>
<br><br>
<a href="https://brainchild95.github.io/WEBDEVProjectsByBKiD/3.%20Responsive_PSD-To-Bootstrap4_Stripe/main.html" class="pulse green accent-2 btn-large">DEMO</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item white-text" href="#four!">
<div class="row">
<div class="col s12">
<h2 class="flow-text center-align">Project: Arton Tools</h2>
<div class="card black white-text horizontal">
<div class="card-image">
<img class="responsive-img" src="4. Complete-BackEnd-FrontEnd-PHP-MySQL-Responsive_HTML_CSS3_Bootstrap4_ArtonTools\ArtonTools.png">
</div>
<div class="card-stacked">
<div class="card-content">
<p class="flow-text">Based on ArtonCapital's arton tools section. A revamp of 3 of those tools using PHP, MySQL, AJAX. 4th tool was completed using <a href="https://www.markuslerner.com/#travelscope">Travelscope</a> by Markus Lerner. A completely responsive site made with Bootstrap4, HTML5, CSS3, and jQuery3.1 </p>
<br><br>
<a href="https://brainchild95.github.io/WEBDEVProjectsByBKiD/1.%20Responsive_HTML5-CSS3/index.html" class="pulse disabled green accent-2 btn-large">DEMO</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
// M.AutoInit();
$('#home-carousel').carousel( {
fullWidth: true,
indicators: true,
duration: 200
});
setInterval(function() {
$('#home-carousel').carousel('next');
}, 3500);
$('.sidenav').sidenav({'draggable': true});
});
</script>
</body>
</html>