<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<div class="container">
<div class="row">
<div class="control-group" id="fields">
<label class="control-label" for="field1"Możesz wpisać jeden lub więcej linków szczegółów nieruchomości.</label>
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry input-group col-xs-3">
<input class="form-control" type="text" placeholder="Wklej linka do nieruchomości" id="Urls" name="Urls" />
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</form>
<br>
<small>Wciśnij <span class="glyphicon glyphicon-plus gs"></span> aby dodać kolejne pole</small>
</div>
</div>
</div>
</div>
<section style="background:#efefe9;">
<div class="container">
<div class="row">
<div class="board">
<!-- <h2>Welcome to IGHALO!<sup>™</sup></h2>-->
<div class="board-inner">
<ul class="nav nav-tabs" id="myTab">
<div class="liner"></div>
<li class="active">
<a href="#home" data-toggle="tab" title="welcome">
<span class="round-tabs one">
<i class="glyphicon glyphicon-home"></i>
</span>
</a></li>
<li><a href="#profile" data-toggle="tab" title="profile">
<span class="round-tabs two">
<i class="glyphicon glyphicon-user"></i>
</span>
</a>
</li>
<li><a href="#messages" data-toggle="tab" title="bootsnipp goodies">
<span class="round-tabs three">
<i class="glyphicon glyphicon-gift"></i>
</span> </a>
</li>
<li><a href="#settings" data-toggle="tab" title="blah blah">
<span class="round-tabs four">
<i class="glyphicon glyphicon-comment"></i>
</span>
</a></li>
<li><a href="#doner" data-toggle="tab" title="completed">
<span class="round-tabs five">
<i class="glyphicon glyphicon-ok"></i>
</span> </a>
</li>
</ul></div>
<div class="tab-content">
<div class="tab-pane fade in active" id="home">
<h3 class="head text-center">Welcome to Bootsnipp<sup>™</sup> <span style="color:#f48260;">♥</span></h3>
<p class="narrow text-center">
Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
</p>
<p class="text-center">
<a href="" class="btn btn-success btn-outline-rounded green"> start using bootsnipp <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
</p>
</div>
<div class="tab-pane fade" id="profile">
<h3 class="head text-center">Create a Bootsnipp<sup>™</sup> Profile</h3>
<p class="narrow text-center">
Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
</p>
<p class="text-center">
<a href="" class="btn btn-success btn-outline-rounded green"> create your profile <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
</p>
</div>
<div class="tab-pane fade" id="messages">
<h3 class="head text-center">Bootsnipp goodies</h3>
<p class="narrow text-center">
Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
</p>
<p class="text-center">
<a href="" class="btn btn-success btn-outline-rounded green"> start using bootsnipp <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
</p>
</div>
<div class="tab-pane fade" id="settings">
<h3 class="head text-center">Drop comments!</h3>
<p class="narrow text-center">
Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
</p>
<p class="text-center">
<a href="" class="btn btn-success btn-outline-rounded green"> start using bootsnipp <span style="margin-left:10px;" class="glyphicon glyphicon-send"></span></a>
</p>
</div>
<div class="tab-pane fade" id="doner">
<div class="text-center">
<i class="img-intro icon-checkmark-circle"></i>
</div>
<h3 class="head text-center">thanks for staying tuned! <span style="color:#f48260;">♥</span> Bootstrap</h3>
<p class="narrow text-center">
Lorem ipsum dolor sit amet, his ea mollis fabellas principes. Quo mazim facilis tincidunt ut, utinam saperet facilisi an vim.
</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</section>
<div class="container">
<div class="row destacados">
<div class="col-md-4">
<div>
<img src="http://lorempixel.com/200/200/abstract/1/" alt="Texto Alternativo" class="img-circle img-thumbnail">
<h2>Diseño Web</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn btn-primary" title="Enlace">Leer más »</a>
</div>
</div>
<div class="col-md-4">
<div>
<img src="http://lorempixel.com/200/200/abstract/2/" alt="Texto Alternativo" class="img-circle img-thumbnail">
<h2>Desarrollo Web</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn btn-primary" title="Enlace">Leer más »</a>
</div>
</div>
<div class="col-md-4">
<div>
<img src="http://lorempixel.com/200/200/abstract/3/" alt="Texto Alternativo" class="img-circle img-thumbnail">
<h2>Alojamiento Web</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="btn btn-primary" title="Enlace">Leer más »</a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="col-md-12">
<h1>Alice i
n Wonderland, part dos</h1>
<p>'You ought to be ashamed of yourself for asking such a simple question,' added the Gryphon; and then they both sat silent and looked at poor Alice, who felt ready to sink into the earth. At last the Gryphon said to the Mock Turtle, 'Drive on, old fellow! Don't be all day about it!' and he went on in these words:
'Yes, we went to school in the sea, though you mayn't believe it—'
'I never said I didn't!' interrupted Alice.
'You did,' said the Mock Turtle.</p>
<div>
<span class="badge">Posted 2012-08-02 20:47:04</span><div class="pull-right"><span class="label label-default">alice</span> <span class="label label-primary">story</span> <span class="label label-success">blog</span> <span class="label label-info">personal</span> <span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span></div>
</div>
<hr>
<h1>Revolution has begun!</h1>
<p>'I am bound to Tahiti for more men.'
'Very good. Let me board you a moment—I come in peace.' With that he leaped from the canoe, swam to the boat; and climbing the gunwale, stood face to face with the captain.
'Cross your arms, sir; throw back your head. Now, repeat after me. As soon as Steelkilt leaves me, I swear to beach this boat on yonder island, and remain there six days. If I do not, may lightning strike me!'A pretty scholar,' laughed the Lakeman. 'Adios, Senor!' and leaping into the sea, he swam back to his comrades.</p>
<div>
<span class="badge">Posted 2012-08-02 20:47:04</span><div class="pull-right"><span class="label label-default">alice</span> <span class="label label-primary">story</span> <span class="label label-success">blog</span> <span class="label label-info">personal</span> <span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span></div>
</div>
<hr>
</div>
</div>
<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>Responsive Quote Carousel BS3</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>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<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">
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit!</p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 2 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/mijustin/128.jpg" style="width: 100px;height:100px;">
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor nec lacus ut tempor. Mauris.</p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 3 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/keizgoesboom/128.jpg" style="width: 100px;height:100px;">
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum elit in arcu blandit, eget pretium nisl accumsan. Sed ultricies commodo tortor, eu pretium mauris.</p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</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>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<div class="row mobile-social-share">
<div class="col-md-9">
<h3>Share this content</h3>
</div>
<div id="socialHolder" class="col-md-3">
<div id="socialShare" class="btn-group share-group">
<a data-toggle="dropdown" class="btn btn-info">
<i class="fa fa-share-alt fa-inverse"></i>
</a>
<button href="#" data-toggle="dropdown" class="btn btn-info dropdown-toggle share">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a data-original-title="Twitter" rel="tooltip" href="#" class="btn btn-twitter" data-placement="left">
<i class="fa fa-twitter"></i>
</a>
</li>
<li>
<a data-original-title="Facebook" rel="tooltip" href="#" class="btn btn-facebook" data-placement="left">
<i class="fa fa-facebook"></i>
</a>
</li>
<li>
<a data-original-title="Google+" rel="tooltip" href="#" class="btn btn-google" data-placement="left">
<i class="fa fa-google-plus"></i>
</a>
</li>
<li>
<a data-original-title="LinkedIn" rel="tooltip" href="#" class="btn btn-linkedin" data-placement="left">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li>
<a data-original-title="Pinterest" rel="tooltip" class="btn btn-pinterest" data-placement="left">
<i class="fa fa-pinterest"></i>
</a>
</li>
<li>
<a data-original-title="Email" rel="tooltip" class="btn btn-mail" data-placement="left">
<i class="fa fa-envelope"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
.entry:not(:first-of-type)
{
margin-top: 10px;
}
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
/* written by riliwan balogun http://www.facebook.com/riliwan.rabo*/
.board{
width: 75%;
margin: 60px auto;
height: 500px;
background: #fff;
/*box-shadow: 10px 10px #ccc,-10px 20px #ddd;*/
}
.board .nav-tabs {
position: relative;
/* border-bottom: 0; */
/* width: 80%; */
margin: 40px auto;
margin-bottom: 0;
box-sizing: border-box;
}
.board > div.board-inner{
background: #fafafa url(http://subtlepatterns.com/patterns/geometry2.png);
background-size: 30%;
}
p.narrow{
width: 60%;
margin: 10px auto;
}
.liner{
height: 2px;
background: #ddd;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
/* background-color: #ffffff; */
border: 0;
border-bottom-color: transparent;
}
span.round-tabs{
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: white;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
span.round-tabs.one{
color: rgb(34, 194, 34);border: 2px solid rgb(34, 194, 34);
}
li.active span.round-tabs.one{
background: #fff !important;
border: 2px solid #ddd;
color: rgb(34, 194, 34);
}
span.round-tabs.two{
color: #febe29;border: 2px solid #febe29;
}
li.active span.round-tabs.two{
background: #fff !important;
border: 2px solid #ddd;
color: #febe29;
}
span.round-tabs.three{
color: #3e5e9a;border: 2px solid #3e5e9a;
}
li.active span.round-tabs.three{
background: #fff !important;
border: 2px solid #ddd;
color: #3e5e9a;
}
span.round-tabs.four{
color: #f1685e;border: 2px solid #f1685e;
}
li.active span.round-tabs.four{
background: #fff !important;
border: 2px solid #ddd;
color: #f1685e;
}
span.round-tabs.five{
color: #999;border: 2px solid #999;
}
li.active span.round-tabs.five{
background: #fff !important;
border: 2px solid #ddd;
color: #999;
}
.nav-tabs > li.active > a span.round-tabs{
background: #fafafa;
}
.nav-tabs > li {
width: 20%;
}
/*li.active:before {
content: " ";
position: absolute;
left: 45%;
opacity:0;
margin: 0 auto;
bottom: -2px;
border: 10px solid transparent;
border-bottom-color: #fff;
z-index: 1;
transition:0.2s ease-in-out;
}*/
li:after {
content: " ";
position: absolute;
left: 45%;
opacity:0;
margin: 0 auto;
bottom: 0px;
border: 5px solid transparent;
border-bottom-color: #ddd;
transition:0.1s ease-in-out;
}
li.active:after {
content: " ";
position: absolute;
left: 45%;
opacity:1;
margin: 0 auto;
bottom: 0px;
border: 10px solid transparent;
border-bottom-color: #ddd;
}
.nav-tabs > li a{
width: 70px;
height: 70px;
margin: 20px auto;
border-radius: 100%;
padding: 0;
}
.nav-tabs > li a:hover{
background: transparent;
}
.tab-content{
}
.tab-pane{
position: relative;
padding-top: 50px;
}
.tab-content .head{
font-family: 'Roboto Condensed', sans-serif;
font-size: 25px;
text-transform: uppercase;
padding-bottom: 10px;
}
.btn-outline-rounded{
padding: 10px 40px;
margin: 20px 0;
border: 2px solid transparent;
border-radius: 25px;
}
.btn.green{
background-color:#5cb85c;
/*border: 2px solid #5cb85c;*/
color: #ffffff;
}
@media( max-width : 585px ){
.board {
width: 90%;
height:auto !important;
}
span.round-tabs {
font-size:16px;
width: 50px;
height: 50px;
line-height: 50px;
}
.tab-content .head{
font-size:20px;
}
.nav-tabs > li a {
width: 50px;
height: 50px;
line-height:50px;
}
li.active:after {
content: " ";
position: absolute;
left: 35%;
}
.btn-outline-rounded {
padding:12px 20px;
}
}
.destacados{
padding: 20px 0;
text-align: center;
}
.destacados > div > div{
padding: 10px;
border: 1px solid transparent;
border-radius: 4px;
transition: 0.2s;
}
.destacados > div:hover > div{
margin-top: -10px;
border: 1px solid rgb(200, 200, 200);
box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
background: rgba(200, 200, 200, 0.1);
transition: 0.5s;
}
/* 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;
}
}
.mobile-social-share {
background: none repeat scroll 0 0 #EEEEEE;
display: block !important;
min-height: 70px !important;
margin: 50px 0;
}
body {
color: #777777;
font-family: "Lato","Helvetica Neue","Arial","Helvetica",sans-serif;
font-size: 13px;
line-height: 19.5px;
}
.mobile-social-share h3 {
color: inherit;
float: left;
font-size: 15px;
line-height: 20px;
margin: 25px 25px 0 25px;
}
.share-group {
float: right;
margin: 18px 25px 0 0;
}
.btn-group {
display: inline-block;
font-size: 0;
position: relative;
vertical-align: middle;
white-space: nowrap;
}
.mobile-social-share ul {
float: right;
list-style: none outside none;
margin: 0;
min-width: 61px;
padding: 0;
}
.share {
min-width: 17px;
}
.mobile-social-share li {
display: block;
font-size: 18px;
list-style: none outside none;
margin-bottom: 3px;
margin-left: 4px;
margin-top: 3px;
}
.btn-share {
background-color: #BEBEBE;
border-color: #CCCCCC;
color: #333333;
}
.btn-twitter {
background-color: #3399CC !important;
width: 51px;
color:#FFFFFF!important;
}
.btn-facebook {
background-color: #3D5B96 !important;
width: 51px;
color:#FFFFFF!important;
}
.btn-facebook {
background-color: #3D5B96 !important;
width: 51px;
color:#FFFFFF!important;
}
.btn-google {
background-color: #DD3F34 !important;
width: 51px;
color:#FFFFFF!important;
}
.btn-linkedin {
background-color: #1884BB !important;
width: 51px;
color:#FFFFFF!important;
}
.btn-pinterest {
background-color: #CC1E2D !important;
width: 51px;
color:#FFFFFF!important;
}
.btn-mail {
background-color: #FFC90E !important;
width: 51px;
color:#FFFFFF!important;
}
.caret {
border-left: 4px solid rgba(0, 0, 0, 0);
border-right: 4px solid rgba(0, 0, 0, 0);
border-top: 4px solid;
display: inline-block;
height: 0;
margin-left: 2px;
vertical-align: middle;
width: 0;
}
#socialShare {
max-width:59px;
margin-bottom:18px;
}
#socialShare > a{
padding: 6px 10px 6px 10px;
}
@media (max-width : 320px) {
#socialHolder{
padding-left:5px;
padding-right:5px;
}
.mobile-social-share h3 {
margin-left: 0;
margin-right: 0;
}
#socialShare{
margin-left:5px;
margin-right:5px;
}
.mobile-social-share h3 {
font-size: 15px;
}
}
@media (max-width : 238px) {
.mobile-social-share h3 {
font-size: 12px;
}
}
$(function()
{
$(document).on('click', '.btn-add', function(e)
{
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function(e)
{
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
$(function(){
$('a[title]').tooltip();
});
//karuz
$(document).ready(function() {
//Set the carousel options
$('#quote-carousel').carousel({
pause: true,
interval: 4000,
});
});
