icf.css

@@ -8,12 +8,16 @@
 }
 
 body {
-    background-color: rgb(208, 224, 240);
-    //background-color: rgb(48, 96, 144);
     color: rgb(64, 64, 64);
-    //color: rgb(192, 192, 192);
     margin: 0;
 }
+a {
+    color: rgb(255, 128, 0);
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: underline;
+}
 b {
     font-family: Source Serif Semibold;
 }
@@ -22,7 +26,7 @@ em, i {
 }
 
 #head {
-    background-color: rgb(48, 96, 144);
+    background-color: #1f618d;
     height: 80px;
     left: 0;
     position: fixed;
@@ -30,41 +34,37 @@ em, i {
     top: 0;
     z-index: 1;
 }
+#icf_the {
+    height: 22px;
+    left: 9px;
+    position: absolute;
+    top: 49px;
+}
 #icf_icon {
     height: 64px;
     left: 64px;
     position: absolute;
     top: 8px;
 }
-#icf_the {
+#icf_logo {
     height: 22px;
     left: 136px;
     position: absolute;
     top: 49px;
 }
-#icf_logo {
-    height: 22px;
-    left: 183px;
-    position: absolute;
-    top: 49px;
-}
 #link {
     display: none;
-    color: rgb(208, 224, 240);
     font-family: Source Serif Semibold;
     font-size: 15px;
     //font-weight: bold;
-    position: absolute;
+    position: fixed;
     right: 16px;
-    text-decoration: none;
+    top: 154px;
-    top: 56px;
+    z-index: 100;
-    z-index: 1;
-}
-#link:hover {
-    color: rgb(255, 255, 255);
 }
 
 #timeline {
+    background-color: rgb(192, 192, 192);
     height: 64px;
     left: 0;
     overflow: hidden;
@@ -76,32 +76,30 @@ em, i {
 #timeline > img {
     height: 64px;
     position: absolute;
+    user-select: none;
+    -webkit-user-select: none;
 }
 
 #menu {
-    background-color: rgb(48, 96, 144);
+    background: #1f618d;
+    border-bottom: 1px dotted rgb(255, 128, 0);
     color: rgb(192, 192, 192);
     font-family: Source Serif Semibold;
     font-size: 18px;
     height: 24px;
     left: 0;
-    letter-spacing: 0.5px;
+    padding: 8px 12px;
-    padding: 8px 12px 8px 64px;
     position: fixed;
     right: 0;
-    text-shadow: 0 -0.25px rgb(192, 192, 192),
-        0.25px 0 rgb(192, 192, 192),
-        0 0.25px rgb(192, 192, 192),
-        -0.25px 0 rgb(192, 192, 192);
     top: 144px;
     z-index: 1;
 }
 #menu > a {
-    color: rgb(208, 224, 240);
+    color: rgb(192, 192, 192);
     text-decoration: none;
 }
 #menu > a:hover {
-    color: rgb(255, 255, 255);
+    color: rgb(224, 160, 96);
 }
 #menu > a.selected {
     color: rgb(255, 128, 0);
@@ -115,19 +113,18 @@ em, i {
     font-size: 16px;
     line-height: 24px;
     left: 64px;
-    padding: 16px 0 32px 0;
+    padding-bottom: 32px;
     position: absolute;
     text-align: justify;
-    top: 184px;
+    top: 192px;
     width: 800px;
 }
 .section:not(.selected) {
     display: none;
 }
