HMTL and CSS calendar

Developer
Size
3,153 Kb
Views
16,192

How do I make an hmtl and css calendar?

A simple HTML and CSS calendar [icon] made upon request. Design by tutvid (in YouTube Photoshop tutorial).. What is a hmtl and css calendar? How do you make a hmtl and css calendar? This script and codes were developed by Billy Brown on 30 September 2022, Friday.

HMTL and CSS calendar Previews

HMTL and CSS calendar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HMTL and CSS calendar</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * {	margin: 0;	padding: 0;
}
html { font-family: sans-serif;
}
.clasp {	background: #aaaaaa;	border: 1px solid #999999;	border-radius: 4px;	box-shadow: 0 -1px 5px rgba(0,0,0,0.4), inset -1px 1px 2px white;	display: block;	height: 16px;	position: absolute;	top: -5px;	width: 4px;	z-index: 2000;
}
.clasp.hole-left {	left: 9px;
}
.clasp.hole-right {	right: 9px;
}
.hole {	background: #99ccff;	border-radius: 8px;	box-shadow: 0 -1px 0 black, inset 0 0 20px #878787;	display: block;	height: 8px;	position: absolute;	top: 8px;	width: 8px;
}
.hole-left {	left: 8px;
}
.hole-right {	right: 8px;
}
#calendar {	background: #e4e0e7;	box-shadow: 0 0 20px #878787;	height: 208px;	margin: 20px auto;	position: relative;	text-align: center;	width: 216px;
}
#month {	background: linear-gradient(#bcde4b, #8bc620);	color: white;	height: 30px;	line-height: 30px;	text-shadow: 0 -1px 0 #878787;	width: 216px;
}
#days {	background: linear-gradient(#f4f4f4, #ebebeb);	-webkit-box-shadow: 0 1px 0 #aaaaaa;
}
table.days {	color: #888888;	font-size: 11px;	width: 216px;
}
table.day td, table.days td {	width: 30px;
}
table.day td {	background: #f4f0f7;	color: #878787;	height: 29px;	box-shadow: 0 -1px 0 white;
}
table.day td.old-month {	color: #aaaaaa;
}
table.day td:hover { background: #e9e9ee; cursor: pointer;
}
table.day td.selected {	background: linear-gradient(#bcde4b, #8bc620);	color: white;	text-shadow: 0 -1px 0 #878787;
}
table.day td.appoint {	border-bottom: 2px solid #99ccff;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="calendar">	<div class="clasp hole-left"></div>	<div class="clasp hole-right"></div>	<div class="hole hole-left"></div>	<div class="hole hole-right"></div>	<div id="month">« March 2012 »</div>	<div id="days">	<table class="days">	<tr>	<td>SUN</td>	<td>MON</td>	<td>TUE</td>	<td>WED</td>	<td>THU</td>	<td>FRI</td>	<td>SAT</td>	</tr>	</table>	</div>	<table class="day">	<tr>	<td class="old-month">26</td>	<td class="old-month">27</td>	<td class="old-month">28</td>	<td class="old-month">29</td>	<td>1</td>	<td>2</td>	<td class="selected">3</td>	</tr>	<tr>	<td>4</td>	<td class="appoint">5</td>	<td>6</td>	<td>7</td>	<td>8</td>	<td>9</td>	<td>10</td>	</tr>	<tr>	<td>11</td>	<td>12</td>	<td>13</td>	<td>14</td>	<td>15</td>	<td>16</td>	<td>17</td>	</tr>	<tr>	<td>18</td>	<td>19</td>	<td>20</td>	<td>21</td>	<td class="appoint">22</td>	<td class="appoint">23</td>	<td>24</td>	</tr>	<tr>	<td>25</td>	<td>26</td>	<td>27</td>	<td>28</td>	<td>29</td>	<td>30</td>	<td>31</td>	</tr>	</table>
</div> <script src="js/index.js"></script>
</body>
</html>

HMTL and CSS calendar - Script Codes CSS Codes

* {	margin: 0;	padding: 0;
}
html { font-family: sans-serif;
}
.clasp {	background: #aaaaaa;	border: 1px solid #999999;	border-radius: 4px;	box-shadow: 0 -1px 5px rgba(0,0,0,0.4), inset -1px 1px 2px white;	display: block;	height: 16px;	position: absolute;	top: -5px;	width: 4px;	z-index: 2000;
}
.clasp.hole-left {	left: 9px;
}
.clasp.hole-right {	right: 9px;
}
.hole {	background: #99ccff;	border-radius: 8px;	box-shadow: 0 -1px 0 black, inset 0 0 20px #878787;	display: block;	height: 8px;	position: absolute;	top: 8px;	width: 8px;
}
.hole-left {	left: 8px;
}
.hole-right {	right: 8px;
}
#calendar {	background: #e4e0e7;	box-shadow: 0 0 20px #878787;	height: 208px;	margin: 20px auto;	position: relative;	text-align: center;	width: 216px;
}
#month {	background: linear-gradient(#bcde4b, #8bc620);	color: white;	height: 30px;	line-height: 30px;	text-shadow: 0 -1px 0 #878787;	width: 216px;
}
#days {	background: linear-gradient(#f4f4f4, #ebebeb);	-webkit-box-shadow: 0 1px 0 #aaaaaa;
}
table.days {	color: #888888;	font-size: 11px;	width: 216px;
}
table.day td, table.days td {	width: 30px;
}
table.day td {	background: #f4f0f7;	color: #878787;	height: 29px;	box-shadow: 0 -1px 0 white;
}
table.day td.old-month {	color: #aaaaaa;
}
table.day td:hover { background: #e9e9ee; cursor: pointer;
}
table.day td.selected {	background: linear-gradient(#bcde4b, #8bc620);	color: white;	text-shadow: 0 -1px 0 #878787;
}
table.day td.appoint {	border-bottom: 2px solid #99ccff;
}

HMTL and CSS calendar - Script Codes JS Codes

/* Simple HTML and CSS calendar
** made from tutvid's video on
** YouTube to make this in Photoshop.
*/
HMTL and CSS calendar - Script Codes
HMTL and CSS calendar - Script Codes
Home Page Home
Developer Billy Brown
Username _Billy_Brown
Uploaded September 30, 2022
Rating 3.5
Size 3,153 Kb
Views 16,192
Do you need developer help for HMTL and CSS calendar?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Billy Brown (_Billy_Brown) Script Codes
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!