Commit 52369d3adced7dd1ae4c8e9f6127703dc81b583e

  • avatar
  • pradeep
  • Thu Jun 13 15:23:30 IST 2013
Design changes
  • audios.html 71 ------------------------------+++++++++++++++++++++++++++++++++++++++++
  • audiovideos.html 107 --------------------------------------------------+++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  • css/main.css 368 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------++++++++++++++++++++++++++++++++++++++++++++++++++
  • data.html 29 -----------++++++++++++++++++
  • images.html 24 ---------+++++++++++++++
  • index.html 23 ---------++++++++++++++
  • tracks.html 25 -----------++++++++++++++
  • travelogue.html 33 -------------++++++++++++++++++++
  • videos.html 59 ------------+++++++++++++++++++++++++++++++++++++++++++++++
  • Diff rendering mode:
  • inline
  • side by side

audios.html

1<!DOCTYPE html>1<!DOCTYPE html>
2<html>
2 <head>3 <head>
3 <meta charset="utf-8">4 <meta charset="utf-8">
4 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5 <meta http-equiv="content-type" content="application/xhtml; charset=UTF-8" />
6 <title>Follow The Sheep</title>6 <title>Follow The Sheep</title>
7 <meta name="description" content="">7 <meta name="description" content="">
8 <meta name="viewport" content="width=device-width">8 <meta name="viewport" content="width=device-width">
9 <!--<link rel="stylesheet" href="css/bootstarp.css"/>-->
9 <meta name="viewport" content="width=device-width, initial-scale=1.0">
10 <!--<link rel="stylesheet" href="css/bootstarp.css"/>-->
10 <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>11 <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>
11 <link rel="stylesheet" href="css/bootstrap-responsive.css"/>
12 <link rel="stylesheet" href="css/bootstrap.min.css"/>
12 <link rel="stylesheet" href="css/bootstrap-responsive.css"/>
13 <link rel="stylesheet" href="css/bootstrap.min.css"/>
13 <link rel="stylesheet" href="css/normalize.css">14 <link rel="stylesheet" href="css/normalize.css">
14 <link rel="stylesheet" href="css/main.css">15 <link rel="stylesheet" href="css/main.css">
15 <script src="js/vendor/modernizr-2.6.1.min.js"></script>16 <script src="js/vendor/modernizr-2.6.1.min.js"></script>
16 </head>17 </head>
17<body>
18 <div><h1 id="title"><a href="index.html" style="text-decoration:none;">Follow the Sheep</a></h1>
18 <body>
19 <div id="header">
20<div id="title"><h1><a href="index.html" style="text-decoration:none;">Follow the Sheep</a></h1></div>
19 <div class="navigation">21 <div class="navigation">
20 <ul class="nav nav-pills"><!--<li><a href="index.html"> Home</a></li>-->
21 <li><a href="travelogue.html">Travel Blogs</a></li>
22 <ul class="nav nav-pills">
23 <li><a href="travelogue.html">Travel blogs</a></li>
22 <li><a href="data.html">Data</a></li>24 <li><a href="data.html">Data</a></li>
23 <li><a href="tracks.html">Tracks</a></li>25 <li><a href="tracks.html">Tracks</a></li>
24 <li><a href="images.html">Images</a></li>26 <li><a href="images.html">Images</a></li>
25 <li><a href="audios.html">Audios</a></li>27 <li><a href="audios.html">Audios</a></li>
26 <li><a href="videos.html">Videos</a></li>28 <li><a href="videos.html">Videos</a></li>
27</ul></div><hr></div>
29</ul></div>
30</div>
2831
29<!--<h2>All Tracks</h2>-->32<!--<h2>All Tracks</h2>-->
30<div class="box">
31<span class="text" style="margin-left:-40px;"><b>Place: Somalapura cross, Kampli Date: 06-Jan-2013</b></span><hr>
32
33 <h4>Conversation with Vajir - Audio Recording</h4>
33<div id="container">
34<h3 style="margin-left:20px;">Place: Somalapura cross, Kampli Date: 06-Jan-2013</h3>
35<div class="inside">
36<div class="align" style="margin-left:25px;">
37<ul><li>
38<h4>Conversation with Vajir - Audio Recording</h4>
34 <audio controls>39 <audio controls>
35 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/Memo.ogg" type="audio/ogg">40 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/Memo.ogg" type="audio/ogg">
36 </audio> </div><hr>
37<div class="box">
38<span class="text" style="margin-left:-40px;"><b>Place: Sreenivasa Nagara, Date: 31-Mar-2013</b></span><hr>
39<div class="sound">
40<h4>Interview with shepherd's son - Audio Recording</h4>
41 </audio></li></ul> </div></div>
42<hr>
43
44<h3 style="margin-left:20px;">Place: Sreenivasa Nagara, Date: 31-Mar-2013</b></h3>
45<div class="inside">
46<div class="align" style="margin-left:25px;">
47<ul>
48<li><h4>Interview with shepherd's son - Audio Recording</h4>
41 <audio controls>49 <audio controls>
42 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/interaction_with_kid.ogg" type="audio/ogg">50 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/interaction_with_kid.ogg" type="audio/ogg">
43 </audio>
51 </audio></li>
52<hr></div></div>
4453
45<div style="margin:-98px 0px 0px 400px"><h4>Interview with shepherd servant - Audio Recording</h4>
54<div class="inside">
55<div class="align">
56<li>
57<h4>Interview with shepherd servant - Audio Recording</h4>
46 <audio controls>58 <audio controls>
47 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/interaction_with_servant.ogg" type="audio/ogg">59 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/interaction_with_servant.ogg" type="audio/ogg">
48 </audio></div>
60 </audio></li></div>
4961
50<div style="margin:-98px 0px 0px 815px"><h4>Interview with shepherd(Mr.Basappa) - Audio Recording</h4>
62<div class="inside">
63<div class="align">
64<li>
65<h4>Interview with shepherd(Mr.Basappa) - Audio Recording</h4>
51 <audio controls>66 <audio controls>
52 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/interaction_with_shepherd.ogg" type="audio/ogg">67 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/interaction_with_shepherd.ogg" type="audio/ogg">
53 </audio> </div>
68 </audio></li></ul>
69</div>
70</div>
5471
55 </div>
56 </div>
57
58
59<!--<iframe width="400" height="250" src="http://mitan.in/foddllowsheep/socionity/jan2013gallery/Video/sheepvid.mp4" frameborder="0" allowfullscreen></iframe></a>-->
60<!--<center><iframe width="400" height="250" src="http://www.youtube.com/embed/Gz27sDcWWVo" frameborder="0" allowfullscreen></iframe></center>-->
61<!--<span class="text1">content</span>--><hr></div>
72</div>
62</body>73</body>
63</html>74</html>