-.section a {
+
-    color: rgb(48, 96, 144);
+@media (max-width: 768px) {
-    //text-decoration: none;
+.section {
+    width: 600px;
 }
-.section a:hover {
-    text-decoration: underline;
 }

icf.js

@@ -1,43 +1,40 @@
-let hashes = []
+let hashes = slice(document.querySelectorAll('#menu > a')).map(function(element) {
-let movie, position, frames, timelineTiles, lastTimelineWidth
+    return element.getAttribute('href').substr(1)
+})
+
+let movies = [
+    {id: 'GJT', title: 'Aan (Mehboob, 1952)', frames: 241117},
+    {id: 'IKP', title: 'Mother India (Mehboob, 1957)', frames: 250936}
+]
+let movie = movies[Math.floor(new Date() / 86400000) % 2]
+
+let timelineLink = document.getElementById('link')
+timelineLink.href = 'https://indiancine.ma/' + movie.id
+timelineLink.innerHTML = movie.title
+let timelineLinkEntered = false
 
 let timelineElement = document.getElementById('timeline')
 let timelineElements = []
 let timelineWidth = 1500
+let timelineResize = 1
+let timelineTiles = Math.ceil(movie.frames / timelineWidth)
 let timelinesLeft
 
-let timelineLink = document.getElementById('link')
-let timelineLinkEntered = false
-
-let fps = 25
-let fpsAnimation = 60
 let paused = true
 let speed = 0
 let acceleration = 0
 let maxSpeed = 2
-let maxAcceleration = 1 / fpsAnimation
+let maxAcceleration = maxSpeed / 100
 
-function api(action, data, callback) {
+function getTimelineElement(index, left) {
-    fetch('https://indiancine.ma/api/', {
+    let element = document.createElement('img')
-        body: JSON.stringify({action: action, data: data}),
+    element.data = {index: index}
-        headers: {
+    element.src = 'https://media.indiancine.ma/' + movie.id
-            'Content-Type': 'application/json',
+        + '/timelinekeyframes64p' + (index + 1) + '.jpg'
-            'Accept': 'application/json, text/plain, */*',
+    element.style.left = left + 'px'
-        },
+    element.style.width = timelineWidth * timelineResize + 'px'
-        method: 'post'
+    timelineElement.appendChild(element)
-    }).then(function(result) {
+    return element
-        return result.json()
-    }).then(callback)
-}
-
-function formatDuration(seconds) {
-    return [
-        Math.floor(seconds / 3600),
-        Math.floor(seconds % 3600 / 60),
-        Math.floor(seconds % 60)
-    ].map(function(value, index) {
-        return (index > 0 && value < 10 ? '0' : '') + value
-    }).join(':')
 }
 
 function hashchange() {
@@ -56,72 +53,32 @@ function hashchange() {
             element.getAttribute('id') == hash ? 'add' : 'remove'
         ]('selected')
     })
+    console.log(hash)
+}
+
+function init() {
+    let frame = Math.floor(Math.random() * movie.frames)
+    let timelines = [{
+        index: Math.floor(frame / timelineWidth),
+        left: -(frame / timelineWidth) * timelineResize
+    }]
+    let windowWidth = window.innerWidth
+    while (last(timelines).left < windowWidth + timelineWidth / 2) {
+        timelines.push({
+            index: (last(timelines).index + 1) % timelineTiles,
+            left: last(timelines).left + timelineWidth * timelineResize
+        })
+    }
+    timelineElements = timelines.map(function(timeline, i) {
+        element = getTimelineElement(timeline.index, timeline.left)
+        return element
+    })
 }
 
 function last(array) {
     return array[array.length - 1]
 }
 
-function loadText(callback) {
-    let menu = document.getElementById('menu')
-    api('getDocument', {id: 'DWA'}, function(result) {
-        result.data.text.split('<h1>').slice(1).forEach(function(text, index) {
-            let split = text.split('</h1>')
-            let id = split[0].toLowerCase()
-            let element
-            if (index > 0) {
-                element = document.createElement('span')
-                element.innerHTML = ' &middot; '
-                menu.appendChild(element)
-            }
-            element = document.createElement('a')
-            element.href = '#' + id
-            element.innerHTML = split[0]
-            menu.appendChild(element)
-            element = document.createElement('div')
-            element.className = 'section'
-            element.id = id
-            element.innerHTML = split[1]
-                .replace(/<a /g, '<a target="_blank" ')
-                .replace(/<br>/g, '')
-            document.body.appendChild(element)
-            hashes.push(id)
-        })
-        callback()
-    })
-}
-
-function loadTimeline(callback) {
-    api('find', {
-        keys: ['director', 'duration', 'id', 'title', 'year'],
-        query: {
-            conditions: [{
-                key: 'list', operator: '==', value: 'rlx:cinemafoundation.in',
-            }],
-            operator: '&'
-        },
-        sort: [{key: 'year', operator: '+'}]
-    }, function(result) {
-        let movies = result.data.items
-        let time = new Date()
-        time -= time.getTimezoneOffset() * 60000
-        let mspd = 86400000
-        movie = movies[Math.floor(time / mspd) % movies.length]
-        position = Math.floor(time % mspd / mspd * movie.duration * fps) / fps
-        frames = Math.floor(movie.duration * fps)
-        timelineTiles = Math.ceil(frames / timelineWidth)
-        lastTimelineWidth = frames % timelineWidth
-        renderTimeline()
-        timelineLink.innerHTML = movie.title + ' (' + movie.year + ') '
-            + movie.director.join(', ')
-        callback()
-    })
-}
-
-function mod(a, b) {
-    return (a % b + b) % b
-}
-
 function play() {
     if (speed <= 0 && acceleration < 0) {
         paused = true
@@ -130,56 +87,28 @@ function play() {
         }
         return
     }
-    position += speed / fpsAnimation
+    //console.log('play', speed, acceleration)
-    renderTimeline()
+    images = slice(document.querySelectorAll('#timeline > img'))
-    timelineLink.href = 'https://indiancine.ma/' + movie.id + '/'
+    timelineElements.forEach(function(element) {
-        + formatDuration(position)
+        element.style.left = (parseFloat(element.style.left) - speed) + 'px'
+    })
+    if (parseFloat(timelineElements[0].style.left) <= -timelineWidth * timelineResize) {
+        timelineElement.removeChild(timelineElements.shift())
+        let lastElement = last(timelineElements)
+        timelineElements.push(getTimelineElement(
+            (lastElement.data.index + 1) % timelineTiles,
+            parseFloat(lastElement.style.left) + timelineWidth * timelineResize
+        ))
+        timelineElement.appendChild(last(timelineElements))
+    }
     if (speed < maxSpeed || acceleration <= 0) {
         speed += acceleration
     }
-    setTimeout(play, 1000 / fpsAnimation)
+    setTimeout(play, 25)
 }
 
-function renderTimeline() {
+function resize() {
-    let frame = Math.floor(position * fps)
+    timelinesLeft = (window.innerWidth - 4096) * timelineResize
-    let windowWidth = window.innerWidth
-    let timelines = [{
-        index: Math.floor(frame / timelineWidth),
-        left: (windowWidth / 2) - frame % timelineWidth
-    }]
-    while (timelines[0].left > 0) {
-        timelines.unshift({
-            index: mod(timelines[0].index - 1, timelineTiles),
-            left: timelines[0].left - (
-                timelines[0].index == 0 ? lastTimelineWidth : timelineWidth
-            )
-        })
-    }
-    while (last(timelines).left < windowWidth) {
-        timelines.push({
-            index: mod(last(timelines).index + 1, timelineTiles),
-            left: last(timelines).left + timelineWidth
-        })
-    }
-    let element = document.getElementById(
-        'timeline' + mod(timelines[0].index - 1, timelineTiles)
-    )
-    if (element) {
-        timelineElement.removeChild(element)
-    }
-    timelines.forEach(function(timeline) {
-        let element = document.getElementById('timeline' + timeline.index)
-        if (element) {
-            element.style.left = timeline.left + 'px'
-        } else {
-            element = document.createElement('img')
-            element.id = 'timeline' + timeline.index
-            element.src = 'https://media.indiancine.ma/' + movie.id
-                + '/timelinekeyframes64p' + timeline.index + '.jpg'
-            element.style.left = timeline.left + 'px'
-            timelineElement.appendChild(element)
-        }
-    })    
 }
 
 function slice(nodelist) {
@@ -190,12 +119,8 @@ function start() {
     acceleration = maxAcceleration
     if (paused) {
         paused = false
+        timelineLink.style.display = 'block'
         play()
-        setTimeout(function() {
-            if (acceleration > 0) {
-                timelineLink.style.display = 'block'
-            }
-        }, 250)
     }
 }
 
@@ -203,26 +128,24 @@ function stop() {
     acceleration = -maxAcceleration
 }
 
-loadText(function() {
+hashchange()
-    window.addEventListener('hashchange', hashchange)
+resize()
-    hashchange()
+init()
-    loadTimeline(function() {
+window.addEventListener('hashchange', hashchange)
-        window.addEventListener('resize', renderTimeline)
+window.addEventListener('resize', resize)
-        timeline.addEventListener('mousedown', function() {
+timeline.addEventListener('mouseenter', start)
-            return false
+timeline.addEventListener('mouseleave', stop)
-        })
+timelineLink.addEventListener('mouseenter', function() {
-        timeline.addEventListener('mouseenter', start)
+    timelineLinkEntered = true
-        timeline.addEventListener('mouseleave', stop)
-        timelineLink.addEventListener('mouseenter', function() {
-            timelineLinkEntered = true
-        })
-        timelineLink.addEventListener('mouseleave', function() {
-            timelineLinkEntered = false
-            setTimeout(function() {
-                if (paused) {
-                    timelineLink.style.display = 'none'
-                }
-            }, 1000)
-        })
-    })
 })
+timelineLink.addEventListener('mouseleave', function() {
+    if (paused) {
+        setTimeout(function() {
+            if (paused) {
+                timelineLink.style.display = 'none'
+            }
+        }, 1000)
+    }
+    timelineLinkEntered = false
+})
+

index.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
     <head>
-        <title>The indian Cinema Foundation</title>
+        <title>The Indian Cinema Foundation</title>
         <meta charset="utf-8"/>
         <meta content="width=device-width" name="viewport"/>
         <link href="icf.icon.png" rel="shortcut icon"/>
@@ -9,13 +9,104 @@
     </head>
     <body>
         <div id="head">
-            <img id="icf_icon" src="icf.icon.png"/>
             <img id="icf_the" src="icf.the.png"/>
+            <img id="icf_icon" src="icf.icon.png"/>
             <img id="icf_logo" src="icf.logo.png"/>
-            <a id="link" target="_blank"></a>
         </div>
         <div id="timeline"></div>
-        <div id="menu"></div>
+        <div id="menu">
+            <a href="#about">About</a> &middot;
+            <a href="#indiancine.ma">Indiancine.ma</a> &middot;
+            <a href="#goals">Goals</a> &middot;
+            <a href="#charter">Charter</a> &middot;
+            <a href="#team">Team</a> &middot;
+            <a href="#advisors">Advisors</a> &middot;
+            <a href="#support">Support</a> &middot;
+            <a href="#news">News</a>
+        </div>
+        <a id="link" target="_blank"></a>
+        <div class="section" id="about">
+            <p><b>The Indian Cinema Foundation</b> has been created by filmmakers, film historians and artists, to forge new means for re-presenting the Indian cinema in all its glorious complexity in the 21st century.</p>
+            <p>The Foundation recognises that cinema in India has historically existed in unique environments where it has been made, shown, discussed and debated. Such environments need, along with the cinema itself, to transit into the digital era if the cinema that has been made for a century is to continue to meaningfully exist.</p>
+            <p>Since 1931 to date, India has made around 50,000 sound films. Official figures suggest that around 4.4% of all films made exist in archival conditions. On the other hand, it is likely that low-end sector, including 16 mm, VHS, VCD and DVD, might have 15,000 sound films, i.e. 30%, across the Indian cinema’s history, and across regions.</p>
+            <p>In order to archive what exists, the Foundation will open its doors to amateur archivists, film lovers and enthusiasts, together with academics, filmmakers, artists and all those who take Indian cinema seriously, to achieve the following:</p>
+            <ul>
+            <li>To recover as much of the Indian cinema as exists</li>
+            <li>To index and to annotate existing films (director's/scholars/technician/critics commentary, academic references, historical annotations) thereby introducing a new way of viewing them.</li>
+            </ul>
+            <p>The Foundation will achieve its goals by working with the film industry, collaborating with University departments and institutions of research worldwide to make this material available.</p>
+            <p>The Indian Cinema Foundation is a registered non-profit trust. Donations are tax exempt under 80G.</p>
+        </div>
+        <div class="section" id="indiancine.ma">
+            <p><a href="https://indiancine.ma">Indiancine.ma</a> is a non-commercial annotated online archive of Indian film.</p>
+            <p>The project was initiated by <a href="https://pad.ma">Pad.ma</a> (Public Access Digital Media Archive), an online archive of densely text-annotated video material, primarily footage and not finished films, that was set up by members of <a href="https://studio.camp/">CAMP</a>, <a href="http://altlawforum.org">Alternative Law Forum</a> and <a href="https://0x2620.org/">0x2620</a> in 2007.</p>
+            <p>Indiancine.ma was originally set up using Ashish Rajadhyaksha's and Paul Willemen's Encyclopedia of Indian Cinema (published in 1999 by the British Film Institute).</p>
+            <p>At present, <a href="https://indiancine.ma">Indiancine.ma</a> has created unique links for 36,406 films.</p>
+            <p>In addition to the general public, Indiancine.ma is being used by several film and cultural studies institutions nationally and globally. Indiancine.ma archives all films, but only films that are out of copyright are available for pubic viewing. Films that are more recent are not available to the public, but can be seen by bona fide research institutions and researchers.</p>
+            <p>We hope to upload as many as 15,000 titles, with a primary focus on early (i.e. pre-1957) cinema. Even this astonishing target will still be only 30% of all feature films made.</p>
+        </div>
+        <div class="section" id="goals">
+            <ul>
+            <li>To develop the online film archive as a public, NON-COMMERCIAL and FREE resource that will recover as much of the Indian cinema as exists.</li>
+            <li>To rethink the future of digital archives and provide new models of archiving using collaborative models of knowledge production and dissemination.</li>
+            <li>To try and track down prints of all available films (which may, especially in films made from earlier times, be the only prints in existence).</li>
+            <li>To curate and commission time-based annotations of major films from both the history of Indian cinema and from recent titles.</li>
+            <li>To significantly build on ancillary collections, including journals, documents, film stills, posters etc.</li>
+            <li>To make available key books on the history of Indian cinema embedded and tagged to relevant film titles.</li>
+            <li>To offer fellowships for young researchers working on Indian cinema history.</li>
+            <li>To build partnerships with University departments and Research Centres worldwide, with historians of Indian cinema, with filmmakers and producers interested in supplying supporting materials, time-based commentaries, and supplementary data,on their films, and with art practitioners and cinephiles.</li>
+            </ul>
+        </div>
+        <div class="section" id="charter">
+            <p><b>Charter of the Indian Cinema Foundation</b></p>
+            <p><b>Acknowledging</b> that cinema forms an integral part of India’s cultural heritage and provides a unique expression of our political, cultural, creative and historic identity,</p>
+            <p><b>Acknowledging</b> further that Cinema constitutes one of the most important means of promoting an understanding of India amongst the global community thereby forming a part of the heritage of mankind as a whole,</p>
+            <p><b>Recognising</b> that the preservation, restoration, archiving, annotation, dissemination and study of Indian cinema is crucial to the continued relevance of cinema as a living heritage,</p>
+            <p><b>Considering</b> that as a result of their material form and fixation, films remain one of the most fragile cultural artifacts and extremely vulnerable to destruction, deterioration, decay, damage, and loss,</p>
+            <p><b>Considering further</b> that cinema has remained a neglected aspect of state and industry policy and whose systematic neglect has already resulted in the loss of a majority of films causing an irreversible impoverishment to our cinematic heritage,</p>
+            <p><b>Appreciating</b> the important role played by specialised institutions like the National Film Archive of India and other regional film archives and societies in preserving and promoting Indian cinema,</p>
+            <p><b>Bearing in mind</b> that the archiving of cinema needs to have many more institutional and individual stake holders who collectively develop a creative and future oriented vision of film archives and databases if we are to effectively safeguard and promote Indian cinema as a cultural resource for present and future generations,</p>
+            <p><b>Noting</b> that developments in technology afford us an opportunity to harness the power of the digital medium, the internet, and collaborative communities of knowledge producers to reshape the future of archiving and to create non-commercial open access archives informed by principles of a digital cultural commons,</p>
+            <p><b>Desiring</b> to create a foundation that will create public infrastructure and resources, and develop best practices to enhance the ways in which the Indian cinema can be safeguarded, archived, accessed, viewed, analysed, discussed, researched, annotated and written about,</p>
+            <p><b>Desiring further</b> to create a productive collaboration between the film industry, the state, universities, film historians and scholars, artists, journalists, critics, and all cinephiles and enthusiasts in general,</p>
+            <p><b>Affirming</b> the importance of inculcating a sense of corporate social responsibility within the film industry towards the urgent tasks mentioned above,</p>
+            <p><b>We the undersigned</b></p>
+            <p><b>Pledge our support</b> to the Indian Cinema Foundation and commit to ensuring its financial, intellectual and creative sustainability by supporting it monetarily and by providing access to our films and their material heritage and culture.</p>
+        </div>
+        <div class="section" id="team">
+            <p><b>Ashish Rajadhyaksha</b> is a film historian and cultural theorist. He co-authored the Encyclopaedia of Indian Cinema (2009), and has written several books and curated film and moving image events in India and elsewhere. Ashish was co-founder of the Centre for the Study of Culture &amp; Society (1998). He is a founding Trustee of the Indian Cinema Foundation.</p>
+            <p><b>Ashok Sukumaran</b> is an artist, co-initiator of the collaborative studio CAMP and <a href="https://pad.ma/">Pad.ma</a> and <a href="https://indiancine.ma">Indiancine.ma</a>.</p>
+            <p><b>Jan Gerber</b> is an artist and programmer from Berlin. He develops internet platforms for the production and distribution of video material. Jan has has been with <a href="https://pad.ma/">Pad.ma</a> and <a href="https://indiancine.ma">Indiancine.ma</a> from its inception and is one of the initiators of 0x2620 - Collaborative Archiving and Networked Distribution.</p>
+            <p><b>Lawrence Liang</b> is a lawyer, writer and film scholar. A founder of Alternative Law forum, he is currently at Ambedkar University Delhi. Involved with various copyleft initiatives, Lawrence has been with <a href="https://pad.ma/">Pad.ma</a> and <a href="https://indiancine.ma">Indiancine.ma</a> from its inception and is a founding trustee of The Indian Cinema Foundation.</p>
+            <p><b>Sebastian Lütgert</b> is an artist, programmer, writer, based in Berlin and sometimes Bombay, co-founder of <a href="https://0x2620.org">0x2620</a> (since 2007) and <a href="https://0xDB.org">0xDB</a> (since 2007).</p>
+            <p><b>Shaina Anand</b> is an artist and filmmaker, co-initiator of the collaborative studio CAMP. Her films and projects over the past decade have shown how deep technical experimentation and artistic form can meet while extracting new qualities and experiences from contemporary life and materials. Shaina is part of the core group that runs <a href="https://pad.ma/">Pad.ma</a> and <a href="https://indiancine.ma">Indiancine.ma</a> and is a founding trustee of The Indian Cinema Foundation.</p>
+            <p><b>Zinnia Ambapardiwala</b> joined the collaborative studio CAMP in 2008. She oversees media encoding, archiving and backend operations for <a href="https://pad.ma/">Pad.ma</a> and <a href="https://indiancine.ma">Indiancine.ma</a>.</p>
+        </div>
+        <div class="section" id="advisors">
+            <p><b>Kiran Rao</b> is a screenwriter and director of Dhobhi Ghaat (2011), and a film producer deeply committed to promoting independent cinema and living screen cultures. She is also chairperson of MAMI (Mumbai Academy of Moving Images), and producer at Aamir Khan Productions. </p>
+            <p><b>Moinak Biswas</b> (Jadavpur University, Kolkata) teaches film studies at Jadavpur University and has been widely published in both English and Bengali on contemporary Indian cinema. He started the medialab at Jadavpur University, and has collaborated with Pad.ma and Indiancine.ma.</p>
+            <p><b>Ranjani Majumdar</b> teaches Cinema Studies at the School of Arts and Aesthetics, Jawaharlal Nehru University. She was part of India's first and all-women documentary collective Mediastorm. She is the author of Bombay Cinema: An Archive of the City (2007). Her areas of research include, the cinematic city, media theory, and the intersection of travel, design and colour in 1960s Bombay cinema.</p>
+            <p><b>Saeed Akthar Mirza</b> is an award winning writer, filmmaker and producer. He began his career as a member of YUKT (Union of Kinematographers and Technicians) and went on to make several films during the parallel cinema movement in India. He was chairperson of his alma matter FTII.</p>
+            <p><b>Sidharth Roy Kapur</b> is a film producer, founder of Roy Kapur Films and the President of Film and Television Producers Guild of India. He was formerly Managing Director Disney, India.</p>
+            <p><b>Vikramaditya Motwane</b> is an award winning filmmaker, producer and screenwriter. He co-founded Phantom Films.</p>
+            <p><b>Vishesh Bhatt</b> is a filmmaker and producer. He currently heads strategy, content development, creatives, marketing, and is responsible for all digital initiatives at Vishesh Films.</p>
+        </div>
+        <div class="section" id="support">
+            <p>In March 2013, in commemoration of India's cinema centenary, Indiancine.ma was born.</p>
+            <p>Indiancine.ma has been hosted and developed by the team that runs Pad.ma, that has had continuous support Foundation for Arts Initiatives. In 2016-17, we received seed grants from key film studios in Mumbai who share our vision and remain committed to supporting the activities of the Indian Cinema Foundation.</p>
+            <ul>
+            <li>Aamir Khan Productions</li>
+            <li>Disney</li>
+            <li>Excel Entertainment</li>
+            <li>Phantom Films</li>
+            <li>Raju Hirani Films</li>
+            <li>Rakesh Omprakash Mehra Productions</li>
+            <li>Vishesh Films</li>
+            </ul>
+        </div>
+        <div class="section" id="news">
+            
+        </div>
         <script src="icf.js"></script>
     </body>
 </html>