hey new templates

This commit is contained in:
Karen 2012-11-10 10:29:20 +05:30
parent d35de79f05
commit 78741b1d25
6 changed files with 649 additions and 51 deletions

View File

@ -111,7 +111,7 @@ margin-bottom:8px;}
.tab_content h3 {
font-size: 150%;
padding-bottom: 10px;
margin-bottom: 10px;
}
#about ul, #people ul, #production ul {
@ -181,6 +181,10 @@ margin-left: 10px;
float: left;
}
.borderYellow {
border-bottom: 1px solid #F7BD00;
}
/*toggleClass*/
.toggleLink {

View File

@ -32,6 +32,10 @@ left:4px;
z-index:-1;
}
.rightFloat {
float: right;
}
#logo span
{font-size:36px;}

View File

@ -0,0 +1,339 @@
<link rel="stylesheet" href="/static/css/modules/tabsinnerright.css" type="text/css" />
<ul class="tabsInnerRight">
<li><a href="#about">About</a></li>
<li><a href="#connections">Productions</a></li>
<li><a href="#plays">Plays &amp; more</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#resources">Resources</a></li>
<li><a href="#notes">Notes</a></li>
</ul>
<div id="about" class="tab_content">
<h3 class="borderYellow">GROUP NAME</h3>
<div><strong>Based in: </strong>Mumbai, Delhi</div>
<div><strong>Founded: </strong>Year</div>
<div class="borderYellow"><strong>Languages we work in: </strong>Hindi, Bengali</div>
<br />
<div>
<p>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.</p>
</div>
<p> +91 (22) 12345678</p>
<div><a href="">www.website.com</a></div>
<div class="borderYellow">
<a href="">Contact</a>
</div>
<br />
<div class="borderYellow">
<div class="orangeInnerRight">Awards</div>
<div>Name of award, year, link</div>
<div>Name of award, year, link</div>
<div>Name of award, year, link</div>
<div>Name of award, year, link</div>
</div>
<br />
<div class="orangeInnerRight">More about us</div>
<a href="">Link to article</a>
<p>One line desc</p>
<a href="">Link to article</a>
<p>One line desc</p>
<a href="">Link to article</a>
<p>One line desc</p>
</div> <!-- end about -->
<div id="connections" class="tab_content">
<p class="orange">Members</p>
<br />
<div class="productionEach">
<div class="productionEachImg">
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<a href="">Name of Person</a>
<div>Occupation/one-line desc</div>
<div>Relationship to group (eg: admin)</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="productionEachText">
<a href="">Name of Person</a>
<div>Occupation/one-line desc</div>
<div>Relationship to group (eg: fan of)</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="productionEachText">
<a href="">Name of Person</a>
<div>Occupation/one-line desc</div>
<div>Relationship to group (eg: member of)</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="productionEachText">
<a href="">Name of Person</a>
<div>Occupation/one-line desc</div>
<div>Relationship to group</div>
</div>
<div class="clear"></div>
</div> <!-- end production each -->
<br />
<a href="" class="toggleLink rightFloat">More>></a>
<div class="clear"></div>
<p class="orange">Worked with</p>
<br />
<div class="productionEach">
<div class="productionEachImg">
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<a href="">Name of Group</a>
<div>Location</div>
<div>Relationship to Group (e.g. admin)</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="productionEachText">
<a href="">Name of Person</a>
<div>Occupation/one-line desc</div>
<div>Location</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="productionEachText">
<a href="">Name of Person</a>
<div>Occupation/one-line desc</div>
<div>Location</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="productionEachText">
<a href="">Name of Person</a>
<div>Location</div>
<div>Relationship to Group (e.g. admin)</div>
</div>
<div class="clear"></div>
</div> <!-- end production each -->
<a href="" class="toggleLink rightFloat">More>></a>
<div class="clear"></div>
<br />
</div> <!-- end connections -->
<div id="plays" class="tab_content">
<h3 class="orange">Productions</h3>
<div class="productionEach">
<div class="productionEachImg">
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="orangeInnerRight">Name of Production (2010) <span style="color: red;">ICON</span> </div>
<div>Group: Group Name</div>
<div><em>Title Credits: </em></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="productionEachText">
<div class="orangeInnerRight">Name of Production (2010) <span style="color: red;">ICON</span> </div>
<div>Group: Group Name</div>
<div><em>Title Credits: </em></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="productionEachText">
<div class="orangeInnerRight">Name of Production (2010) <span style="color: red;">ICON</span> </div>
<div>Group: Group Name</div>
<div><em>Title Credits: </em></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="productionEachText">
<div class="orangeInnerRight">Name of Production (2010) <span style="color: red;">ICON</span> </div>
<div>Group: Group Name</div>
<div><em>Title Credits: </em></div>
<div>No. of shows: 50</div>
</div>
<div class="clear"></div>
</div> <!-- end production each -->
<a href="" class="toggleLink rightFloat">More>></a>
<div class="clear"></div>
<h3 class="orange">Workshops</h3>
<div class="productionEach">
<div class="productionEachImg">
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="orangeInnerRight">Name of workshops</div>
<div><em>One line desc</em></div>
<div>Current</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="productionEachText">
<div class="orangeInnerRight">Name of workshops</div>
<div><em>One line desc</em></div>
</div>
<div class="clear"></div>
</div> <!-- end production each -->
<br />
<a href="" class="rightFloat">More>></a>
<div class="clear"></div>
<h3 class="orange">More</h3>
<div class="productionEach">
<div class="productionEachImg">
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="orangeInnerRight">Name of activity (talk, whatever)</div>
<div><em>One line desc</em></div>
<div>Current</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="productionEachText">
<div class="orangeInnerRight">Name of activity (talk, whatever)</div>
<div><em>One line desc</em></div>
<div>Current</div>
</div>
<div class="clear"></div>
</div> <!-- end production each -->
</div> <!-- end plays -->
<div id="gallery" class="tab_content">
<h3 class="orange">Kindly refer to Gallery tab in Script Archive</h3>
</div> <!-- end gallery -->
<div id="resources" class="tab_content">
<h3 class="orange">Kindly refer to Resources tab in Script Archive</h3>
</div> <!-- end resources -->
<div id="notes" class="tab_content">
<h3 class="orange">Kindly refer to notes tab in Script Archive</h3>
</div> <!-- end notes -->
<script type="text/javascript" src="/static/js/innertabs.js"></script>

