Skip to content

Instantly share code, notes, and snippets.

@Pabloska

Pabloska/index.html

Last active July 7, 2017 12:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Pabloska/c48819aadb827dcade89f80388c35112 to your computer and use it in GitHub Desktop.
Save Pabloska/c48819aadb827dcade89f80388c35112 to your computer and use it in GitHub Desktop.
Download ZIP
Video_background
Raw
index.html
<!DOCTYPE html>
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<title>Libyan Detention Centers • Legal Framework</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="MCP • Migration Country Profiles" />
<meta property="og:site_name" content="Pablo Gallego | Migration Country Profiles" />
<meta name="author" content="Pablo Gallego Cadabon">
<meta name="keywords" content="migration, migrant report, geo-map, map, refugee, crisis, death at sea, global migration">
<meta name="description" content="migration data">
<!-- NEXT LINE Even if page is dynamically generated and URL contains query parameters -->
<meta property="og:description" content="The Migration Country Profiles project aspires to contribute to a better understanding of migrants' countries of origin as well as countries of transit on the main migratory routes through Africa and the Middle East. The project focuses specifically on the 2016 top-ten countries of origin for migrants and six key countries of transit that they are likely to take before embarking on a sea journey. " />
<meta property="og:url" content="http://xchange.org/map/MCP.html" />
<meta property="og:image" content="http://xchange.org/map/img/MCP_thumbnail.jpg" />
<meta name="description" content="Bootstrap-based, Responsive HTML5">
<meta name="author" content="PABLO GALLEGO">
<!-- Mobile Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--cartodb links-->
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.14/cartodb.js"></script>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.14/themes/css/cartodb.css" />
<!--end cartodb links-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="js/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<!-- Bootstrap core CSS -->
<link href="http://xchange.org/map/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Font Awesome CSS -->
<link href="css/font-awesome.css" rel="stylesheet">
<!-- Worthy core CSS file -->
<!-- Plugins -->
<link href="http://xchange.org/map/css/animate.css" rel="stylesheet">
<!-- Worthy core CSS file -->
<link href="css/style_status.css" rel="stylesheet">
<link href="css/social.css" rel="stylesheet">
<!-- Custom css -->
<link href="http://xchange.org/map/css/custom.css" rel="stylesheet">
<link rel="shortcut icon" href="http://xchange.org/map/img/xchange-logo-mobile.png" />
<!-- highcharts.js -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_GP.js"></script>
<style>
div.cartodb-timeslider{ display: none!important; }
html, body {
font-family: "Lato",sans-serif;
height: 100%;
width: 100%;
background:white;
color:white;
}
#map {
width: 100%;
height: 55%;
position: relative;
left:0;
top: 0;
background: #ccc;
//border-bottom: 2px solid grey;
/box-shadow: 0px 10px 0px 0px grey;
z-index:1000;
}
#narrative {min-height: 45%;}
section {
height: 100%;
margin-top: 400px;
width: 100%;
padding: 10px;
border-bottom: 1px solid #ccc;
background-color:black;
color:black
}
.TextWrap {
float: left;
margin: 10px;
color:black
}
.TextWrap2 {
float: right;
margin: 10px;
margin-top:0px
color:white
}
.container{
color:black;
text-align:justify;
width:100%;
margin-bottom:100px
}
a.close{
text-align:center;
border: 2px solid white;
opacity:1;
background:transparent;
text-shadow:none;
padding:5px;
color:white
}
a.close:hover{
border: 2px solid #ff8566;
opacity:1;
text-shadow:none;
padding:5px;
color:#ff8566;
}
.factbox{font-size:17px;color:#595959;padding-left:10px;border-left:3px solid #b40903;font-style: italic;font-weight:bold;margin-top:50px;margin-bottom:50px}
.row {
min-width: 200px;
text-align:center;
}
.highcharts-tooltip h4{
margin: 0.3em 0;
}
.project {}
@media screen and (max-width: 501px) {
.project {display:none} /* hide it elsewhere */}
@media screen and (max-width: 501px) {
.big_screen {display:none} /* hide it elsewhere */}
@media screen and (min-width: 501px) {
.mobile {display:none} /* hide it elsewhere */}
@media screen and (min-width: 501px) {
.main-navigation { max-height:25px } /* hide it elsewhere */}
@media screen and (max-width: 501px) {
.cartodb-legend { display: none; } /* hide it elsewhere */
.navbar-header{
min-height:30px;
}
.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-moz-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
.fade.in {
opacity: 1;
}
.vidcover {
background: #000;
opacity: 0.4;
display: block;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -1;
-webkit-transition: opacity 800ms ease 0.2s;
-moz-transition: opacity 800ms ease 0.2s;
-ms-transition: opacity 800ms ease 0.2s;
transition: opacity 800ms ease 0.2s;
}
.fullvid {
width: 1280px;
height: 720px;
position: fixed;
bottom: 50%;
left: 50%;
z-index: -2;
-webkit-transform: translate(-50%, 50%);
-moz-transform: translate(-50%, 50%);
-ms-transform: translate(-50%, 50%);
transform: translate(-50%, 50%);
-webkit-transition: all 400ms ease-out 400ms;
-moz-transition: all 400ms ease-out 400ms;
-ms-transition: all 400ms ease-out 400ms;
transition: all 400ms ease-out 400ms;
}
</style>
<!--script>
var password;
var pass1="rohingya2016";
password=prompt('Mark/Alex, enter the password I sent you to open the map',' ');
if (password==pass1)
alert('Password Correct guys ;-)! Click OK to enter!');
else
{
window.location="http://migrantreport.org/";
}
</script-->
</head>
<body>
<!--VIDEO BACKGROUND STARTS-->
<!-- option 1 simple iframe -->
<!-- <iframe width="100%" height="50%" src='https://player.vimeo.com/video/224441526?background=1' frameborder='0' allowfullscreen></iframe>
<!-- option 2: using fullvid library: Youtube or Vimeo Embed code here - add 'fullvid' class 224441551/29fe5a90ad 224441538/130a9e07f8-->
<iframe width="100%" height="100%" src="https://player.vimeo.com/video/224441538?background=1" frameborder="0" allowfullscreen></iframe>
<div style="margin-left:50%;margin-right:50%;position:absolute;top:400px;padding:20px;width:600px;left:-300px" >
<p style="font-size:18px;text-align:center" >&#10077; The respondent was put into a car for transit which was extremely overcrowded with many people crying for help.&#10077; </p><br>
<div style="text-align:center; z-index:1500;padding-top:17px;color:black;font-size:25px" ><span style="color:white" >Libyan Detention Centers</span><span style="color:#cd1f25"> &#8226;</span> <span style="color:#cd1f25" class="project" >Legal Framework</span></div>
<br>
<p style="text-align:center;color:white"><i class="fa fa-chevron-circle-down fa-3x" aria-hidden="true"></i><br>
</div>
<!--VIDEO BACKGROUND ENDS->
<!-- header start -->
<!-- ================ -->
<header style="position:fixed;max-height:60px;margin-bottom:20px;" class="header fixed clearfix navbar navbar-fixed-top">
<div style="min-height:40px;position:fixed" class="">
<a href="http://xchange.org" style="padding-top:5px;color:#ccc;margin-left:20px;text-align:center;font-size:11px;float:left" ><img src="http://xchange.org/map/img/xchange-white.png" alt="migrnats" style=";margin-top:10px; background:transparent; z-index:10;width:110px"></a>
</div>
<div class="">
<!-- header-right start -->
<!-- ================ -->
<div class="header-right clearfix">
<!-- main-navigation start -->
<!-- ================ -->
<div class="main-navigation animated">
<!-- navbar start -->
<!-- ================ -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Toggle get grouped for better mobile display -->
<div class="navbar-header">
<button style="margin-top: 12px;" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div style="" class="collapse navbar-collapse scrollspy smooth-scroll" id="navbar-collapse-1">
<ul style=";padding-right:30px"class="nav navbar-nav navbar-right">
<li><a href="http://xchange.org/map/MCP.html">Home</a></li>
<li><a href="#contactus">Contact us</a></li>
<li><a href="#feedback">Feedback</a></li>
<li class="social-network social-circle"><a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fxchange.org%2Fmap%2FMCP.html&t" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li class="social-network social-circle"><a href="https://twitter.com/intent/tweet?source=http%3A%2F%2Fxchange.org%2Fmap%2FGeoPortal.html&text=:%20http%3A%2F%2Fxchange.org%2Fmap%2FMCP.html" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li>
</ul>
</div>
</div>
</nav>
<!-- navbar end -->
</div>
<!-- main-navigation end -->
</div>
<!-- header-right end -->
</div>
</div>
</header>
<!-- header end -->
<div id="narrative" class="col-lg-12">
<div class="big_screen" style="padding:0px 200px 0px 200px ;color:black;margin-top:20px;text-align:justify;" >
<div style="text-align:center; z-index:1500;padding-top:17px;color:black;font-size:25px" ><span style="color:#cd1f25" >Libyan Detention Centers</span><span style="color:#cd1f25"> &#8226;</span> <span class="project" >Legal Framework</span></div>
<br>
<p >The Migration Country Profiles project aspires to contribute to a better understanding of migratory trends across Africa and the Middle East towards Europe. The project focuses specifically on the 2016 top-ten countries of origin of migrants and six key countries of transit that migrants are likely to take before embarking on the Mediterranean or Aegean sea journeys.<br><br> The profiles take particular consideration the push factors of migration, including human rights, conflict, and development contexts of each country of origin and transit. </p><br><p style="background:black;padding:7px;margin-left:auto;margin-right:auto;max-width:300px;border: 0px solid #cd1f25;font-weight:bold;text-align:center;color:white"><i style="margin-right:7px" class="fa fa-hand-o-up" aria-hidden="true"></i> Click on the map to display the narrative.</p><br>
</div>
</div>
<br>
<div id="contactus" style="background:black" class= "col-md-12" >
<div class="row">
<br><br>
<div style="padding:0px 15px 0px 15px ;">
<p style="opacity:1;margin-top:0px;position:relative; display: block; margin-left: auto;margin-right: auto; text-align: center;color:white" >&#174 Project developed by <a href="http://xchange.org" style="color:white;font-weight:bold">Xchange</a> all rights reserved</p>
<br>
<p style="color:white;margin-left:auto;margin-right:auto;padding-left:10px;text-align:left;max-width:350px; border-left: 2px solid white;font-size:14px" >
Project Management & Design: <span style="color:#d9d9d9;font-weight:normal;"> Pablo Gallego</span><br>Research & Analysis:<span style="color:#d9d9d9;font-weight:normal;"> Maria Jones</span></br>Research & Analysis:<span style="color:#d9d9d9;font-weight:normal;"> Mark Szekely Weegmann</span></br>Research & Analysis:<span style="color:#d9d9d9;font-weight:normal;"> Louise Hombert</span></br>Research & Analysis:<span style="color:#d9d9d9;font-weight:normal;"> Claudia Del Real</span>
</p>
</div>
<br><br>
<div id="feedback" class="col-lg-8 col-lg-offset-2">
<h2 style="color:white;text-align:center">Feedback</h2>
<div style="padding:0px" >
<p style="color:white; text-align:justify">At Xchange we do our best to ensure our research and analysis are as accurate as possible, and as a collaborative information and research initiative, we encourage your participation in expanding and improving this project. Please get in touch if you spot any errors or wish to give feedback, and we will update the profiles accordingly.</p>
<br><br>
</div>
</div>
<!-- Contact Section -->
<br></br>
<div class="col-lg-8 col-lg-offset-2">
<!-- To configure the contact form email address, go tomail/contact_me.php and update the email address in the PHP file on line 19. -->
<!-- The form should work on most web servers, but if the form is not working you may need to configure your web server differently. -->
<form name="sentMessage" id="contactForm" novalidate>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<textarea rows="3" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-success btn-lg">Send</button>
</div>
</div>
</form>
</div>
</div>
<br>
<br>
<br>
</div>
</body>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-78074518-12', 'auto');
ga('send', 'pageview');
</script>
<script>
// Basic FitVids Test
$(".container").fitVids();
// Custom selector and No-Double-Wrapping Prevention Test
$(".container").fitVids({ customSelector: "iframe[src^='http://socialcam.com']"});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script type="text/javascript" src="plugins/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<!-- Modernizr javascript -->
<script type="text/javascript" src="plugins/modernizr.js"></script>
<!-- Isotope javascript -->
<script type="text/javascript" src="plugins/isotope/isotope.pkgd.min.js"></script>
<!-- Backstretch javascript -->
<script type="text/javascript" src="plugins/jquery.backstretch.min.js"></script>
<!-- Appear javascript -->
<script type="text/javascript" src="plugins/jquery.appear.js"></script>
<!-- Initialization of Plugins -->
<script type="text/javascript" src="js/template.js"></script>
<!-- Custom Scripts -->
<script type="text/javascript" src="js/custom.js"></script>
<!-- tooltip -->
<script type="text/javascript" src="http://xchange.org/map/js/jquery.atooltip.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment