Little Calendar listing

Developer
John Riordan
Size
4,329 Kb
Views
30,360
  1. Little Calendar listing Previews
  2. Little Calendar listing HTML Codes
  3. Little Calendar listing CSS Codes

How do I make an little calendar listing?

What is a little calendar listing? How do you make a little calendar listing? This script and codes were developed by John Riordan on 22 August 2022, Monday.

Little Calendar listing Previews
IQ Test

Little Calendar listing - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Little Calendar listing</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<ul class="eventCards"> <li class="card"> <div class="cardInner" style="background:url('http://upload.wikimedia.org/wikipedia/commons/0/0b/OHL-Hockey-Plymouth-Whalers-vs-Saginaw-Spirit.jpg')no-repeat center center;background-size:cover;"> <div class="calendar"> <span class="month">April</span> <span class="date">28</span> </div> <h1 class="eventTitle">This is the title of an event that is really long and is probably actually too long to behonest</h1> <b class="gradient"></b> </div> </li> <li class="card"> <div class="cardInner"> <div class="calendar"> <span class="month">April</span> <span class="date">28</span> </div> <h1 class="eventTitle">This is the title of an event</h1> <b class="gradient"></b> </div> </li> <li class="card"> <div class="cardInner" style="background:url('http://upload.wikimedia.org/wikipedia/commons/0/0b/OHL-Hockey-Plymouth-Whalers-vs-Saginaw-Spirit.jpg')no-repeat center center;background-size:cover;"> <div class="calendar"> <span class="month">April</span> <span class="date">28</span> </div> <h1 class="eventTitle">This is the title of an event</h1> <b class="gradient"></b> </div> </li> <li class="card"> <div class="cardInner"> <div class="calendar"> <span class="month">April</span> <span class="date">28</span> </div> <h1 class="eventTitle">This is the title of an event</h1> <b class="gradient"></b> </div> </li> <li class="card"> <div class="cardInner"> <div class="calendar"> <span class="month">April</span> <span class="date">28</span> </div> <h1 class="eventTitle">This is the title of an event</h1> <b class="gradient"></b> </div> </li>
</ul>
</div> <script src='http://use.edgefonts.net/source-sans-pro.js'></script>
</body>
</html>

Little Calendar listing - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { font-family: source-sans-pro, serif; font-weight: normal; font-size: 130%; line-height: 1.5; -webkit-font-smoothing: antialiased; background: #e7e7e7;
}
.container { max-width: 700px; margin: 0 auto;
}
.eventCards { margin: 0; padding: 0; list-style: none; width: 100%;
}
.card { padding: 5px; border: 1px solid #d5d5d5; height: 200px; margin: 10px; border-radius: 5px; background: white; opacity: 0.8; -moz-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out;
}
.card:hover { opacity: 1;
}
.cardInner { position: relative; padding: 5px; height: 100%; border-radius: 4px; border: 1px solid #d5d5d5;
}
.cardInner:after { content: ""; display: table; clear: both;
}
.cardInner b { position: absolute; top: 0; bottom: 0; left: 0; right: 0; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFCC0000', endColorstr='#FF000000'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.8)), color-stop(100%, rgba(0, 0, 0, 0))); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%); border-radius: 4px;
}
.eventTitle { margin: 10px 0 0 0; font-size: 1.2em; line-height: 1em; color: white; position: relative; z-index: 3; text-shadow: 0 1px black; width: 80%;
}
.calendar, .eventTitle { float: left;
}
.calendar { height: 80px; width: 80px; margin-right: 10px; position: relative; background: white; z-index: 3; border-radius: 4px; line-height: 100%; cursor: pointer; -webkit-user-select: none;
}
.calendar::after, .calendar::before { height: 40px; position: absolute; left: 0; background: black; content: ''; background: white; border: 1px solid #d5d5d5; border-radius: 4px; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
.calendar::after { bottom: -3px; z-index: -1; width: 90%; margin-left: 5%; content: '';
}
.calendar::before { bottom: -5px; z-index: -2; width: 80%; margin-left: 10%;
}
.calendar:hover::after { bottom: -18px; z-index: -1; width: 90%; margin-left: 5%; content: '';
}
.calendar:hover::before { bottom: -20px; z-index: -2; width: 80%; margin-left: 10%;
}
.calendar:active { -moz-transform: translateY(2px); -ms-transform: translateY(2px); -webkit-transform: translateY(2px); transform: translateY(2px);
}
.calendar .date, .calendar .month { display: block; width: 100%; font-weight: 900; text-align: center;
}
.calendar .month { background: red; color: white; font-size: 15px; padding: 1px 0; text-shadow: 0 1px #910f17; background-color: #cf2d2d; background: #cf2d2d; letter-spacing: 0; border-top-left-radius: 4px; border-top-right-radius: 4px; box-shadow: inset 0 1px rgba(255, 255, 255, 0.25);
}
.calendar .date { font-size: 45px; color: #333333; background: white; padding: 18px 0; border-bottom: 1px solid #d5d5d5; border-left: 1px solid #d5d5d5; border-right: 1px solid #d5d5d5; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;
}
Little Calendar listing - Script Codes
Little Calendar listing - Script Codes
Home Page Home
Developer John Riordan
Username JohnRiordan
Uploaded August 22, 2022
Rating 3
Size 4,329 Kb
Views 30,360
Do you need developer help for Little Calendar listing?

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

John Riordan (JohnRiordan) Script Codes
Name
Location marker - Pulse
A Pen by John Riordan
Kick content off page
Square Wallet UI - WIP
Draw svg animation
Compress panels
Thermostat Thinger
Progressive form
Montoro branding
Feature article layout
Create amazing sales emails with AI!

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