<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>METRO_CALENDAR</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div id="wrapper">
<div id="navigator">
<div id="arrowleft"><a href="#"><strong>◄</strong></a></div>
<div id="arrowright"><a href="#"><strong>►</strong></a></div>
<div id="monthname"><p><strong>APRIL 2013</strong></p></div>
</div>
<div id="calendar">
<div id="daynameblock">
<div class="dayname"><strong>Mon</strong></div>
<div class="dayname"><strong>Tue</strong></div>
<div class="dayname"><strong>Wed</strong></div>
<div class="dayname"><strong>Thu</strong></div>
<div class="dayname"><strong>Fri</strong></div>
<div class="weekendname"><strong>Sat</strong></div>
<div class="weekendname"><strong>Sun</strong></div>
</div>
<div id="daysblock">
<div class="weekdays"><a href="#" tabindex="1"><strong>1</strong></a></div>
<div class="weekdays"><a href="#" tabindex="1"><strong>2</strong></a></div>
<div class="weekdays"><a href="#" tabindex="1"><strong>3</strong></a></div>
<div class="weekdays"><a href="#" tabindex="1"><strong>4</strong></a></div>
<div class="weekdays"><a href="#" tabindex="1"><strong>5</strong></a></div>
<div class="weekend"><a href="#" tabindex="1"><strong>6</strong></a></div>
<div class="weekend"><a href="#" tabindex="1"><strong>7</strong></a></div>
<div class="weekdays"><a href="#" tabindex="1"><strong>8</strong></a></div>
<div class="weekdays"><a href="#" tabindex="1"><strong>9</strong></a></div>
<div class="weekdays"><a href="#" tabindex="1"><strong>10</strong></a></div>
<div class="weekdays"><a href="#" tabindex="1"><strong>11</strong></a></div>
<div class="weekdays"><a href="#" tabindex="1"><strong>12</strong></a></div>
<div class="weekend"><a href="#" tabindex="1"><strong>13</strong></a></div>
<div class="weekend"><a href="#" tabindex="1"><strong>14</strong></a></div>
<div class="weekdays"><a href="#" tabindex="1"><strong>15</strong></a></div>
<div class="weekdays"><a href="#" tabindex="1"><strong>16</strong></a></div>
<div class="weekdays"><a href="#" tabindex="1"><strong>17</strong></a></div>
<div class="weekdays"><a href="#" tabindex="1"><strong>18</strong></a></div>
<div class="weekdays"><a href="#" tabindex="1"><strong>19</strong></a></div>
<div class="weekend"><a href="#" tabindex="1"><strong>20</strong></a></div>
<div class="weekend"><a href="#" tabindex="1"><strong>21</strong></a></div>
<div class="weekdays"><a href="#" tabindex="1"><strong>22</strong></a></div>
<div class="weekdays"><a href="#" tabindex="1"><strong>23</strong></a></div>
<div class="weekdays"><a href="#" tabindex="1"><strong>24</strong></a></div>
<div class="weekdays"><a href="#" tabindex="1"><strong>25</strong></a></div>
<div class="weekdays"><a href="#" tabindex="1"><strong>26</strong></a></div>
<div class="weekend"><a href="#" tabindex="1"><strong>27</strong></a></div>
<div class="weekend"><a href="#" tabindex="1"><strong>28</strong></a></div>
<div class="weekdays"><a href="#" tabindex="1"><strong>29</strong></a></div>
<div class="weekdays"><a href="#" tabindex="1"><strong>30</strong></a></div>
<div class="weekdays"></div>
<div class="weekdays"></div>
<div class="weekdays"></div>
<div class="weekend"></div>
<div class="weekend"></div>
</div>
</div>
</div>
</body>
</html>
CSS :
@charset "utf-8";
/* CSS Document */
body,a,p{
margin: 0px;
padding: 0px;
}
#wrapper {
margin: 0 auto;
margin-top:50px;
width:780px;
}
#navigator {
margin: 0 auto;
margin-top:0px;
width: 434px;
}
#arrowleft,a {
height: 24px;
display: block;
float: left;
text-align: center;
font-size: x-large;
color: #ABABAB;
text-decoration: none;
}
#arrowleft,a:hover {
display:block;
text-align: center;
font-size: x-large;
color: #000000;
}
#arrowright,a {
height: 24px;
display: block;
float: right;
text-align: center;
font-size: x-large;
color: #ABABAB;
text-decoration: none;
}
#arrowright,a:hover {
display: block;
text-align: center;
font-size: x-large;
color: #000000;
}
#monthname {
margin: 0 auto;
height: 45px;
text-align: center;
font-size: x-large;
font-family: Verdana;
color: #808080;
}
#calendar {
margin: 0 auto;
height: 550px;
width: 434px;
}
#daynameblock {
margin: 0 auto;
margin-top:5px;
width: 434px;
height: 40px;
background-color: #FFFFFF;
}
.dayname{
margin: 1px;
height: 35px;
width: 60px;
display: block;
float: left;
font-family: Verdana;
text-align: center;
font-size: large;
color: #4E96DA;
}
.weekendname {
margin: 1px;
height: 35px;
width: 60px;
display: block;
float: left;
font-family: Verdana;
text-align: center;
font-size: large;
color: #FF754B;
}
#daysblock {
height: 310px;
width: 434px;
display: block;
background-color: #4E96DA;
}
.weekdays a {
margin: 1px;
padding-top: 20px;
height: 40px;
width: 60px;
display: block;
float: left;
font-family: Verdana;
text-align: center;
font-size: large;
color: #FFFFFF;
background-color: #4E96DA;
text-decoration: none;
}
.weekdays a:focus {
background: #515151;
outline: none;
}
.weekend a {
margin: 1px;
padding-top: 20px;
height: 40px;
width: 60px;
display: block;
float: left;
font-family: Verdana;
text-align: center;
font-size: large;
color: #FFFFFF;
background-color: #5EA5E8;
text-decoration: none;
}
.weekend a:focus {
background: #515151;
outline: none;
}
.weekdays a:hover {
background: #4E96DA;
outline: 2px solid #FFFFFF;
outline-offset: -4px;
}
.weekend a:hover {
background: #4E96DA;
outline: 2px solid #FFFFFF;
outline-offset: -4px;
}
Tidak ada komentar:
Posting Komentar
Catatan:
1. Untuk menyisipkan kode,gunakan tag <i rel="pre">Kode Anda</i>
2. Untuk menyisipkan quote,gunakan tag <b rel="quote">Kata-kata Anda</b>
3. Untuk menyisipkan gambar,gunakan tag [img]URL Gambar[/img]
4. Untuk menyisipkan video,gunakan tag [youtube]URL VIDEO ANDA[/youtube]
NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.
Terimakasih atas kunjungannya ke Blog Kolom Tutorial™, Salam M. Alex Junaedi