1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>CSS Calendar Ideas - Freebie Supply</title> 7 8 <style>pre,textarea{overflow:auto}[hidden],audio:not([controls]),template{display:none}details,main,summary{display:block}input{border-radius:0}input[type=number]{width:auto}input[type=email],input[type=search],input[type=submit],input[type=text]{-webkit-appearance:none}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}progress{display:inline-block}small{font-size:75%}textarea{resize:vertical}[unselectable]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}*,:after,:before{box-sizing:inherit;border-style:solid;border-width:0}*{font-size:inherit;line-height:inherit;margin:0;padding:0}:after,:before{text-decoration:inherit;vertical-align:inherit}:root{-ms-overflow-style:-ms-autohiding-scrollbar;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;box-sizing:border-box;cursor:default;font:16px/1.5 sans-serif;text-rendering:optimizeLegibility}audio,canvas,iframe,img,svg,video{vertical-align:middle}button,input,select,textarea{background-color:transparent;color:inherit;font-family:inherit;font-style:inherit;font-weight:inherit;min-height:1.5em}code,kbd,pre,samp{font-family:monospace,monospace}nav ol,nav ul{list-style:none}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}table{border-collapse:collapse;border-spacing:0}::-moz-selection{background-color:#b3d4fc;text-shadow:none}::selection{background-color:#b3d4fc;text-shadow:none}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){clip:rect(0 0 0 0)!important;position:absolute!important}}body,div,footer,h1,h2,h3,h4,header,html,img,li,nav,section,ul{margin:0;padding:0}html{position:relative;min-height:100%;-webkit-text-size-adjust:none;background-color:#fafafa;color:#433e59}li,ul{list-style:none}h1,h2,h3,h4{font-weight:400}body{font-family:Avenir Next,Avenir,Helvetica Neue,Helvetica,Arial,sans-serif}body,input{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none}a{text-decoration:none;color:#433e59}::-webkit-input-placeholder{color:#8588a5;font-size:16px}:-moz-placeholder,::-moz-placeholder{color:#8588a5;font-size:16px}:-ms-input-placeholder{color:#8588a5;font-size:16px}.search-input::-webkit-input-placeholder{color:#c7cadf}.search-input:-moz-placeholder,.search-input::-moz-placeholder{color:#c7cadf}.search-input:-ms-input-placeholder{color:#c7cadf}.top-section{background-color:#6770b7;height:64px;position:fixed;top:0;left:0;width:100%;z-index:5}.top-section.normal-top-section{position:static}.awesome-bar{display:none;-webkit-transition:all .35s;transition:all .35s;position:fixed;-webkit-transform:translate3d(0,-200%,0);transform:translate3d(0,-200%,0);top:0;width:100%;z-index:9}.awesome-bar.header-show{-webkit-transform:translateZ(0);transform:translateZ(0);z-index:9}.awesome-bar.special{-webkit-transform:translate3d(0,200%,0);transform:translate3d(0,200%,0);bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;top:auto}.awesome-bar.special.header-show{-webkit-transform:translateZ(0);transform:translateZ(0);z-index:9}.hidden-bar-item{display:none}.stupon-like-mobile{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;text-align:center;height:64px;background-color:#3d3f4e;font-size:15px;line-height:64px;margin:0;font-weight:700;color:#fff;z-index:9;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.stupon-tumbs-up{margin-left:6px;margin-top:-6px}.header-left-side{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:64px;width:300px;margin:0 auto;position:relative}.header-right-side{display:none;height:64px}.hamburger{display:block;position:relative;overflow:hidden;margin:0;padding:0;width:20px;height:48px;font-size:0;text-indent:-9999px;box-shadow:none;border:none;cursor:pointer}.hamburger:focus{outline:none}
8.hamburger span{display:block;position:absolute;top:23px;left:1px;right:18px;height:3px;background:#fff}.hamburger span:after,.hamburger span:before{position:absolute;display:block;left:0;width:100%;height:3px;background-color:#fff;content:""}.hamburger span:before{top:-10px}.hamburger span:after{bottom:-10px}.hamburger span{width:17px;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.hamburger span:before{-webkit-transform-origin:top right;transform-origin:top right;-webkit-transition:width .3s,top .3s,-webkit-transform .3s;transition:width .3s,top .3s,-webkit-transform .3s;transition:transform .3s,width .3s,top .3s;transition:transform .3s,width .3s,top .3s,-webkit-transform .3s}.hamburger span:after{-webkit-transform-origin:bottom right;transform-origin:bottom right;-webkit-transition:width .3s,bottom .3s,-webkit-transform .3s;transition:width .3s,bottom .3s,-webkit-transform .3s;transition:transform .3s,width .3s,bottom .3s;transition:transform .3s,width .3s,bottom .3s,-webkit-transform .3s}.hamburger.is-active span{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.hamburger.is-active span:after,.hamburger.is-active span:before{width:60%}.hamburger.is-active span:before{top:0;-webkit-transform:translateX(8px) translateY(1px) rotate(45deg);transform:translateX(8px) translateY(1px) rotate(45deg)}.hamburger.is-active span:after{bottom:0;-webkit-transform:translateX(8px) translateY(-1px) rotate(-45deg);transform:translateX(8px) translateY(-1px) rotate(-45deg)}.logo{position:absolute;right:50%;top:50%;-webkit-transform:translate(50%,-50%);transform:translate(50%,-50%)}.side-menu{overflow-y:scroll;position:fixed;height:100%;z-index:100;width:100%;top:64px;left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform .4s;transition:-webkit-transform .4s;transition:transform .4s;transition:transform .4s,-webkit-transform .4s;background-color:#fafafa;padding:20px 0 94px}.side-menu.is-active{-webkit-transform:translateX(0);transform:translateX(0)}.menu-wrapper{width:300px;margin:0 auto}.parent{margin:20px 0 0}.parent:first-child{margin:0}.parent a{font-size:15px;color:#433e59;font-weight:700}.parent .parent-icon{padding:0 0 1px 27px;background-image:url(https://cdn.freebiesupply.com/resources/resources-1.4.svg);background-repeat:no-repeat;background-position:40px 40px;height:20px;width:162px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:22px;margin:0 0 5px}.parent .free-psd{background-position:0 0}.parent .free-sketch{background-position:-40px -40px}.parent .free-fonts{background-position:-80px -80px}.parent .free-vector{background-position:-120px -120px}.parent .adobe-xd-templates{background-position:-160px -160px}.parent .free-figma{background-position:-200px -200px}.parent .free-wordpress{background-position:-440px -440px}.parent .free-google-slides{background-position:-280px -280px}.parent .free-keynote-templates{background-position:-480px -480px}.parent .free-powerpoint-templates{background-position:-520px -520px}.parent svg{vertical-align:sub;margin:0 7px 0 0}.parent .logos-icon{background-image:url(https://cdn.freebiesupply.com/resources/resources-logos-1.5.svg)}.parent .car-logos{background-position:0 0}.parent .bank-logos{background-position:-40px -40px}.parent .fashion-logos{background-position:-80px -80px}.parent .nfl-logos{background-position:-120px -120px}.parent .mlb-logos{background-position:-160px -160px}.parent .nba-logos{background-position:-200px -200px}.parent .nhl-logos{background-position:-240px -240px}.parent .fast-food-logos{background-position:-280px -280px}.parent .soda-logos{background-position:-320px -320px}.parent .mls-logos{background-position:-360px -360px}.parent .superhero-logos{background-position:-400px -400px}.children li{line-height:28px;margin:0 0 0 27px}.children a{font-size:14px;color:#433e59;font-weight:400}.children li[class=separator]:before{content:"";display:block;height:1px;width:30px;background-color:#f2f2f5;margin:15px 0 12px}.children li[class=separator]~li[class=extra]{padding-top:0}.children li[class=separator]~li[class=extra]:before{content:"";display:none}.adobe-xd-templates .adobe-xd-templates,.free-figma .free-figma,.free-fonts .free-fonts,.free-photoshop-actions .free-photoshop-actions,.free-photoshop-brushes .free-photoshop-brushes,.free-psd-icons .free-psd-icons,.free-psd-misc .free-psd-misc,.free-psd-mobile-design .free-psd-mobile-design,.free-psd-mockups .free-psd-mockups,.free-psd-ui-kits .free-psd-ui-kits,.free-psd-websites .free-psd-websites,.free-psd .free-psd,.free-sketch-icons .free-sketch-icons,.free-sketch-misc .free-sketch-misc,.free-sketch-mobile-design .free-sketch-mobile-design,.free-sketch-mockups .free-sketch-mockups,.free-sketch-ui-kits .free-sketch-ui-kits,.free-sketch-web
8sites .free-sketch-websites,.free-sketch .free-sketch,.free-vector .free-vector{color:#828eec}.section-wrapper{margin:94px 0 0}.content{margin:0 auto;width:300px}.resources{position:relative;height:100%;min-height:700px}h1,h2{font-weight:700}h2{font-size:20px;margin:0 0 10px}.category-description{margin:0 0 30px}.card{width:300px;margin:0 0 25px;position:relative}.card,.card:after{background-color:#fff}.card:after{width:280px;height:245px;display:block;box-shadow:0 5px 20px 0 rgba(51,73,94,.05);content:"";position:absolute;bottom:0;left:10px;z-index:-1}.card p{font-size:11px;color:#7e7c87;padding:0 10px 5px;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;pointer-events:none;line-height:18px;font-family:-apple-system,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif}.card .description-indented{padding:0 20px 5px 32px}.card-image{display:block}.card-image img{width:300px;height:225px;text-align:center}.mini-description{height:30px;overflow:hidden}.card-title.no-icon-title{padding:5px 20px 5px 10px}.card-title{font-size:13px;background-color:#fff;padding:5px 20px 4px 5px;margin:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;line-height:20px;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.card-title .card-icon{padding:0 0 1px 27px;background-image:url(https://cdn.freebiesupply.com/resources/resources-1.4.svg);background-repeat:no-repeat;background-position:40px 40px;height:20px;line-height:20px}.card-title a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:290px;display:inline-block;vertical-align:bottom}.card-title a[class*=free-photoshop],.card-title a[class*=free-psd]{background-position:0 0}.card-title a[class*=free-sketch]{background-position:-40px -40px}.card-title a[class*=free-fonts]{background-position:-80px -80px}.card-title a[class*=free-vector]{background-position:-120px -120px}.card-title a[class*=adobe-xd-templates]{background-position:-160px -160px}.card-title a[class*=free-figma]{background-position:-200px -200px}.card-title a[class*=logos]{background-position:-240px -240px}.card-title a[class$=powerpoint-templates]{background-position:-520px -520px}.card-title a[class*=google-slides-and-powerpoint-templates]{background-position:-280px -280px}.card-title a[class*=flags]{background-position:-320px -320px}.card-title a[class*=calendars]{background-position:-360px -360px}.card-title a[class$=blog]{background-position:-400px -400px}.card-title a[class*=wordpress]{background-position:-440px -440px}.card-title a[class*=keynote-templates]{background-position:-480px -480px}.card-title a[class*=letters]{background-position:-240px -240px}.card-title .buffer-link{width:30px;padding-left:10px;margin-left:10px;pointer-events:visible}.card-title .buffer-link:hover g{fill:#000}.hosting-full-width{width:300px}.breadcrumb{font-size:12px}.breadcrumb .breadcrumb-current-link{font-weight:700}.breadcrumb .breadcrumb-separator{color:#b8b6c0;padding:0 5px}.breadcrumb svg{vertical-align:baseline;margin:0 5px}.details-container{position:relative}.details-container,.resource-preview{background-color:#fff;padding:20px 10px;margin:10px 0 0;border-radius:1px;position:relative}.details-container h1,.resource-preview h1{font-size:20px;line-height:24px;margin:0 0 15px}.details-container:after,.resource-preview:after{width:280px;height:100%;display:block;background-color:#fff;box-shadow:0 5px 20px 0 rgba(51,73,94,.05);content:"";position:absolute;bottom:0;left:10px;z-index:-1}.big-resource{width:280px}.resource-description{font-size:16px;line-height:26px;margin:20px 0 25px}.resource-description blockquote{font-style:italic;color:#433e59;margin:35px 0 0;padding:4px 0 4px 8px;border-left:8px solid #f2f2f5}.resource-description blockquote p{line-height:22px;font-size:14px;margin:0}.resource-description h3{font-size:18px;font-weight:700;margin-top:40px;margin-bottom:10px;color:#6c687b}.resource-description h4{font-size:16px;padding-top:15px;color:#6c687b;font-weight:700}.resource-description a{color:#828eec}.resource-description p{margin-top:15px;margin-bottom:15px}.resource-description p a{color:#433e59;text-decoration:underline}.resource-description p .author-link{color:#828eec;text-decoration:underline}.resource-description img{width:280px;max-width:100%}.resource-description ol{list-style-type:decimal}.resource-description ol li{list-style-type:decimal;list-style-position:inside}.resource-description .author-link{color:#828eec;text-decoration:underline}.resource-images{min-height:200px}.resource-image{margin:0 0 10px}.author-link{color:#828eec;text-decoration:underline}.body-tags{margin:10px 0 0;line-height:18px}.body-tags a{font-size:12px;color:#838090;text-decoration:underline}.content-ad{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;
8-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.download-btn-wrapper{position:relative;width:280px;height:64px}.download-btn{position:relative;overflow:hidden;z-index:2}.download-btn .arrow-down{position:absolute;right:0;top:-100%;width:100%;height:100%}.download-btn .download-text{position:absolute;right:0;top:0;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.download-btn .download-text-download{line-height:1}.download-btn .download-and-like{line-height:1.1;font-size:14px;font-weight:400}.download-btn{display:block;background-color:#53c1e7;color:#fff;line-height:54px;width:280px;height:52px;font-weight:700;font-size:18px;text-align:center;border-radius:1px}.download-btn svg{vertical-align:baseline;margin:0 5px 0 0}.download-btn .source{font-size:14px;font-weight:400;padding:0 0 0 6px}.download-btn-alt{position:absolute;top:0;left:0;z-index:1}.share-buttons{margin:20px 0 0}.share-title{font-size:14px;color:#838090;text-transform:uppercase;font-weight:700}.buttons-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.buttons-wrapper .share-link{display:block;background-color:#f2f2f5;width:87px;height:38px;line-height:40px;color:#838090;font-size:12px;text-align:center;border-radius:1px}.buttons-wrapper svg{vertical-align:text-bottom;margin:0 3px 0 0}.sidebar{margin:30px 0 0}.sidebar .hosting-300-green{margin:0 0 20px}.hosting{margin:0 0 25px}.ad-2{position:relative;z-index:1;background-color:#fff;height:250px}.hosting-300-blue,.hosting-300-green,.hosting-300-purple{width:300px;height:255px;position:relative}.affiliate{height:250px;display:block;position:absolute;top:0;z-index:0}.affiliate img{width:300px;height:225px;text-align:center}.affiliate-blue img,.affiliate-green img,.affiliate-purple img,.affiliate-similar img{height:auto}.subscribe-box{background-color:#f2f2f5;padding:20px;text-align:center}.email-field-sidebar{width:100%;border-radius:1px}.newsletter-title{font-size:20px;font-weight:700}.newsletter-text{font-size:14px;margin:5px 0 0}.email-field-sidebar{background-color:#fff;border:1px solid #bebdc5;height:40px;margin:15px 0 0;text-align:center}.button-subscribe-sidebar{background-color:#9496c3;color:#fff;font-weight:700;height:42px;font-size:16px;width:100%;margin:10px 0 0;border-radius:1px;cursor:pointer}.related-resources{margin:30px 0}.similar-hosting{width:300px;height:250px;position:relative}.title-similar{font-size:20px;font-weight:700;margin:0 0 10px}.pagination{width:300px;margin:20px auto 60px}.navigation-list{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.navigation-list .page-numbers{height:36px;width:36px;text-align:center;margin:0 4px 0 0;font-size:11px}.navigation-list .page-numbers.dots{font-weight:700;line-height:32px;width:10px}.navigation-list .page-numbers.current{background-color:#6770b7;border-radius:1px;color:#fff;line-height:37px;font-weight:700}.navigation-list .page-numbers.current a{color:#fff;box-shadow:none}.navigation-list .next.page-numbers,.navigation-list .prev.page-numbers{line-height:37px;font-size:18px}.navigation-list a{height:36px;line-height:37px;width:36px;color:#6770b7;display:block;text-align:center;font-weight:700;box-shadow:inset 0 0 0 1px #e4e4e9;border-radius:1px}.bottom-section{background-color:#2c3158;padding:60px 0 0}.subscribe{width:300px;margin:0 auto 60px;text-align:center}.subscribe-title{font-size:20px;font-weight:700;color:#fff;margin:0 0 10px}.subscribe-text{color:#bdb9cf;font-size:14px;margin:0 0 35px}.email-field-footer{width:298px;border:1px solid #8588a5;height:40px;font-size:16px;color:#bdb9cf;margin:0 0 10px;padding:0 0 0 15px;border-radius:1px;background-color:#313761}.button-subscribe-footer{background-color:#6770b7;color:#fff;font-size:16px;font-weight:700;width:300px;height:42px;
8cursor:pointer;border-radius:1px}.popular-links-wrapper{margin-bottom:40px;padding:0 10px}.popular-links{max-width:810px;margin:auto;text-align:center}.popular-links-title{color:#fcfcfc;font-weight:700;font-size:18px;text-align:center;margin-bottom:20px}.popular-link{color:#bdb9cf;font-size:14px;display:inline-block;margin-right:15px;margin-bottom:17px}.popular-link:hover{text-decoration:underline}.popular-link:last-of-type{margin-right:0}.footer-link{color:#bdb9cf;font-size:14px}footer{background-color:#22274c;text-align:center;color:#bdb9cf;font-size:12px;padding:40px 0}footer span{padding:0 4px 0 6px}.links{margin:0 0 10px}#wufoo-q1xbjkg1vgxog4{position:relative;z-index:3}.details-container{min-height:584px}@-webkit-keyframes a{0%{opacity:0}to{opacity:1}}@keyframes a{0%{opacity:0}to{opacity:1}}.spinner-overlay{position:absolute;z-index:2;height:100%;width:100%;top:0;left:0}.fadein .spinner-overlay{opacity:0;-webkit-animation:a ease-in 1;animation:a ease-in 1;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:.2s;animation-duration:.2s}.spinner{width:80px;height:80px;position:absolute;margin:auto;bottom:0;top:0;left:0;right:0}.double-bounce1,.double-bounce2{width:100%;height:100%;background-color:#40a8b5;background-size:contain;opacity:.6;position:absolute;top:0;left:0;border-radius:50%;-webkit-animation:b 2s infinite ease-in-out;animation:b 2s infinite ease-in-out}.double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes b{0%,to{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes b{0%,to{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes c{to{width:0;height:0;overflow:hidden}}@-webkit-keyframes c{to{width:0;height:0;visibility:hidden}}.about-title{font-size:20px;line-height:24px;font-weight:700}.about-us p{margin:15px 0 40px;font-size:16px;line-height:22px}.about-us a{color:#828eec;text-decoration:underline}.blog-style{overflow:hidden;height:300px}.blog-style iframe{width:300px;height:195px!important}.blog-image{position:absolute;left:50%;right:0;-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-animation:c 0s ease-in 20s forwards;animation:c 0s ease-in 20s forwards;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.mt0{margin-top:0!important}.mt20{margin-top:10px!important}.mt40{margin-top:20px!important}.mt60{margin-top:30px!important}.mb20{margin-bottom:10px!important}.mb40{margin-bottom:20px!important}.mb60{margin-bottom:30px!important}.pt0{padding-top:0!important}.pt20{padding-top:10px!important}.pt40{padding-top:20px!important}.pt60{padding-top:30px!important}.pb20{padding-bottom:10px!important}.pb40{padding-bottom:20px!important}.pb60{padding-bottom:30px!important}.text-center{text-align:center}.resource-description .download-btn-small{display:inline-block;background-color:#53c1e7;color:#fff;line-height:34px;min-width:160px;height:34px;font-weight:700;font-size:16px;text-align:center;border-radius:1px;text-decoration:none;margin-top:20px}.resource-description .download-btn-small:hover{background-color:#4ec8f3}.resource-description .img-doc{border:1px solid rgba(0,0,0,.5);box-shadow:0 0 5px 0 rgba(0,0,0,.1);width:auto;max-width:100%}.sports-team{min-height:30px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:162px;line-height:16px;font-size:14px;font-weight:700;margin-bottom:15px}.sports-team:before{display:block;content:"";height:30px;width:36px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;background-repeat:no-repeat}.sports-team:first-child{margin-top:5px}.nfl-team:before{background-image:url(https://cdn.freebiesupply.com/resources/nfl-logos-sprite.svg)}.arizona-cardinals:before{background-position:0 0}.atlanta-falcons:before{background-position:-30px -30px}.baltimore-ravens:before{background-position:-60px -60px}.buffalo-bills:before{background-position:-90px -90px}.carolina-panthers:before{background-position:-120px -120px}.chicago-bears:before{background-position:-150px -150px}
8.cincinnati-bengals:before{background-position:-180px -180px}.cleveland-browns:before{background-position:-210px -210px}.dallas-cowboys:before{background-position:-240px -240px}.denver-broncos:before{background-position:-270px -270px}.detroit-lions:before{background-position:-300px -300px}.green-bay-packers:before{background-position:-330px -330px}.houston-texans:before{background-position:-360px -360px}.indianapolis-colts:before{background-position:-390px -390px}.jacksonville-jaguars:before{background-position:-420px -420px}.kansas-city-chiefs:before{background-position:-450px -450px}.los-angeles-chargers:before{background-position:-480px -480px}.los-angeles-rams:before{background-position:-510px -510px}.miami-dolphins:before{background-position:-540px -540px}.minnesota-vikings:before{background-position:-570px -570px}.new-england-patriots:before{background-position:-600px -600px}.new-orleans-saints:before{background-position:-630px -630px}.new-york-giants:before{background-position:-660px -660px}.new-york-jets:before{background-position:-690px -690px}.oakland-raiders:before{background-position:-720px -720px}.philadelphia-eagles:before{background-position:-750px -750px}.pittsburgh-steelers:before{background-position:-780px -780px}.san-francisco-49ers:before{background-position:-810px -810px}.seattle-seahawks:before{background-position:-840px -840px}.tampa-bay-buccaneers:before{background-position:-870px -870px}.tennessee-titans:before{background-position:-900px -900px}.washington-redskins:before{background-position:-930px -930px}.nba-team:before{background-image:url(https://cdn.freebiesupply.com/resources/nba-logos-sprite.svg)}.atlanta-hawks:before{background-position:0 0}.boston-celtics:before{background-position:-30px -30px}.brooklyn-nets:before{background-position:-60px -60px}.charlotte-hornets:before{background-position:-90px -90px}.chicago-bulls:before{background-position:-120px -120px}.cleveland-cavaliers:before{background-position:-150px -150px}.dallas-mavericks:before{background-position:-180px -180px}.denver-nuggets:before{background-position:-210px -210px}.detroit-pistons:before{background-position:-240px -240px}.golden-state-warriors:before{background-position:-270px -270px}.houston-rockets:before{background-position:-300px -300px}.indiana-pacers:before{background-position:-330px -330px}.los-angeles-clippers:before{background-position:-360px -360px}.los-angeles-lakers:before{background-position:-390px -390px}.memphis-grizzlies:before{background-position:-420px -420px}.miami-heat:before{background-position:-450px -450px}.milwaukee-bucks:before{background-position:-480px -480px}.minnesota-timberwolves:before{background-position:-510px -510px}.new-orleans-pelicans:before{background-position:-540px -540px}.new-york-knicks:before{background-position:-570px -570px}.oklahoma-city-thunder:before{background-position:-600px -600px}.orlando-magic:before{background-position:-630px -630px}.philadelphia-76ers:before{background-position:-660px -660px}.phoenix-suns:before{background-position:-690px -690px}.portland-trail-blazers:before{background-position:-720px -720px}.sacramento-kings:before{background-position:-750px -750px}.san-antonio-spurs:before{background-position:-780px -780px}.toronto-raptors:before{background-position:-810px -810px}.utah-jazz:before{background-position:-840px -840px}.washington-wizards:before{background-position:-870px -870px}.mlb-team:before{background-image:url(https://cdn.freebiesupply.com/resources/mlb-logos-sprite.svg)}.arizona-diamondbacks:before{background-position:0 0}.atlanta-braves:before{background-position:-30px -30px}.baltimore-orioles:before{background-position:-60px -60px}.boston-red-sox:before{background-position:-90px -90px}.chicago-cubs:before{background-position:-120px -120px}.chicago-white-sox:before{background-position:-150px -150px}.cincinnati-reds:before{background-position:-180px -180px}.cleveland-indians:before{background-position:-210px -210px}.colorado-rockies:before{background-position:-240px -240px}.detroit-tigers:before{background-position:-270px -270px}.houston-astros:before{background-position:-300px -300px}.kansas-city-royals:before{background-position:-330px -330px}.los-angeles-angels:before{background-position:-360px -360px}.los-angeles-dodgers:before{background-position:-390px -390px}.miami-marlins:before{background-position:-420px -420px}.milwaukee-brewers:before{background-position:-450px -450px}.minnesota-twins:before{background-position:-480px -480px}.new-york-mets:before{background-position:-510px -510px}.new-york-yankees:before{background-position:-540px -540px}.oakland-athletics:before{background-position:-570px -570px}.philadelphia-phillies:before{background-position:-600px -600px}
8.pittsburgh-pirates:before{background-position:-630px -630px}.san-diego-padres:before{background-position:-660px -660px}.san-francisco-giants:before{background-position:-690px -690px}.seattle-mariners:before{background-position:-720px -720px}.st-louis-cardinals:before{background-position:-750px -750px}.tampa-bay-rays:before{background-position:-780px -780px}.texas-rangers:before{background-position:-810px -810px}.toronto-blue-jays:before{background-position:-840px -840px}.washington-nationals:before{background-position:-870px -870px}.nhl-team:before{background-image:url(https://cdn.freebiesupply.com/resources/nhl-logos-sprite.svg)}.anaheim-ducks:before{background-position:0 0}.arizona-coyotes:before{background-position:-30px -30px}.boston-bruins:before{background-position:-60px -60px}.buffalo-sabres:before{background-position:-90px -90px}.calgary-flames:before{background-position:-120px -120px}.carolina-hurricanes:before{background-position:-150px -150px}.chicago-blackhawks:before{background-position:-180px -180px}.colorado-avalanche:before{background-position:-210px -210px}.columbus-blue-jackets:before{background-position:-240px -240px}.dallas-stars:before{background-position:-270px -270px}.detroit-red-wings:before{background-position:-300px -300px}.edmonton-oilers:before{background-position:-330px -330px}.florida-panthers:before{background-position:-360px -360px}.los-angeles-kings:before{background-position:-390px -390px}.minnesota-wild:before{background-position:-420px -420px}.montreal-canadiens:before{background-position:-450px -450px}.nashville-predators:before{background-position:-480px -480px}.new-jersey-devils:before{background-position:-510px -510px}.new-york-islanders:before{background-position:-540px -540px}.new-york-rangers:before{background-position:-570px -570px}.ottawa-senators:before{background-position:-600px -600px}.philadelphia-flyers:before{background-position:-630px -630px}.pittsburgh-penguins:before{background-position:-660px -660px}.san-jose-sharks:before{background-position:-690px -690px}.st-louis-blues:before{background-position:-720px -720px}.tampa-bay-lightning:before{background-position:-750px -750px}.toronto-maple-leafs:before{background-position:-780px -780px}.vancouver-canucks:before{background-position:-810px -810px}.vegas-golden-knights:before{background-position:-840px -840px}.washington-capitals:before{background-position:-870px -870px}.winnipeg-jets:before{background-position:-900px -900px}.letters-grid{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center}.letters-grid li{margin-bottom:20px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.letters-grid a{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.letters-grid img{box-shadow:0 0 0 1px #eee;width:auto;max-width:none}.letters-grid span{text-decoration:underline;margin-top:5px}.letters-grid-wide img{width:280px}@media only screen and (min-width:660px){.site-header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:620px;margin:0 auto}.header-left-side{width:111px;margin:0}.logo{position:static;top:0;right:0;-webkit-transform:none;transform:none;margin:0 0 0 15px}.header-right-side{display:block;width:519px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:64px;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.header-right-side,.search{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.search{margin:0 0 0 105px;background-color:#535ca5;width:195px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.search svg{margin:0 8px}.search-form{width:195px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.search-form label{line-height:34px}.search-input{width:100%;background-color:#535ca5;height:36px;padding:0 0 0 10px;color:#c7cadf;border-radius:1px}.search-button{display:none}.right-side-buttons,.social{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.submit-freebie-resource{display:none}.social-link{width:36px;height:36px;display:block;margin:0 0 0 10px}.section-wrapper{margin:104px 0 0}.content,.menu-wrapper{width:620px}h1{font-size:24px;margin:0 0 5px}.side-menu{padding:40px 0 104px}.resources-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.card{width:300px;height:255px;margin:0 20px 40px 0}.card:after{-webkit-transform:translateZ(0);transform:translateZ(0);
8-webkit-transition:box-shadow .2s ease-in-out;transition:box-shadow .2s ease-in-out}.card:nth-of-type(2n){margin:0 0 40px}.hosting-full-width{width:620px}.breadcrumb{font-size:14px;padding:9px 0 0}.breadcrumb a:hover{text-decoration:underline}.details-container,.resource-preview{margin:20px 0 0;padding:20px}.details-container:after,.resource-preview:after{width:560px}.details-container h1,.resource-preview h1{font-size:24px;line-height:28px;margin:0 0 20px}.resource-description h3{font-size:22px;margin-top:75px}.resource-description h4{font-size:20px;margin-top:30px}.resource-description img{max-width:100%;width:100%;vertical-align:top}.resource-description p{margin-bottom:25px;line-height:26px}.resource-description a:hover{text-decoration:none}.resource-description .small-img{max-width:400px;width:400px;margin:0 auto}.resource-description .small-img-border{border:1px solid #f2f2f5}.resource-description .small-img-link{display:block;margin:0 auto;width:400px;height:300px}.resource-images{min-height:440px}.resource-image{margin:0 0 15px;text-align:center}.big-resource{width:590px;height:auto}.download-and-share{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.download-btn{height:64px;line-height:66px}.share-buttons{margin:0}.buttons-wrapper{width:290px}.buttons-wrapper .share-link{width:90px;-webkit-transition:background-color .15s ease-out;transition:background-color .15s ease-out}.buttons-wrapper .share-link:hover{background-color:#f6f6f6}.hosting-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.hosting{width:300px;background-color:#fff;padding:0 0 5px}.my-subscribe-form{width:350px;margin:0 auto}.pagination{width:620px;margin:60px auto 120px}.navigation-list .page-numbers{text-align:center;margin:0 10px 0 0}.navigation-list .page-numbers.dots{line-height:50px;width:52px}.navigation-list .page-numbers.dots:hover{box-shadow:none}.navigation-list .next.page-numbers,.navigation-list .prev.page-numbers{line-height:51px;font-size:28px}.navigation-list .page-numbers.current{line-height:54px}.navigation-list .page-numbers.current:hover{box-shadow:none}.navigation-list .page-numbers{height:52px;line-height:54px;width:52px;font-size:15px;-webkit-transition:all .25s ease-out;transition:all .25s ease-out}.navigation-list .page-numbers:hover{box-shadow:inset 0 0 0 1px #ccccda}.bottom-section{padding:80px 0 0;margin:40px 0 0}.subscribe{width:630px;margin-bottom:80px}.subscribe-title{font-size:32px}.subscribe-text{font-size:18px;margin:0 0 35px}#mc_embed_signup_scroll{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:610px;margin:0 auto;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.email-field-footer{width:300px;height:42px}.popular-links-wrapper{margin-bottom:50px}.popular-links-title{margin-bottom:25px}footer{padding:50px 0}.about-title{font-size:24px;line-height:28px}.letters-grid li{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;margin-right:20px}.letters-grid li:nth-child(3n){margin-right:0}.letters-grid img{width:180px;max-width:none}.letters-grid-wide img{width:100%}}.blog-style{height:407px}.blog-style iframe{width:580px;height:407px!important}.resource-description .blog-image{width:580px;height:auto}.mt20{margin-top:20px!important}.mt40{margin-top:40px!important}.mt60{margin-top:60px!important}.mb20{margin-bottom:20px!important}.mb40{margin-bottom:40px!important}.mb60{margin-bottom:60px!important}.pt20{padding-top:20px!important}.pt40{padding-top:40px!important}.pt60{padding-top:60px!important}.pb20{padding-bottom:20px!important}.pb40{padding-bottom:40px!important}.pb60{padding-bottom:60px!important}@media only screen and (min-width:1204px){.top-section{height:72px;position:static}.awesome-bar{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.awesome-bar.special{-webkit-transform:translate3d(0,-200%,0);transform:translate3d(0,-200%,0);top:0;bottom:auto}.awesome-bar.special.header-show{-webkit-transform:translateZ(0);transform:translateZ(0)}.bookmark.hidden-bar-item,.followus-twitter.hidden-bar-item,.likeus-facebook.hidden-bar-item,.stupon-like-desktop-default.hidden-bar-item,.stupon-like-desktop.hidden-bar-item,.visit-medium.hidden-bar-item{display:none}.bookmark{background-color:#33414c}.bookmark,.visit-medium{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;text-align:center;height:60px;font-size:15px;line-height:60px;margin:0;font-weight:700;color:#fff;z-index:9;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;
8-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.visit-medium{background-color:#07ca82}.likeus-facebook{background-color:#215dac}.followus-twitter,.likeus-facebook{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;text-align:center;height:60px;font-size:15px;line-height:60px;margin:0;font-weight:700;color:#fff;z-index:9;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.followus-twitter{background-color:#3494dc}.stupon-like-mobile{display:none}.stupon-like-desktop,.stupon-like-desktop.with-extension{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;text-align:center;height:60px;background-color:#3d3f4e;font-size:15px;line-height:60px;margin:0;font-weight:700;color:#fff;z-index:9;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.stupon-arrow{margin-top:-7px;margin-left:9px}.stupon-like-desktop-default{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;text-align:center;height:60px;background-color:#3d3f4e;font-size:15px;line-height:60px;margin:0;font-weight:700;color:#fff;z-index:9;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.stupon-tumbs-up{margin-left:6px;margin-top:-6px}.follow-btn{padding:0 14px;line-height:34px;margin:0 0 0 15px;border-radius:2px;background-color:#5abaf0;-webkit-transition:all .35s;transition:all .35s;font-size:14px;height:32px}.follow-btn svg{vertical-align:top;margin:0 8px 0 0}.follow-btn:hover{background-color:#6ac9ff;box-shadow:0 5px 20px 0 rgba(51,73,94,.05)}.like-btn{padding:0 14px;line-height:34px;margin:0 0 0 15px;border-radius:2px;background-color:#4485db;-webkit-transition:all .35s;transition:all .35s;font-size:14px;height:32px}.like-btn svg{vertical-align:top;margin:0 8px 0 0}.like-btn:hover{background-color:#4d97f9;box-shadow:0 5px 20px 0 rgba(51,73,94,.05)}.social-logo{margin:0 15px 0 0}.check-it-out-btn{padding:0 14px;line-height:34px;margin:0 0 0 15px;border-radius:2px;background-color:#0fb475;-webkit-transition:all .35s;transition:all .35s;font-size:14px;height:32px}.check-it-out-btn:hover{background-color:#0ca067}.underline-style{box-shadow:0 3px 0 0 #858fdc}.header-show{-webkit-transform:translateZ(0);transform:translateZ(0);z-index:9;-webkit-transition:all .35s;transition:all .35s}.site-header{width:1154px}.hamburger{display:none}.header-left-side{width:162px;height:72px}.logo{margin:0}.header-right-side{width:1002px;height:72px}.search{margin:0 0 0 50px;width:460px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;background-color:#535ca5}.search svg{margin:0 15px}.search svg path{-webkit-transition:all .25s ease-out;transition:all .25s ease-out}.search-form{width:460px}.search-form label,.search-input{-webkit-transition:all .25s ease-out;transition:all .25s ease-out}.search-input{width:100%;padding:0 0 0 15px}.search-input:focus,.search-input:focus+label{background-color:#4f579e}.search-input:focus+label svg path{fill:#fff}.submit-freebie-resource{display:block;margin:0 5px 0 0}.submit-resource-button{background-color:#535ca5;height:36px;color:#c7cadf;display:block;line-height:38px;font-size:14px;width:86px;padding:0 3px 0 0;text-align:center;font-weight:700;-webkit-transition:background-color .35s ease-out;transition:background-color .35s ease-out;border-radius:1px}.submit-resource-button:hover{background-color:#464e8e}.social-link circle{-webkit-transition:fill .35s ease-out;transition:fill .35s ease-out}.social-link:hover circle{fill:#949eec}.section-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:1154px;margin:40px auto 0}.side-menu{overflow:hidden;display:block;position:static;-webkit-transform:none;transform:none;width:162px;padding:7px 0 0;z-index:2}.menu-wrapper{width:162px;margin:0}.content{width:auto;margin:0 0 0 50px;width:940px}.resources{width:940px}.resources-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.card:nth-of-type(2n){margin:0 20px 40px 0}.card:nth-of-type(3n){margin:0 0 40px}.card{width:300px;height:255px;margin:0 20px 40px 0}.card:after{-webkit-transform:translateZ(0);transform:translateZ(0);
8-webkit-transition:box-shadow .2s ease-in-out;transition:box-shadow .2s ease-in-out}.card p{overflow:hidden;display:block;height:38px;position:relative;font-size:11px}.card:hover .card-image .resource{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.card:hover .card-title.no-icon-title{padding:12px 20px 0 10px}.card:hover .card-title{padding:12px 20px 0 5px}.card:hover .mini-description{opacity:1;-webkit-transform:translateY(30px);transform:translateY(30px);-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out}.card:hover:after{box-shadow:0 10px 40px 0 rgba(51,73,94,.15)}.card-title{-webkit-transition:padding .1s ease-in-out;transition:padding .1s ease-in-out}.card-wrapper{overflow:hidden;width:300px;height:255px;position:absolute;top:0}.card-image{width:300px;height:255px;padding-bottom:30px;position:relative}.card-image .resource{-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.card-char{line-height:250px;text-align:center}.card-char .logo-char{font-size:140px;font-weight:800}.mini-description{position:absolute;height:80px;width:100%;top:auto;bottom:30px;left:0;-webkit-transform:translateY(100%);transform:translateY(100%);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out;pointer-events:none;background-color:#fff}.details,.resource-details{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.details-container,.resource-preview{width:620px;padding:35px 20px 30px}.details-container:after,.resource-preview:after{width:600px}.details-container h1,.resource-preview h1{font-size:26px;line-height:30px}.details-container{min-height:797px}.body-tags a:hover{text-decoration:none}.download-btn{-webkit-transition:all .3s;transition:all .3s}.download-btn:hover{background-color:#4ec8f3}.download-btn:hover .arrow-down{top:0}.download-btn:hover .download-text{top:100%}.download-btn .arrow-down,.download-btn .download-text{-webkit-transition:top .3s;transition:top .3s}.sidebar{width:300px;margin:20px 0 0 20px}.my-subscribe-form{width:auto}.button-subscribe-sidebar{-webkit-transition:background-color .25s ease-out,-webkit-transform .15s ease-out;transition:background-color .25s ease-out,-webkit-transform .15s ease-out;transition:background-color .25s ease-out,transform .15s ease-out;transition:background-color .25s ease-out,transform .15s ease-out,-webkit-transform .15s ease-out}.button-subscribe-sidebar:hover{background-color:#6770b7}.button-subscribe-sidebar:active{-webkit-transform:scale(.95);transform:scale(.95)}.newsletter-title{font-size:22px}.related-resources{margin:55px 0}.title-similar{font-size:22px;margin:0 0 15px}.bottom-section{padding:100px 0 0}.subscribe{width:1164px;margin-bottom:100px}.button-subscribe-footer{-webkit-transition:background-color .25s ease-out;transition:background-color .25s ease-out}.button-subscribe-footer:hover{background-color:#8790d9}.email-field-footer{-webkit-transition:all .25s ease-out;transition:all .25s ease-out}.email-field-footer:focus{border:1px solid #b6bbde;background-color:#2c3158}.footer-link:hover{text-decoration:underline}.popular-links-wrapper{margin-bottom:60px}.popular-links-title{margin-bottom:30px}footer{padding:60px 0}.about-title{font-size:26px;line-height:30px}}@media only screen and (min-width:1524px){.site-header{width:1474px}.header-right-side{width:1332px}.section-wrapper{width:1474px}.content{width:auto;margin:0 0 0 50px;width:1260px}.resources{width:1260px}.card:nth-of-type(2n),.card:nth-of-type(3n){margin:0 20px 40px 0}.card:nth-of-type(4n){margin:0 0 40px}.details-container,.resource-preview{width:940px;padding:45px 70px 50px}.details-container:after,.resource-preview:after{width:920px}.details-container h1,.resource-preview h1{font-size:30px;line-height:36px}.resource-images{min-height:600px}.resource-image{margin:0 0 20px}.big-resource{width:800px}.resource-description{line-height:28px;margin:30px 0 40px}.resource-description h3{font-size:26px}.resource-description h4{font-size:22px}.resource-description img{max-width:800px;width:800px}.body-tags{margin:25px 0 0}.download-and-share{-webkit-box-pack:start;
8-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.download-btn-wrapper{width:320px}.download-btn{width:300px;margin:0 20px 0 0}.share-title{line-height:14px}.buttons-wrapper{width:339px;margin:7px 0 0}.buttons-wrapper .share-link{width:auto;font-size:14px;padding:0 14px}.buttons-wrapper svg{margin:0 4px 0 0}.bottom-section{padding:120px 0 0}.subscribe{width:1474px;margin-bottom:120px}.about-title{font-size:30px;line-height:36px}.blog-style{height:520px}.blog-style iframe{width:800px;height:520px!important}.resource-description .blog-image{height:520px;width:800px}.letters-grid li:nth-child(3n){margin-right:20px}.letters-grid li:nth-child(4n){margin-right:0}.letters-grid img{width:180px;max-width:none}.letters-grid-wide img{width:280px}} 9</style> 10 <!--[if IE 9]> 11 <style>.clearfix{*zoom:1}.clearfix:after,.clearfix:before{display:table;line-height:0;content:""}.clearfix:after{clear:both}.pull-left{float:left!important}.pull-right{float:right!important}.content{overflow:hidden;width:auto;padding:0 0 0 50px;margin:0;width:992px}.site-header{position:relative}.header-left-side{position:absolute;left:0;line-height:72px}.header-right-side{position:absolute;right:0;line-height:72px;width:992px}.right-side-buttons,.social,.social-link,.submit-freebie-resource{display:inline-block}.right-side-buttons{position:absolute;right:0}.search{position:relative;display:inline-block;background-color:transparent;height:72px}.search-form{position:absolute;top:18px;height:36px}.search-form label{position:absolute;right:0}.search-input{display:inline-block;position:absolute}.resources-wrapper{display:table}.card{display:inline-block;vertical-align:top}.card,.card:nth-of-type(2n){margin:0 15px 40px 0}.card:nth-of-type(3n){margin:0 0 40px}.navigation-list{text-align:center}.navigation-list .page-numbers,.resource-preview,.sidebar{display:inline-block}.sidebar{margin:20px 0 0 15px;vertical-align:top}.download-btn-wrapper,.share-buttons{display:inline-block}.share-buttons{margin:0 0 0 5px;vertical-align:top}.buttons-wrapper .share-link{margin-left:3px;display:inline-block}.card:hover:after{box-shadow:0 5px 20px 0 rgba(51,73,94,.05)}.card:after{transition:none}.mini-description{transform:none;-ms-transform:none;bottom:-50px}.card:hover .mini-description{transition:0s}.card:hover .card-image .resource,.card:hover .mini-description{transform:none;-ms-transform:none}.card-image .resource{transition:0s}.card:hover .card-title.no-icon-title{padding:5px 20px 5px 10px}.card:hover .card-title{padding:5px 20px 5px 5px} 12<style> 13 <![endif]--> 14 15 <meta name="description" content="Calendars have become an important tool in our daily lives. They help us manage activities efficiently, either prioritizing tasks or maximizing productivity."> 16 17 <!-- Twitter --> 18 <meta name="twitter:card" content="summary_large_image"> 19 <meta name="twitter:site" content="@freebiesupply"> 20 <meta name="twitter:title" content="CSS Calendar Ideas - Freebie Supply"> 21 <meta name="twitter:description" content="Calendars have become an important tool in our daily lives. They help us manage activities efficiently, either prioritizing tasks or maximizing productivity."> 22 23 <!-- Facebook --> 24 <meta property="og:site_name" content="Freebie Supply"> 25 <meta property="og:title" content="CSS Calendar Ideas - Freebie Supply"> 26 <meta property="og:url" content="https://freebiesupply.com/blog/css-calendar-ideas/"> 27 <meta property="og:description" content="Calendars have become an important tool in our daily lives. They help us manage activities efficiently, either prioritizing tasks or maximizing productivity."> 28 <meta property="og:image" content="https://cdn.freebiesupply.com/images/thumbs/2x/css-calendar-ideas.png"> 29 <meta property="og:type" content="website"> 30 31 <meta name="p:domain_verify" content="15a23a23ba547180610c1ec384321e62"/> 32 33 <link rel="icon" type="image/x-icon" sizes="16x16 32x32" href="https://cdn.freebiesupply.com/resources/favicon.ico"> 34 <link rel="apple-touch-icon" href="https://cdn.freebiesupply.com/resources/apple-touch-icon.png"> 35 <meta name="theme-color" content="#38344a"> 36 37 <link rel="canonical" href="https://freebiesupply.com/blog/css-calendar-ideas/">
37<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
37 38 39 </head> 40 41 <body> 42 43 <div class="top-section"> 44 <header class="site-header"> 45 <div class="header-left-side"> 46 <div class="hamburger"> 47 <span>Slide Menu</span> 48 </div> 49 <a class="logo" href="https://freebiesupply.com/" title="Freebie Supply"> 50 <svg width="76" height="37" viewBox="0 0 76 37" xmlns="http://www.w3.org/2000/svg"><title>Freebie Supply</title><g fill="#FFF" fill-rule="evenodd"><path d="M9.852 32.45c-.41.036-.868-.05-1.377-.258-.51-.208-1.005-.515-1.49-.92-.483-.404-.837-.84-1.06-1.304-.2-.393-.38-.877-.54-1.453-.16-.576-.298-1.176-.41-1.8-.11-.626-.65-4.488-.737-5.09-.087-.6-.447-4.216-.472-4.658-.124-1.176-.192-2.077-.205-2.702-.01-.625-.154-.937-.427-.937-.298 0-.695-.068-1.19-.203-.497-.134-.926-.306-1.285-.514-.36-.208-.577-.422-.652-.643-.074-.22.137-.43.633-.625.42-.073.855-.147 1.302-.22.447-.074.893-.16 1.34-.258.124-.71.248-1.495.372-2.353.124-.857.26-1.64.41-2.352.297-1.176.738-2.18 1.32-3.015.584-.833 1.267-1.495 2.048-1.985.782-.49 1.638-.815 2.57-.974.93-.16 1.904-.166 2.92-.02.35.05.84.155 1.47.314.634.16 1.28.36 1.937.607.657.245 1.26.52 1.805.827.545.306.905.63 1.08.974.098.343.03.588-.206.735-.236.15-.56.228-.97.24-.408.013-.88-.018-1.413-.09-.534-.075-1.042-.16-1.526-.26-.483-.097-.91-.195-1.284-.293-.372-.098-.608-.16-.707-.184-1.043-.294-1.9-.355-2.57-.184-.67.17-1.203.49-1.6.955-.397.466-.69 1.024-.875 1.673-.186.65-.31 1.293-.372 1.93-.062.638-.087 1.232-.074 1.783.01.553.005.964-.02 1.233.273-.024.763-.018 1.47.02.708.035 1.42.12 2.14.256.72.134 1.347.318 1.88.55.534.233.776.52.726.864 0 .123-.272.245-.818.368-.546.123-1.167.24-1.862.35-.695.11-1.37.208-2.028.293-.658.086-1.11.14-1.36.166-.074.37-.074 1.036 0 2.005.075.968.136 2.226.317 4.49.262 3.256 1.24 7.492 1.527 8.73.285 1.238.614 2.31.986 3.217-.074.44-.316.68-.726.717z"/><path d="M14.434 12.963c-.205-.11-.39-.175-.56-.193-.166-.018-.32-.028-.46-.028s-.26-.013-.362-.04c-.103-.028-.19-.116-.265-.263-.056-.13.032-.304.265-.525.232-.22.544-.404.935-.55.39-.148.828-.208 1.312-.18.483.027.948.216 1.395.565.39.33.712.648.963.95.252.304.452.576.6.815.168.275.29.542.364.8.52-.497 1.06-.91 1.62-1.242.483-.294 1.022-.533 1.618-.717.596-.183 1.19-.193 1.787-.027.15.054.22.17.21.344-.01.174-.085.363-.224.565-.14.2-.33.394-.572.578-.24.184-.53.312-.865.386-.65.147-1.168.423-1.55.827-.38.406-.674.88-.88 1.42-.204.544-.334 1.123-.39 1.738-.055.616-.083 1.21-.083 1.78.018 1.194-.15 2.08-.503 2.66-.355.58-.83.887-1.425.924-.688.036-1.2-.276-1.535-.938-.335-.662-.503-1.783-.503-3.364.02-.993.028-1.857.028-2.592 0-.735-.028-1.356-.084-1.86-.054-.507-.148-.907-.278-1.2-.13-.295-.316-.506-.558-.635zm10.413.248c.26-.495.605-.927 1.033-1.295.428-.367.898-.666 1.41-.896.512-.23 1.052-.4 1.62-.51.567-.11 1.12-.167 1.66-.167.56.037 1.038.216 1.438.538.4.323.684.737.852 1.242.167.506.2 1.07.098 1.696-.103.625-.377 1.26-.824 1.903-.484.7-1 1.223-1.55 1.572-.548.35-1.056.598-1.52.745-.54.184-1.07.266-1.592.248-.02.698.056 1.296.223 1.792.074.22.163.428.265.62.103.194.238.364.405.51.168.148.372.254.614.318.24.064.52.07.837.014.67-.112 1.214-.355 1.633-.732.42-.377.768-.758 1.047-1.144.28-.386.507-.722.684-1.007.178-.285.35-.39.517-.317.205.092.312.322.322.69.008.367-.08.8-.267 1.295-.186.497-.46 1.007-.823 1.53-.363.525-.824.97-1.382 1.338-.56.368-1.2.62-1.927.758-.724.14-1.534.07-2.428-.205-.725-.22-1.33-.57-1.814-1.048-.484-.478-.866-1.03-1.145-1.655-.28-.625-.465-1.296-.558-2.013-.093-.717-.107-1.43-.042-2.138.065-.707.205-1.383.42-2.026.213-.644.478-1.195.794-1.655zm2.597 3.007c.242-.037.512-.11.81-.22.26-.093.544-.23.85-.414.308-.184.638-.442.992-.772.335-.312.563-.615.684-.91.12-.294.19-.542.21-.744.018-.24-.02-.46-.112-.662-.26-.073-.54-.073-.838 0-.26.074-.55.22-.865.44-.317.222-.642.57-.977 1.05-.26.367-.447.693-.56.978-.11.285-.185.52-.222.703-.037.22-.028.405.028.552zm8.18-3.006c.26-.495.605-.927 1.033-1.295.428-.367.898-.666 1.41-.896.512-.23 1.05-.4 1.62-.51.567-.11 1.12-.167 1.66-.167.558.037 1.038.216 1.438.538.4.323.684.737.85 1.242.17.506.2 1.07.1 1.696-.103.625-.378 1.26-.824 1.903-.483.7-1 1.223-1.55 1.572-.548.35-1.055.598-1.52.745-.54.184-1.07.266-1.592.248-.018.698.056 1.296.224 1.792.074.22.162.428.265.62.102.194.237.364.405.51.167.148.372.254.614.318s.52.07.837.
50014c.67-.112 1.215-.355 1.634-.732.418-.377.767-.758 1.046-1.144.28-.386.508-.722.684-1.007.177-.285.35-.39.517-.317.205.092.312.322.32.69.01.367-.078.8-.264 1.295-.186.497-.46 1.007-.824 1.53-.363.525-.823.97-1.382 1.338-.558.368-1.2.62-1.926.758-.726.14-1.536.07-2.43-.205-.725-.22-1.33-.57-1.814-1.048-.484-.478-.865-1.03-1.144-1.655-.28-.625-.466-1.296-.56-2.013-.092-.717-.106-1.43-.04-2.138.065-.707.204-1.383.418-2.026.214-.644.48-1.195.796-1.655zm30.808 8.823c-.146.196-.304.38-.475.554-.4.404-.847.72-1.34.95-.493.23-1.02.364-1.577.4-.56.037-1.117-.045-1.675-.247-.56-.184-1.015-.446-1.368-.786-.354-.34-.63-.795-.824-1.365-.195-.57-.326-1.265-.39-2.083-.05-.602-.07-1.29-.062-2.066-.28.038-.552.03-.817-.03-.298-.063-.568-.14-.81-.233-.28-.11-.54-.24-.782-.386.17.22.29.488.364.8.075.258.12.58.14.966.018.386-.02.845-.112 1.378-.093.423-.246.883-.46 1.38-.214.495-.517.955-.908 1.378-.39.423-.88.776-1.466 1.06-.586.286-1.298.43-2.135.43-1.247 0-2.29-.31-3.127-.925-.838-.616-1.494-1.43-1.968-2.44-.475-1.01-.79-2.165-.95-3.46-.158-1.297-.186-2.62-.083-3.972.102-1.35.325-2.68.67-3.984.344-1.304.767-2.463 1.27-3.474.242-.625.577-1.15 1.005-1.57.428-.424.88-.746 1.354-.966.475-.22.954-.34 1.438-.36.484-.017.903.065 1.256.25.372.2.656.454.852.758.195.303.335.652.418 1.047.084.396.126.818.126 1.27 0 .45-.028.904-.084 1.364-.074.66-.195 1.31-.363 1.943-.167.634-.367 1.245-.6 1.833-.232.59-.484 1.16-.754 1.71-.27.552-.544 1.057-.823 1.517-.633 1.103-1.34 2.132-2.122 3.088-.02.773.065 1.444.25 2.014.187.57.43 1.04.727 1.406.298.368.614.64.95.814.334.174.632.262.893.262.39 0 .735-.198 1.033-.593.3-.395.53-.878.7-1.448.166-.57.27-1.172.306-1.806.037-.635-.01-1.2-.14-1.697-.13-.478-.307-.81-.53-.992-.224-.183-.442-.317-.656-.4-.214-.082-.387-.16-.517-.234-.13-.073-.167-.24-.11-.496.073-.276.25-.524.53-.745.278-.22.6-.38.962-.482.363-.1.735-.124 1.117-.07.38.056.712.23.99.525.28.312.597.607.95.882.354.276.712.51 1.075.703.363.193.717.34 1.06.442h.006c.036-.2.076-.4.12-.593.094-.405.21-.782.35-1.13.14-.35.293-.65.46-.897.168-.248.354-.427.56-.538.203-.092.47-.188.794-.29.326-.1.633-.137.922-.11.287.028.506.157.655.387.15.23.14.63-.028 1.2-.075.312-.14.702-.196 1.17-.055.47-.087.975-.096 1.518-.01.542.004 1.084.04 1.626.04.543.108 1.044.21 1.503.103.46.243.85.42 1.173.176.322.395.53.656.62.54.184 1.005.166 1.396-.055.24-.135.468-.315.687-.54-.243-.58-.406-1.2-.492-1.86-.092-.715-.106-1.428-.04-2.136.064-.707.204-1.383.418-2.026.214-.644.48-1.195.796-1.655.26-.495.605-.927 1.033-1.295.428-.367.898-.666 1.41-.896.51-.23 1.05-.4 1.62-.51.566-.11 1.12-.167 1.66-.167.558.037 1.038.216 1.438.538.4.323.684.737.85 1.242.17.506.2 1.07.1 1.696-.103.625-.378 1.26-.825 1.903-.484.7-1 1.223-1.55 1.572-.548.35-1.055.598-1.52.745-.54.184-1.07.266-1.592.248-.02.698.056 1.296.223 1.792.076.22.164.428.267.62.102.194.237.364.404.51.17.148.374.254.616.318s.52.07.837.014c.67-.112 1.215-.355 1.633-.732.42-.377.768-.758 1.047-1.144.28-.386.507-.722.684-1.007.177-.285.35-.39.517-.317.204.092.312.322.32.69.01.367-.078.8-.264 1.295-.187.497-.46 1.007-.824 1.53-.363.525-.824.97-1.382 1.338-.558.368-1.2.62-1.926.758-.726.14-1.536.07-2.43-.205-.725-.22-1.33-.57-1.814-1.048-.21-.208-.4-.43-.572-.664zM38.22 16.217c.242-.037.512-.11.81-.22.26-.093.544-.23.85-.414.308-.184.64-.442.992-.772.336-.312.564-.615.684-.91.12-.294.19-.542.21-.744.018-.24-.02-.46-.112-.662-.26-.073-.54-.073-.837 0-.26.074-.55.22-.866.44-.315.222-.64.57-.976 1.05-.26.367-.447.693-.558.978-.112.285-.186.52-.224.703-.037.22-.028.405.028.552zm10.58-.69c.522-.698 1.016-1.49 1.48-2.37.373-.773.736-1.683 1.09-2.73.353-1.05.577-2.216.67-3.503.037-.514.01-.942-.084-1.282-.093-.34-.223-.565-.39-.676-.168-.11-.354-.1-.56.028-.204.13-.41.395-.613.8-.205.423-.387.882-.545 1.378-.158.497-.293 1.01-.405 1.545-.11.533-.204 1.075-.28 1.626-.073.552-.138 1.076-.194 1.572-.113 1.177-.17 2.38-.17 3.612zm11.197-8.85c.204-.405.516-.654.935-.745.42-.092.828-.083 1.228.027s.745.298 1.033.564c.29.267.405.575.35.924-.075.423-.313.786-.713 1.09-.4.303-1 .418-1.8.344-.224-.018-.424-.1-.6-.248-.178-.147-.322-.326-.433-.538-.112-.21-.173-.446-.182-.703-.01-.257.05-.496.182-.717zm9.073 9.54c.242-.037.512-.11.81-.22.26-.093.544-.23.85-.414.308-.184.64-.442.992-.772.335-.312.563-.615.684-.91.12-.294.19-.542.21-.744.018-.24
50-.02-.46-.112-.662-.26-.073-.54-.073-.838 0-.26.074-.55.22-.865.44-.315.222-.64.57-.976 1.05-.26.367-.447.693-.56.978-.11.285-.185.52-.222.703-.037.22-.028.405.028.552zM17.25 30.43c-.15.122-.227.284-.227.487 0 .202.093.363.277.483.185.12.612.26 1.28.423.67.162 1.19.406 1.558.732.37.325.555.8.555 1.424 0 .623-.237 1.13-.71 1.517-.475.388-1.098.583-1.87.583-1.117 0-2.12-.41-3.015-1.225l.937-1.135c.76.657 1.462.986 2.107.986.29 0 .516-.062.68-.185.165-.12.248-.287.248-.497 0-.21-.088-.375-.262-.497-.175-.123-.52-.248-1.04-.374-.82-.192-1.42-.443-1.798-.752-.38-.308-.57-.793-.57-1.453s.24-1.17.72-1.53c.48-.357 1.08-.537 1.8-.537.47 0 .94.08 1.412.24.47.16.88.384 1.23.677l-.797 1.135c-.61-.458-1.243-.687-1.895-.687-.262 0-.47.06-.62.184zm7.707 4.256c.444 0 .795-.16 1.054-.483.26-.322.39-.762.39-1.32V29.04h1.572v3.893c0 1.01-.282 1.784-.847 2.325-.565.54-1.287.812-2.168.812-.88 0-1.604-.272-2.172-.817-.568-.544-.852-1.318-.852-2.32V29.04h1.573v3.843c0 .558.13.998.393 1.32.26.322.614.483 1.057.483zm9.502-5.024c.493.415.74 1.052.74 1.912 0 .86-.253 1.49-.76 1.887-.508.4-1.283.598-2.325.598h-.937V36h-1.573v-6.96h2.49c1.082 0 1.87.207 2.364.622zM33.304 32.4c.188-.21.282-.514.282-.916 0-.4-.122-.687-.368-.856-.246-.17-.627-.254-1.145-.254h-.897v2.34h1.058c.525 0 .88-.105 1.07-.314zm7.98-2.738c.494.415.74 1.052.74 1.912 0 .86-.253 1.49-.76 1.887-.508.4-1.283.598-2.324.598h-.937V36H36.43v-6.96h2.49c1.083 0 1.87.207 2.365.622zM40.13 32.4c.19-.21.283-.514.283-.916 0-.4-.123-.687-.368-.856-.246-.17-.627-.254-1.145-.254h-.897v2.34h1.06c.523 0 .88-.105 1.067-.314zm3.126 3.6v-6.96h1.572v5.576h3.005V36h-4.577zm8.76 0h-1.572v-2.748l-2.44-4.212h1.704l1.522 2.59 1.523-2.59h1.703l-2.44 4.212V36z"/></g></svg> 51 </a> 52 </div> 53 <div class="header-right-side"> 54 <div class="search"> 55 <form class="search-form" method="get" action="https://freebiesupply.com" role="search"> 56 <input class="search-input" name="s" placeholder="Search" required> 57 <label> 58 <input class="search-button" type="submit"/> 59 <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>Search icon</title><path d="M15.575 13.518l-3.493-3.492c.635-1.01 1.01-2.2 1.01-3.48C13.09 2.93 10.16 0 6.544 0 2.93 0 0 2.93 0 6.546s2.93 6.545 6.545 6.545c1.28 0 2.472-.372 3.48-1.008l3.492 3.493c.567.567 1.49.567 2.058 0 .567-.57.567-1.49 0-2.057zM1.455 6.546c0-2.808 2.283-5.09 5.09-5.09s5.09 2.282 5.09 5.09c0 2.807-2.283 5.09-5.09 5.09s-5.09-2.283-5.09-5.09z" fill="#C7CADF" fill-rule="evenodd"/></svg> 60 </label> 61 </form> 62 </div> 63 <div class="right-side-buttons"> 64 <div class="submit-freebie-resource"> 65 <a href="https://freebiesupply.com/submit-freebie/" class="submit-resource-button" title="Submit resource">+ Submit</a> 66 </div> 67 <div class="social"> 68 <a href="https://twitter.com/freebiesupply" class="social-twitter social-link" target="_blank"> 69 <svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><g fill="none" fill-rule="evenodd"><circle fill="#8790D9" cx="18" cy="18" r="18"/><path d="M18.78 14.948l-.65-.084c-2.368-.325-4.436-1.427-6.192-3.277l-.86-.918-.22.677c-.468 1.51-.17 3.107.807 4.18.52.594.403.678-.494.325-.312-.113-.585-.198-.61-.155-.092.1.22 1.384.467 1.892.34.706 1.028 1.398 1.782 1.807l.637.325-.755.014c-.728 0-.754.014-.676.31.26.92 1.288 1.893 2.432 2.317l.806.297-.702.452c-1.04.65-2.263 1.016-3.486 1.045-.585.014-1.066.07-1.066.113 0 .14 1.587.932 2.51 1.243 2.77.918 6.06.522 8.532-1.046 1.756-1.115 3.512-3.333 4.33-5.48.443-1.143.885-3.234.885-4.236 0-.65.04-.734.768-1.51.43-.453.832-.947.91-1.088.13-.268.117-.268-.546-.028-1.106.423-1.263.367-.716-.27.403-.45.884-1.27.884-1.51 0-.042-.195.028-.416.155-.234.14-.754.353-1.145.48l-.702.24-.637-.466c-.35-.255-.846-.537-1.106-.622-.663-.198-1.678-.17-2.276.057-1.626.634-2.653 2.273-2.536 4.066l.04.692z" fill="#FFF"/></g></svg> 70 </a> 71 <a href="https://www.facebook.com/freebiesupply/" class="social-facebook social-link" target="_blank"> 72 <svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><g fill="none" fill-rule="evenodd"><circle fill="#8790D9" cx="18" cy="18" r="18"/><path d="M19.985 27v-9h2.662L23 14.896h-3.015l.004-1.552c0-.81.08-1.243 1.327-1.243h1.664V9H20.32c-3.198 0-4.324 1.505-4.324 4.035v1.862H14
72V18h1.994v9h3.99z" fill="#FFF"/></g></svg> 73 </a> 74 </div> 75 </div> 76 </div> 77</header> </div> 78 <div class="middle-section"> 79 <div class="section-wrapper"> 80 81 82<div class="side-menu pull-left"> 83 <ul class="menu-wrapper"> 84 <li class="parent"> 85 <a class="parent-icon free-psd" href="https://freebiesupply.com/free-psd/" title="All free PSDs">All free PSDs</a> 86 <ul class="children"> 87 <li class="child"> 88 <a class="free-psd-mockups" href="https://freebiesupply.com/free-psd-mockups/" title="Free PSD Mockups">Mockups</a> 89 </li> 90 <li class="child"> 91 <a class="free-psd-mobile-design" href="https://freebiesupply.com/free-psd-mobile-design/" title="Free PSD Mobile Design">Mobile Design</a> 92 </li> 93 <li class="child"> 94 <a class="free-psd-ui-kits" href="https://freebiesupply.com/free-psd-ui-kits/" title="Free PSD UI Kits">UI Kits</a> 95 </li> 96 <li class="child"> 97 <a class="free-psd-icons" href="https://freebiesupply.com/free-psd-icons/" title="Free PSD Icons">Icons</a> 98 </li> 99 <li class="child"> 100 <a class="free-psd-websites" href="https://freebiesupply.com/free-psd-websites/" title="Free PSD Website Templates">Websites</a> 101 </li> 102 <li class="child"> 103 <a class="free-psd-misc" href="https://freebiesupply.com/free-psd-misc/" title="Free PSD Misc">Misc</a> 104 </li> 105 <li class="separator"></li> 106 <li class="child"> 107 <a class="free-photoshop-brushes" href="https://freebiesupply.com/free-photoshop-brushes/" title="Free Photoshop Brushes">Brushes</a> 108 </li> 109 <li class="child"> 110 <a class="free-photoshop-actions" href="https://freebiesupply.com/free-photoshop-actions/" title="Free Photoshop Actions">Actions</a> 111 </li> 112 </ul> 113 </li> 114 <li class="parent"> 115 <a class="parent-icon free-sketch" href="https://freebiesupply.com/free-sketch/" title="Free SketchApp Resources">Sketch</a> 116 <ul class="children"> 117 <li class="child"> 118 <a class="free-sketch-mockups" href="https://freebiesupply.com/free-sketch-mockups/" title="Free Sketch Mockups">Mockups</a> 119 </li> 120 <li class="child"> 121 <a class="free-sketch-mobile-design" href="https://freebiesupply.com/free-sketch-mobile-design/" title="Free Sketch Mobile Design">Mobile Design</a> 122 </li> 123 <li class="child"> 124 <a class="free-sketch-ui-kits" href="https://freebiesupply.com/free-sketch-ui-kits/" title="Free Sketch UI Kits">UI Kits</a> 125 </li> 126 <li class="child"> 127 <a class="free-sketch-icons" href="https://freebiesupply.com/free-sketch-icons/" title="Free Sketch Icons">Icons</a> 128 </li> 129 <li class="child"> 130 <a class="free-sketch-websites" href="https://freebiesupply.com/free-sketch-websites/" title="Free Sketch Website Templates">Websites</a> 131 </li> 132 <li class="child"> 133 <a class="free-sketch-misc" href="https://freebiesupply.com/free-sketch-misc/" title="Free Sketch Misc">Misc</a> 134 </li> 135 </ul> 136 </li> 137 <li class="parent"> 138 <a class="parent-icon free-fonts" href="https://freebiesupply.com/free-fonts/" title="Free Fonts">Free Fonts</a> 139 </li> 140 <li class="parent"> 141 <a class="parent-icon free-vector" href="https://freebiesupply.com/free-vector/" title="Free Vector">Free Vector</a> 142 </li> 143 <li class="parent"> 144 <a class="parent-icon adobe-xd-templates" href="https://freebiesupply.com/adobe-xd-templates/" title="Adobe XD Templates">Adobe XD</a> 145 </li> 146 <li class="parent"> 147 <a class="parent-icon free-figma" href="https://freebiesupply.com/free-figma/" title="Figma Templates & Resources">Free Figma</a> 148 </li> 149 <li class="parent"> 150 <a class="parent-icon free-wordpress" href="https://freebiesupply.com/wordpress/free-wordpress-themes/" title="Free WordPress Themes">Free WP Themes</a> 151 </li> 152 <li class="parent"> 153 <a class="parent-icon free-google-slides" href="https://freebiesupply.com/google-slides-and-powerpoint-templates/" title="Google Slides Themes & Free PowerPoint Templates">Google Slides</a> 154 </li> 155 <li class="parent"> 156 <a class="parent-icon free-keynote-templates" href="https://freebiesupply.com/keynote-templates/" title="Free Keynote Templates">Keynote Templates</a> 157 </li> 158 <li class="parent"> 159 <a class="parent-icon free-powerpoint-templates" href="https://freebiesupply.com/powerpoint-templates/" title="Free PowerPoint Templates">PowerPoint Templates</a> 160 </li> 161 </ul> 162</div> 163 164 <main class="content"> 165 <div class="breadcrumb"> 166 167
168 <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> 169 <a href="https://freebiesupply.com/blog/" itemprop="url"><span itemprop="title">Blog</span></a> 170 </span> 171 <svg width="9" height="10" viewBox="0 0 9 10" xmlns="http://www.w3.org/2000/svg"><title>arrow</title><path d="M4 6H0V4h4V0l5 5-5 5V6z" fill="#838090" fill-rule="evenodd"/></svg> 172 <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> 173 <a class="breadcrumb-current-link" href="https://freebiesupply.com/blog/css-calendar-ideas/" itemprop="url"><span itemprop="title">CSS Calendar Ideas</span></a> 174 </span> 175 </div> 176 <div class="resource-details"> 177 <div class="resource-preview" itemscope itemtype="http://schema.org/Article"> 178 <h1 class="resource-title" itemprop="name">CSS Calendar Ideas</h1> 179 <div class="resource-description" itemprop="articleBody"> 180 <p>Calendars have become an important tool in our daily lives. They help us manage activities efficiently, either prioritizing tasks or maximizing productivity. In the last two decades, people have turned to web-based and mobile app calendars making them increasingly popular. They can be accessed across a large number of smart devices like PCs, smartphones, tablets, TVs and many more.</p> 181<p>The implementation of these calendars can be done a number of ways depending on programming languages used. A well-designed calendar for either a website or web app with a user-friendly interface is a must, especially when the user has to select dates accurately for different tasks. If the calendar user interface (UI) is not intuitive or doesn’t have a great user experience (UX) it can harm your online business.</p> 182<p>Front-end development plays an important part when it comes to integrating calendars into various websites and apps, such as admin panels, booking platforms, travel sites or project management tools. Developers can choose different frameworks like <a href="https://reactjs.org/">React</a>, <a href="https://vuejs.org/">Vue</a>, JavaScript, <a href="https://www.typescriptlang.org/">Typescript</a>, <a href="https://jquery.com/">jQuery</a>, <a href="https://angular.io/">Angular</a> for functionality while HTML for structure. Styling the calendar to match the design specifications can be done using CSS frameworks like <a href="https://tailwindcss.com/">Tailwind CSS</a>, Bootstrap, Bulma, SCSS, or LESS.</p> 183<p>For those new to front-end development, creating a calendar from scratch can pose a challenge. There is a large number of templates, libraries and even pre-built components available online which can simplify the process significantly. Within the CodePen playground you can find calendar examples created by front-end developers. Each example can be seen as an excellent resource when trying to integrate different elements into your projects seamlessly.</p> 184<h4><a class="author-link" href="https://codepen.io/Johnxxx/pen/JoGpjBd" title="Neobrutalism Calendar">Neobrutalism Calendar</a></h4> 185<p>This <a href="https://a-printable-calendar.com/yearly-calendar-2026/">2026 calendar</a> template is a great addition to any neobrutalism-styled websites creating a striking visual style for the user experience.</p> 186<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 187<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/neobrutalist-calendar.png" alt="Neobrutalism Calendar" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 188<p data-height="520" data-theme-id="light" data-slug-hash="JoGpjBd" data-default-tab="result" data-user="Johnxxx" data-pen-title="Neobrutalism Calendar" class="codepen">See the Pen <a href="https://codepen.io/Johnxxx/pen/JoGpjBd">Neobrutalism Calendar</a> by Johnxxx (<a href="http://codepen.io/Johnxxx">@Johnxxx</a>) on <a href="http://codepen.io">CodePen</a>.</p> 189</div> 190<p>
190<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
190</p> 191<h4><a class="author-link" href="https://codepen.io/vaibhav-khating/pen/BaedQmr" title="Glassmorphism Calendar">Glassmorphism Calendar</a></h4> 192<p>A “frosted glass” styled calendar that can be used in any glassmorphism websites.</p> 193<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 194<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/glass-morphism-calendar.png" alt="Glassmorphism Calendar" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 195<p data-height="520" data-theme-id="light" data-slug-hash="BaedQmr" data-default-tab="result" data-user="vaibhav-khating" data-pen-title="Glassmorphism Calendar" class="codepen">See the Pen <a href="https://codepen.io/vaibhav-khating/pen/BaedQmr">Glassmorphism Calendar</a> by vaibhav-khating (<a href="http://codepen.io/vaibhav-khating">@vaibhav-khating</a>) on <a href="http://codepen.io">CodePen</a>.</p> 196</div> 197<h4><a class="author-link" href="https://codepen.io/harmoncode/pen/zxGMLrK" title="Interactive Calendar Widget">Interactive Calendar Widget</a></h4> 198<p>A modern, interactive calendar widget with drag & drop events, multiple views, and local storage. Perfect for websites and web applications.</p> 199<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 200<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/interactive-calendar-widget.png" alt="Interactive Calendar Widget" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 201<p data-height="520" data-theme-id="light" data-slug-hash="zxGMLrK" data-default-tab="result" data-user="harmoncode" data-pen-title="Interactive Calendar Widget" class="codepen">See the Pen <a href="https://codepen.io/harmoncode/pen/zxGMLrK">Interactive Calendar Widget</a> by harmoncode (<a href="http://codepen.io/harmoncode">@harmoncode</a>) on <a href="http://codepen.io">CodePen</a>.</p> 202</div> 203<h4><a class="author-link" href="https://codepen.io/jkantner/pen/pvjWOjG" title="Financial Calendar Widget">Financial Calendar Widget</a></h4> 204<p>A financial calendar concept featuring tooltips for each day of the current month and circles to represent daily income data. Also operable with arrow keys!</p> 205<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 206<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/income-calendar-widget.png" alt="Financial Calendar Widget" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 207<p data-height="520" data-theme-id="light" data-slug-hash="pvjWOjG" data-default-tab="result" data-user="jkantner" data-pen-title="Financial Calendar Widget" class="codepen">See the Pen <a href="https://codepen.io/jkantner/pen/pvjWOjG">Financial Calendar Widget</a> by jkantner (<a href="http://codepen.io/jkantner">@jkantner</a>) on <a href="http://codepen.io">CodePen</a>.</p> 208</div> 209<h4><a class="author-link" href="https://codepen.io/alvarotrigo/details/XWZdgQw" title="Tailwind CSS Calendar Template">Tailwind CSS Calendar Template</a></h4> 210<p>A sleek and modern look for a calendar using the Taillwind CSS framework.</p> 211<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 212<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/tailwind-css-calendar-template.png" alt="Tailwind CSS Calendar Template" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 213<p data-height="520" data-theme-id="light" data-slug-hash="XWZdgQw" data-default-tab="result" data-user="alvarotrigo" data-pen-title="Tailwind CSS Calendar Template" class="codepen">See the Pen <a href="https://codepen.io/alvarotrigo/details/XWZdgQw">Tailwind CSS Calendar Template</a> by alvarotrigo (<a href="http://codepen.io/alvarotrigo">@alvarotrigo</a>) on <a href="http://codepen.io">CodePen</a>.</p> 214</div> 215<h4><a class="author-link" href="https://codepen.io/wikiki/pen/KvqKzK" title="Bulma Calendar">Bulma Calendar</a></h4> 216<p>If you’re in need of an all in one calendar than this template styled with Bulma CSS might be what you are looking for.</p> 217<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 218<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/bulma-calendar.png" alt="Bulma Calendar" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 219<p data-height="520" data-theme-id="light" data-slug-hash="KvqKzK" data-default-tab="result" data-user="wikiki" data-pen-title="Bulma Calendar" class="codepen">See the Pen <a href="https://codepen.io/wikiki/pen/KvqKzK">Bulma Calendar</a> by wikiki (<a href="http://codepen.io/wikiki">@wikiki</a>) on <a href="http://codepen.io">CodePen</a>.</p> 220</div> 221<h4><a class="author-link" href="https://codepen.io/seebrosky/pen/zmejgg" title="Bootstrap Calendar">Bootstrap Calendar</a></h4> 222<p>A customizable monthly calendar template styled with Bootstrap framework great for any type of websites or app.</p> 223<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 224<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/bootstrap-calendar.png" alt="Bootstrap Calendar" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 225<p data-height="520" data-theme-id="light" data-slug-hash="zmejgg" data-default-tab="result" data-user="seebrosky" data-pen-title="Bootstrap Calendar" class="codepen">See the Pen <a href="https://codepen.io/seebrosky/pen/zmejgg">Bootstrap Calendar</a> by seebrosky (<a href="http://codepen.io/seebrosky">@seebrosky</a>) on <a href="http://codepen.io">CodePen</a>.</p> 226</div> 227<h4 class="mb20"><a class="author-link" href="https://codepen.io/tomcwatts/pen/PmaWpZ" title="Windows Fluent Design Calendar">Windows Fluent Design Calendar</a></h4> 228<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 229<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/windows-fluent-design-calendar.png" alt="Windows Fluent Design Calendar" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 230<p data-height="520" data-theme-id="light" data-slug-hash="PmaWpZ" data-default-tab="result" data-user="tomcwatts" data-pen-title="Windows Fluent Design Calendar" class="codepen">See the Pen <a href="https://codepen.io/tomcwatts/pen/PmaWpZ">Windows Fluent Design Calendar</a> by tomcwatts (<a href="http://codepen.io/tomcwatts">@tomcwatts</a>) on <a href="http://codepen.io">CodePen</a>.</p> 231</div> 232<h4 class="mb20"><a class="author-link" href="https://codepen.io/Russian60/pen/MwOoqR" title="AngularJS Flex Calendar">AngularJS Flex Calendar</a></h4> 233<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 234<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/flexcalendar.png" alt="AngularJS Flex Calendar" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 235<p data-height="520" data-theme-id="light" data-slug-hash="MwOoqR" data-default-tab="result" data-user="Russian60" data-pen-title="AngularJS Flex Calendar" class="codepen">See the Pen <a href="https://codepen.io/Russian60/pen/MwOoqR">AngularJS Flex Calendar</a> by Russian60 (<a href="http://codepen.io/Russian60">@Russian60</a>) on <a href="http://codepen.io">CodePen</a>.</p> 236</div> 237<h4 class="mb20"><a class="author-link" href="https://codepen.io/asrdesignsol/pen/KKVEwVo" title="React Simple Calendar">React Simple Calendar</a></h4> 238<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 239<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/react-simple-calendar.png" alt="React Simple Calendar" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 240<p data-height="520" data-theme-id="light" data-slug-hash="KKVEwVo" data-default-tab="result" data-user="asrdesignsol" data-pen-title="React Simple Calendar" class="codepen">See the Pen <a href="https://codepen.io/asrdesignsol/pen/KKVEwVo">React Simple Calendar</a> by asrdesignsol (<a href="http://codepen.io/asrdesignsol">@asrdesignsol</a>) on <a href="http://codepen.io">CodePen</a>.</p> 241</div> 242<h4 class="mb20"><a class="author-link" href="https://codepen.io/benjamincharity/pen/RGJzdB" title="Angular JSON Calendar Custom Day Template">Angular JSON Calendar Custom Day Template</a></h4> 243<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 244<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/angular-json-calendar-custom-day-template.png" alt="Angular JSON Calendar Custom Day Template" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 245<p data-height="520" data-theme-id="light" data-slug-hash="RGJzdB" data-default-tab="result" data-user="benjamincharity" data-pen-title="Angular JSON Calendar Custom Day Template" class="codepen">See the Pen <a href="https://codepen.io/benjamincharity/pen/RGJzdB">Angular JSON Calendar Custom Day Template</a> by benjamincharity (<a href="http://codepen.io/benjamincharity">@benjamincharity</a>) on <a href="http://codepen.io">CodePen</a>.</p> 246</div> 247<h4 class="mb20"><a class="author-link" href="https://codepen.io/vzvu3k6k/pen/ewRGwW" title="React Big Calendar: EventWrapper Demo">React Big Calendar: EventWrapper Demo</a></h4> 248<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 249<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/react-big-calendar-eventwrapper-demo.png" alt="React Big Calendar: EventWrapper Demo" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 250<p data-height="520" data-theme-id="light" data-slug-hash="ewRGwW" data-default-tab="result" data-user="vzvu3k6k" data-pen-title="React Big Calendar: EventWrapper Demo" class="codepen">See the Pen <a href="https://codepen.io/vzvu3k6k/pen/ewRGwW">React Big Calendar: EventWrapper Demo</a> by vzvu3k6k (<a href="http://codepen.io/vzvu3k6k">@vzvu3k6k</a>) on <a href="http://codepen.io">CodePen</a>.</p> 251</div> 252<h4 class="mb20"><a class="author-link" href="https://codepen.io/HunorMarton/pen/PoGbgqj" title="Advent Calendar">Advent Calendar</a></h4> 253<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 254<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/svg-tutorial.png" alt="Advent Calendar" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 255<p data-height="520" data-theme-id="light" data-slug-hash="PoGbgqj" data-default-tab="result" data-user="HunorMarton" data-pen-title="Advent Calendar" class="codepen">See the Pen <a href="https://codepen.io/HunorMarton/pen/PoGbgqj">Advent Calendar</a>
255 by HunorMarton (<a href="http://codepen.io/HunorMarton">@HunorMarton</a>) on <a href="http://codepen.io">CodePen</a>.</p> 256</div> 257<h4 class="mb20"><a class="author-link" href="https://codepen.io/senthilnasa/pen/NWKoZPb" title="Full Calendar With AngularJS">Full Calendar With AngularJS</a></h4> 258<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 259<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/fullcalendar-with-angularjs.png" alt="Full Calendar With AngularJS" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 260<p data-height="520" data-theme-id="light" data-slug-hash="NWKoZPb" data-default-tab="result" data-user="senthilnasa" data-pen-title="Full Calendar With AngularJS" class="codepen">See the Pen <a href="https://codepen.io/senthilnasa/pen/NWKoZPb">Full Calendar With AngularJS</a> by senthilnasa (<a href="http://codepen.io/senthilnasa">@senthilnasa</a>) on <a href="http://codepen.io">CodePen</a>.</p> 261</div> 262<h4 class="mb20"><a class="author-link" href="https://codepen.io/aebsr/pen/AzQMmZ" title="Apple Calendar Experiment">Apple Calendar Experiment</a></h4> 263<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 264<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/apple-calendar-experiment.png" alt="Apple Calendar Experiment" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 265<p data-height="520" data-theme-id="light" data-slug-hash="AzQMmZ" data-default-tab="result" data-user="aebsr" data-pen-title="Apple Calendar Experiment" class="codepen">See the Pen <a href="https://codepen.io/aebsr/pen/AzQMmZ">Apple Calendar Experiment</a> by aebsr (<a href="http://codepen.io/aebsr">@aebsr</a>) on <a href="http://codepen.io">CodePen</a>.</p> 266</div> 267<h4 class="mb20"><a class="author-link" href="https://codepen.io/dannievinther/pen/pGdjPV" title="Sticky Header Calendar (With Overflow)">Sticky Header Calendar (With Overflow)</a></h4> 268<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 269<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/sticky-header-calendar-with-overflow.png" alt="Sticky Header Calendar (With Overflow)" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 270<p data-height="520" data-theme-id="light" data-slug-hash="pGdjPV" data-default-tab="result" data-user="dannievinther" data-pen-title="Sticky Header Calendar (With Overflow)" class="codepen">See the Pen <a href="https://codepen.io/dannievinther/pen/pGdjPV">Sticky Header Calendar (With Overflow)</a> by dannievinther (<a href="http://codepen.io/dannievinther">@dannievinther</a>) on <a href="http://codepen.io">CodePen</a>.</p> 271</div> 272<h4 class="mb20"><a class="author-link" href="https://codepen.io/jordiorriols/pen/YGvPao" title="AngularJS Event Calendar">AngularJS Event Calendar</a></h4> 273<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 274<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/schedules-event-calendar-with-angularjs.png" alt="AngularJS Event Calendar" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 275<p data-height="520" data-theme-id="light" data-slug-hash="YGvPao" data-default-tab="result" data-user="jordiorriols" data-pen-title="AngularJS Event Calendar" class="codepen">See the Pen <a href="https://codepen.io/jordiorriols/pen/YGvPao">AngularJS Event Calendar</a> by jordiorriols (<a href="http://codepen.io/jordiorriols">@jordiorriols</a>) on <a href="http://codepen.io">CodePen</a>.</p> 276</div> 277<h4 class="mb20"><a class="author-link" href="https://codepen.io/gubb/pen/PdZqKy" title="Windows 10 Calendar Effect">Windows 10 Calendar Effect</a></h4> 278<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 279<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/like-win-calend.png" alt="Windows 10 Calendar Effect" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 280<p data-height="520" data-theme-id="light" data-slug-hash="PdZqKy" data-default-tab="result" data-user="gubb" data-pen-title="Windows 10 Calendar Effect" class="codepen">See the Pen <a href="https://codepen.io/gubb/pen/PdZqKy">Windows 10 Calendar Effect</a> by gubb (<a href="http://codepen.io/gubb">@gubb</a>) on <a href="http://codepen.io">CodePen</a>.</p> 281</div> 282<h4 class="mb20"><a class="author-link" href="https://codepen.io/juan-patrick/pen/GRJWZmP" title="Vanilla JS Calendar">Vanilla JS Calendar</a></h4> 283<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 284<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/calendar-vanilla-js.png" alt="Vanilla JS Calendar" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 285<p data-height="520" data-theme-id="light" data-slug-hash="GRJWZmP" data-default-tab="result" data-user="juan-patrick" data-pen-title="Vanilla JS Calendar" class="codepen">See the Pen <a href="https://codepen.io/juan-patrick/pen/GRJWZmP">Vanilla JS Calendar</a> by juan-patrick (<a href="http://codepen.io/juan-patrick">@juan-patrick</a>) on <a href="http://codepen.io">CodePen</a>.</p> 286</div> 287<h4 class="mb20"><a class="author-link" href="https://codepen.io/MarkBoots/pen/PoGWpge" title="CPC-Holidays-Advent Calendar">CPC-Holidays-Advent Calendar</a></h4> 288<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 289<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/cpc-holidays-advent-calendar.png" alt="CPC-Holidays-Advent Calendar" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 290<p data-height="520" data-theme-id="light" data-slug-hash="PoGWpge" data-default-tab="result" data-user="MarkBoots" data-pen-title="CPC-Holidays-Advent Calendar" class="codepen">See the Pen <a href="https://codepen.io/MarkBoots/pen/PoGWpge">CPC-Holidays-Advent Calendar</a> by MarkBoots (<a href="http://codepen.io/MarkBoots">@MarkBoots</a>) on <a href="http://codepen.io">CodePen</a>.</p> 291</div> 292<h4 class="mb20"><a class="author-link" href="https://codepen.io/razwanizmi/pen/pxmjMg" title="React Calendar">React Calendar</a></h4> 293<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 294<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/react-calendar.png" alt="React Calendar" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 295<p data-height="520" data-theme-id="light" data-slug-hash="pxmjMg" data-default-tab="result" data-user="razwanizmi" data-pen-title="React Calendar" class="codepen">See the Pen <a href="https://codepen.io/razwanizmi/pen/pxmjMg">React Calendar</a> by razwanizmi (<a href="http://codepen.io/razwanizmi">@razwanizmi</a>) on <a href="http://codepen.io">CodePen</a>.</p> 296</div> 297<h4 class="mb20"><a class="author-link" href="https://codepen.io/Bilgili/pen/YrZBWR" title="Calendar UI/UX">Calendar UI/UX</a></h4> 298<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 299<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/calender-ui-ux.png" alt="Calendar UI/UX" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 300<p data-height="520" data-theme-id="light" data-slug-hash="YrZBWR" data-default-tab="result" data-user="Bilgili" data-pen-title="Calendar UI/UX" class="codepen">See the Pen <a href="https://codepen.io/Bilgili/pen/YrZBWR">Calendar UI/UX</a> by Bilgili (<a href="http://codepen.io/Bilgili">@Bilgili</a>) on <a href="http://codepen.io">CodePen</a>.</p> 301</div> 302<h4 class="mb20"><a class="author-link" href="https://codepen.io/sebpearce/pen/JpMbLK" title="Linear Calendar">Linear Calendar</a></h4> 303<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 304<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/linear-calendar.png" alt="Linear Calendar" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 305<p data-height="520" data-theme-id="light" data-slug-hash="JpMbLK" data-default-tab="result" data-user="sebpearce" data-pen-title="Linear Calendar" class="codepen">See the Pen <a href="https://codepen.io/sebpearce/pen/JpMbLK">Linear Calendar</a> by sebpearce (<a href="http://codepen.io/sebpearce">@sebpearce</a>) on <a href="http://codepen.io">CodePen</a>.</p> 306</div> 307<h4 class="mb20"><a class="author-link" href="https://codepen.io/sdbrannum/pen/QYqKzw" title="Vue.js Datepicker">Vue.js Datepicker</a></h4> 308<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 309<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/datepicker-vue-js.png" alt="Vue.js Datepicker" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 310<p data-height="520" data-theme-id="light" data-slug-hash="QYqKzw" data-default-tab="result" data-user="sdbrannum" data-pen-title="Vue.js Datepicker" class="codepen">See the Pen <a href="https://codepen.io/sdbrannum/pen/QYqKzw">Vue.js Datepicker</a> by sdbrannum (<a href="http://codepen.io/sdbrannum">@sdbrannum</a>) on <a href="http://codepen.io">CodePen</a>.</p> 311</div> 312<h4 class="mb20"><a class="author-link" href="https://codepen.io/Hyperplexed/pen/qBVPaNV" title="Desktop Calendar">Desktop Calendar</a></h4> 313<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 314<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/calendar-desktop-preferred.png" alt="Desktop Calendar" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 315<p data-height="520" data-theme-id="light" data-slug-hash="qBVPaNV" data-default-tab="result" data-user="Hyperplexed" data-pen-title="Desktop Calendar" class="codepen">See the Pen <a href="https://codepen.io/Hyperplexed/pen/qBVPaNV">Desktop Calendar</a> by Hyperplexed (<a href="http://codepen.io/Hyperplexed">@Hyperplexed</a>) on <a href="http://codepen.io">CodePen</a>.</p> 316</div> 317<h4 class="mb20"><a class="author-link" href="https://codepen.io/mgrsskls/pen/KgQQgL" title="Responsive Calendar Design">Responsive Calendar Design</a></h4> 318<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 319<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/responsive-calendar.png" alt="Responsive Calendar Design" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 320<p data-height="520" data-theme-id="light" data-slug-hash="KgQQgL" data-default-tab="result" data-user="mgrsskls" data-pen-title="Responsive Calendar Design" class="codepen">See the Pen <a href="https://codepen.io/mgrsskls/pen/KgQQgL">Responsive Calendar Design</a> by mgrsskls (<a href="http://codepen.io/mgrsskls">@mgrsskls</a>) on <a href="http://codepen.io">CodePen</a>.</p> 321</div> 322<h4 class="mb20"><a class="author-link" href="https://codepen.io/Shyam-Chen/pen/LVKyJZ" title="Angular Material Datepicker">Angular Material Datepicker</a></h4> 323<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 324<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/angular-material-datepicker.png" alt="Angular Material Datepicker" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 325<p data-height="520" data-theme-id="light" data-slug-hash="LVKyJZ" data-default-tab="result" data-user="Shyam-Chen" data-pen-title="Angular Material Datepicker" class="codepen">See the Pen <a href="https://codepen.io/Shyam-Chen/pen/LVKyJZ">Angular Material Datepicker</a> by Shyam-Chen (<a href="http://codepen.io/Shyam-Chen">@Shyam-Chen</a>) on <a href="http://codepen.io">CodePen</a>.</p> 326</div> 327<h4 class="mb20"><a class="author-link" href="https://codepen.io/ramzibach-the-styleful/pen/dypOEKj" title="React Calendar App">React Calendar App</a></h4> 328<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 329<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/calendar-react-app.png" alt="React Calendar App" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 330<p data-height="520" data-theme-id="light" data-slug-hash="dypOEKj" data-default-tab="result" data-user="ramzibach-the-styleful" data-pen-title="React Calendar App" class="codepen">See the Pen <a href="https://codepen.io/ramzibach-the-styleful/pen/dypOEKj">React Calendar App</a> by ramzibach-the-styleful (<a href="http://codepen.io/ramzibach-the-styleful">@ramzibach-the-styleful</a>) on <a href="http://codepen.io">CodePen</a>.</p> 331</div> 332<h4 class="mb20"><a class="author-link" href="https://codepen.io/adilsonjr/pen/BmbRJP" title="Calendar With Schedule Board">Calendar With Schedule Board</a></h4> 333<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 334<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/schedule-board.png" alt="Calendar With Schedule Board" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 335<p data-height="520" data-theme-id="light" data-slug-hash="BmbRJP" data-default-tab="result" data-user="adilsonjr" data-pen-title="Calendar With Schedule Board" class="codepen">See the Pen <a href="https://codepen.io/adilsonjr/pen/BmbRJP">Calendar With Schedule Board</a> by adilsonjr (<a href="http://codepen.io/adilsonjr">@adilsonjr</a>) on <a href="http://codepen.io">CodePen</a>.</p> 336</div> 337<h4 class="mb20"><a class="author-link" href="https://codepen.io/Alahab2/pen/rLeyar" title="jQuery UI Calendar DatePicker">jQuery UI Calendar DatePicker</a></h4> 338<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 339<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/jquery-ui-datepicker-calendar.png" alt="jQuery UI Calendar DatePicker" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 340<p data-height="520" data-theme-id="light" data-slug-hash="rLeyar" data-default-tab="result" data-user="Alahab2" data-pen-title="jQuery UI Calendar DatePicker" class="codepen">See the Pen <a href="https://codepen.io/Alahab2/pen/rLeyar">jQuery UI Calendar DatePicker</a> by Alahab2 (<a href="http://codepen.io/Alahab2">@Alahab2</a>) on <a href="http://codepen.io">CodePen</a>.</p> 341</div> 342<h4 class="mb20"><a class="author-link" href="https://codepen.io/simoberny/pen/gLMjBj" title="CSS Calendar Planning App">CSS Calendar Planning App</a></h4> 343<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 344<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/planning-app-css.png" alt="CSS Calendar Planning App" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 345<p data-height="520" data-theme-id="light" data-slug-hash="gLMjBj" data-default-tab="result" data-user="simoberny" data-pen-title="CSS Calendar Planning App" class="codepen">See the Pen <a href="https://codepen.io/simoberny/pen/gLMjBj">CSS Calendar Planning App</a> by simoberny (<a href="http://codepen.io/simoberny">@simoberny</a>) on <a href="http://codepen.io">CodePen</a>.</p> 346</div> 347<h4 class="mb20"><a class="author-link" href="https://codepen.io/mariusandra/pen/ONrQaX" title="React Calendar Timeline Demo">React Calendar Timeline Demo</a></h4> 348<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 349<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/react-calendar-timeline-demo.png" alt="React Calendar Timeline Demo" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 350<p data-height="520" data-theme-id="light" data-slug-hash="ONrQaX" data-default-tab="result" data-user="mariusandra" data-pen-title="React Calendar Timeline Demo" class="codepen">See the Pen <a href="https://codepen.io/mariusandra/pen/ONrQaX">React Calendar Timeline Demo</a> by mariusandra (<a href="http://codepen.io/mariusandra">@mariusandra</a>) on <a href="http://codepen.io">CodePen</a>.</p> 351</div> 352<h4 class="mb20"><a class="author-link" href="https://codepen.io/sebastianinman/pen/BzPPjj" title="jQuery Event Calendar">jQuery Event Calendar</a></h4> 353<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 354<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/jquery-event-calendar.png" alt="jQuery Event Calendar" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 355<p data-height="520" data-theme-id="light" data-slug-hash="BzPPjj" data-default-tab="result" data-user="sebastianinman" data-pen-title="
355jQuery Event Calendar" class="codepen">See the Pen <a href="https://codepen.io/sebastianinman/pen/BzPPjj">jQuery Event Calendar</a> by sebastianinman (<a href="http://codepen.io/sebastianinman">@sebastianinman</a>) on <a href="http://codepen.io">CodePen</a>.</p> 356</div> 357<h4 class="mb20"><a class="author-link" href="https://codepen.io/vladracoare/pen/KKKowZM" title="Simple Calendar and Scheduler App">Simple Calendar and Scheduler App</a></h4> 358<div class="blog-style" itemscope="" itemtype="http://schema.org/ImageObject"> 359<img class="blog-image" src="https://cdn.freebiesupply.com/blog/22-01-2026/simple-calendar-scheduler-app.png" alt="Simple Calendar and Scheduler App" itemprop="contentUrl"><meta itemprop="encodingFormat" content="png" 360<p data-height="520" data-theme-id="light" data-slug-hash="KKKowZM" data-default-tab="result" data-user="vladracoare" data-pen-title="Simple Calendar and Scheduler App" class="codepen">See the Pen <a href="https://codepen.io/vladracoare/pen/KKKowZM">Simple Calendar and Scheduler App</a> by vladracoare (<a href="http://codepen.io/vladracoare">@vladracoare</a>) on <a href="http://codepen.io">CodePen</a>.</p> 361</div> 362 <div class="body-tags"></div> 363 </div> 364 <div class="download-and-share"> 365 <div class="share-buttons"> 366 <div class="share-title">Share</div> 367 <div class="buttons-wrapper"> 368 <a class="share-link share-twitter" href="http://twitter.com/share?url=https://freebiesupply.com/blog/css-calendar-ideas/&text=CSS+Calendar+Ideas" target="_blank"> 369 <svg width="18" height="16" viewBox="0 0 18 16" xmlns="http://www.w3.org/2000/svg"> 370 <title>Twitter</title> 371 <path d="M8.78 4.948l-.65-.084C5.76 4.54 3.693 3.437 1.937 1.587L1.078.67l-.22.677c-.468 1.51-.17 3.107.807 4.18.52.594.403.678-.494.325C.86 5.74.586 5.654.56 5.697c-.092.1.22 1.384.467 1.892.34.706 1.028 1.398 1.782 1.807l.637.325-.755.014c-.728 0-.754.014-.676.31.26.92 1.288 1.893 2.432 2.317l.806.297-.702.452c-1.04.65-2.263 1.016-3.486 1.045C.48 14.17 0 14.227 0 14.27c0 .14 1.587.932 2.51 1.243 2.77.918 6.06.522 8.532-1.046 1.756-1.115 3.512-3.333 4.33-5.48.443-1.143.885-3.234.885-4.236 0-.65.04-.734.768-1.51.43-.453.832-.947.91-1.088.13-.268.117-.268-.546-.028-1.106.423-1.263.367-.716-.27.403-.45.884-1.27.884-1.51 0-.042-.195.028-.416.155-.234.14-.754.353-1.145.48l-.702.24-.637-.466c-.35-.255-.846-.537-1.106-.622-.663-.198-1.678-.17-2.276.057C9.65.823 8.623 2.462 8.74 4.255l.04.692z" fill="#68B0E1" fill-rule="evenodd"/> 372 </svg> 373 <span class="share-text">Twitter</span> 374 </a> 375 <a class="share-link share-facebook" href="http://www.facebook.com/sharer.php?u=https://freebiesupply.com/blog/css-calendar-ideas/" target="_blank"> 376 <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"> 377 <title>Facebook</title> 378 <g fill="none" fill-rule="evenodd"><path fill="#6A81A4" d="M0 0h18v18H0z"/><path d="M13 11h2l.5-2.413H13V7.38c0-.63.032-.967 1-.967h1.5V4h-2.1C10.912 4 10 5.17 10 7.138v1.45H8.5V11H10v7h3v-7z" fill="#FFF"/></g> 379 </svg> 380 <span class="share-text">Facebook</span> 381 </a> 382 <a class="share-link share-pinterest" href="http://pinterest.com/pin/create/button/?url=https://freebiesupply.com/blog/css-calendar-ideas/&media=https://cdn.freebiesupply.com/images/thumbs/2x/css-calendar-ideas.png&description=CSS Calendar Ideas" target="_blank"> 383 <svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg"> 384 <title>Pinterest</title><g fill="none" fill-rule="evenodd"> 385 <circle fill="#B65151" cx="9" cy="9" r="9"/> 386 <path d="M4 8.976c0 1.205.64 2.706 1.668 3.184.157.072.24.04.275-.11.027-.114.166-.672.228-.932.022-.083.012-.155-.056-.237-.338-.41-.61-1.168-.61-1.874 0-1.813 1.372-3.567 3.71-3.567 2.02 0 3.434 1.375 3.434 3.343 0 2.224-1.12 3.764-2.583 3.764-.807 0-1.412-.666-1.218-1.486.233-.975.68-2.03.68-2.735 0-.632-.338-1.
38616-1.04-1.16-.824 0-1.487.855-1.487 2 0 .727.246 1.218.246 1.218s-.814 3.446-.963 4.087c-.254 1.09.034 2.852.06 3.006.012.083.104.11.155.04.08-.106 1.063-1.578 1.34-2.644l.51-1.954c.27.512 1.052.944 1.886.944 2.48 0 4.266-2.28 4.266-5.113C14.5 6.03 12.284 4 9.432 4 5.882 4 4 6.38 4 8.976z" fill="#FFF"/> 387 </g> 388 </svg> 389 <span class="share-text">Pinterest</span> 390 </a> 391 </div> 392 </div> 393 </div> 394 </div> 395 <div class="sidebar"> 396 <div class="hosting-300-green"> 397 <div class="ad-2"> 398
398<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
398 399 <!-- Freebie Supply Sidebar --> 400 <ins class="adsbygoogle" 401 style="display:inline-block;width:300px;height:250px" 402 data-ad-client="ca-pub-8540669097527821" 403 data-ad-slot="4422055460"></ins> 404
404<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
404 </div> 405 <a href="https://medium.com/inspiration-supply/style-guides-by-pro-designers-5605707afc07" class="affiliate affiliate-green"> 406 <img src="https://cdn.freebiesupply.com/resources/style-guides-by-pro-designers-banner-1x.png" srcset="https://cdn.freebiesupply.com/resources/style-guides-by-pro-designers-banner-1x.png 1x, https://cdn.freebiesupply.com/resources/style-guides-by-pro-designers-banner-2x.png 2x" alt="Style Guides by Pro Designers"> 407 </a> 408 </div> 409 <div class="subscribe-box"> 410 <div class="newsletter-title">Get the freebies digest</div> 411 <p class="newsletter-text">Useful & free design resources delivered to your inbox every week</p> 412 <div id="mc_embed_signup_form" class="my-subscribe-form"> 413 <form action="//freebiesupply.us14.list-manage.com/subscribe/post?u=1d5f2049d677ffc42ebea2515&id=2285460909" method="post" id="mc-embedded-subscribe-newsletter-form" name="mc-embedded-subscribe-newsletter-form" class="validate" target="_blank" novalidate> 414 <div id="mc_embed_signup_form_scroll"> 415 <div class="mc-field-group"> 416 <input type="email" value="" name="EMAIL" class="required email email-field email-field-sidebar" id="mce-EMAIL-form" placeholder="Your email"> 417 </div> 418 <div id="mce-responses-form" class="clear"> 419 <div class="response" id="mce-error-response-form" style="display:none"></div> 420 <div class="response" id="mce-success-response-form" style="display:none"></div> 421 </div> 422 <div style="display:none;"> 423 <input type="text" name="b_1d5f2049d677ffc42ebea2515_2285460909" tabindex="-1" value=""> 424 </div> 425 <div class="clear"> 426 <input type="submit" value="Subscribe" name="subscribe" class="button button-subscribe-sidebar submit"> 427 </div> 428 </div> 429 </form> 430 <div class="clear"></div> 431 </div> 432 </div> 433 </div> 434 </div> 435 <div class="related-resources"> 436 437 <ul class="resources-wrapper"> 438 439 <li class="card"> 440 <div class="card-wrapper"> 441 <a class="card-image" href="https://freebiesupply.com/blog/pure-css-logos-from-codepen/" style="background-color: #1b192f;"> 442 <img class="resource" src="https://cdn.freebiesupply.com/images/thumbs/1x/pure-css-logos-from-codepen.png" srcset="https://cdn.freebiesupply.com/images/thumbs/1x/pure-css-logos-from-codepen.png 1x, https://cdn.freebiesupply.com/images/thumbs/2x/pure-css-logos-from-codepen.png 2x" alt="Pure CSS Logos from CodePen"> 443 </a> 444 <div class="mini-description"> 445 <h2 class="card-title no-icon-title"> 446 <a href="https://freebiesupply.com/blog/pure-css-logos-from-codepen/">Pure CSS Logos from CodePen</a> 447 </h2> 448 <p class="overlay-description"> 449 I started learning CSS almost 20 years ago. </p> 450 </div> 451 </div> 452</li> 453 454 <li class="card"> 455 <div class="card-wrapper"> 456 <a class="card-image" href="https://freebiesupply.com/blog/css-calendars/" style="background-color: #249991;"> 457 <img class="resource" src="https://cdn.freebiesupply.com/images/thumbs/1x/css-calendar-examples-from-codepen.png" srcset="https://cdn.freebiesupply.com/images/thumbs/1x/css-calendar-examples-from-codepen.png 1x, https://cdn.freebiesupply.com/images/thumbs/2x/css-calendar-examples-from-codepen.png 2x" alt="CSS Calendar Examples From CodePen"> 458 </a> 459 <div class="mini-description"> 460 <h2 class="card-title no-icon-title"> 461 <a href="https://freebiesupply.com/blog/css-calendars/">CSS Calendar Examples From CodePen</a> 462 </h2> 463 <p class="overlay-description"> 464 From a UI perspective, digital calendars are not the easiest to design. </p> 465 </div> 466 </div> 467</li> 468 <li class="card similar-hosting"> 469 <div class="ad-2"> 470
470<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
470 471 <!-- Freebie Supply Similar One --> 472 <ins class="adsbygoogle" 473 style="display:inline-block;width:300px;height:250px" 474 data-ad-client="ca-pub-8540669097527821" 475 data-ad-slot="2182904937"></ins> 476
476<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
476 </div> 477 <a href="https://medium.com/inspiration-supply/wireframes-by-top-ux-designers-d6922d34ddb8" class="affiliate affiliate-similar"> 478 <img src="https://cdn.freebiesupply.com/resources/wireframes-by-top-ux-designers-banner-1x.png" srcset="https://cdn.freebiesupply.com/resources/wireframes-by-top-ux-designers-banner-1x.png 1x, https://cdn.freebiesupply.com/resources/wireframes-by-top-ux-designers-banner-2x.png 2x" alt="Wireframes by Top UX Designers" loading="lazy"> 479 </a> 480 </li> 481 482 <li class="card"> 483 <div class="card-wrapper"> 484 <a class="card-image" href="https://freebiesupply.com/blog/css-text-shadows/" style="background-color: #56519c;"> 485 <img class="resource" src="https://cdn.freebiesupply.com/images/thumbs/1x/css-text-shadows-from-codepen.png" srcset="https://cdn.freebiesupply.com/images/thumbs/1x/css-text-shadows-from-codepen.png 1x, https://cdn.freebiesupply.com/images/thumbs/2x/css-text-shadows-from-codepen.png 2x" alt="CSS Text Shadows From CodePen"> 486 </a> 487 <div class="mini-description"> 488 <h2 class="card-title no-icon-title"> 489 <a href="https://freebiesupply.com/blog/css-text-shadows/">CSS Text Shadows From CodePen</a> 490 </h2> 491 <p class="overlay-description"> 492 Adding shadow to text has never been easier. </p> 493 </div> 494 </div> 495</li> 496 497 <li class="card"> 498 <div class="card-wrapper"> 499 <a class="card-image" href="https://freebiesupply.com/blog/404-page-templates/" style="background-color: #3d3e64;"> 500 <img class="resource" src="https://cdn.freebiesupply.com/images/thumbs/1x/404-page-templates-from-codepen.png" srcset="https://cdn.freebiesupply.com/images/thumbs/1x/404-page-templates-from-codepen.png 1x, https://cdn.freebiesupply.com/images/thumbs/2x/404-page-templates-from-codepen.png 2x" alt="404 Page Templates From CodePen" loading="lazy"> 501 </a> 502 <div class="mini-description"> 503 <h2 class="card-title no-icon-title"> 504 <a href="https://freebiesupply.com/blog/404-page-templates/">404 Page Templates From CodePen</a> 505 </h2> 506 <p class="overlay-description"> 507 All the best 404 pages normally have something that stands out. </p> 508 </div> 509 </div> 510</li> 511 512 <li class="card"> 513 <div class="card-wrapper"> 514 <a class="card-image" href="https://freebiesupply.com/blog/popular-red-logos/" style="background-color: #f0141e;"> 515 <img class="resource" src="https://cdn.freebiesupply.com/images/thumbs/1x/popular-red-color-logos.png" srcset="https://cdn.freebiesupply.com/images/thumbs/1x/popular-red-color-logos.png 1x, https://cdn.freebiesupply.com/images/thumbs/2x/popular-red-color-logos.png 2x" alt="Popular Red Logos" loading="lazy"> 516 </a> 517 <div class="mini-description"> 518 <h2 class="card-title no-icon-title"> 519 <a href="https://freebiesupply.com/blog/popular-red-logos/">Popular Red Logos</a> 520 </h2> 521 <p class="overlay-description"> 522 Red colored logos have been always used by companies that want to make a statement or grab a user's attention by targeting them towards their brand. </p> 523 </div> 524 </div> 525</li> 526 527 <li class="card"> 528 <div class="card-wrapper"> 529 <a class="card-image" href="https://freebiesupply.com/blog/html-resume-portfolio-templates/" style="background-color: #254e74;"> 530 <img class="resource" src="https://cdn.freebiesupply.com/images/thumbs/1x/html-resume-portfolio-templates-from-codepen.png" srcset="https://cdn.freebiesupply.com/images/thumbs/1x/html-resume-portfolio-templates-from-codepen.png 1x, https://cdn.freebiesupply.com/images/thumbs/2x/html-resume-portfolio-templates-from-codepen.png 2x" alt="HTML Resume & Portfolio Templates From CodePen" loading="lazy"> 531 </a> 532 <div class="mini-description"> 533 <h2 class="card-title no-icon-title"> 534 <a href="https://freebiesupply.com/blog/html-resume-portfolio-templates/">HTML Resume & Portfolio Templates From CodePen</a> 535 </h2> 536 <p class="overlay-description"> 537 These days you can easily create an online resume or portfolio using just some HTML templates. </p> 538 </div> 539 </div> 540</li> 541 542 <li class="card"> 543 <div class="card-wrapper"> 544 <a class="card-image" href="https://freebiesupply.com/blog/css-photo-effects/" style="background-color: #221c1c;"> 545 <img class="resource" src="https://cdn.freebiesupply.com/images/thumbs/1x/css-photo-effects-filters-from-codepen.jpg" srcset="https://cdn.freebiesupply.com/images/thumbs/1x/css-photo-effects-filters-from-codepen.jpg 1x, https://cdn.freebiesupply.com/images/thumbs/2x/css-photo-effects-filters-from-codepen.jpg 2x" alt="CSS Photo Effects & Filters From CodePen" loading="lazy"> 546 </a> 547 <div class="mini-description"> 548 <h2 class="card-title no-icon-title"> 549 <a href="https://freebiesupply.com/blog/css-photo-effects/">CSS Photo Effects & Filters From CodePen</a> 550 </h2> 551 <p class="overlay-description"> 552 These days you can use CSS photo effects or any kind of filters on your images when building a website, web app or mobile app. </p> 553 </div> 554 </div> 555</li> 556 557 <li class="card"> 558 <div class="card-wrapper"> 559 <a class="card-image" href="https://freebiesupply.com/blog/css-layouts/" style="background-color: #001831;"> 560 <img class="resource" src="https://cdn.freebiesupply.com/images/thumbs/1x/css-layout-templates-from-codepen.png" srcset="https://cdn.freebiesupply.com/images/thumbs/1x/css-layout-templates-from-codepen.png 1x, https://cdn.freebiesupply.com/images/thumbs/2x/css-layout-templates-from-codepen.png 2x" alt="CSS Layout Templates From CodePen" loading="lazy"> 561 </a> 562 <div class="mini-description"> 563 <h2 class="card-title no-icon-title"> 564 <a href="https://freebiesupply.com/blog/css-layouts/">CSS Layout Templates From CodePen</a> 565 </h2> 566 <p class="overlay-description"> 567 Using CSS layout templates when building a website can help you decide how your site's structure will look like. </p> 568 </div> 569 </div> 570</li> 571 <li class="card similar-hosting"> 572 <div class="ad-2"> 573
573<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
573 574 <!-- Freebie Supply Similar Two --> 575 <ins class="adsbygoogle" 576 style="display:inline-block;width:300px;height:250px" 577 data-ad-client="ca-pub-8540669097527821" 578 data-ad-slot="1647007876"></ins> 579
579<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
579 </div> 580 <div class="hosting-placeholder"> 581 <a href="https://medium.com/inspiration-supply/modern-identity-and-logo-designs-9a31af68b0a7" class="affiliate affiliate-similar"> 582 <img src="https://cdn.freebiesupply.com/resources/modern-identity-and-logo-designs-banner-1x.png" srcset="https://cdn.freebiesupply.com/resources/modern-identity-and-logo-designs-banner-1x.png 1x, https://cdn.freebiesupply.com/resources/modern-identity-and-logo-designs-banner-2x.png 2x" alt="Modern Identity and Logo Designs" loading="lazy"> 583 </a> 584 </div> 585 </li> 586 587 <li class="card"> 588 <div class="card-wrapper"> 589 <a class="card-image" href="https://freebiesupply.com/blog/28-printable-graph-paper-and-grid-paper-templates/" style="background-color: #f5fbfe;"> 590 <img class="resource" src="https://cdn.freebiesupply.com/images/thumbs/1x/printable-graph-paper.png" srcset="https://cdn.freebiesupply.com/images/thumbs/1x/printable-graph-paper.png 1x, https://cdn.freebiesupply.com/images/thumbs/2x/printable-graph-paper.png 2x" alt="28+ Printable Graph Paper and Grid Paper Templates" loading="lazy"> 591 </a> 592 <div class="mini-description"> 593 <h2 class="card-title no-icon-title"> 594 <a href="https://freebiesupply.com/blog/28-printable-graph-paper-and-grid-paper-templates/">28+ Printable Graph Paper and Grid Paper Templates</a> 595 </h2> 596 <p class="overlay-description"> 597 Graph paper is known to be a type of writing paper that has a grid printed on it. </p> 598 </div> 599 </div> 600</li> 601 602 <li class="card"> 603 <div class="card-wrapper"> 604 <a class="card-image" href="https://freebiesupply.com/blog/adobe-xd-ui-kits-by-top-designers/" style="background-color: #322a37;"> 605 <img class="resource" src="https://cdn.freebiesupply.com/images/thumbs/1x/16-adobe-xd-ui-kits.png" srcset="https://cdn.freebiesupply.com/images/thumbs/1x/16-adobe-xd-ui-kits.png 1x, https://cdn.freebiesupply.com/images/thumbs/2x/16-adobe-xd-ui-kits.png 2x" alt="Adobe XD UI Kits by Top Designers" loading="lazy"> 606 </a> 607 <div class="mini-description"> 608 <h2 class="card-title no-icon-title"> 609 <a href="https://freebiesupply.com/blog/adobe-xd-ui-kits-by-top-designers/">Adobe XD UI Kits by Top Designers</a> 610 </h2> 611 <p class="overlay-description"> 612 The XD UI kits we selected in this article have been crafted by some of the industry's best designers. </p> 613 </div> 614 </div> 615</li> 616 </ul> 617 </div> 618 </main> 619 </div> 620 </div> 621 <div class="bottom-section"> 622 623<div class="subscribe"> 624 <div class="subscribe-wrapper"> 625 <h2 class="subscribe-title">Subscribe to our big freebie newsletter</h2> 626 <p class="subscribe-text">Receive an awesome list of free handy resources in your inbox every week!</p> 627 <div id="mc_embed_signup" class="my-subscribe"> 628 <form action="//freebiesupply.us14.list-manage.com/subscribe/post?u=1d5f2049d677ffc42ebea2515&id=2285460909" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 629 <div id="mc_embed_signup_scroll"> 630 <div class="mc-field-group"> 631 <input type="email" value="" name="EMAIL" class="required email email-field-footer" id="mce-EMAIL" placeholder="Email address"> 632 </div> 633 <div id="mce-responses" class="clear"> 634 <div class="response" id="mce-error-response" style="display:none"></div> 635 <div class="response" id="mce-success-response" style="display:none"></div> 636 </div> 637 <div style="display:none;"> 638 <input type="text" name="b_1d5f2049d677ffc42ebea2515_2285460909" tabindex="-1" value=""> 639 </div> 640 <div class="clear"> 641 <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button button-subscribe-footer submit"> 642 </div> 643 </div> 644 </form> 645 </div> 646 </div> 647</div> 648<footer> 649 <div class="popular-links-wrapper"> 650 <div class="popular-links-title">Popular Pages</div> 651 <div class="popular-links">
652 <span><a class="popular-link" href="https://freebiesupply.com/blog/css-button-hover-effects/" title="CSS Buttons">CSS Buttons</a></span><span><a class="popular-link" href="https://freebiesupply.com/blog/css-loaders/" title="CSS Loaders">CSS Loaders</a></span><span><a class="popular-link" href="https://freebiesupply.com/blog/css-arrows/" title="CSS Arrows">CSS Arrows</a></span><span><a class="popular-link" href="https://freebiesupply.com/blog/css-background-patterns/" title="CSS Gradient Backgrounds">CSS Gradient Backgrounds</a></span><span><a class="popular-link" href="https://freebiesupply.com/google-slides-and-powerpoint-templates/" title="Google Slides Themes & PowerPoint Templates">Google Slides Themes</a></span><span></span><span></span> </div> 653 </div> 654 <div class="links-wrapper"> 655 <div class="links"> 656 <a class="footer-link" href="https://freebiesupply.com/about/">About</a><span>•</span> 657 <a class="footer-link" href="https://freebiesupply.com/blog/">Blog</a><span>•</span> 658 <a class="footer-link" href="https://freebiesupply.com/about/#contact">Contact</a><span>•</span> 659 <a class="footer-link" href="https://freebiesupply.com/privacy-policy/">Privacy Policy</a><span>•</span> 660 <a class="footer-link" href="https://www.facebook.com/freebiesupply/">Facebook</a><span>•</span> 661 <a class="footer-link" href="https://twitter.com/freebiesupply">Twitter</a> 662 </div> 663 <div class="copyright"> 664 <p>© 2026 Freebie Supply</p> 665 </div> 666 </div> 667</footer> 668 </div> 669 670 671 672<div class="awesome-bar"> 673 <div class="bookmark hidden-bar-item" title="Don't Forget to Bookmark"> 674 <span class="social-text">Don't Forget to <span class="underline-style">Bookmark</span></span> 675 </div> 676 677 <a class="visit-medium hidden-bar-item" href="https://medium.com/inspiration-supply" title="We have even more awesome stuff on our Medium" target="_blank"> 678 <svg width="28" height="28" viewBox="0 0 195 195" xmlns="http://www.w3.org/2000/svg" class="social-logo"><title>Medium logo</title><g fill-rule="nonzero" fill="none"><path fill="#12100E" d="M0 0h195v195H0z"/><path d="M46.534 65.216c.163-1.608-.45-3.198-1.65-4.28L32.65 46.2V44h37.98l29.356 64.38L125.796 44H162v2.2L151.542 56.23c-.902.687-1.35 1.817-1.162 2.935v73.674c-.187 1.118.26 2.248 1.162 2.935l10.213 10.027v2.2h-51.372v-2.2l10.58-10.273c1.04-1.04 1.04-1.345 1.04-2.934v-59.55l-29.417 74.712H88.61L54.363 73.042v50.074c-.285 2.105.414 4.225 1.896 5.747l13.76 16.69v2.202H31v-2.2l13.76-16.692c1.472-1.525 2.13-3.66 1.774-5.747v-57.9z" fill="#FFF"/></g></svg> 679 <span class="social-text">We have even more awesome stuff on our Medium</span> 680 <span class="check-it-out-btn">Check it out</span> 681 </a> 682 683 <a class="likeus-facebook hidden-bar-item" href="https://www.facebook.com/freebiesupply/" title="Follow Freebie Supply on Facebook" target="_blank"> 684 <span class="social-text">Follow and Like Freebie Supply on Facebook </span> 685 <span class="like-btn"><svg width="21" height="32" viewBox="0 -5 21 32" xmlns="http://www.w3.org/2000/svg"><title>like icon</title><g fill="#FFF" fill-rule="evenodd"><path d="M19.07 6h-4.44l.41-3.118C15.04 1.708 14.316 0 13.178 0h-1.21l-.62 3.503L8.552 8.11c-.297.44-.897.81-1.05 1.14v8.852c.427.482 1.667.898 2.34.898h7.28c1.064 0 1.93-1.032 1.93-2.164 0-.257-.04-.503-.128-.737.822-.25 1.407-1.056 1.407-1.978 0-.32-.074-.64-.212-.925.546-.38.882-1.028.882-1.722 0-.572-.222-1.11-.613-1.496.39-.388.613-.926.613-1.498C21 7.348 20.133 6 19.07 6z"/><rect y="8" width="6" height="11" rx="1"/></g></svg>Like</span> 686 </a> 687 688 <a class="followus-twitter hidden-bar-item" href="https://twitter.com/freebiesupply" title="Follow Freebie Supply on Twitter" target="_blank"> 689 <span class="social-text">Follow @FreebieSupply on Twitter</span> 690 <span class="follow-btn"><svg width="18" height="32" viewBox="0 -8 18 32" xmlns="http://www.w3.org/2000/svg"><title>twitter</title><path d="M8.78 4.948l-.65-.084C5.762 4.54 3.694 3.437 1.938 1.587L1.078.67l-.22.676c-.468 1.51-.17 3.107.807 4.18.52.594.403.678-.494.325-.31-.112-.584-.197-.61-.154-.09.1.22 1.384.468 1.892.34.706 1.028 1.398 1.782 1.807l.637.325-.755.014c-.728 0-.754.014-.676.31.26.92 1.288 1.893 2.432 2.317l.806.298-.702.452c-1.04.65-2.263 1.016-3.486 1.045-.585.014-1.066.07-1.066.113 0 .14 1.587.932 2.51 1.243 2.77.92 6.06.523 8.532-1.045 1.756-1.115 3.512-3.333 4.33-5.48.443-1.143.885-3.234.885-4.236 0-.65.04-.735.768-1.51.43-.454.832-.948.91-1.09.13-.267.117-.267-.546-.027-1.107.423-1.264.367-.717-.27.403-.45.884-1.27.884-1.51 0-.042-.195.028-.416.155-.233.14-.753.353-1.144.48l-.702.24-.637-.466C14.307.497 13.81.215 13.55.13c-.662-.198-1.677-.17-2.275.057C9.65.82 8.622 2.46 8.74 4.253l.04.692v.003z" fill="#FFF" fill-rule="evenodd"/></svg>
690Follow</span> 691 </a> 692 693 <div class="stupon-like-desktop hidden-bar-item"> 694 <span class="stupon-text">Donât forget to like</span> 695 <span class="stupon-arrow"><svg width="34" height="28" viewBox="0 0 34 28" xmlns="http://www.w3.org/2000/svg"><title>Arrow</title><path d="M27 9.056c.55 1.28 1.42 2.826 2 3.977.38.565 4.826.222 5 0C31.56 9.307 29.728 4.93 29 .11c-.405-.246-4.195 0-5 0-2.903 3.445-5.78 6.45-9 8.946.344-.18 2 .08 2 0 .872.08 2.354.336 3 0 1.01-.865 2.144-1.895 3-2.982-2.774 10.786-11.667 19.284-23 21.87 1.308-.44 3.05.247 5 0 9.995-2.242 18.364-9.624 22-18.888z" fill="#F4C24B" fill-rule="evenodd"/></svg></span> 696 </div> 697 <div class="stupon-like-desktop-default hidden-bar-item"> 698 <span class="stupon-text">Donât forget to like</span> 699 <span class="stupon-tumbs-up"><svg width="19" height="17" viewBox="0 0 19 17" xmlns="http://www.w3.org/2000/svg"><title>Thumbs Up</title><g fill="#F4C24B" fill-rule="evenodd"><path d="M18.98 7.468c0-1.7-1.9-1.822-1.9-1.822h-2.85c-.233 0-.36-.222-.36-.445.36-.788.95-2.387.718-3.52-.36-1.6-1.774-1.7-2.26-1.7-.126 0-.23.12-.23.222 0 0-1.184 3.3-1.31 3.3L7.706 6.678c-.127.12-.233.12-.36.12h-.46v7.954h.46c.824 0 1.54.9 4.086 1.133 2.546.234 5.52.79 5.985 0 .464-.79.126-1.477.126-1.477s.59-.345.718-1.134c.128-.79-.126-1.255-.126-1.255s.528-.302.613-1.375c.084-1.072-.233-1.356-.233-1.356s.592-.567.465-1.822zM4.097 14.713c.558 0 1.01-.45 1.01-1.005V7.785c0-.555-.454-1.005-1.01-1.005H1.01C.45 6.78 0 7.23 0 7.785v5.923c0 .555.453 1.005 1.01 1.005h3.087zm-1.727-3.38c.717 0 1.182.446 1.182 1.134S3.087 13.6 2.37 13.6c-.718 0-1.183-.445-1.183-1.133s.465-1.134 1.183-1.134z"/></g></svg></span> 700 </div> 701 <div class="stupon-like-mobile hidden-bar-item"> 702 <span class="stupon-text">If you like this post press the</span> 703 <span class="stupon-tumbs-up"><svg width="19" height="17" viewBox="0 0 19 17" xmlns="http://www.w3.org/2000/svg"><title>Thumbs Up</title><g fill="#F4C24B" fill-rule="evenodd"><path d="M18.98 7.468c0-1.7-1.9-1.822-1.9-1.822h-2.85c-.233 0-.36-.222-.36-.445.36-.788.95-2.387.718-3.52-.36-1.6-1.774-1.7-2.26-1.7-.126 0-.23.12-.23.222 0 0-1.184 3.3-1.31 3.3L7.706 6.678c-.127.12-.233.12-.36.12h-.46v7.954h.46c.824 0 1.54.9 4.086 1.133 2.546.234 5.52.79 5.985 0 .464-.79.126-1.477.126-1.477s.59-.345.718-1.134c.128-.79-.126-1.255-.126-1.255s.528-.302.613-1.375c.084-1.072-.233-1.356-.233-1.356s.592-.567.465-1.822zM4.097 14.713c.558 0 1.01-.45 1.01-1.005V7.785c0-.555-.454-1.005-1.01-1.005H1.01C.45 6.78 0 7.23 0 7.785v5.923c0 .555.453 1.005 1.01 1.005h3.087zm-1.727-3.38c.717 0 1.182.446 1.182 1.134S3.087 13.6 2.37 13.6c-.718 0-1.183-.445-1.183-1.133s.465-1.134 1.183-1.134z"/></g></svg></span> 704 </div> 705</div> 706 707 <!-- Google tag (gtag.js) -->
vendor: 70 bytes, lines 707-708
707 708 <script async src="https://www.googletagmanager.com/gtag/js?id=
708G-7XC8Y2VZ9F
vendor: 18 bytes, lines 708-709
708"></script> 709
709<script> 710
vendor: 152 bytes, lines 710-714
710window.dataLayer = window.dataLayer || []; 711 function gtag(){dataLayer.push(arguments);} 712 gtag('js', new Date()); 713 714 gtag('config', '
714G-7XC8Y2VZ9F
vendor: 10 bytes, lines 714-715
714'); 715
715</script>
715 716 717
717<script> 718 function createCookie(e,o,t){if(t){var l=new Date;l.setTime(l.getTime()+24*t*60*60*1e3);var i="; expires="+l.toGMTString()}else var i="";document.cookie=e+"="+o+i+"; path=/"}function showHideBar(){var e=document.querySelectorAll(".awesome-bar")[0];document.documentElement.scrollTop>150?"big"==awesome_bar_state&&(awesome_bar_state="small",e.classList.add("header-show")):"small"==awesome_bar_state&&(awesome_bar_state="big",e.classList.remove("header-show"))}function resize_vid(){if(fluidEl.length){fluidEl=fluidEl[0];for(var e=fluidEl.clientWidth,o=0;o<allVideos.length;o++){var t=allVideos[o];t.width=e,t.height=e*t.getAttribute("data-aspectRatio")}}}document.querySelectorAll(".visit-medium")[0].onclick=function(){-1==document.cookie.indexOf("visited-medium")&&createCookie("visited-medium","true",3650)};for(var social_bars=document.querySelectorAll(".followus-twitter, .likeus-facebook"),i=0;i<social_bars.length;i++)social_bars[i].addEventListener("click",function(){-1==document.cookie.indexOf("liked")&&createCookie("liked","true",3650)});if(window.location.href.indexOf("/blog/")>-1)if(-1==document.cookie.indexOf("visited-medium"))document.querySelectorAll(".visit-medium")[0].classList.remove("hidden-bar-item"),"40px"==document.querySelectorAll("body")[0].style.marginTop&&(document.querySelectorAll(".visit-medium")[0].style.top="40px");else{var rand_index=Math.floor(2*Math.random()),social_network="";social_network=0==rand_index?".followus-twitter":".likeus-facebook",-1==document.cookie.indexOf("liked")&&(document.querySelectorAll(social_network)[0].classList.remove("hidden-bar-item"),"40px"==document.querySelectorAll("body")[0].style.marginTop&&(document.querySelectorAll(social_network)[0].style.top="40px"))}else if(-1==document.cookie.indexOf("bookmarked"))createCookie("bookmarked","true",3650),document.querySelectorAll(".bookmark")[0].classList.remove("hidden-bar-item"),"40px"==document.querySelectorAll("body")[0].style.marginTop&&(document.querySelectorAll(".bookmark")[0].style.top="40px");else{var rand_index=Math.floor(2*Math.random()),social_network="";social_network=0==rand_index?".followus-twitter":".likeus-facebook",-1==document.cookie.indexOf("liked")&&(document.querySelectorAll(social_network)[0].classList.remove("hidden-bar-item"),"40px"==document.querySelectorAll("body")[0].style.marginTop&&(document.querySelectorAll(social_network)[0].style.top="40px"))}var awesome_bar_state="big";window.onscroll=function(){showHideBar()},document.querySelectorAll(".hamburger")[0].onclick=function(){document.querySelectorAll(".side-menu")[0].classList.toggle("is-active"),document.querySelectorAll(".hamburger")[0].classList.toggle("is-active")};for(var allVideos=document.querySelectorAll("iframe[src^='https://player.vimeo.com'], iframe[src^='https://www.youtube.com'], object, embed"),fluidEl=document.querySelectorAll(".video-container"),i=0;i<allVideos.length;i++)allVideos[i].setAttribute("data-aspectRatio",allVideos[i].height/allVideos[i].width),allVideos[i].removeAttribute("height"),allVideos[i].removeAttribute("width");if(resize_vid(),window.addEventListener("resize",function(){resize_vid()},!0),document.querySelectorAll(".download-btn-wrapper").length&&(document.querySelectorAll(".download-btn-alt")[0].onclick=function(){-1==document.cookie.indexOf("one-download-today")&&(createCookie("one-download-today","true",1),document.location.href=document.querySelectorAll(".download-btn-alt")[0].getAttribute("data-download"))}),-1==document.cookie.indexOf("one-download-today")||(document.querySelectorAll(".download-btn-alt")[0].setAttribute("href",document.querySelectorAll(".download-btn-alt")[0].getAttribute("data-download")),document.querySelectorAll(".download-and-like")[0].style.display="none"),document.querySelectorAll(".social-facebook")[0].onclick=function(){ga("send","event","facebook button","click","facebook button")},document.querySelectorAll(".social-twitter")[0].onclick=function(){ga("send","event","twitter button","click","twitter button")},document.querySelectorAll(".likeus-facebook")[0].onclick=function(){ga("send","event","facebook banner","click","facebook banner")},document.querySelectorAll(".followus-twitter")[0].onclick=function(){ga("send","event","twitter banner","click","twitter banner")},document.querySelectorAll(".visit-medium")[0].onclick=function(){ga("send","event","medium banner","click","medium banner")},document.querySelectorAll(".affiliate-similar").length&&(document.querySelectorAll(".affiliate-similar")[0].onclick=function(){ga("send","event","blog post sidebar","click","blog post sidebar")}),document.querySelectorAll(".download-btn").length&&(document.querySelectorAll(".download-btn")[0].onclick=function(){"Download Instagram Logo"==document.querySelectorAll(".download-btn")[0].getAttribute("title")&&ga("send","event","Download Instagram Logo","click","Download Instagram Logo")}),window.location.href.indexOf("/logos/")>-1)for(var logoImages=document.querySelectorAll("img.big-resource"),i=0;i<logoImages.length;i++)logoImages[i].addEventListener("dragstart",function(){ga("send","event","Drag","click","Drag")}); 719 </script>
719 720 721</body> 722</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.