340 lines
12 KiB
HTML
340 lines
12 KiB
HTML
<link rel="stylesheet" href="/static/css/modules/tabsinnerright.css" type="text/css" />
|
|
|
|
<script>
|
|
$(function() {
|
|
$('.toggleLink').click(function(e) {
|
|
e.preventDefault();
|
|
$(this).next().slideToggle();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<ul class="tabsInnerRight">
|
|
<li><a href="#about">About</a></li>
|
|
<li><a href="#productions">Productions</a></li>
|
|
<li><a href="#people">People</a></li>
|
|
<li><a href="#notes">Notes</a></li>
|
|
<li><a href="#gallery">Gallery</a></li>
|
|
<li><a href="#resources">Resources</a></li>
|
|
</ul>
|
|
|
|
<div id="about" class="tab_content">
|
|
|
|
<h3>Script Name</h3>
|
|
<div><strong>Writer:</strong> Names of writers</div>
|
|
<div><strong>Language(s):</strong> Hindi, Bengali</div>
|
|
<div><strong>Approximate duration:</strong> </div>
|
|
<div><strong>No of characters:</strong> 20 - Female: 5, Male: 15</div>
|
|
|
|
<br />
|
|
|
|
<div>
|
|
Some copy here that is a synopsis in a paragraph. Some copy here that is a synopsis in a paragraph.
|
|
Some copy here that is a synopsis in a paragraph. Some copy here that is a synopsis in a paragraph.
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<h5 class="orangeInnerRight">Licenses:</h5>
|
|
|
|
<p>This script may be accessed
|
|
under the following Creative Commons Licenses:</p>
|
|
|
|
<a href="" class="toggleLink">Adaptation License: Derivative Works allowed</a>
|
|
|
|
<div class="toggleDiv">
|
|
<p>Some license information. <span style="color:red;">Does this need to be an accordion?</span></p>
|
|
<a href="" class="block">Read legal version</a>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<a href="" class="toggleLink">Performance License: Derivative Works allowed</a>
|
|
|
|
<div class="toggleDiv">
|
|
<p>Some license information. </p>
|
|
<a href="" class="block">Read legal version</a>
|
|
</div>
|
|
|
|
<br><br>
|
|
|
|
<a href="">Download</a>
|
|
|
|
</div> <!-- end synopsis -->
|
|
|
|
<div id="productions" class="tab_content">
|
|
|
|
<h3 class="orange">Productions</h3>
|
|
|
|
<div class="productionEach">
|
|
<div class="productionEachImg">
|
|
<img src="" alt="/static/images/150x150.jpg" />
|
|
</div>
|
|
|
|
<div class="productionEachTextA">
|
|
<a href="" class="tooltipLink">Name of Production (2010)
|
|
<span class="tooltip">
|
|
<div>
|
|
<strong>Some Title</strong><br />
|
|
Some text goes here
|
|
</div>
|
|
</span>
|
|
</a>
|
|
<div>Group: Group Name</div>
|
|
<div>Some copy here</div>
|
|
<div>No. of shows: 50</div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
|
|
</div> <!-- end production each -->
|
|
|
|
<div class="productionEach">
|
|
<div class="productionEachImg">
|
|
<img src="" alt="/static/images/150x150.jpg" />
|
|
</div>
|
|
|
|
<div class="productionEachTextA">
|
|
<a href="">Name of Production (2010)</a>
|
|
<div>Group: Group Name</div>
|
|
<div>Some copy here</div>
|
|
<div>No. of shows: 50</div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div> <!-- end production each -->
|
|
|
|
<div class="productionEach">
|
|
<div class="productionEachImg">
|
|
<img src="" alt="/static/images/150x150.jpg" />
|
|
</div>
|
|
|
|
<div class="productionEachTextA">
|
|
<a href="">Name of Production (2010)</a>
|
|
<div>Group: Group Name</div>
|
|
<div>Some copy here</div>
|
|
<div>No. of shows: 50</div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div> <!-- end production each -->
|
|
|
|
<br />
|
|
|
|
<h3 class="orange">Related Productions</h3>
|
|
|
|
<div class="productionEach">
|
|
<div class="productionEachImg">
|
|
<img src="" alt="/static/images/150x150.jpg" />
|
|
</div>
|
|
|
|
<div class="productionEachTextA">
|
|
<a href="">Name of Production (2010)</a>
|
|
<div>Group: Group Name</div>
|
|
<div>Some copy here</div>
|
|
<div>No. of shows: 50</div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div> <!-- end production each -->
|
|
|
|
<div class="productionEach">
|
|
<div class="productionEachImg">
|
|
<img src="" alt="/static/images/150x150.jpg" />
|
|
</div>
|
|
|
|
<div class="productionEachTextA">
|
|
<a href="">Name of Production (2010)</a>
|
|
<div>Group: Group Name</div>
|
|
<div>Some copy here</div>
|
|
<div>No. of shows: 50</div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
|
|
</div> <!-- end production each -->
|
|
|
|
</div> <!-- end productions -->
|
|
|
|
<div id="people" class="tab_content">
|
|
|
|
<div class="productionEach">
|
|
<div class="productionEachImg">
|
|
<img src="" alt="/static/images/150x150.jpg" />
|
|
</div>
|
|
|
|
<div class="productionEachTextA">
|
|
<a href="">Name of Person</a>
|
|
<div>Writer: Some script</div>
|
|
<div>Translation of script by playwright</div>
|
|
<div>From language to language</div>
|
|
|
|
<!-- <a href="" class="toggleLink orange">Synopsis</a>-->
|
|
<div class="toggleDiv">Lorem ipsum</div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
|
|
</div> <!-- end production each -->
|
|
|
|
<div class="productionEach">
|
|
<div class="productionEachImg">
|
|
<img src="" alt="/static/images/150x150.jpg" />
|
|
</div>
|
|
|
|
<div class="productionEachTextA">
|
|
<a href="">Name of Person</a>
|
|
<div>Writer: Some script</div>
|
|
<div>Translation of script by playwright</div>
|
|
<div>From language to language</div>
|
|
|
|
<!-- <a href="" class="toggleLink orange">Synopsis</a>-->
|
|
<div class="toggleDiv">Lorem ipsum</div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
|
|
</div> <!-- end production each -->
|
|
|
|
<div class="productionEach">
|
|
<div class="productionEachImg">
|
|
<img src="" alt="/static/images/150x150.jpg" />
|
|
</div>
|
|
|
|
<div class="productionEachTextA">
|
|
<a href="">Name of Person</a>
|
|
<div>Writer: Some script</div>
|
|
<div>Translation of script by playwright</div>
|
|
<div>From language to language</div>
|
|
|
|
<!-- <a href="" class="toggleLink orange">Synopsis</a>-->
|
|
<div class="toggleDiv">Lorem ipsum</div>
|
|
</div>
|
|
<div class="clear"></div>
|
|
|
|
</div> <!-- end production each -->
|
|
|
|
</div> <!-- end people -->
|
|
|
|
<div id="notes" class="tab_content">
|
|
|
|
<div class="noteEach">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
|
|
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
|
|
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
|
|
dolore te feugait nulla facilisi.</p>
|
|
<p class="noteMetaData">- posted by Name, Date, Time</p>
|
|
</div>
|
|
|
|
<div class="noteEach">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
|
|
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
|
|
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
|
|
dolore te feugait nulla facilisi.</p>
|
|
<p class="noteMetaData">- posted by Name, Date, Time</p>
|
|
</div>
|
|
|
|
<div class="noteEach">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
|
|
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
|
|
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
|
|
dolore te feugait nulla facilisi.</p>
|
|
<p class="noteMetaData">- posted by Name, Date, Time</p>
|
|
</div>
|
|
|
|
<div class="noteEach">
|
|
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
|
|
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
|
|
esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis
|
|
dolore te feugait nulla facilisi.</p>
|
|
<p class="noteMetaData">- posted by Name, Date, Time</p>
|
|
</div>
|
|
|
|
</div> <!-- end notes -->
|
|
|
|
<div id="resources" class="tab_content">
|
|
|
|
|
|
<div class="resourcesBlock">
|
|
<div class="resourcesEach">
|
|
<div><strong>Title</strong></div>
|
|
<div>Two-three line description</div>
|
|
<div><a href="" target="_blank">Url</a></div>
|
|
<a href="">Download</a>
|
|
</div>
|
|
|
|
<div class="productionEachImg">
|
|
<img src="" alt="/static/images/150x150.jpg" />
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div> <!-- end resources block -->
|
|
|
|
<div class="resourcesBlock">
|
|
<div class="resourcesEach">
|
|
<div><strong>Title</strong></div>
|
|
<div>Two-three line description</div>
|
|
<div><a href="" target="_blank">Url</a></div>
|
|
<a href="">Download</a>
|
|
</div>
|
|
|
|
<div class="productionEachImg">
|
|
<img src="" alt="/static/images/150x150.jpg" />
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div> <!-- end resources block -->
|
|
|
|
<div class="resourcesBlock">
|
|
<div class="resourcesEach">
|
|
<div><strong>Title</strong></div>
|
|
<div>Two-three line description</div>
|
|
<div><a href="" target="_blank">Url</a></div>
|
|
<a href="">Download</a>
|
|
</div>
|
|
|
|
<div class="productionEachImg">
|
|
<img src="" alt="/static/images/150x150.jpg" />
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div> <!-- end resources block -->
|
|
|
|
<div class="resourcesBlock">
|
|
<div class="resourcesEach">
|
|
<div><strong>Title</strong></div>
|
|
<div>Two-three line description</div>
|
|
<div><a href="" target="_blank">Url</a></div>
|
|
<a href="">Download</a>
|
|
</div>
|
|
|
|
<div class="productionEachImg">
|
|
<img src="" alt="/static/images/150x150.jpg" />
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div> <!-- end resources block -->
|
|
|
|
</div> <!-- end resources -->
|
|
|
|
<div id="gallery" class="tab_content">
|
|
|
|
<div class="imgVideoBlock">
|
|
<h3 class="orange">Photos</h3>
|
|
|
|
<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
|
|
<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
|
|
<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
|
|
<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
|
|
<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
|
|
<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
|
|
|
|
<a href="" class="moreLink">More»</a>
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<div class="imgVideoBlock">
|
|
<h3 class="orange">Videos</h3>
|
|
<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
|
|
<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
|
|
<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
|
|
<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
|
|
<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
|
|
<img src="/static/images/150x150.jpg" width="160" height="120" alt="" />
|
|
|
|
<a href="" class="moreLink">More»</a>
|
|
</div>
|
|
|
|
</div> <!-- end gallery -->
|
|
|
|
<script type="text/javascript" src="/static/js/innertabs.js"></script>
|