Beautiful calendar icon

Developer
Digital Avinash
Size
2,010 Kb
Views
34,408
  1. Beautiful calendar icon Previews
  2. Beautiful calendar icon HTML Codes
  3. Beautiful calendar icon CSS Codes

How do I make an beautiful calendar icon?

What is a beautiful calendar icon? How do you make a beautiful calendar icon? This script and codes were developed by Digital Avinash on 12 October 2022, Wednesday.

Beautiful calendar icon Previews
IQ Test

Beautiful calendar icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Beautiful calendar icon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <time datetime="2017-09-20" class="icon"> <em>Saturday</em> <strong>September</strong> <span>20</span>
</time>
</body>
</html>

Beautiful calendar icon - Script Codes CSS Codes

body
{ font-family: "Helvetica Neue Bold", arial, helvetica, sans-serif; font-size: 100%; margin: 10px; color: #333; background-color: #cecece;
}
h1
{ margin: 0; font-weight: normal;
}
time.icon
{ font-size: 1em; /* change icon size */ display: block; position: relative; width: 7em; height: 7em; background-color: #fff; margin: 2em auto; border-radius: 0.6em; box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd; overflow: hidden; -webkit-backface-visibility: hidden; -webkit-transform: rotate(0deg) skewY(0deg); -webkit-transform-origin: 50% 10%; transform-origin: 50% 10%;
}
time.icon *
{ display: block; width: 100%; font-size: 1em; font-weight: bold; font-style: normal; text-align: center;
}
time.icon strong
{ position: absolute; top: 0; padding: 0.4em 0; color: #fff; background-color: #fd9f1b; border-bottom: 1px dashed #f37302; box-shadow: 0 2px 0 #fd9f1b;
}
time.icon em
{ position: absolute; bottom: 0.3em; color: #fd9f1b;
}
time.icon span
{ width: 100%; font-size: 2.8em; letter-spacing: -0.05em; padding-top: 0.8em; color: #2f2f2f;
}
time.icon:hover, time.icon:focus
{ -webkit-animation: swing 0.6s ease-out; animation: swing 0.6s ease-out;
}
@-webkit-keyframes swing { 0% { -webkit-transform: rotate(0deg) skewY(0deg); } 20% { -webkit-transform: rotate(12deg) skewY(4deg); } 60% { -webkit-transform: rotate(-9deg) skewY(-3deg); } 80% { -webkit-transform: rotate(6deg) skewY(-2deg); } 100% { -webkit-transform: rotate(0deg) skewY(0deg); }
}
@keyframes swing { 0% { transform: rotate(0deg) skewY(0deg); } 20% { transform: rotate(12deg) skewY(4deg); } 60% { transform: rotate(-9deg) skewY(-3deg); } 80% { transform: rotate(6deg) skewY(-2deg); } 100% { transform: rotate(0deg) skewY(0deg); }
}
Beautiful calendar icon - Script Codes
Beautiful calendar icon - Script Codes
Home Page Home
Developer Digital Avinash
Username digitalavinash
Uploaded October 12, 2022
Rating 3
Size 2,010 Kb
Views 34,408
Do you need developer help for Beautiful calendar icon?

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!

Digital Avinash (digitalavinash) Script Codes
Name
Responsive table panel with pagination
3 column html and css div, ready code
Profile template for artist
Four box with css style - bootstrap
Blog post snippet
Combine css margin top- Shorting code in css
Fix div after scroll, in Jquery
Footer made in bootstrap
Trangle in css
User list with image thumb and css style, made in bootstrap
Create amazing blog posts 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!