-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
248 lines (231 loc) · 18 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Fondamento|La+Belle+Aurore|Palanquin" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Hotjar Tracking Code for https://jantonioavalos.github.io/kahlilgibran/ -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:533363,hjsv:5};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
</script>
</head>
<body>
<div class="container">
<!-- BIO -->
<div class="row" id="bio">
<div class="col-sm-6">
<img class="bio-pic" src="http://gibrankgibran.org/esp/ArchivoFotos/all/32682.jpg" alt="Old Picture of Kahlil Gibran sit and holding a book" />
</div>
<div class="col-sm-6 align-self-center">
<div class="row">
<div class="col">
<h1 class="bio-name text-top">Kahlil Gibran</h1>
<h2 class="bio-occupation"> Poet · Painter · Philosopher</h2>
</div>
</div>
<div class="row text-top">
<div class="col">
<h3 class="fa fa-heartbeat" aria-hidden="true"> January 6, 1883
</br>Besharri, Lebanon</h3>
</div>
<div class="col">
<h3 class="fa fa-heart-o" aria-hidden="true"> April 10, 1931
</br>NY City, USA.</h3>
</div>
</div>
<div class="row text-top">
<div class="col">
<h3 class="fa fa-flag" aria-hidden="true"> Syrian Nationalism</h3>
</div>
<div class="col">
<h3 class="fa fa-plus" aria-hidden="true"> Multifaith</h3>
</div>
</div>
<div class="row">
<div class="col-10 text-top">
<blockquote class="copytext" cite "http://www.bbc.com/news/magazine-17997163">"The Beatles, John F Kennedy and Indira Gandhi are among those who have been influenced by its words" <a href="http://www.bbc.com/news/magazine-17997163" target="_blank">-BBC News</a></blockquote>
</div>
</div>
</div>
</div>
<!-- QUOTE -->
<div class="row justify-content-center text-top" id="quote">
<div class="col-10">
<blockquote class="any">You give but little when you give of your possessions.
It is when you give of yourself that you truly give.
<br><span class="cited">— On giving, The Prophet.</span>
<br><a href="https://twitter.com/share" class="twitter-share-button" data-text="— "You give but little when you give of your possessions.
It is when you give of yourself that you truly give"" data-url="http://bit.ly/2rjdfO1" data-hashtags="KahlilGibran, OnGiving" data-dnt="true" data-show-count="false"></a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></blockquote>
</div>
</div>
<!-- LIFE -->
<div class="row text-top" id="life">
<div class="col">
<h2 class="subtitle">The road to fame...</h2>
<blockquote class="copytext text-top" cite="http://gibrankgibran.org/eng/gibran-kahlil-gibran/notas-biograficas/">Born to Kahlil Saad Gibran and Kamileh Rahme, Gibran Kahlil Gibran was raised, along with his sisters Marianna and Sultana and his half-brother Boutros, in the bosom of a Lebanese Maronite Christian family. </br><strong>Around 1891,</strong> Kahlil
Gibran’s father was arrested on charges of improperly administering the funds he collected. Following his release, and in the wake of economic crises befalling the family, Kamileh decided to emigrate with her children to America. </br><strong>In 1895</strong> the family arrived in New York before continuing on to Boston. There, Kamileh and her children supported themselves with a small grocery store. Gibran’s teacher, Florence Pierce, placed the young man under the tutelage of the sybarite and photographer
Fred Holland Day, who would become a dear friend and one of the greatest influences on the life of the future artist. Day introduced Gibran into Boston intellectual and bohemian circles. It was also owing to Day that Gibran became acquainted
with the art of William Blake (1957-1827) and Eugène Carrière (1849-1906), who would later have an impact on his symbolist works. </br><strong>Around 1898,</strong> Gibran returned to Lebanon and studied under Youssef Haddad, his most important
teacher. He returned to Boston on the death of Sultana, which was followed by the illnesses and subsequent deaths of Boutros and Kamileh. </br> Through the mediation of Fred Holland Day, Gibran exhibited his first paintings in 1904, at the Harcourt
Studios in Boston, where he met Mary Haskell, who would become his great friend, patroness, and companion for the rest of his life. The following year he published, in Arabic, his first book: <em>Music</em>. <br><a href="http://gibrankgibran.org/eng/gibran-kahlil-gibran/notas-biograficas/"
target="_blank">Discover how <em>The Prophet<em><small>(1923)</small> was created, in the full article...</a></blockquote>
</div>
</div>
<!-- QUOTE -->
<div class="row justify-content-center text-top" id="quote">
<div class="col-10">
<blockquote class="any">Your children are not your children. They are the sons and daughters of Life's longing for itself. They came through you but not from you and though they are with you yet they belong not to you. <br><span class="cited">— On children, The Prophet.</span>
<br><a href="https://twitter.com/share" class="twitter-share-button" data-text="— "Your children are not your children. They are the sons and daughters of Life's longing for itself. They came through you but not from you and though they are with you yet they belong not to you"" data-url="http://bit.ly/2rjdfO1" data-hashtags="KahlilGibran, OnChildren" data-dnt="true" data-show-count="false"></a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></blockquote>
</div>
</div>
<!-- BOOKS -->
<div class="row text-top" id="book">
<div class="col">
<h2 class="subtitle">Bestseller Books...</h2>
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="https://images-na.ssl-images-amazon.com/images/I/41DcGMGX2SL._SX330_BO1,204,203,200_.jpg" alt="Card image cap">
<div class="card-block">
<p class="card-text">In Broken Wings <small>(1912)</small>, Kahlil Gibran uncovers the glory and pain of young love. This loosely autobiographical story is in the tradition of Romeo and Juliet, but with Gibran's characteristic lush Oriental settings and images.
<br>A young Kahlil is introduced to Faris Karama, a wealthy and good-hearted merchant of Beirut, and his daughter, Salma. Kahlil and Salma are deeply attracted to on another and continue to meet regularly, with the blessings of Faris Karama.
But a powerful priest, Father Ghalib, in order to gain access to the Karama fortune, demands that his son be allowed to marry Salma.</p>
</div>
<div class="card-footer">
<a href="http://newthoughtlibrary.com/gibranKhalil/brokenWings/" target="_blank"><i class="fa fa-book text-muted" aria-hidden="true"> Read</i></a>
<a href="https://www.amazon.com/dp/188399103X/ref=cm_sw_r_cp_dp_T1_qwmpzbNZTQMWH" target="_blank"><i class="fa fa-amazon text-muted" aria-hidden="true"> Buy</i></a>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://1year100books.files.wordpress.com/2011/08/the-madman1.jpg" alt="Card image cap">
<div class="card-block">
<p class="card-text">The Madman <small>(1918)</small>, is thought-provoking and inspiring, the book is a collection of memorable, life-affirming parables and poems, many of them casting an ironic light on the beliefs, aspirations, and vanities of humankind —
and many reminiscent of the work of Tagore and Nietzsche, both of whom were strong influences on Gibran. <br>Among the 35 poems and parables in this volume are "How I Became a Madman," "The Two Hermits," "The Wise Dog," "The Good God and
the Evil God," "Night and the Madman," "The Three Ants," "When My Sorrow Was Born," "And When My Joy Was Born," and many more.
</div>
<div class="card-footer">
<a href="http://newthoughtlibrary.com/gibranKhalil/madmanParables/" target="_blank"><i class="fa fa-book text-muted" aria-hidden="true"> Read</i></a>
<a href="https://www.amazon.com/dp/0486419118/ref=cm_sw_r_cp_dp_T1_TTmpzbQM89HJR" target="_blank"><i class="fa fa-amazon text-muted" aria-hidden="true"> Buy</i></a>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://images-na.ssl-images-amazon.com/images/I/41pvwwHajfL._SX331_BO1,204,203,200_.jpg" alt="Card image cap">
<div class="card-block">
<p class="card-text">The Prophet <small>(1923)</small>, is one of the most beloved classics of our time. <br>Is a collection of poetic essays that are philosophical, spiritual, and, above all, inspirational. Gibran’s musings are divided into twenty-eight chapters
covering such sprawling topics as love, marriage, children, giving, eating and drinking, work, joy and sorrow, housing, clothes, buying and selling, crime and punishment, laws, freedom, reason and passion, pain, self-knowledge, teaching,
friendship, talking, time, good and evil, prayer, pleasure, beauty, religion, and death.
</div>
<div class="card-footer">
<a href="http://newthoughtlibrary.com/gibranKhalil/theProphet/" target="_blank"><i class="fa fa-book text-muted" aria-hidden="true"> Read</i></a>
<a href="https://www.amazon.com/dp/0394404289/ref=cm_sw_r_cp_dp_T1_HZmpzbTZTJ2G9" target="_blank"><i class="fa fa-amazon text-muted" aria-hidden="true"> Buy</i></a>
</div>
</div>
</div>
</div>
</div>
<!-- QUOTE -->
<div class="row justify-content-center text-top" id="quote">
<div class="col-10">
<blockquote class="any">When you part from your friend, you grieve not; For that which you love most in him may be clearer in his absence, as the mountain to the climber is clearer from the plain. <br><span class="cited">— On friendship, The Prophet.</span>
<br><a href="https://twitter.com/share" class="twitter-share-button" data-text="— "When you part from your friend, you grieve not; For that which you love most in him may be clearer in his absence, as the mountain to the climber is clearer from the plain."" data-url="http://bit.ly/2rjdfO1" data-hashtags="KahlilGibran, OnFriendship" data-dnt="true" data-show-count="false"></a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></blockquote>
</div>
</div>
<!-- PAINT -->
<div class="row text-top" id="paint">
<div class="col">
<h2 class="subtitle">Recognized paints...</h2>
<div id="carouselExampleIndicators" class="carousel slide text-top" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="5"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://gibrankgibran.org/ArchivoFotos/all/32690.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://gibrankgibran.org/ArchivoFotos/all/32785.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://gibrankgibran.org/ArchivoFotos/all/32621.jpg" alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://gibrankgibran.org/ArchivoFotos/all/32794.jpg" alt="Fourth slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://gibrankgibran.org/ArchivoFotos/all/32781.jpg" alt="Fifth slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://gibrankgibran.org/ArchivoFotos/all/32801.jpg" alt="Sixth slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
<!-- QUOTE -->
<div class="row justify-content-center text-top" id="quote">
<div class="col-10">
<blockquote class="any">For what is evil but good tortured by its own hunger and thirst?<br><span class="cited">— On good and evil, The Prophet.</span>
<br><a href="https://twitter.com/share" class="twitter-share-button" data-text="— "or what is evil but good tortured by its own hunger and thirst?"" data-url="http://bit.ly/2rjdfO1" data-hashtags="KahlilGibran, OnGoodAndEvil" data-dnt="true" data-show-count="false"></a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></blockquote>
</div>
</div>
<!-- LEGACY -->
<div class="row text-top" id="legacy">
<div class="col">
<h2 class="subtitle">Still inspiring...</h2>
<p class="copytext text-top">The Prophet, by celebrated Lebanese author Kahlil Gibran, is among the most popular volumes of poetry ever written, selling over 100 million copies in forty languages since its publication in 1923. Gibran's timeless verses have been given enchanting
new form in this painterly cinematic adventure about freedom and the power of human expression. </p>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/y9SzAFcFhYY" frameborder="0" allowfullscreen></iframe>
</div>
<blockquote class="copytext text-top" cite="https://www.rottentomatoes.com/m/the_prophet_2014/">This breathtaking animated feature, produced and spearheaded by Salma Hayek, was an official selection at Cannes and made its North American premiere at Toronto International Film Festival. Written and directed by Roger Allers (The Lion King),
the film intersperses Gibran's elegant poetry within stunning animated sequences by filmmakers Tomm Moore (The Secret of Kells, Song of the Sea), Nina Paley (Sita Sings the Blues), Bill Plympton (Guide Dog), and a host of award-winning animators
from around the world. <a href="https://www.rottentomatoes.com/m/the_prophet_2014/" target="_blank"><i class="fa fa-comments-o" aria-hidden="true"> Read Critics</i></a></blockquote>
</div>
</div>
<!-- QUOTE -->
<div class="row justify-content-center text-top" id="quote">
<div class="col-10">
<blockquote class="any">Work is love made visible.
<br><span class="cited">— On work, The Prophet.</span>
<br><a href="https://twitter.com/share" class="twitter-share-button" data-text="— "Work is love made visible"" data-url="http://bit.ly/2rjdfO1" data-hashtags="KahlilGibran" data-dnt="true" data-show-count="false"></a><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></blockquote>
</div>
</div>
<!--CONTAINERS' END-->
</div>
<!-- FOOTER -->
<footer class="footer">
<div class="container-fluid">
<span>
<i class="fa fa-code" aria-hidden="true"></i> with <i class="fa fa-coffee" aria-hidden="true"></i> and <i class="fa fa-heart" aria-hidden="true"></i> by <a href="https://github.com/jantonioavalos" target="_blank"><i class="fa fa-github" aria-hidden="true"></i>/jantonioavalos</a>
</span>
</div>
</footer>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>