Haml Calendar

Developer
Katy DeCorah
Size
5,643 Kb
Views
62,744
  1. Haml Calendar Previews
  2. Haml Calendar HTML Codes
  3. Haml Calendar CSS Codes
  4. Haml Calendar JS Codes

How do I make an haml calendar?

Just cuz.. What is a haml calendar? How do you make a haml calendar? This script and codes were developed by Katy DeCorah on 28 July 2022, Thursday.

Haml Calendar Previews
IQ Test

Haml Calendar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Haml Calendar</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/23c0352cf1813420a04865d33.css'> <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! */ @import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700);
body { background:#249991; font-family: 'Roboto Condensed', sans-serif; font-weight:100; line-height:1; font-size:20px; color:#222; text-transform:uppercase; text-align:center;
}
.container { margin:0 auto; width:30em; @extend .clearfix;
}
.today { background:#4ecdc4; color:white; padding:1em 0; float:left; width:15em; min-height:17.2em; .day-week { color:rgba(white,0.8); margin:1em 0 2em; } .day-num { font-size:8em; }
}
.calendar { float:left; width:15em; min-height:17em; background:#f5f5f5; padding:1.25em 1em 2em; @extend .clearfix; .month { color:#249991; font-weight:700; margin:0.75em 0 1em; } .weekday { color:#e42355; font-weight:700; font-size:0.8em; } .day { font-size: 0.8em; font-weight: 700; color:#555555; } .weekday, .day { float:left; width: 12%; margin:0.25em 1%; line-height:1.5em; vertical-align:middle; &.now { position:relative; color:#e42355; &:before { content:""; width:1.75em; height:1.75em; border:0.2em solid #e42355; position:absolute; border-radius:100%; left:-0.125em; top:-0.25em; } } }
}
.mute {color:rgba(black,0.25);}
@media (max-width: 38em) { .container { max-width:100% } .today, .calendar { width:75%; float:none; margin:0 auto; min-height:0; } .calendar { .weekday, .day {display:none;} }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- / ------------- Try a custom date: -->
<!-- /- year = 2014 -->
<!-- /- month = 1 -->
<!-- /- day = 31 -->
<div class='container'> <div class='today'> <div class='date'></div> <div class='day-week'>Sunday</div><div class='day-num'>30</div> </div> <div class='calendar'> <div class='month'> April 2017 </div> <ul class='weekdays'> <li class='weekday'> S </li> <li class='weekday'> M </li> <li class='weekday'> T </li> <li class='weekday'> W </li> <li class='weekday'> T </li> <li class='weekday'> F </li> <li class='weekday'> S </li> </ul> <ul class='week'> <li class='day'> </li> <li class='day'> </li> <li class='day'> </li> <li class='day'> </li> <li class='day'> </li> <li class='day'> </li> <li class='day'> <span class='mute'> 1 </span> </li> <li class='day'> <span class='mute'> 2 </span> </li> <li class='day'> <span class='mute'> 3 </span> </li> <li class='day'> <span class='mute'> 4 </span> </li> <li class='day'> <span class='mute'> 5 </span> </li> <li class='day'> <span class='mute'> 6 </span> </li> <li class='day'> <span class='mute'> 7 </span> </li> <li class='day'> <span class='mute'> 8 </span> </li> <li class='day'> <span class='mute'> 9 </span> </li> <li class='day'> <span class='mute'> 10 </span> </li> <li class='day'> <span class='mute'> 11 </span> </li> <li class='day'> <span class='mute'> 12 </span> </li> <li class='day'> <span class='mute'> 13 </span> </li> <li class='day'> <span class='mute'> 14 </span> </li> <li class='day'> <span class='mute'> 15 </span> </li> <li class='day'> <span class='mute'> 16 </span> </li> <li class='day'> <span class='mute'> 17 </span> </li> <li class='day'> <span class='mute'> 18 </span> </li> <li class='day'> <span class='mute'> 19 </span> </li> <li class='day'> <span class='mute'> 20 </span> </li> <li class='day'> <span class='mute'> 21 </span> </li> <li class='day'> <span class='mute'> 22 </span> </li> <li class='day'> <span class='mute'> 23 </span> </li> <li class='day'> <span class='mute'> 24 </span> </li> <li class='day'> <span class='mute'> 25 </span> </li> <li class='day'> <span class='mute'> 26 </span> </li> <li class='day'> <span class='mute'> 27 </span> </li> <li class='day'> <span class='mute'> 28 </span> </li> <li class='day'> <span class='mute'> 29 </span> </li> <li class='day now'> 30 </li> </ul> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Haml Calendar - Script Codes CSS Codes

@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700);
body { background:#249991; font-family: 'Roboto Condensed', sans-serif; font-weight:100; line-height:1; font-size:20px; color:#222; text-transform:uppercase; text-align:center;
}
.container { margin:0 auto; width:30em; @extend .clearfix;
}
.today { background:#4ecdc4; color:white; padding:1em 0; float:left; width:15em; min-height:17.2em; .day-week { color:rgba(white,0.8); margin:1em 0 2em; } .day-num { font-size:8em; }
}
.calendar { float:left; width:15em; min-height:17em; background:#f5f5f5; padding:1.25em 1em 2em; @extend .clearfix; .month { color:#249991; font-weight:700; margin:0.75em 0 1em; } .weekday { color:#e42355; font-weight:700; font-size:0.8em; } .day { font-size: 0.8em; font-weight: 700; color:#555555; } .weekday, .day { float:left; width: 12%; margin:0.25em 1%; line-height:1.5em; vertical-align:middle; &.now { position:relative; color:#e42355; &:before { content:""; width:1.75em; height:1.75em; border:0.2em solid #e42355; position:absolute; border-radius:100%; left:-0.125em; top:-0.25em; } } }
}
.mute {color:rgba(black,0.25);}
@media (max-width: 38em) { .container { max-width:100% } .today, .calendar { width:75%; float:none; margin:0 auto; min-height:0; } .calendar { .weekday, .day {display:none;} }
}

Haml Calendar - Script Codes JS Codes

/*
Colors & layout inspiration from:
+ http://dribbble.com/shots/1054042--Freebie-Calendar-Window?list=searches&tag=calendar
+ http://dribbble.com/shots/1054880-My-Birfday-Calendar
*/
Haml Calendar - Script Codes
Haml Calendar - Script Codes
Home Page Home
Developer Katy DeCorah
Username katydecorah
Uploaded July 28, 2022
Rating 4.5
Size 5,643 Kb
Views 62,744
Do you need developer help for Haml 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!

Katy DeCorah (katydecorah) Script Codes
Name
Accordion Nav
BLOOD
Haml Clock
Double Vision
Food by nos
Hallowiener by Bobby McKenna
Twinner Spinner II
Angular Contact Form
Google Font Explorer
Bowl of Trees
Create amazing Facebook ads 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!