<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- Head tags to include FontAwesome -->
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<div class="container">
<div class="row">
<div class='col-md-offset-2 col-md-8 text-center'>
<h2>Välkommen till registret för Lokala naturvårdssatsningen (LONA)</h2>
</div>
</div>
<div class='row'>
<div class='col-md-offset-2 col-md-8'>
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
<li data-target="#quote-carousel" data-slide-to="1"></li>
<li data-target="#quote-carousel" data-slide-to="2"></li>
<li data-target="#quote-carousel" data-slide-to="3"></li>
<li data-target="#quote-carousel" data-slide-to="4"></li>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
<!-- Quote 1 -->
<div class="item active">
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698956-icon-111-search-128.png" style="width: 100px;height:100px;">
<!--<img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg" style="width: 100px;height:100px;">-->
</div>
<div class="col-sm-9">
<h3>Sök</h3>
<p>Alla kan söka på beviljade projekt. Gör en mer avgränsad sökning genom att klicka på en eller flera av nedanstående rullgardiner där du kan välja län, miljökvalitetsmål, åtgärdskategori, ekosystemtjänst m.m. Välj i checkboxarna om du vill söka i Ansökan, i Slutrapport eller i båda. Är du inte inloggad visas endast pågående och avslutade projekt.</p>
<!--<small>Someone famous</small>-->
</div>
</div>
</div>
<!-- Quote 2 -->
<div class="item">
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="http://urgentjobs.co.ke/wp-content/uploads/2016/03/admin.png" style="width: 100px;height:100px;">
<!--<img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg" style="width: 100px;height:100px;">-->
</div>
<div class="col-sm-9">
<h3>Behörighet</h3>
<p>Här kan du också ansöka om, registrera och redovisa LONA-bidrag. Representanter för föreningar och privatpersoner kan skapa sin egen behörighet genom att klicka på länken <a>Projektansökan</a> och skicka in en projektidé till kommunen. Kommunhandläggare ska däremot INTE skapa sin egen inloggning, utan får sina inloggningsuppgifter av Länsstyrelsen. För att logga in: ange din e-postadress samt lösenord uppe till höger och klicka på logga in.</p>
<!--<small>Someone famous</small>-->
</div>
</div>
</div>
<!-- Quote 3 -->
<div class="item">
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="https://financialaid.uchicago.edu/sites/default/files/guidelines.svg" style="width: 100px;height:100px;">
</div>
<div class="col-sm-9">
<h3>Ansökan</h3>
<p>För att ansökan ska räknas som inkommen till Länsstyrelsen måste kommunen posta eller maila in undertecknad ansökningsblankett. Det räcker alltså INTE att fylla i ansökan i registret.</p>
</div>
</div>
</div>
<!-- Quote 4 -->
<div class="item">
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="http://images.clipartpanda.com/question-blue_question_mark_clip_art.jpg" style="width: 100px;height:100px;">
</div>
<div class="col-sm-9">
<h3>Hjälp</h3>
<p>Har du frågor/behöver hjälp finns här en <a>användarmanual</a>.</br>
Du kan också maila till <a>Lona-Support@naturvardsverket.se</a>.</br></br>
<a>Blankett för medfinaniseringsintyg</a></p>
</div>
</div>
</div>
<!-- Quote 5 -->
<div class="item">
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="http://images.freeimages.com/images/premium/previews/4981/49819810-cartoon-question-marks.jpg" style="width: 100px;height:100px;">
</div>
<div class="col-sm-9">
<h3>Övrigt</h3>
<p>Uppgifter om projekten är preliminära tills projekten har avslutats. För projekt som beviljades mellan 2004-2006 finns endast en sammanfattning.</p>
</div>
</div>
</div>
</div>
<!-- Carousel Buttons Next/Prev -->
<!--<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>-->
</div>
</div>
</div>
</div>
/* carousel */
#quote-carousel
{
padding: 0 10px 30px 10px;
margin-top: 30px;
}
/* Control buttons */
#quote-carousel .carousel-control
{
background: none;
color: #222;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
/* Previous button */
#quote-carousel .carousel-control.left
{
left: -12px;
}
/* Next button */
#quote-carousel .carousel-control.right
{
right: -12px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators
{
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li
{
background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active
{
background: #333333;
}
#quote-carousel img
{
width: 250px;
height: 100px
}
/* End carousel */
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote img {
margin-bottom: 10px;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
/**
MEDIA QUERIES
*/
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
#quote-carousel
{
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
}
/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) {
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
#quote-carousel .carousel-indicators {
bottom: -20px !important;
}
#quote-carousel .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;
}
#quote-carousel .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;
}
}
// When the DOM is ready, run this function
$(document).ready(function() {
//Set the carousel options
$('#quote-carousel').carousel({
pause: true,
interval: 10000,
});
});
