01.html | searchcode

/book/01.html

https://github.com/neojjang/Titanium-Booker
HTML | 279 lines | 96 code | 76 blank | 107 comment | 0 complexity | d9fe0734e79a5d905f87280902b6b386 MD5 | raw file

<!--
#####################################################################
LAKER Version 1.1 – http://www.lakercompendium.com
#####################################################################
#####################################################################
This is a dossier file.
#####################################################################
#####################################################################
#####################################################################
-->


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:csi="http://www.massimocorner.com/libraries/csi/" lang="de">
<head>

<!--
############################################################################
META information ###########################################################
############################################################################
-->

<meta charset="utf-8">

<!--Prevent pinch to zoom on iOS devices-->
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />

<!--Allow saving as a web app on the home screen on iOS Devices (doesn't apply in Baker)-->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!--If the page is saved as a web app, the statusbar will be black-translucent (doesn't apply in Baker)-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<!--Prevent phone number detection on iOS devices-->
<meta name="format-detection" content="telephone=no" />


<!--Title. The content of the title is displayed on the loading screen on iOS devices-->
<title>Dossier 1 • Images & slideshow</title>

<!--
############################################################################
Stylesheets ################################################################
############################################################################
-->

<!--Loading the main style sheet-->
<link href="styles/styles.css" rel="stylesheet" type="text/css" />

<!--Loading the dossier specific css-->
<link href="styles/dossiers/01.css" rel="stylesheet" type="text/css" />

<!--
############################################################################
Javascripts ################################################################
############################################################################
-->

<script src="js/Hyphenator.js" type="text/javascript"></script>
<script src="js/jquery-1.5.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/tmt_core.js"></script>
<script type="text/javascript" src="js/tmt_net.js"></script>
<script type="text/javascript" src="js/tmt_csi.js"></script>
<script src="js/jquery.touchSwipe-1.2.1.js" type="text/javascript"></script>

<!--Mandatory JavaScripts (Uncomment if not used to speed up performance)
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
-->

</head>

<body>

<!--
############################################################################
"Table of content" in navigation bar #######################################
############################################################################
-->

<div class="nav-bar">
	<div class="nav-bar-container">
		
        <a href="#Inhaltsverzeichnis" class="nav-button toc"><div class="toc-label">Inhaltsverzeichnis</div>
		
        <div class="toc-list">
			<!--Include "Table of content" from external file-->
			<div id="includeTOC" csi:src="inc/toc.html"></div>
		</div><!--Div toc-list-->
		</a>
        
	</div><!--Div nav-bar-container-->
</div><!--Div nav-bar-->

<!--
############################################################################
End "Table of content" in navigation bar ###################################
############################################################################
-->


<!--
############################################################################
Start dossier navigation in navigation bar #################################
############################################################################
-->

<!--Include the small logo and the cover link-->
<div id="includeLogoAndCoverlink" csi:src="inc/logo-coverlink.html"></div>

<!--Link to the next dossier-->
<a href="02.html" class="nav-button next">
	<div class="nav-button-text">Next Dossier</div>
</a>

<!--Link to the previous dossier. It's the first page, so we don't need that one.
<a href="001.html" class="nav-button prev">
	<div class="nav-button-text">Previous Dossier</div>
</a>-->

<!--Implementing the Dossier-Number-->
<div id="dossier-number" class="dossier-number"><p>01</p></div>

<!--Navigation bar edges-->
<div class="edge-left"></div>
<div class="edge-right"></div>

<!--
############################################################################
End dossier navigation in navigation bar ###################################
############################################################################
-->

<!--Enable text hyphenation with Hyphenator.js-->
<div class="hyphenate">


<!--
############################################################################
Start content ##############################################################
############################################################################
-->


<!--Dossier start image-->
<div class="dossier-start-bg">
<!--(if you want to place something on top of the picture, place it here-->
</div><!-- Div dossier-start-bg-->

<!--Arrow which indicates the start of the text-->
<div class="dossier-headline-arrow"><img src="images/dossier-headline-arrow.png" /></div>

<!--"content-element" ensures, that content is placed within the right margins-->
<div class="content-element">
        <!--Starting Headline-->
        <div class="starting-headline">
              <h1>This is built with <em>Laker</em> – <br />  A compendium for building digital magazines with HTML5</h1>
        </div><!--Div starting headline-->
</div><!--Div content element-->

<!--Main content-->

<!--"content-element" ensures, that content is placed within the right margins-->
<div class="content-element">


<div class="large-column float-left">
<p><em>Laker</em> is built on top of the <a href="http://www.bakerframework.com" target="_blank">Baker ebook Framework</a> and the <a href="http://www.lessframework.com" target="_blank">LESS CSS Framework</a>. Basically it's a set of files, styles, tips and tricks for building digital publications with HTML5.</p>

<p>This publication demonstrates the main features of <em>Laker</em>. Take a look at the code and the documentation on <a href="http://www.lakercompendium.com" target="_blank">www.lakercompendium.com</a> to see how it's done. It's not that hard! ;) <br />
</p>
<hr /><br /></p>
</div><!--Div large-column float-left-->



