Your IP : 216.73.216.48
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>
Календар
</title>
<style>
/*div
{
position: relative;
color: #000000;
font-family: Calibri;
font-size: 5vw;
float: left;
background: #DDDDDD;
width: 98.5vw;
height: 97vh;
margin: 0;
text-align: center;
overflow: hidden;
z-index: 1;
}*/
div.calendar
{
position: relative;
background: green;
margin: 0;
padding: 0;
width: 98.5vw;
height: 97vh;
overflow: hidden;
}
div.calendar-cell
{
position: relative;
background: #CCCCFF;
color: white;
margin: 0;
padding: 0;
width: 98.5vw;
height: 97vh;
overflow: hidden;
opacity: 1;
font-family: Calibri;
font-size: 5vw;
float: left;
text-align: center;
z-index: 1;
}
div.celldata
{
position: relative;
text-decoration:none;
color: #000000;
font-family: Calibri;
font-size: 10vw;
float: left;
background: #DDDDDD;
width: 13.2vw;
height: 12.5vh;
margin: 0.2vw;
text-align: right;
line-height: 6.5vw;
overflow: hidden;
border-radius: 2vw;
z-index: 1;
}
div.celldatam
{
position: relative;
color: #AAAAAA;
font-family: Calibri;
font-size: 10vw;
float: left;
background: #DDDDDD;
width: 13.2vw;
height: 12.5vh;
margin: 0.2vw;
text-align: right;
line-height: 6.5vw;
overflow: hidden;
border-radius: 2vw;
z-index: 1;
}
div.celldatasat
{
position: relative;
color: #444444;
font-family: Calibri;
font-size: 10vw;
float: left;
background: #DDDDDD;
width: 13.2vw;
height: 12.5vh;
margin: 0.2vw;
text-align: right;
line-height: 6.5vw;
overflow: hidden;
border-radius: 2vw;
z-index: 1;
}
div.celldatasun
{
position: relative;
color: #990000;
font-family: Calibri;
font-size: 10vw;
float: left;
background: #DDDDDD;
width: 13.2vw;
height: 12.5vh;
margin: 0.2vw;
text-align: right;
line-height: 6.5vw;
overflow: hidden;
border-radius: 2vw;
z-index: 1;
}
div.celldatac
{
position: relative;
color: #000099;
font-family: Calibri;
font-size: 10vw;
float: left;
background: #DDDDDD;
width: 13.2vw;
height: 12.5vh;
margin: 0.2vw;
text-align: right;
line-height: 6.5vw;
overflow: hidden;
border-radius: 2vw;
z-index: 1;
}
div.cell
{
position: relative;
color: #000000;
font-family: Calibri;
font-size: 5vw;
float: left;
background: #DDDDDD;
width: 13.2vw;
height: 12.5vh;
margin: 0.2vw;
text-align: center;
line-height: 5.5vw;
overflow: hidden;
border-radius: 2vw;
z-index: 1;
}
div.taken
{
margin: 0;
text-decoration:none;
position: absolute;
top: 0px;
left: 0px;
line-height: 5vw;
font-size: 5vw;
width: 5vw;
height: 5vw;
text-align: center;
overflow: hidden;
background: #FF0000;
color: #FFFFFF;
border-radius: 0.5vw;
z-index: 2;
}
h1
{
margin: 0;
padding: 0;
font-family: Calibri;
width: 98.5vw;
text-align: center;
height: 6.6vh;
font-size: 3vh;
line-height: 3vh;
}
</style>
<link rel="stylesheet" href="./css/swiper.min.css" media="screen" />
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/swiper.min.js"></script>
</head>
<body>
<div id="mi" style="display: none;">
<a href="#" onclick="document.getElementById('ms').style.display='block'; document.getElementById('mi').style.display='none';">ОБРАТНО</a>
</div>
<div id="ms" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="calendar-cell">
<h1>
Ресторант България<br />ноември 2017
</h1>
<div class="cell">
<br />ПОН
</div>
<div class="cell">
<br />ВТО
</div>
<div class="cell">
<br />СРЯ
</div>
<div class="cell">
<br />ЧЕТ
</div>
<div class="cell">
<br />ПЕТ
</div>
<div class="cell">
<br />СЪБ
</div>
<div class="cell">
<br />НЕД
</div>
<div class="celldatam">
<div class="taken">
5
</div>
<br />30
</div>
<div class="celldatam">
<br />31
</div>
<div class="celldata">
<br />1
</div>
<div class="celldata">
<br />2
</div>
<div class="celldata">
<br />3
</div>
<div class="celldatasat">
<br />4
</div>
<div class="celldatasun">
<br />5
</div>
<div class="celldata">
<br />6
</div>
<div class="celldata">
<br />7
</div>
<div class="celldata">
<br />8
</div>
<div class="celldata">
<br />9
</div>
<div class="celldata">
<br />10
</div>
<div class="celldatasat">
<br />11
</div>
<div class="celldatasun">
<br />12
</div>
<div class="celldata">
<br />13
</div>
<div class="celldata">
<br />14
</div>
<div class="celldata">
<br />15
</div>
<div class="celldatac">
<br />16
</div>
<div class="celldata">
<br />17
</div>
<div class="celldatasat">
<br />18
</div>
<div class="celldatasun">
<br />19
</div>
<div class="celldata">
<br />20
</div>
<div class="celldata">
<br />21
</div>
<div class="celldata">
<br />22
</div>
<div class="celldata">
<br />23
</div>
<div class="celldata">
<br />24
</div>
<div class="celldatasat">
<br />25
</div>
<div class="celldatasun">
<br />26
</div>
<div class="celldata">
<br />27
</div>
<div class="celldata">
<br />28
</div>
<div class="celldata">
<div class="taken">
3
</div>
<br />29
</div>
<div class="celldata">
<br />30
</div>
<div class="celldatam">
<br />1
</div>
<div class="celldatam">
<br />2
</div>
<div class="celldatam">
<br />3
</div>
<div class="celldatam">
<br />4
</div>
<div class="celldatam">
<br />5
</div>
<div class="celldatam">
<br />6
</div>
<div class="celldatam">
<br />7
</div>
<div class="celldatam">
<br />8
</div>
<div class="celldatam">
<br />9
</div>
<div class="celldatam">
<br />10
</div>
</div>
</div>
<div class="swiper-slide">
<div class="calendar-cell">
<h1>
Ресторант България<br />декември 2017
</h1>
<div class="cell">
<br />ПОН
</div>
<div class="cell">
<br />ВТО
</div>
<div class="cell">
<br />СРЯ
</div>
<div class="cell">
<br />ЧЕТ
</div>
<div class="cell">
<br />ПЕТ
</div>
<div class="cell">
<br />СЪБ
</div>
<div class="cell">
<br />НЕД
</div>
<div class="celldatam">
<br />27
</div>
<div class="celldatam">
<br />28
</div>
<div class="celldatam">
<div class="taken">
3
</div>
<br />29
</div>
<div class="celldatam">
<br />30
</div>
<div class="celldata">
<br />1
</div>
<div class="celldatasat">
<br />2
</div>
<div class="celldatasun">
<br />3
</div>
<div class="celldata">
<br />4
</div>
<div class="celldata">
<br />5
</div>
<div class="celldata">
<br />6
</div>
<div class="celldata">
<br />7
</div>
<div class="celldata">
<br />8
</div>
<div class="celldatasat">
<br />9
</div>
<div class="celldatasun">
<br />10
</div>
<div class="celldata">
<br />11
</div>
<div class="celldata">
<br />12
</div>
<div class="celldata">
<br />13
</div>
<div class="celldata">
<br />14
</div>
<div class="celldata">
<br />15
</div>
<div class="celldatasat">
<br />16
</div>
<div class="celldatasun">
<br />17
</div>
<div class="celldata">
<br />18
</div>
<div class="celldata">
<br />19
</div>
<div class="celldata">
<br />20
</div>
<div class="celldata">
<br />21
</div>
<div class="celldata">
<br />22
</div>
<div class="celldatasat">
<br />23
</div>
<a href="#" onclick="document.getElementById('mi').style.display='block'; document.getElementById('ms').style.display='none';">
<div class="celldatasun">
<div class="taken">
9
</div>
<br />24
</div>
</a>
<div class="celldatasun">
<br />25
</div>
<div class="celldata">
<br />26
</div>
<div class="celldata">
<br />27
</div>
<div class="celldata">
<br />28
</div>
<div class="celldata">
<br />29
</div>
<div class="celldatasat">
<br />30
</div>
<div class="celldatasun">
<br />31
</div>
<div class="celldatam">
<br />1
</div>
<div class="celldatam">
<br />2
</div>
<div class="celldatam">
<br />3
</div>
<div class="celldatam">
<br />4
</div>
<div class="celldatam">
<br />5
</div>
<div class="celldatam">
<br />6
</div>
<div class="celldatam">
<br />7
</div>
</div>
</div>
</div>
</div>
<script>
var swiper = new Swiper('.swiper-container');
</script>
</body>
</html>