View File

@ -0,0 +1,248 @@
<link rel="stylesheet" href="/static/css/modules/tabsinnerright.css" type="text/css" />
<ul class="tabsInnerRight">
<li><a href="#about">About</a></li>
<li><a href="#scripts">Scripts</a></li>
<li><a href="#connections">Connections</a></li>
<li><a href="#productions">Productions</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#resources">Resources</a></li>
</ul>
<div id="about" class="tab_content">
<h3 class="borderYellow">Name of Individual</h3>
<p class="borderYellow">Director, Light Designer, Actor</p>
<div class="borderYellow">
bio bio bio bio bio bio bio bio bio <br />
bio bio bio bio bio bio bio bio bio
</div>
<br />
<div>Based in: (City)</div>
<div>Languages I work in: Hindi, Malayalam</div>
<div>DOB: </div>
<div class="borderYellow">Gender: </div>
<a href="" class="toggleLink">Contact</a>
<div class="toggleDiv">Some text</div>
<div class="borderYellow"></div>
<br />
<div class="borderYellow">
<div class="orange">Training</div>
<div>Area of Training, <a href="">Name of Conductor</a>, <a href="">Name of Theatre Group</a>, Location, Year</div>
<div>Area of Training, <a href="">Name of Conductor</a>, <a href="">Name of Theatre Group</a>, Location, Year</div>
<div>Area of Training, <a href="">Name of Conductor</a>, <a href="">Name of Theatre Group</a>, Location, Year</div>
<div>Area of Training, <a href="">Name of Conductor</a>, <a href="">Name of Theatre Group</a>, Location, Year</div>
</div>
<br />
<div class="borderYellow">
<div class="orange">Awards</div>
<div>Name of award, year, link</div>
<div>Name of award, year, link</div>
<div>Name of award, year, link</div>
</div>
<br />
<div>
<div class="orange">More</div>
<a href="">Link to article 1</a>
<div>One line description</div>
<a href="">Link to article 2</a>
<div>One line description</div>
<a href="">Link to article 1</a>
<div>One line description</div>
</div>
</div> <!-- end about -->
<div id="scripts" class="tab_content">
<div>Help text - to send them to script archive</div>
<br />
<a href="toggleLink">Title</a>
<div>One line description. <span class="toggleDiv">Extra information goes here</span></div>
<br />
<a href="toggleLink">Title</a>
<div>One line description. <span class="toggleDiv">Extra information goes here</span></div>
<br />
<a href="toggleLink">Title</a>
<div>One line description. <span class="toggleDiv">Extra information goes here</span></div>
<br />
</div> <!-- end scripts -->
<div id="connections" class="tab_content">
<p><a href="" class="toggleLink">A V Gopalakrishnan</a> Theatre Enthusiast, Mumbai</p>
<div class="toggleDiv">
<p class="orange">Member of</p>
<br />
<div class="productionEach">
<div class="productionEachImg">
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="orangeInnerRight">Name of Group</div>
<div>Location</div>
<div>Relationship to Group</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="productionEachText">
<div class="orangeInnerRight">Name of Group</div>
<div>Location</div>
<div>Relationship to Group</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="productionEachText">
<div class="orangeInnerRight">Name of Group</div>
<div>Location</div>
<div>Relationship to Group</div>
</div>
<div class="clear"></div>
</div> <!-- end production each -->
<a href="" class="toggleLink rightFloat">More>></a>
<div class="clear"></div>
<p class="orange">Worked with</p>
<br />
<div class="productionEach">
<div class="productionEachImg">
<img src="" alt="/static/images/150x150.jpg" />
</div>
<div class="productionEachText">
<div class="orangeInnerRight">Name of Person</div>
<div>Occupation/one-line desc</div>
<div>Location</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="productionEachText">
<div class="orangeInnerRight">Name of Person</div>
<div>Occupation/one-line desc</div>
<div>Location</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="productionEachText">
<div class="orangeInnerRight">Name of Person</div>
<div>Occupation/one-line desc</div>
<div>Location</div>
</div>
<div class="clear"></div>
</div> <!-- end production each -->
<a href="" class="toggleLink rightFloat">More>></a>
</div> <!-- end toggleClass -->
<div class="clear"></div>
<br />
</div> <!-- end connections -->
<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="productionEachText">
<a href="">Name of Production (2010)</a>
<div>Group: Group Name</div>
<div><em>Years</em></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="productionEachText">
<a href="">Name of Production (2010)</a>
<div>Group: Group Name</div>
<div><em>Years</em></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="productionEachText">
<a href="">Name of Production (2010)</a>
<div>Group: Group Name</div>
<div><em>Years</em></div>
</div>
<div class="clear"></div>
</div> <!-- end production each -->
</div> <!-- end productions -->
<div id="gallery" class="tab_content">
<h3 class="orange">Kindly refer to Gallery tab in Script Archive</h3>
</div>
<div id="resources" class="tab_content">
<h3 class="orange">Kindly refer to Resources tab in Script Archive</h3>
</div>
<script type="text/javascript" src="/static/js/innertabs.js"></script>

