css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

                  <div id="tribute" class="container">
      <div class="row">

        <div id="right" class="col-xs-12 col-md-4">
          <img class="img-responsive" src="https://dl.dropboxusercontent.com/s/5x2kbuent4hynrd/Tareque_Masud.JPG?dl=0">
          <h1>TAREQUE &nbsp; MASUD</h1>
          <h4>A Noted Filmmaker of Bangladesh</h4>

        <div id="left" class="col-md-8 col-xs-12">
          <div class="menu">
            <ul class="nav nav-tabs">
            <li role="presentation"><a class="hvr-bubble-bottom" href="#bio">Bio</a></li>
            <li role="presentation"><a href="#films">Films</a></li>
            <li role="presentation"><a href="#awards">Awards</a></li>
            <li role="presentation"><a href="#more">More</a></li>
          <div id="bio">
            <h3>Early Life and Education</h3>
            <p>Tareque Masud was born on 6 December 1956 in Nurpur Village under Bhanga upazila of Faridpur district. He received his early education from madrasah. He studied in the madrassa system for eight years, till the upheaval brought about by the 9-month Liberation War interrupted his education. After the independence, he switched over to general education, completing his HSC from Notre Dame College and obtained BA (Hons) and MA in the Department of History from the university of dhaka. His involvement in politics and studies of art, culture and philosophy stepped up his intellectual level during his university life.</p>
            <h3>Career As a Filmmaker</h3>
            <p>Masud's first film was the documentary Adam Surat (Inner Strength) on the Bangladeshi painter SM Sultan which he completed in 1989. Tareque Masud had earned a massive fame with the release of his documentary film on the war of liberation Muktir Gaan (1975), based on newsreels of 1971. He discovered the footages on the Bangladesh freedom struggle, shot in 1971 by American film director Liang Levin during his short stay in the United States. He, alongwith his American wife Katharine Masud, collected more film footages on the war of liberation of Bangladesh from all over the world and jointly produced and directed the historic documentary film Muktir Gaan. The documentary is regarded as one of the most authentic documentary evidences of the liberation war after the top one, Stop Genocide by veteran filmmaker Zahir Raihan.</p>
            <p>His first full-length feature film, Matir Moina ("The Clay Bird", 2002) which debuted at the Cannes Film Festival, derives inspiration from his own childhood experiences. He won the International Critic's Award at the Cannes Film Festival in 2002 for this film, as well as the FIPRESCI Prize for Directors' Fortnight for "its authentic, moving and delicate portrayal of a country struggling for its democratic rights." Matir Moina was received with critical praise and toured the international circuit. It was one of the first Bangladeshi films to be widely circulated and was greeted with enthusiasm for its realistic depiction of life without the melodrama that is prevalent in many other South Asian films. It was the first Bangladeshi film nominated for Oscar award.
            <p>His film, Ontarjatra ("Homeland", 2006), featured two generations of Bangladeshi diaspora in London and their return to Bangladesh. His next feature film, Runway (2010) was about the influence of radical religious teachings on a young boy, caught between many modernistic. Masud's last unfinished project was Kagojer Phool ("The Paper Flower"), about the partition of the Indian subcontinent. This film has become a prequel to Matir Moina ("The Clay Bird", 2002).</p>
            <p>The Filmology of Tareque Masud includes some significant movies. These are the first video film of Bangladesh Sonar Beri (the Golden Chain, 1985), the first animation picture Unison (1994) and the first digital movie Antarjatra (2006). His wife, Catherine Masud worked as Co-director and editor in some of the films directed by Tareque Masud. Tareque was the maker of 16 films- short, feature, documentary and animation.</p>

            <p>National self-identity, traditional and folk culture and rituals are the contents of Tareque Masud's films. The war of liberation was the theme of some of his films. He was making another film on the partition of India entitled Kagajer Ful (The Paper Flower) before his death. Tareque Masud and the cinematographer of his new film Ashfaque Munier were killed in a tragic road accident on 13 August 2011 in Ghior on their way back to Dhaka from a shooting spot of Manikganj.</p>
          </div>  <!-- end bio div -->

          <div id="films">
            <p>Here are some of the major films of Tareque Masud...</p>
            <h3>Muktir Gaan (1995)</h3>
            <img src="https://dl.dropboxusercontent.com/s/77n8xofarswtd6r/Muktir_Gaan_poster.png?dl=0">
            <p>During the Liberation War of Bangladsh in 1971, a cultural troupe, named 'Bangladesh Mukti Shangrami Shilpi Shangstha' ('Association of Liberation Fighters (Artists) of Bagladesh') used to travel to refugee camps and different places in liberated areas (also known as 'Mukta Anchal'). They performed patriotic songs, arranged puppet shows and staged dramas to inspire the freedom fighters and lift the spirit of war affected people. Muktir Gaan (1995), 25 years in the making, Tareque Masud and Catherine Masud used original footage shot by American film-maker Lear Levin, as well as other archival footage collected from United Kingdom and India.</p>
            <h3>Matir Moina (2002)</h3>
            <img src="https://dl.dropboxusercontent.com/s/hnz9masc5lg7buu/Matir_Moina.jpg?dl=0">
            <p>Matir Moina (Also known in English as "The Clay Bird") deals with Masud's own experiences studying at a madrasah against the increasing tensions in East Pakistan culminating in the Bangladesh War of Liberation. Throughout the film there are references to historical occurrences in agitated times, and the film portrays these episodes through the human experiences of the young protagonist, his family, and his teachers and peers at the madrasah. Matir Moina won a number of awards internationally but was initially banned in Bangladesh on the grounds that it dealt with issues sensitive to the religious. The ban was repealed and the DVD version was released on April 16, 2005.</p>
            <h3>Ontarjatra (2006)</h3>
            <img src="https://dl.dropboxusercontent.com/s/xvq5a5zorajp0p1/anjtorjatra.jpg?dl=0">
            <p>Ontorjatra (literally meaning "inner journey") is an Bengali intimate exploration of the complex issues of dislocation and identity in a diasporic world. After 15 years in the UK, Shireen and her son Sohel return to their home in Sylhet, Bangladesh for the funeral of Sohel's father. For Shireen the homecoming allows her to make peace with her ex-husband and his family, for Sohel, the journey allows him to connect with a family and a "homeland" he has never known.</p>
            <h3>Runway (2010)</h3>
            <img src="https://dl.dropboxusercontent.com/s/lpc6c3lj5pr7xko/Runway_%282010_film%29_poster.jpg?dl=0">
            <p>The story of the film centers around the youth Ruhul, who lives with his family in a small hut next to the runway of the international airport. His mother Rahima struggles to support the family by selling milk from a cow bought with a micro credit loan. His sister Fatima works long hours in a garments factory. There's been no word from their father for over a month, since he left for a job in the Middle East. A Madras dropout, Ruhul spends his days wandering under the shadow of the planes, aimless and frustrated in his futile efforts to find work. One day at a cyber-cafe; he meets Arif, a computer savvy young man who exudes confidence and a sense of purpose. The world Arif introduces him to seems inspiring and new, but eventually Ruhul's life spirals into a nefarious netherworld of intolerance, violence and ultimately, death...</p>
          </div>    <!-- end films div -->

          <div id="awards">
            <p>&#10154; Ekushey Award, Highest civilian Honor (posthumous for Tareque Masud), 2012 </p>
            <p>&#10154; Best Film, Meril-Prothom Alo Awards (Runway) 2010</p>
            <p>&#10154; Best Direction, International Film Festival Bangladesh (Ontorjatra) 2006</p>
            <p>&#10154; Special Jury Award, Osian’s Cinefan Festival Delhi (Ontorjatra) 2006</p>
            <p>&#10154; Best Film, Bangladesh Film Journalists Assoc. (Matir Moina) 2003</p>
            <p>&#10154; Best Film, Channel I Film Awards (Matir Moina) 2003</p>
            <p>&#10154; Best Film, Karafilm Festival, Pakistan (Matir Moina) 2003</p>
            <p>&#10154; Jury Prize, International Video Festival of India (Kind of Childhood) 2003</p>
            <p>&#10154; FIPRESCI International Critics’ Prize, Cannes Film Festival (Matir Moina) 2002</p>
            <p>&#10154; Best Screenplay, Marakesh Int’l Film Festival (Matir Moina) 2002</p>
            <p>&#10154; Official Oscar Entry from Bangladesh for Academy Awards competition (Matir Moina) 2002</p>
            <p>&#10154; Best Narrative Documentary, Three Continents Fest. Buenos Aires (Muktir Kotha) 2002</p>
            <p>&#10154; Special Jury Prize, Festival of South Asian Documentaries, Nepal (Muktir Gaan), 1997</p>
            <p>&#10154; Best Film, Bangladesh Film Journalists Association (Muktir Gaan) 1996</p>
            <p>&#10154; National Award for Documentary (Muktir Gaan), 1996</p>
          </div> <!-- end awards div -->

          <div id="more">
            <p>“সেলুলয়েডে শুটিং করলেই সেটা চলচ্চিত্র হয়ে ওঠে না।”</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-Tareque Masud</p>
            <p>To know more about Tareque Masud, Please visit the official <br> 
            <a target="_blank" href="https://en.wikipedia.org/wiki/Tareque_Masud">Wikipedia Page</a> <br>
            <a target="_blank" href="http://en.banglapedia.org/index.php?title=Masud,_Tareque">Banglapedia Page</a> <br>
            <a target="_blank" href="http://tarequemasud.org/">Page of Tareque Masud</a> </p>

              @import url(https://fonts.googleapis.com/css?family=Acme|Ek+Mukta:300);
body {
	font-family: 'Acme', sans-serif;
	background: black;
h1,h3,h4,h5 {
	color: #D9EDF7;
h1 {
	font-size: 39px;
p {
	font-family: 'Ek Mukta', sans-serif;
	font-size: 19px;
	line-height: 1.6;
	color: #D9EDF7;
#bio, #films, #awards, #more {
	padding: 0% 10% 0%;
	text-align: justify;
.menu {
	background-color: #333;
.nav {
	width: 300px;
	margin: 0 auto;
.nav>li>a {
	color: #D9EDF7;
	font-size: 17px;
.nav-tabs {
     border-bottom: transparent; 
.nav-tabs>li>a:hover {
     border-color: transparent; 
.nav>li>a:focus, .nav>li>a:hover {
    background-color: #555;
    transition: .39s ease-in;
#films h3 {
	text-align: center;

#films img {
	margin: 5% 20%;
    width: 60%;
    border-radius: 5%;
#more {
	min-height: 100vh;
#right {
	padding: 5% 10% 0%;
	text-align: center;
#right img {
	height: 75%;
	width: 100%;
	border-radius: 5%;

	for responsive

@media (min-width: 992px) {
	#bio, #films, #awards, #more {
		padding: 7% 10%;
		position: fixed;
		top: 0;
		left: 8%;
		width: 56%;
	#right {
		height: 100vh;
		position: fixed;
		left: 64%;
		padding: 0px;


/* Bubble Bottom */
.hvr-bubble-bottom {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
.hvr-bubble-bottom:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  left: calc(50% - 10px);
  bottom: 0;
  border-width: 10px 10px 0 10px;
  border-color: #D9EDF7 transparent transparent transparent;

        $( "#more, #films, #awards" ).hide();

        $(".menu ul li a").click(function(event){
          var clicked = $(this).attr('href');
          $(".menu ul li a.hvr-bubble-bottom").removeClass("hvr-bubble-bottom");
          $( "#bio, #films, #awards, #more" ).hide();

        var fixmeTop = $('.menu').offset().top;
         console.log(fixmeTop);       // get initial position of the element

        $(window).scroll(function() {                  // assign scroll event listener
            var currentScroll = $(window).scrollTop(); // get current position

            if($( window ).width()<992){
                  if ( currentScroll >= fixmeTop) {           // apply position: fixed if you
                  $("#bio, #films, #awards, #more").css("padding-top", "15%");
                  $('.menu').css({                      // scroll to that element or below it
                      position: 'fixed',
                      top: '0',
                      left: '0%',
                      width: '100%'
              } else {                                   // apply position: static
                  $("#bio, #films, #awards, #more").css("padding-top", "0%");
                  $('.menu').css({                      // if you scroll above it
                      position: 'static'

🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................