Membuat Desain Kalender di Website dengan CSS

Berbicara tentang desain memang tidak ada matinya, apalagi membahas tentang desain website, karena mungkin sekarang memang Zaman Digital maka desain Web sangat lah berpengarung. Ngomong ngomong tentang desain website di sini saya akan menshare bagaimana cara Membuat Desain Kalender di Website dengan CSS. Langsung saja kita praktekan yah teman teman.

Pertama kalian buka text editor kalian dan ketikan kode HTML di bawah ini dan beri nama dengan nama index.html lalau simpan.

Index.html

<!DOCTYPE html>

<html>

<head>

<title>membuat Kalendengan Dengan CSS</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="container">

<h2 style="color: #666; text-align: center">Kalender Hari Ini</h2>


<div class="month">     

  <ul>

    <li class="prev">&#10094;</li>

    <li class="next">&#10095;</li>

    <li>

      November<br>

      <span style="font-size:18px">2017</span>

    </li>

  </ul>

</div>


<ul class="weekdays">

  <li>Senin</li>

  <li>Selasa</li>

  <li>Rabu</li>

  <li>Kamis</li>

  <li>Jumat</li>

  <li>Sabtu</li>

  <li>Minggu</li>

</ul>


<ul class="days"> 

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <li>4</li>

  <li>5</li>

  <li>6</li>

  <li>7</li>

  <li>8</li>

  <li>9</li>

  <li><span class="active">10</span></li>

  <li>11</li>

  <li>12</li>

  <li>13</li>

  <li>14</li>

  <li>15</li>

  <li>16</li>

  <li>17</li>

  <li>18</li>

  <li>19</li>

  <li>20</li>

  <li>21</li>

  <li>22</li>

  <li>23</li>

  <li>24</li>

  <li>25</li>

  <li>26</li>

  <li>27</li>

  <li>28</li>

  <li>29</li>

  <li>30</li>

  <li>31</li>

</ul>

</div>

</body>

</html>

Setelah itu kita buat file CSS dan beri nama dengan nama style.css dan simpan sejajar dengan file HTML yang kita buat di atas.

style.css

* {box-sizing: border-box;}

ul {list-style-type: none;}

body {font-family: Verdana, sans-serif;}

.container{

    width: 70%;

    margin: auto;

}

.month {

    padding: 70px 25px;

    width: 100%;

    background: #34495e;

    text-align: center;

}


.month ul {

    margin: 0;

    padding: 0;

}


.month ul li {

    color: white;

    font-size: 20px;

    text-transform: uppercase;

    letter-spacing: 3px;

}


.month .prev {

    float: left;

    padding-top: 10px;

}


.month .next {

    float: right;

    padding-top: 10px;

}


.weekdays {

    margin: 0;

    padding: 10px 0;

    background-color: #ddd;

}


.weekdays li {

    display: inline-block;

    width: 13.6%;

    color: #666;

    text-align: center;

}


.days {

    padding: 10px 0;

    background: #eee;

    margin: 0;

}


.days li {

    list-style-type: none;

    display: inline-block;

    width: 13.6%;

    text-align: center;

    margin-bottom: 5px;

    font-size:12px;

    color: #777;

}


.days li .active {

    padding: 5px;

    background: #3498db;

    color: white !important

}


/* Add media queries for smaller screens */

@media screen and (max-width:720px) {

    .weekdays li, .days li {width: 13.1%;}

}


@media screen and (max-width: 420px) {

    .weekdays li, .days li {width: 12.5%;}

    .days li .active {padding: 2px;}

}


@media screen and (max-width: 290px) {

    .weekdays li, .days li {width: 12.2%;}

}

Sekian tutorial Membuat Desain kalender dengan CSS, semoga bermanfaat.. keep coding.. 😀

Membuat Desain Kalender di Website dengan CSS

Kategori