View File

@ -12,11 +12,12 @@
<div id="about" class="tab_content">
<h3>Script Name</h3>
<p class="noMargin"><strong>Writer:</strong> Names of writers</p>
<p class="noMargin"><strong>Language(s):</strong> Hindi, Bengali</p>
<p><strong>Approximate duration:</strong> </p>
<p><strong>No of characters:</strong> 20; Female: 5, Male: 15</p>
<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>
<p>Some copy here that is a synopsis in a paragraph. Some copy here that is a synopsis in a paragraph.
@ -57,11 +58,11 @@
</div>
<div class="productionEachText">
<p class="orange">Name of Production (2010)</p>
<p>Group: Group Name</p>
<p>Some copy here</p>
<p>No. of shows: 50</p>
<p>Current(icon) or Upcoming (icon)<span style="color:red">Should we have this just after the title? Karen</span></p>
<div class="orangeInnerRight">Name of Production (2010)</div>
<div>Group: Group Name</div>
<div>Some copy here</div>
<div>No. of shows: 50</div>
<p>Current(icon) or Upcoming (icon)<span style="color:red">Please provide icon- I'll place it after title - Karen</span></p>
</div>
<div class="clear"></div>
@ -73,10 +74,10 @@
</div>
<div class="productionEachText">
<p class="orange">Name of Production (2010)</p>
<p>Group: Group Name</p>
<p>Some copy here</p>
<p>No. of shows: 50</p>
<div class="orangeInnerRight">Name of Production (2010)</div>
<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 -->
@ -87,10 +88,10 @@
</div>
<div class="productionEachText">
<p class="orange">Name of Production (2010)</p>
<p>Group: Group Name</p>
<p>Some copy here</p>
<p>No. of shows: 50</p>
<div class="orangeInnerRight">Name of Production (2010)</div>
<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 -->
@ -105,11 +106,11 @@
</div>
<div class="productionEachText">
<p class="orange">Name of Production (2010)</p>
<p>Group: Group Name</p>
<p>Some copy here</p>
<p>No. of shows: 50</p>
<p>Current(icon) or Upcoming (icon)/p>
<div class="orangeInnerRight">Name of Production (2010)</div>
<div>Group: Group Name</div>
<div>Some copy here</div>
<div>No. of shows: 50</div>
<div>Current(icon) or Upcoming (icon)</div>
</div>
<div class="clear"></div>
</div> <!-- end production each -->
@ -120,11 +121,11 @@
</div>
<div class="productionEachText">
<p class="orange">Name of Production (2010)</p>
<p>Group: Group Name</p>
<p>Some copy here</p>
<p>No. of shows: 50</p>
<p>Current(icon) or Upcoming (icon)/p>
<div class="orangeInnerRight">Name of Production (2010)</div>
<div>Group: Group Name</div>
<div>Some copy here</div>
<div>No. of shows: 50</div>
<div>Current(icon) or Upcoming (icon)</div>
</div>
<div class="clear"></div>
@ -141,9 +142,10 @@
<div class="productionEachText">
<a href="">Name of Person</a>
<p>Writer: Some script</p>
<p>Translation of script by playwright</p>
<p>From language to language</p>
<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>
@ -158,9 +160,10 @@
<div class="productionEachText">
<a href="">Name of Person</a>
<p>Writer: Some script</p>
<p>Translation of script by playwright</p>
<p>From language to language</p>
<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>
@ -174,11 +177,11 @@
</div>
<div class="productionEachText">
<a href="" class="toggleLink">Name of Person</a>
<p>Writer: Some script</p>
<p>Translation of script by playwright</p>
<p>From language to language</p>
<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>
@ -229,9 +232,9 @@
<div class="resourcesBlock">
<div class="resourcesEach">
<p class="orange">Title</p>
<p>One line description</p>
<p><a href="" target="_blank">Url</a></p>
<div class="orangeInnerRight">Title</div>
<div>One line description</div>
<div><a href="" target="_blank">Url</a></div>
<a href="">Download</a>
</div>
@ -243,9 +246,9 @@
<div class="resourcesBlock">
<div class="resourcesEach">
<p class="orange">Title</p>
<p>One line description</p>
<p><a href="" target="_blank">Url</a></p>
<div class="orangeInnerRight">Title</div>
<div>One line description</div>
<div><a href="" target="_blank">Url</a></div>
<a href="">Download</a>
</div>
@ -257,9 +260,9 @@
<div class="resourcesBlock">
<div class="resourcesEach">
<p class="orange">Title</p>
<p>One line description</p>
<p><a href="" target="_blank">Url</a></p>
<div class="orangeInnerRight">Title</div>
<div>One line description</div>
<div><a href="" target="_blank">Url</a></div>
<a href="">Download</a>
</div>
@ -271,9 +274,9 @@
<div class="resourcesBlock">
<div class="resourcesEach">
<p class="orange">Title</p>
<p>One line description</p>
<p><a href="" target="_blank">Url</a></p>
<div class="orangeInnerRight">Title</div>
<div>One line description</div>
<div><a href="" target="_blank">Url</a></div>
<a href="">Download</a>
</div>