<div class="large-column float-left">
<h1>Images &amp; slideshow</h1>
      <h2>Image in text (right)</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas velit tortor, ullamcorper id laoreet vel, ultricies ut lorem. Curabitur porta orci ut lacus vestibulum porttitor. Suspendisse potenti. Donec sodales ante eu dui molestie euismod ultricies nisl sollicitudin. Phasellus eget mauris eu velit mollis consectetur a in elit. Pellentesque eu lorem nunc. Integer eu elit massa. Morbi vestibulum lacus a quam sagittis pulvinar tristique arcu posuere. Aliquam sollicitudin risus risus, at semper neque. Aliquam rhoncus rhoncus ultrices.</p>
      
      <div class="media-right">
      <img src="images/dossier-01/image-in-text.jpg" width="400" height="600" /></div>
      
      <p> Aliquam erat volutpat. Aenean in nibh vitae leo placerat viverra. Pellentesque non sapien ac orci fermentum molestie in vitae purus. Cras lacinia turpis nec orci blandit adipiscing. Morbi tempor commodo leo, quis scelerisque risus pretium quis. Cras suscipit magna eget tortor sagittis fringilla. Praesent arcu justo, ultrices eu interdum nec, ornare aliquam urna. Vivamus cursus posuere erat id faucibus.</p>
      <p>Morbi semper ultrices porta. Aenean dignissim, sapien eget sodales mollis, massa urna malesuada elit, sit amet vulputate justo augue in massa. Praesent mattis accumsan blandit. Mauris nec enim ante. Sed fringilla interdum eros, nec lacinia turpis iaculis vel. Vestibulum leo ipsum, consequat a dignissim sit amet, egestas in urna. Donec nisl velit, pulvinar id ullamcorper vitae, imperdiet et leo. Donec ultricies cursus varius. Pellentesque elit arcu, pulvinar in fermentum non, faucibus eu quam. Suspendisse mollis aliquam sagittis. Vestibulum pellentesque accumsan arcu, vitae mattis tellus luctus id. Vivamus sed condimentum leo.</p>  
</div><!--Div large-column float-left-->


  <div class="large-column float-right">
      <h2>Image in text (left)</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas velit tortor, ullamcorper id laoreet vel, ultricies ut lorem. Curabitur porta orci ut lacus vestibulum porttitor. Suspendisse potenti. Donec sodales ante eu dui molestie euismod ultricies nisl sollicitudin. Phasellus eget mauris eu velit mollis consectetur a in elit. Pellentesque eu lorem nunc. Integer eu elit massa. Morbi vestibulum lacus a quam sagittis pulvinar tristique arcu posuere. Aliquam sollicitudin risus risus, at semper neque. Aliquam rhoncus rhoncus ultrices.</p>
      
      <div class="media-left">
      <img src="images/dossier-01/image-in-text.jpg" width="400" height="600" /></div>
      
      <p> Aliquam erat volutpat. Aenean in nibh vitae leo placerat viverra. Pellentesque non sapien ac orci fermentum molestie in vitae purus. Cras lacinia turpis nec orci blandit adipiscing. Morbi tempor commodo leo, quis scelerisque risus pretium quis. Cras suscipit magna eget tortor sagittis fringilla. Praesent arcu justo, ultrices eu interdum nec, ornare aliquam urna. Vivamus cursus posuere erat id faucibus.</p>
      <p>Morbi semper ultrices porta. Aenean dignissim, sapien eget sodales mollis, massa urna malesuada elit, sit amet vulputate justo augue in massa. Praesent mattis accumsan blandit. Mauris nec enim ante. Sed fringilla interdum eros, nec lacinia turpis iaculis vel. Vestibulum leo ipsum, consequat a dignissim sit amet, egestas in urna. Donec nisl velit, pulvinar id ullamcorper vitae, imperdiet et leo. Donec ultricies cursus varius. Pellentesque elit arcu, pulvinar in fermentum non, faucibus eu quam. Suspendisse mollis aliquam sagittis. Vestibulum pellentesque accumsan arcu, vitae mattis tellus luctus id. Vivamus sed condimentum leo.</p>  
</div><!--Div large-column float-right-->

  

<div class="large-column float-left">
      <h2>Slideshow</h2>
</div><!--Div dossier float-left-->
</div><!--Div content-element-->

<!--
############################################################################
ImageSlideshow #############################################################
############################################################################
-->

<div id="imgscroll-content">
<div id="imgscroll-legend"><p>» Swipe for more pictures.</p></div>
<div id="imgscroll-imgs">

<!--Picture 1-->
<div class="imgscroll-img" id="imgscroll-img">
	<img src="images/dossier-01/nyc1.jpg" />
	<div class="caption"><p>New York City #1</p></div>
</div><!--imgscroll-content-->

<!--Picture 2-->
<div class="imgscroll-img" id="imgscroll-img">
	<img src="images/dossier-01/nyc2.jpg" />
	<div class="caption"><p>New York City #2</p></div>
</div><!--imgscroll-content-->

<!--Picture 3-->
<div class="imgscroll-img" id="imgscroll-img">
	<img src="images/dossier-01/nyc3.jpg" />
	<div class="caption"><p>New York City #3</p></div>
</div><!--imgscroll-content-->

</div><!--Div imgscroll-imgs-->
</div><!--Div imgscroll-content-->

<!--Initiating the slideshow by calling the JS-->
<script src="js/imgscroll.js" type="text/javascript"></script>

<!--
############################################################################
ImageSlideshow End #########################################################
############################################################################
-->


  <!--
############################################################################
End of content #############################################################
############################################################################
-->
  
  

</div><!--Div hyphenate-->

  
  
  <!--
############################################################################
Start Footer ###############################################################
############################################################################
-->
  

<!--Include footer data from inc/footer.html-->
<div class="footer">
  <div id="includeFooter" csi:src="inc/footer.html"></div>
</div><!--Div footer-->

<!--
############################################################################
End Footer #################################################################
############################################################################
-->

</body>
</html>