-
Notifications
You must be signed in to change notification settings - Fork 0
/
photos.html
153 lines (153 loc) · 7.84 KB
/
photos.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
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="bilal karim, beekay, product designer, product manager, ui designer, ux designer, geospatial technologies, myheat, rubikloud, sportsity, pagerduty, flyvu, money after graduation, rubikloud, startups, calgary, toronto, visualog, data visualization, analytics, toronto, instagram, timelapses of toronto, toronto timelapse, streets of toronto, timelapses, shot on iphone, timelapses of calgary, calgary timelapse, slow motion videos using iphone, calgary and toronto stock photography">
<meta name="description" content="Product designer building user experiences through the intersection of design + code.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="google-site-verification" content="kfgCIKi_3OOGSEwJZPRX_MVAOAk1Yl-Ri63pAv9rqek">
<meta name="theme-color" content="#101010">
<meta property="og:title" content="Bilal Karim – Designer • Coder • Maker">
<meta property="og:type" content="website">
<meta property="og:url" content="http://bilalkarim.com">
<meta property="og:image" content="http://bilalkarim.com/img/website-social.png">
<meta property="og:description" content="Product designer building user experiences through the intersection of design + code.">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@beekay__">
<meta name="twitter:creator" content="@beekay__">
<meta name="twitter:title" content="Bilal Karim – Designer • Coder • Maker">
<meta name="twitter:description" content="Product designer building user experiences through the intersection of design + code.">
<title>Photos – Unsplash & Instagram Posts by Bilal Karim</title>
<link rel="stylesheet" href="css/style.min.css" type="text/css">
<link rel="icon" href="favicon.ico">
<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon.png">
</head>
<body>
<!--HEADER-->
<header>
<div class="flex space-between align-vertically wrapper mobile-wrap">
<a href="/">
<div class="logo flex wrap align-vertically mobile-center">
<div class="name">
<h1><strong>Bilal Karim</strong></h1>
<h2></h2>
</div>
</div>
</a>
<div class="mobile-menu">
<button class="mdi mdi-menu"></button>
</div>
<nav class="hide-on-mobile">
<a href="/">Work</a>
<!--<a href="/#articles">Articles</a>-->
<a href="photos">Photos</a>
<a href="videos">Videos</a>
<!--<a href="/#about">About</a>-->
</nav>
</div>
</header>
<!--HERO-->
<div class="content animated fadeInUp">
<div class="hero">
<div class="flex wrap align-vertically wrapper">
<h1>I take photos and share them on <a href="https://instagram.com/beekay">Instagram</a>. Some of them are also available to use for free on <a href="https://unsplash.com/@beekay">Unsplash</a>, with over 2 million views.</h1>
</div>
</div>
<!--DAILY PHOTO FROM UNSPLASH-->
<div class="section wrapper">
<div class="line bottom-line-margin flex align-vertically">
<h1><strong>Photos from Unsplash</strong></h1>
</div>
<div id="unsplash-feed" class="flex wrap space-between">
<div class="daily">
<a href="https://unsplash.com/@beekay">
<img src="https://source.unsplash.com/user/beekay/daily/" alt="Daily Photo from Unsplash by @beekay">
</a>
</div>
<div class="feed flex full wrap space-between">
<a href="https://unsplash.com/photos/mZsYmGTOABM">
<img src="https://source.unsplash.com/mZsYmGTOABM/" alt="Vintage and minimal bicycle by @beekay on Unsplash">
</a>
<a href="https://unsplash.com/photos/jxC1bimS2Lw">
<img src="https://source.unsplash.com/jxC1bimS2Lw/" alt="Crew Collective & Cafe by @beekay on Unsplash">
</a>
<a href="https://unsplash.com/photos/D2jCvTXSAHk/">
<img src="https://source.unsplash.com/D2jCvTXSAHk/" alt="Blue Porsche by @beekay on Unsplash">
</a>
<a href="https://unsplash.com/photos/oa46NUS8H-o/">
<img src="https://source.unsplash.com/oa46NUS8H-o/" alt="Calgary Public Library by @beekay on Unsplash">
</a>
</div>
</div>
</div>
<!--INSTAGRAM FEED
<div class="section wrapper">
<div class="line bottom-line-margin flex align-vertically">
<h1><strong>Recent posts from Instagram</strong></h1>
</div>
</div>
<div class="content wrapper">
<div id="instafeed" class="flex"></div>
</div>
</div>-->
<!--FOOTER-->
<footer>
<div class="flex space-between align-vertically wrapper mobile-wrap reverse-on-mobile">
<div class="copyright">
<p>Copyright © 2023 Bilal Karim</p>
</div>
<div class="social">
<a class="icon-email" href="mailto:[email protected]"></a>
<a class="icon-linkedin" href="https://linkedin.com/in/bilalkarim"></a>
<a class="icon-twitter" href="https://twitter.com/beekay__"></a>
<a class="icon-github-circled" href="https://github.com/bilal-karim"></a>
<a class="icon-instagram" href="https://instagram.com/beekay"></a>
</div>
</div>
</footer>
<!--SCRIPTS-->
<script src="js/site.min.js"></script>
<script src="https://ig.instant-tokens.com/users/5eb13777-6315-4fa6-a2a6-7c1ba778e7f1/instagram/17841400854820004/token.js?userSecret=zuwhswo0hmrju7izr22nu"></script>
<script src="js/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
accessToken: InstagramToken,
limit: 27,
template: '<a href="{{link}}"><img src="{{image}}" alt="{{caption}}"/></a>'
});
feed.run();
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-110965294-3', 'bilalkarim.com');
ga('require', 'linkid', 'linkid.js');
ga('send', 'pageview');
</script>
<script src="js/outbound.js"> </script>
<script>
window['_fs_debug'] = false;
window['_fs_host'] = 'fullstory.com';
window['_fs_script'] = 'edge.fullstory.com/s/fs.js';
window['_fs_org'] = '98Y1S';
window['_fs_namespace'] = 'FS';
(function(m,n,e,t,l,o,g,y){
if (e in m) {if(m.console && m.console.log) { m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].');} return;}
g=m[e]=function(a,b,s){g.q?g.q.push([a,b,s]):g._api(a,b,s);};g.q=[];
o=n.createElement(t);o.async=1;o.crossOrigin='anonymous';o.src='https://'+_fs_script;
y=n.getElementsByTagName(t)[0];y.parentNode.insertBefore(o,y);
g.identify=function(i,v,s){g(l,{uid:i},s);if(v)g(l,v,s)};g.setUserVars=function(v,s){g(l,v,s)};g.event=function(i,v,s){g('event',{n:i,p:v},s)};
g.shutdown=function(){g("rec",!1)};g.restart=function(){g("rec",!0)};
g.log = function(a,b){g("log",[a,b])};
g.consent=function(a){g("consent",!arguments.length||a)};
g.identifyAccount=function(i,v){o='account';v=v||{};v.acctId=i;g(o,v)};
g.clearUserCookie=function(){};
g._w={};y='XMLHttpRequest';g._w[y]=m[y];y='fetch';g._w[y]=m[y];
if(m[y])m[y]=function(){return g._w[y].apply(this,arguments)};
})(window,document,window['_fs_namespace'],'script','user');
</script>
<!-- “The past has faded from memory. The present is where I live. I travel on. Who knows where I’m going.” -->
</body>
</html>