audiovideos.html

1<!DOCTYPE html>1<!DOCTYPE html>
2<html>
2 <head>3 <head>
3 <meta charset="utf-8">4 <meta charset="utf-8">
4 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5 <meta http-equiv="content-type" content="application/xhtml; charset=UTF-8" />
6 <title>Follow The Sheep</title>6 <title>Follow The Sheep</title>
7 <meta name="description" content="">7 <meta name="description" content="">
8 <meta name="viewport" content="width=device-width">8 <meta name="viewport" content="width=device-width">
9 <!--<link rel="stylesheet" href="css/bootstarp.css"/>-->
9 <meta name="viewport" content="width=device-width, initial-scale=1.0">
10 <!--<link rel="stylesheet" href="css/bootstarp.css"/>-->
10 <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>11 <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>
11 <link rel="stylesheet" href="css/bootstrap-responsive.css"/>
12 <link rel="stylesheet" href="css/bootstrap.min.css"/>
12 <link rel="stylesheet" href="css/bootstrap-responsive.css"/>
13 <link rel="stylesheet" href="css/bootstrap.min.css"/>
13 <link rel="stylesheet" href="css/normalize.css">14 <link rel="stylesheet" href="css/normalize.css">
14 <link rel="stylesheet" href="css/main.css">15 <link rel="stylesheet" href="css/main.css">
15 <script src="js/vendor/modernizr-2.6.1.min.js"></script>16 <script src="js/vendor/modernizr-2.6.1.min.js"></script>
16 </head>17 </head>
17<body>
18 <div><h1 id="title"><a href="index.html" style="text-decoration:none;">Follow the Sheep</a></h1>
18 <body>
19 <div id="header">
20<div id="title"><h1><a href="index.html" style="text-decoration:none;">Follow the Sheep</a></h1></div>
19 <div class="navigation">21 <div class="navigation">
20 <ul class="nav nav-pills"><!--<li><a href="index.html"> Home</a></li>-->
21 <li><a href="travelogue.html">Travel Blogs</a></li>
22 <ul class="nav nav-pills">
23 <li><a href="travelogue.html">Travel blogs</a></li>
22 <li><a href="data.html">Data</a></li>24 <li><a href="data.html">Data</a></li>
23 <li><a href="tracks.html">Tracks</a></li>25 <li><a href="tracks.html">Tracks</a></li>
24 <li><a href="images.html">Images</a></li>26 <li><a href="images.html">Images</a></li>
25 <li><a href="audios.html">Audios</a></li>27 <li><a href="audios.html">Audios</a></li>
26 <li><a href="videos.html">Videos</a></li>28 <li><a href="videos.html">Videos</a></li>
27</ul></div><hr></div>
29</ul></div>
30</div>
2831
29<!--<h2>All Tracks</h2>-->
30<div class="box">
31<span id="atext"class="text" style="margin-left:-40px;"><b>Place: Somalapura cross, Kampli Date: 06-Jan-2013</b></span><hr>
32
33 <h4>Ineterview with Vajir</h4>
32<div id="container">
33<h2 style="margin-left:10px;">Audio Links:</h2>
34<h3 style="margin-left:20px;">Place: Somalapura cross, Kampli Date: 06-Jan-2013</h3>
35<div class="inside">
36<div class="align" style="margin-left:25px;">
37<ul><li>
38<h4>Conversation with Vajir - Audio Recording</h4>
34 <audio controls>39 <audio controls>
35 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/Memo.ogg" type="audio/ogg">40 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/Memo.ogg" type="audio/ogg">
36 </audio> </div><hr>
37<div class="box">
38<span id="atext1" class="text" style="margin-left:-40px;"><b>Place: Sreenivasa Nagara, Date: 31-Mar-2013</b></span><hr>
39<div class="sound">
40<h4>Interaction with shepherd's son</h4>
41 </audio></li></ul> </div></div>
42<hr>
43
44<h3 style="margin-left:20px;">Place: Sreenivasa Nagara, Date: 31-Mar-2013</b></h3>
45<div class="inside">
46<div class="align" style="margin-left:25px;">
47<ul>
48<li><h4>Interview with shepherd's son - Audio Recording</h4>
41 <audio controls>49 <audio controls>
42 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/interaction_with_kid.ogg" type="audio/ogg">50 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/interaction_with_kid.ogg" type="audio/ogg">
43 </audio>
51 </audio></li>
52</div></div>
4453
45<div id="atext2" style="margin:-98px 0px 0px 370px"><h4>Interaction with shepherd servant</h4>
54<div class="inside">
55<div class="align">
56<li>
57<h4>Interview with shepherd servant - Audio Recording</h4>
46 <audio controls>58 <audio controls>
47 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/interaction_with_servant.ogg" type="audio/ogg">59 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/interaction_with_servant.ogg" type="audio/ogg">
48 </audio></div>
60 </audio></li></div>
4961
50<div id="atext3" style="margin:-98px 0px 0px 760px"><h4>Interaction with Basanna shepherd from Bandanahatti</h4>
62<div class="inside">
63<div class="align">
64<li>
65<h4>Interview with shepherd(Mr.Basappa) - Audio Recording</h4>
51 <audio controls>66 <audio controls>
52 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/interaction_with_shepherd.ogg" type="audio/ogg">67 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/interaction_with_shepherd.ogg" type="audio/ogg">
53 </audio> </div>
68 </audio></li></ul>
69</div>
70</div>
5471
55 </div>
56 </div><hr>
57
58
59
60<div class="box">
61<span "vtext" class="text" style="margin-left:-40px;"><b>Place: Somalapura cross, Kampli</b></span><hr/>
62<!--<div class="inside" style="display:inline">
63 <div id="thumbnails" style="display:inline">-->
64 <h4>What's in a lamb?</h4>
72<h2 style="margin-left:10px;">Video Links:</h2>
73<h3 style="margin-left:20px;">Place: Somalapura cross, Kampli Date: 06-Jan-2013</h3>
74<div class="inside">
75<div class="align" style="margin-left:25px;">
76 <ul><li> <h4>What's in a lamb?</h4>
65 <video width="300" height="240" controls>77 <video width="300" height="240" controls>
66 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/sheep.ogv" type="video/ogg">78 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/sheep.ogv" type="video/ogg">
67 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/sheepvid.mp4" type="video/mp4">79 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/sheepvid.mp4" type="video/mp4">
68 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/sheepvid.webm" type="video/webm">80 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/sheepvid.webm" type="video/webm">
69 Your browser does not support the video tag.81 Your browser does not support the video tag.
70 </video>
82 </video></li></ul></div></div>
7183
72<!-- <h3>Shepherd explaining his exploration with sheep</h3>
84<hr>
85<h3 style="margin-left:20px;">Place: Somalapura cross, Kampli Date: 06-Jan-2013</h3>
86<div class="inside">
87<div class="align" style="margin-left:25px;">
88<ul><li><h4>Interacting with shepherd female family members</h4>
73 <video width="300" height="240" controls>89 <video width="300" height="240" controls>
74 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/exploring_with_sheep.mp4" type="video/mp4">
75 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/exploring_with_sheep.webm" type="video/webm">
76 Your browser does not support the video tag.
77 </video>
78 </div>-->
79
80 <h4>Interacting with shepherd female family members</h4>
81 <video width="300" height="240" controls>
82 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/butterchunner.mp4" type="video/mp4">
83 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/shepherd.ogv" type="video/ogg">90 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/shepherd.ogv" type="video/ogg">
91 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/butterchunner.mp4" type="video/mp4">
84 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/butterchunner.webm" type="video/webm">92 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/butterchunner.webm" type="video/webm">
85 Your browser does not support the video tag.93 Your browser does not support the video tag.
86 </video>94 </video>
87 </div>
88</div>
8995
90<!--<iframe width="400" height="250" src="http://mitan.in/foddllowsheep/socionity/jan2013gallery/Video/sheepvid.mp4" frameborder="0" allowfullscreen></iframe></a>-->
91<!--<center><iframe width="400" height="250" src="http://www.youtube.com/embed/Gz27sDcWWVo" frameborder="0" allowfullscreen></iframe></center>-->
92<!--<span class="text1">content</span>--><hr></div>
96
97</li></ul></div>
98</div>
99</div>
93</body>100</body>
94</html>101</html>

css/main.css

1/*
2 * HTML5 Boilerplate
3 *
4 * What follows is the result of much research on cross-browser styling.
5 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
6 * Kroc Camen, and the H5BP dev community and team.
7 */
8
9/* ==========================================================================
10 Base styles: opinionated defaults
11 ========================================================================== */
12
13html,1html,
14button,2button,
15input,3input,
……
7}7}
88
9body {9body {
10 // width:100%;
11 //height:100%;
10 margin:0 auto;12 margin:0 auto;
11 font-size: 1em;
12 line-height: 1.6;
13 background-image: url('http://mitan.in/followsheep/images/bg.jpg');
14 border:1px solid #000;
15
13 background-image: url('images/bg.png');
14
16}15}
1716
18body .container-fluid{
19 background-image: url('http://mitan.in/followsheep/images/bg.jpg');
17#header {
18 margin:0 auto;
19 height:100px;
20 width: 1000px;
21 background-color:#cce;
22 border-radius: 1em 1em 1em 1em;
23 }
24#title {
25 float:left;
20}26}
21h1{
22 width:100%;
23 font-family:Comic sans MS;
24}
27#title a:hover {
28 color:#fff;
29 }
25.navigation {30.navigation {
26 width:100%;
27 font-size:22px;
28 font-family:Comic sans MS;
29 margin-left:34%;
31 margin:-13px 30px -30px 0px;
32 font-size:20px;
33 float:right;
34
30}35}
36
37#container {
38 border-radius: 1em 1em 1em 1em;
39 font-weight: bold;
40 height: 100%;
41 margin-top:100px;
42 margin: 20px auto;
43 padding:auto;
44 width: 1000px;
45 background-color:#cce;
46
47}
48
31.inside {49.inside {
32 width:100%;
33 margin:0px 0px 0px 0px;
34 position:relative;
35 height:auto;
50 min-width:100%;
51 margin:10px auto;
52 display:inline-block;
36 }53 }
37.travelogue {54.travelogue {
38 margin:0px 0px 0px 30px;
39 width:1070px;
55 min-width:90%;
56 height:100%;
40 postion:relative;57 postion:relative;
41}58}
42.imgsize {59.imgsize {
……
67 height:200px;67 height:200px;
68 margin:10px 0px 0px 60px;68 margin:10px 0px 0px 60px;
69 border-radius:1em 1em 1em 1em;69 border-radius:1em 1em 1em 1em;
70 padding:2px 2px 2px 2px;
70 //padding:1px 1px 1px 1px;
71 display:inline;71 display:inline;
7272
73}73}
……
75 font-family:Comic sans MS;75 font-family:Comic sans MS;
76}76}
7777
78/*
79 * Remove text-shadow in selection highlight: h5bp.com/i
80 * These selection declarations have to be separate.
81 * Customize the background color to match your design.
82 */
83
84::-moz-selection {
85 background: #b3d4fc;
86 text-shadow: none;
87}
88
89::selection {
90 background: #b3d4fc;
91 text-shadow: none;
92}
93
94/*
95 * A better looking default horizontal rule
96 */
97
98hr {78hr {
99 display: block;79 display: block;
100 height: 1px;80 height: 1px;
……
84 padding: 0;84 padding: 0;
85}85}
8686
87/*
88 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
89 */
90
91img {
92 vertical-align: middle;
93}
94
95/*
96 * Remove default fieldset styles.
97 */
98
99fieldset {
100 border: 0;
101 margin: 0;
102 padding: 0;
103}
104
105/*
106 * Allow only vertical resizing of textareas.
107 */
108
109textarea {
110 resize: vertical;
111}
112
113/* ==========================================================================
114 Chrome Frame prompt
115 ========================================================================== */
116
117.chromeframe {
118 margin: 0.2em 0;
119 background: #ccc;
120 color: #000;
121 padding: 0.2em 0;
122}
123
124/* ==========================================================================
125 Author's custom styles
126 ========================================================================== */
127.carousel-images{
128 width:auto;
129 height:300px;
130}
131.span10{
132 border-color:solid 5px #000;
133}
134.box{87.box{
135 width:300px;88 width:300px;
136 height:200px;89 height:200px;
137 margin:0px 0px 0px 60px;
90 margin:0 auto;
91 //margin:0px 0px 0px 44px;
92 margin-left:1.5%;
138 border-radius:1em 1em 1em 1em;93 border-radius:1em 1em 1em 1em;
139 padding:2px 2px 2px 2px;
140 display:inline;
94 padding:2px 2px 2px 2px;
95// display:inline;
141 }96 }
142.row{97.row{
143 border:1px solid #000;98 border:1px solid #000;
……
125 display:inline125 display:inline
126 margin:0px 0px 0px 0px;126 margin:0px 0px 0px 0px;
127 border-radius:1em 1em 1em 1em;127 border-radius:1em 1em 1em 1em;
128 padding:0px 0px 0px 10px;
128 padding:0px 0px 0px 0px;
129}129}
130.track1{130.track1{
131 width:0 auto;131 width:0 auto;
……
146 height:auto;146 height:auto;
147 margin:0 auto;147 margin:0 auto;
148}148}
149/* ==========================================================================
150 Helper classes
151 ========================================================================== */
152149
153/*
154 * Image replacement
155 */
156
157.ir {
158 background-color: transparent;
159 border: 0;
160 overflow: hidden;
161 /* IE 6/7 fallback */
162 *text-indent: -9999px;
150.align{
151 margin-left:60px;
163}152}
164
165.ir:before {
166 content: "";
167 display: block;
168 width: 0;
169 height: 100%;
170}
171
172/*
173 * Hide from both screenreaders and browsers: h5bp.com/u
174 */
175
176.hidden {
177 display: none !important;
178 visibility: hidden;
179}
180
181/*
182 * Hide only visually, but have it available for screenreaders: h5bp.com/v
183 */
184
185.visuallyhidden {
186 border: 0;
187 clip: rect(0 0 0 0);
188 height: 1px;
189 margin: -1px;
190 overflow: hidden;
191 padding: 0;
192 position: absolute;
193 width: 1px;
194}
195
196/*
197 * Extends the .visuallyhidden class to allow the element to be focusable
198 * when navigated to via the keyboard: h5bp.com/p
199 */
200
201.visuallyhidden.focusable:active,
202.visuallyhidden.focusable:focus {
203 clip: auto;
204 height: auto;
205 margin: 0;
206 overflow: visible;
207 position: static;
208 width: auto;
209}
210
211/*
212 * Hide visually and from screenreaders, but maintain layout
213 */
214
215.invisible {
216 visibility: hidden;
217}
218
219/*
220 * Clearfix: contain floats
221 *
222 * For modern browsers
223 * 1. The space content is one way to avoid an Opera bug when the
224 * `contenteditable` attribute is included anywhere else in the document.
225 * Otherwise it causes space to appear at the top and bottom of elements
226 * that receive the `clearfix` class.
227 * 2. The use of `table` rather than `block` is only necessary if using
228 * `:before` to contain the top-margins of child elements.
229 */
230
231.clearfix:before,
232.clearfix:after {
233 content: " "; /* 1 */
234 display: table; /* 2 */
235}
236
237.clearfix:after {
238 clear: both;
239}
240
241/*
242 * For IE 6/7 only
243 * Include this rule to trigger hasLayout and contain floats.
244 */
245
246.clearfix {
247 *zoom: 1;
248}
249
250/* ==========================================================================
251 EXAMPLE Media Queries for Responsive Design.
252 Theses examples override the primary ('mobile first') styles.
253 Modify as content requires.
254 ========================================================================== */
255
256@media only screen and (min-width: 35em) {
257 /* Style adjustments for viewports that meet the condition */
258}
259
260@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
261 only screen and (min-resolution: 144dpi) {
262 /* Style adjustments for high resolution devices */
263}
264
265/* ==========================================================================
266 Print styles.
267 Inlined to avoid required HTTP connection: h5bp.com/r
268 ========================================================================== */
269
270@media print {
271 * {
272 background: transparent !important;
273 color: #000 !important; /* Black prints faster: h5bp.com/s */
274 box-shadow:none !important;
275 text-shadow: none !important;
276 }
277
278 a,
279 a:visited {
280 text-decoration: underline;
281 }
282
283 a[href]:after {
284 content: " (" attr(href) ")";
285 }
286
287 abbr[title]:after {
288 content: " (" attr(title) ")";
289 }
290
291 /*
292 * Don't show links for images, or javascript/internal links
293 */
294
295 .ir a:after,
296 a[href^="javascript:"]:after,
297 a[href^="#"]:after {
298 content: "";
299 }
300
301 pre,
302 blockquote {
303 border: 1px solid #999;
304 page-break-inside: avoid;
305 }
306
307 thead {
308 display: table-header-group; /* h5bp.com/t */
309 }
310
311 tr,
312 img {
313 page-break-inside: avoid;
314 }
315
316 img {
317 max-width: 100% !important;
318 }
319
320 @page {
321 margin: 0.5cm;
322 }
323
324 p,
325 h2,
326 h3 {
327 orphans: 3;
328 widows: 3;
329 }
330
331 h2,
332 h3 {
333 page-break-after: avoid;
334 }
335}
336
337
338#thumbnails {
339margin:10px 0 0 15px;
340}
341
342#thumbs {
343margin: 100px 100px 0;
344border-top: 5px solid #2D912D;
345background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2D912D), to(transparent));
346 background-image: -webkit-linear-gradient(#2D912D, transparent);
347 background-image:
348 -moz-linear-gradient(#2D912D, transparent),
349 -moz-linear-gradient(#2D912D, transparent)
350 ;
351 background-image:
352 -o-linear-gradient(#2D912D, transparent),
353 -o-linear-gradient(#2D912D, transparent)
354 ;
355 background-image:
356 linear-gradient(#2D912D, transparent),
357 linear-gradient(#2D912D, transparent)
358 ;
359 -moz-background-size:5px 100%;
360 background-size:5px 100%;
361 background-position:0 0, 100% 0;
362 background-repeat:no-repeat;
153#data {
154 margin:0px 0px 0px 20px;
363}155}

data.html

1<!DOCTYPE html>1<!DOCTYPE html>
2<html>
2 <head>3 <head>
3 <meta charset="utf-8">4 <meta charset="utf-8">
4 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5 <meta http-equiv="content-type" content="application/xhtml; charset=UTF-8" />
6 <title>Follow The Sheep</title>6 <title>Follow The Sheep</title>
7 <meta name="description" content="">7 <meta name="description" content="">
8 <meta name="viewport" content="width=device-width">8 <meta name="viewport" content="width=device-width">
9 <!--<link rel="stylesheet" href="css/bootstarp.css"/>-->
9 <meta name="viewport" content="width=device-width, initial-scale=1.0">
10 <!--<link rel="stylesheet" href="css/bootstarp.css"/>-->
10 <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>11 <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>
11 <link rel="stylesheet" href="css/bootstrap-responsive.css"/>
12 <link rel="stylesheet" href="css/bootstrap.min.css"/>
12 <link rel="stylesheet" href="css/bootstrap-responsive.css"/>
13 <link rel="stylesheet" href="css/bootstrap.min.css"/>
13 <link rel="stylesheet" href="css/normalize.css">14 <link rel="stylesheet" href="css/normalize.css">
14 <link rel="stylesheet" href="css/main.css">15 <link rel="stylesheet" href="css/main.css">
15 <script src="js/vendor/modernizr-2.6.1.min.js"></script>16 <script src="js/vendor/modernizr-2.6.1.min.js"></script>
16 </head>17 </head>
17 <body>
18 <div><h1 id="title"><a href="index.html" style="text-decoration:none;">Follow the Sheep</a></h1>
18 <body style="margin-left:-13px;">
19 <div id="header">
20<div id="title"><h1><a href="index.html" style="text-decoration:none;">Follow the Sheep</a></h1></div>
19 <div class="navigation">21 <div class="navigation">
20 <ul class="nav nav-pills"><!--<li><a href="index.html"> Home</a></li>-->
21 <li><a href="travelogue.html">Travel Blogs</a></li>
22 <ul class="nav nav-pills">
23 <li><a href="travelogue.html">Travel blogs</a></li>
22 <li><a href="data.html">Data</a></li>24 <li><a href="data.html">Data</a></li>
23 <li><a href="tracks.html">Tracks</a></li>25 <li><a href="tracks.html">Tracks</a></li>
24 <li><a href="images.html">Images</a></li>26 <li><a href="images.html">Images</a></li>
25 <li><a href="audios.html">Audios</a></li>27 <li><a href="audios.html">Audios</a></li>
26 <li><a href="videos.html">Videos</a></li>28 <li><a href="videos.html">Videos</a></li>
27</ul></div><hr></div>
29</ul></div>
30</div>
31
28<!--<h2>All Tracks</h2>-->32<!--<h2>All Tracks</h2>-->
29<!--<span class="text" style="margin-left:-40px;"><b>Place: Somalapura cross, Kampli</b></span>-->
30<div id="data" class="inside" style="display:inline">
33<!--<span class="text" style="margin-left:-40px;"><b>Place: Somalapura cross,
34 Kampli</b></span>-->
35<div id="container">
36<div id="data" class="inside">
31 <h3>Collective list of shepherds and track routes </h3>37 <h3>Collective list of shepherds and track routes </h3>
32 <ul>38 <ul>
33 <li><a href="data/namesofshepherds.html"> Doc listing 57 shepherd names</a></li>39 <li><a href="data/namesofshepherds.html"> Doc listing 57 shepherd names</a></li>
……
8585
8686
87<hr></div>-->87<hr></div>-->
88</div>
88</div>89</div>
89</body>90</body>
90</html>91</html>

images.html

1<!DOCTYPE html>1<!DOCTYPE html>
2<!DOCTYPE html>
2<html>
3 <head>3 <head>
4 <meta charset="utf-8">4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6 <title>Follow The Sheep</title>6 <title>Follow The Sheep</title>
7 <meta name="description" content="">7 <meta name="description" content="">
8 <meta name="viewport" content="width=device-width">8 <meta name="viewport" content="width=device-width">
9 <!--<link rel="stylesheet" href="css/bootstarp.css"/>-->
9 <meta name="viewport" content="width=device-width, initial-scale=1.0">
10 <!--<link rel="stylesheet" href="css/bootstarp.css"/>-->
10 <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>11 <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>
11 <link rel="stylesheet" href="css/bootstrap-responsive.css"/>
12 <link rel="stylesheet" href="css/bootstrap.min.css"/>
12 <link rel="stylesheet" href="css/bootstrap-responsive.css"/>
13 <link rel="stylesheet" href="css/bootstrap.min.css"/>
13 <link rel="stylesheet" href="css/normalize.css">14 <link rel="stylesheet" href="css/normalize.css">
14 <link rel="stylesheet" href="css/main.css">15 <link rel="stylesheet" href="css/main.css">
15 <script src="js/vendor/modernizr-2.6.1.min.js"></script>16 <script src="js/vendor/modernizr-2.6.1.min.js"></script>
16 </head>17 </head>
17<body>
18 <div><h1 id="title"><a href="index.html" style="text-decoration:none;">Follow the Sheep</a></h1>
18 <body>
19 <div id="header">
20<div id="title"><h1><a href="index.html" style="text-decoration:none;">Follow the Sheep</a></h1></div>
19 <div class="navigation">21 <div class="navigation">
20 <ul class="nav nav-pills"><!--<li><a href="index.html"> Home</a></li>-->
21 <li><a href="travelogue.html">Travel Blogs</a></li>
22 <ul class="nav nav-pills">
23 <li><a href="travelogue.html">Travel blogs</a></li>
22 <li><a href="data.html">Data</a></li>24 <li><a href="data.html">Data</a></li>
23 <li><a href="tracks.html">Tracks</a></li>25 <li><a href="tracks.html">Tracks</a></li>
24 <li><a href="images.html">Images</a></li>26 <li><a href="images.html">Images</a></li>
25 <li><a href="audios.html">Audios</a></li>27 <li><a href="audios.html">Audios</a></li>
26 <li><a href="videos.html">Videos</a></li>28 <li><a href="videos.html">Videos</a></li>
27</ul></div><hr></div>
29</ul></div>
30</div>
31
28<!--<h2>All Tracks</h2>-->32<!--<h2>All Tracks</h2>-->
33<div id="container">
29<span id="imgtext" class="text1"><b> Pradeep's Album, Date: 31-Mar-2013, Place: Sreenivasa Nagara.</b></span>34<span id="imgtext" class="text1"><b> Pradeep's Album, Date: 31-Mar-2013, Place: Sreenivasa Nagara.</b></span>
30<div class="inside"><a href="https://plus.google.com/photos/109326572514989926327/albums/5867314362446442529?banner=pwa" title="Follow the sheep Album"><img id="image_image_1" class="box" src="images/sheep.jpg" alt="images"/></a>35<div class="inside"><a href="https://plus.google.com/photos/109326572514989926327/albums/5867314362446442529?banner=pwa" title="Follow the sheep Album"><img id="image_image_1" class="box" src="images/sheep.jpg" alt="images"/></a>
31<hr>36<hr>
……
44<span id="imgtext4" class="text1"><b>Shalini's Album, Date: 4-Nov-2012, Sheep Breeds</b></span>44<span id="imgtext4" class="text1"><b>Shalini's Album, Date: 4-Nov-2012, Sheep Breeds</b></span>
45<div class="inside"><a href="http://team.servelots.com/my/shalini/sheep_narratives/typeofsheep/" title="Sheep breeds"><img id="image_image_4"class="box" src="images/sheep_diff.jpg" alt="images"/></a>45<div class="inside"><a href="http://team.servelots.com/my/shalini/sheep_narratives/typeofsheep/" title="Sheep breeds"><img id="image_image_4"class="box" src="images/sheep_diff.jpg" alt="images"/></a>
46<!--<span class="text1">content</span>--><hr></div>46<!--<span class="text1">content</span>--><hr></div>
47</div>
47</body>48</body>
48</html>49</html>

index.html

1<!DOCTYPE html>1<!DOCTYPE html>
2<html>
2 <head>3 <head>
3 <meta charset="utf-8">4 <meta charset="utf-8">
4 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
……
15 <link rel="stylesheet" href="css/main.css">15 <link rel="stylesheet" href="css/main.css">
16 <script src="js/vendor/modernizr-2.6.1.min.js"></script>16 <script src="js/vendor/modernizr-2.6.1.min.js"></script>
17 </head>17 </head>
18 <body>
19 <div><h1 id="title"><a href="index.html" style="text-decoration:none;">Follow the Sheep</a></h1>
18 <body background-image="url(images/bg.png)">
19 <div id="header">
20<div id="title"><h1><a href="index.html" style="text-decoration:none;">Follow the Sheep</a></h1></div>
20 <div class="navigation">21 <div class="navigation">
21 <ul class="nav nav-pills"><!--<li><a href="index.html"> Home</a></li>-->
22 <li><a href="travelogue.html">Travel Blogs</a></li>
22 <ul class="nav nav-pills">
23 <li><a href="travelogue.html">Travel blogs</a></li>
23 <li><a href="data.html">Data</a></li>24 <li><a href="data.html">Data</a></li>
24 <li><a href="tracks.html">Tracks</a></li>25 <li><a href="tracks.html">Tracks</a></li>
25 <li><a href="images.html">Images</a></li>26 <li><a href="images.html">Images</a></li>
26 <li><a href="audios.html">Audios</a></li>27 <li><a href="audios.html">Audios</a></li>
27 <li><a href="videos.html">Videos</a></li>28 <li><a href="videos.html">Videos</a></li>
28</ul></div><hr></div>
29<h3 id="hometravel" style="margin-left:50px;">Travelogues</h3>
30<div id="content" class="content">
31<div id="inside" class="inside"><a href="travelogue.html"><img id="image_home_2" class="box" src="images/track1.jpg" alt="images" title="Track showing 13 shepherds location near Sreenivasa Nagara and Kallukamba"/></a>
29</ul></div>
30</div>
31
32
33<div id="container">
34<div id="inside" class="inside"><!--<h3 id="hometravel" style="margin-left:50px;">Travelogues</h3>-->
35<a href="travelogue.html"><img id="image_home_2" class="box" src="images/track1.jpg" alt="images" title="Track showing 13 shepherds location near Sreenivasa Nagara and Kallukamba"/></a>
32<a href="travelogue.html"><img id="image_home_2" class="box" src="images/track2.jpg" alt="images" title="Grazing points at Somalapura Cross"></a>36<a href="travelogue.html"><img id="image_home_2" class="box" src="images/track2.jpg" alt="images" title="Grazing points at Somalapura Cross"></a>
33<a href="travelogue.html"><img id="image_home_3" class="box" src="images/track3.jpg" alt="images" title="The track details out the path that shepherds took"></a><hr/></div>37<a href="travelogue.html"><img id="image_home_3" class="box" src="images/track3.jpg" alt="images" title="The track details out the path that shepherds took"></a><hr/></div>
34<h3 id="homegallery" style="margin-left:50px;">Image-Gallery</h3>
38<!--<h3 id="homegallery" style="margin-left:50px;">Image-Gallery</h3>-->
35<div id="inside1" class="inside">39<div id="inside1" class="inside">
36<a href="images.html"><img id="image_home_4" class="box" src="images/tent.jpg" alt="images" title="image gallery"/></a>40<a href="images.html"><img id="image_home_4" class="box" src="images/tent.jpg" alt="images" title="image gallery"/></a>
37<a href="images.html"><img id="image_home_5" class="box" src="images/sheep1.jpg" alt="images" title="image gallery"/></a>41<a href="images.html"><img id="image_home_5" class="box" src="images/sheep1.jpg" alt="images" title="image gallery"/></a>

tracks.html

1<!DOCTYPE html>1<!DOCTYPE html>
2<!DOCTYPE html>
2<html>
3 <head>3 <head>
4 <meta charset="utf-8">4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6 <title>Follow The Sheep</title>6 <title>Follow The Sheep</title>
7 <meta name="description" content="">7 <meta name="description" content="">
8 <meta name="viewport" content="width=device-width">8 <meta name="viewport" content="width=device-width">
9 <!--<link rel="stylesheet" href="css/bootstarp.css"/>-->
9 <meta name="viewport" content="width=device-width, initial-scale=1.0">
10 <!--<link rel="stylesheet" href="css/bootstarp.css"/>-->
10 <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>11 <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>
11 <link rel="stylesheet" href="css/bootstrap-responsive.css"/>
12 <link rel="stylesheet" href="css/bootstrap.min.css"/>
12 <link rel="stylesheet" href="css/bootstrap-responsive.css"/>
13 <link rel="stylesheet" href="css/bootstrap.min.css"/>
13 <link rel="stylesheet" href="css/normalize.css">14 <link rel="stylesheet" href="css/normalize.css">
14 <link rel="stylesheet" href="css/main.css">15 <link rel="stylesheet" href="css/main.css">
15 <script src="js/vendor/modernizr-2.6.1.min.js"></script>16 <script src="js/vendor/modernizr-2.6.1.min.js"></script>
16 </head>17 </head>
17<body>
18 <div><h1 id="title"><a href="index.html" style="text-decoration:none;">Follow the Sheep</a></h1>
18 <body>
19 <div id="header">
20<div id="title"><h1><a href="index.html" style="text-decoration:none;">Follow the Sheep</a></h1></div>
19 <div class="navigation">21 <div class="navigation">
20 <ul class="nav nav-pills"><!--<li><a href="index.html"> Home</a></li>-->
21 <li><a href="travelogue.html">Travel Blogs</a></li>
22 <ul class="nav nav-pills">
23 <li><a href="travelogue.html">Travel blogs</a></li>
22 <li><a href="data.html">Data</a></li>24 <li><a href="data.html">Data</a></li>
23 <li><a href="tracks.html">Tracks</a></li>25 <li><a href="tracks.html">Tracks</a></li>
24 <li><a href="images.html">Images</a></li>26 <li><a href="images.html">Images</a></li>
25 <li><a href="audios.html">Audios</a></li>27 <li><a href="audios.html">Audios</a></li>
26 <li><a href="videos.html">Videos</a></li>28 <li><a href="videos.html">Videos</a></li>
27</ul></div><hr></div>
29</ul></div>
30</div>
2831
29<!--<h2>All Tracks</h2>-->32<!--<h2>All Tracks</h2>-->
30
33<div id="container">
31<span id="place" class="text1"><b>Track1: Shepherd Locations, Date: 31-Mar-2013, Place: Sreenivasa Nagara</b></span>34<span id="place" class="text1"><b>Track1: Shepherd Locations, Date: 31-Mar-2013, Place: Sreenivasa Nagara</b></span>
32<div class="inside"><a href="http://socionity.iiit.ac.in/gpsapp/gpsback/main.php?id=186" title="see the track"><img id="trackimg1" class="imgsize1" src="images/track1.jpg" alt="images"/></a>35<div class="inside"><a href="http://socionity.iiit.ac.in/gpsapp/gpsback/main.php?id=186" title="see the track"><img id="trackimg1" class="imgsize1" src="images/track1.jpg" alt="images"/></a>
33<!--<span class="text1">content</span>--><hr></div>36<!--<span class="text1">content</span>--><hr></div>
……
52<span id="place5" class="text1"><b>Track7: Track from Somalapura cross to Vajir's tent, Date: 06-Jan-2013, Place: Somalapura Cross.</b></span>52<span id="place5" class="text1"><b>Track7: Track from Somalapura cross to Vajir's tent, Date: 06-Jan-2013, Place: Somalapura Cross.</b></span>
53<div class="inside"><a href="http://socionity.iiit.ac.in/gpsapp/gpsback/main.php?id=84" title="see the track"><img id="trackimg7" class="imgsize1" src="images/track7.jpg" alt="images"/></a>53<div class="inside"><a href="http://socionity.iiit.ac.in/gpsapp/gpsback/main.php?id=84" title="see the track"><img id="trackimg7" class="imgsize1" src="images/track7.jpg" alt="images"/></a>
54<!--<span class="text1">content</span>--><hr></div>54<!--<span class="text1">content</span>--><hr></div>
55
55</div>
56</body>56</body>
57</html>57</html>

travelogue.html

1<!DOCTYPE html>1<!DOCTYPE html>
2<html>
2 <head>3 <head>
3 <meta charset="utf-8">4 <meta charset="utf-8">
4 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5 <title>Follow The Sheep</title>6 <title>Follow The Sheep</title>
6 <meta name="description" content="">7 <meta name="description" content="">
7 <meta name="viewport" content="width=device-width">8 <meta name="viewport" content="width=device-width">
8 <!--<link rel="stylesheet" href="css/bootstarp.css"/>-->
9 <meta name="viewport" content="width=device-width, initial-scale=1.0">
10 <!--<link rel="stylesheet" href="css/bootstarp.css"/>-->
9 <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>11 <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>
10 <link rel="stylesheet" href="css/bootstrap-responsive.css"/>
11 <link rel="stylesheet" href="css/bootstrap.min.css"/>
12 <link rel="stylesheet" href="css/bootstrap-responsive.css"/>
13 <link rel="stylesheet" href="css/bootstrap.min.css"/>
12 <link rel="stylesheet" href="css/normalize.css">14 <link rel="stylesheet" href="css/normalize.css">
13 <link rel="stylesheet" href="css/main.css">15 <link rel="stylesheet" href="css/main.css">
14 <script src="js/vendor/modernizr-2.6.1.min.js"></script>16 <script src="js/vendor/modernizr-2.6.1.min.js"></script>
15 </head>17 </head>
16 <body>18 <body>
17 <div><h1 id="title"><a href="index.html" style="text-decoration:none;">Follow the Sheep</a></h1>
18 <div class="navigation">
19 <ul class="nav nav-pills"><!--<li><a href="index.html"> Home</a></li>-->
20 <li><a href="travelogue.html">Travel Blogs</a></li>
21 <li><a href="data.html">Data</a></li>
22 <li><a href="tracks.html">Tracks</a></li>
23 <li><a href="images.html">Images</a></li>
24 <li><a href="audios.html">Audios</a></li>
25 <li><a href="videos.html">Videos</a></li>
26</ul></div><hr></div>
19 <div id="header">
20<div id="title"><h1><a href="index.html" style="text-decoration:none;">Follow the Sheep</a></h1></div>
21 <div class="navigation">
22 <ul class="nav nav-pills">
23 <li><a href="travelogue.html">Travel Blogs</a></li>
24 <li><a href="data.html">Data</a></li>
25 <li><a href="tracks.html">Tracks</a></li>
26 <li><a href="images.html">Images</a></li>
27 <li><a href="audios.html">Audios</a></li>
28 <li><a href="videos.html">Videos</a></li>
29</ul></div>
30</div>
31
32<div id="container">
27<div id="travelogue" class="travelogue">33<div id="travelogue" class="travelogue">
28<div id="row1" class="row">34<div id="row1" class="row">
29<span class="text">Track showing 13 shepherds location near Sreenivasa Nagara and Kallukamba. All shepherds are located within 10kms range.</span>35<span class="text">Track showing 13 shepherds location near Sreenivasa Nagara and Kallukamba. All shepherds are located within 10kms range.</span>
……
87<img id="track7_2" class="images" src="images/track7_2.jpg" alt="images"/>87<img id="track7_2" class="images" src="images/track7_2.jpg" alt="images"/>
88<img id="track7_3" class="images" src="images/track7_3.jpg" alt="images"/>88<img id="track7_3" class="images" src="images/track7_3.jpg" alt="images"/>
89</div></div><hr>89</div></div><hr>
90</div>
90 </body>91 </body>
91</html>92</html>

videos.html

1<!DOCTYPE html>1<!DOCTYPE html>
2<html>
2 <head>3 <head>
3 <meta charset="utf-8">4 <meta charset="utf-8">
4 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
5 <meta http-equiv="content-type" content="application/xhtml; charset=UTF-8" />
6 <title>Follow The Sheep</title>6 <title>Follow The Sheep</title>
7 <meta name="description" content="">7 <meta name="description" content="">
8 <meta name="viewport" content="width=device-width">8 <meta name="viewport" content="width=device-width">
9 <!--<link rel="stylesheet" href="css/bootstarp.css"/>-->
9 <meta name="viewport" content="width=device-width, initial-scale=1.0">
10 <!--<link rel="stylesheet" href="css/bootstarp.css"/>-->
10 <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>11 <link rel="stylesheet" href="css/bootstrap-responsive.min.css"/>
11 <link rel="stylesheet" href="css/bootstrap-responsive.css"/>
12 <link rel="stylesheet" href="css/bootstrap.min.css"/>
12 <link rel="stylesheet" href="css/bootstrap-responsive.css"/>
13 <link rel="stylesheet" href="css/bootstrap.min.css"/>
13 <link rel="stylesheet" href="css/normalize.css">14 <link rel="stylesheet" href="css/normalize.css">
14 <link rel="stylesheet" href="css/main.css">15 <link rel="stylesheet" href="css/main.css">
15 <script src="js/vendor/modernizr-2.6.1.min.js"></script>16 <script src="js/vendor/modernizr-2.6.1.min.js"></script>
16 </head>17 </head>
17 <body>18 <body>
18 <div><h1 id="title"><a href="index.html" style="text-decoration:none;">Follow the Sheep</a></h1>
19 <div id="header">
20<div id="title"><h1><a href="index.html" style="text-decoration:none;">Follow the Sheep</a></h1></div>
19 <div class="navigation">21 <div class="navigation">
20 <ul class="nav nav-pills"><!--<li><a href="index.html"> Home</a></li>-->
21 <li><a href="travelogue.html">Travel Blogs</a></li>
22 <ul class="nav nav-pills">
23 <li><a href="travelogue.html">Travel blogs</a></li>
22 <li><a href="data.html">Data</a></li>24 <li><a href="data.html">Data</a></li>
23 <li><a href="tracks.html">Tracks</a></li>25 <li><a href="tracks.html">Tracks</a></li>
24 <li><a href="images.html">Images</a></li>26 <li><a href="images.html">Images</a></li>
25 <li><a href="audios.html">Audios</a></li>27 <li><a href="audios.html">Audios</a></li>
26 <li><a href="videos.html">Videos</a></li>28 <li><a href="videos.html">Videos</a></li>
27</ul></div><hr></div>
29</ul></div>
30</div>
31
32
33
34<div id="container">
35<h3 style="margin-left:20px;">Place: Somalapura cross, Kampli Date: 06-Jan-2013</h3>
36<div class="inside">
37<div class="align" style="margin-left:25px;">
38 <h3>What's in a lamb?</h3>
39 <video width="300" height="240" controls>
40 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/sheep.ogv" type="video/ogg">
41 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/sheepvid.mp4" type="video/mp4">
42 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/sheepvid.webm" type="video/webm">
43 Your browser does not support the video tag.
44 </video></div></div>
45
46<hr>
47
48<h3 style="margin-left:20px;">Place: Sreenivasa Nagara, Kurugodu Date: 31-Mar-2013</h3>
49<div class="inside">
50<div class="align" style="margin-left:25px;">
51<h3>Interacting with shepherd female family members</h3>
52 <video width="300" height="240" controls>
53 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/shepherd.ogv" type="video/ogg">
54 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/butterchunner.mp4" type="video/mp4">
55 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/butterchunner.webm" type="video/webm">
56 Your browser does not support the video tag.
57 </video>
58
59
60<hr></div></div>
61
28<!--<h2>All Tracks</h2>-->62<!--<h2>All Tracks</h2>-->
63<!--<div id="container">
29<div class="box">64<div class="box">
30<span id="vtext" class="text" style="margin-left:-40px;"><b>Place: Somalapura cross, Kampli</b></span><hr/>65<span id="vtext" class="text" style="margin-left:-40px;"><b>Place: Somalapura cross, Kampli</b></span><hr/>
3166
32<div class="inside" style="display:inline">67<div class="inside" style="display:inline">
33 <!--<div id="thumbnails" style="display:inline">-->
34 <h3>What's in a lamb?</h3>
68 <h3>What's in a lamb?</h3>
35 <video width="300" height="240" controls>69 <video width="300" height="240" controls>
36 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/sheep.ogv" type="video/ogg">70 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/sheep.ogv" type="video/ogg">
37 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/sheepvid.mp4" type="video/mp4">71 <source src="http://mitan.in/followsheep/socionity/jan2013gallery/Video/sheepvid.mp4" type="video/mp4">
……
80 Your browser does not support the video tag.80 Your browser does not support the video tag.
81 </video>81 </video>
82 </div>-->82 </div>-->
83<div class="box">
83<!--<div class="box">
84<span id="vtext1" class="text" style="margin-left:-40px;"><b>Place: Sreenivasa Nagara, Kurugodu</b></span><hr/>84<span id="vtext1" class="text" style="margin-left:-40px;"><b>Place: Sreenivasa Nagara, Kurugodu</b></span><hr/>
8585
86<div class="inside" style="display:inline">86<div class="inside" style="display:inline">
……
9898
99<!--<iframe width="400" height="250" src="http://mitan.in/foddllowsheep/socionity/jan2013gallery/Video/sheepvid.mp4" frameborder="0" allowfullscreen></iframe></a>-->99<!--<iframe width="400" height="250" src="http://mitan.in/foddllowsheep/socionity/jan2013gallery/Video/sheepvid.mp4" frameborder="0" allowfullscreen></iframe></a>-->
100<!--<center><iframe width="400" height="250" src="http://www.youtube.com/embed/Gz27sDcWWVo" frameborder="0" allowfullscreen></iframe></center>-->100<!--<center><iframe width="400" height="250" src="http://www.youtube.com/embed/Gz27sDcWWVo" frameborder="0" allowfullscreen></iframe></center>-->
101<!--<span class="text1">content</span>--><hr></div>
101<!--<span class="text1">content</span><hr></div>-->
102</div>
102</body>103</body>
103</html>104</html>