RT - Calendar Day

In this example below you will see how to do a RT - Calendar Day with some HTML / CSS and Javascript

Styled calendar day, using the Material UI. Testing out ideas

Thumbnail
This awesome code was written by 10Dimensional, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 10Dimensional ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>RT - Calendar Day</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="day">
  <span>1</span>
  <ul class="projects">
    <li>Project 1</li>
    <li>Project 2</li>
    <li>Project 3</li>
    <li>Project 4</li>
  </ul>
  <div class="ellipsis">
    <span>&#x25CF;</span>
    <span>&#x25CF;</span>
    <span>&#x25CF;</span>
  </div>
</div>  
  
 <div class="day two">
  <span>2</span>
  <ul class="projects">
    <li>Project 1</li>
    <li>Project 2</li>
    <li>Project 3</li>
    <li>Project 4</li>
  </ul>
  <div class="ellipsis">
    <span>&#x25CF;</span>
    <span>&#x25CF;</span>
    <span>&#x25CF;</span>
  </div>
</div> 
  
<div class="day three">
  <span>2</span>
  <ul class="projects">
    <li>Project 1</li>
    <li>Project 2</li>
    <li>Project 3</li>
    <li>Project 4</li>
  </ul>
  <div class="ellipsis">
    <span>&#x25CF;</span>
    <span>&#x25CF;</span>
    <span>&#x25CF;</span>
  </div>
<div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/10Dimensional/rt-calendar-day-MJYdOr */
body {
  text-align: center;
}

.day {
  background: #FF6347;
  width: 220px;
  min-height: 250px;
  margin: 20px 5px;
  color: white;
  display: inline-block;
  vertical-align: top;
}
.day.two {
  background: #7E57C2;
  text-align: left;
}
.day.three {
  background: #64B5F6;
}

.day > span {
  background: rgba(255, 255, 255, 0.2);
  width: 30px;
  height: 30px;
  display: inline-block;
  padding-top: 5px;
  font-weight: bold;
  color: white;
  text-align: center;
  margin: 10px 10px 5px;
  border-radius: 20px;
}

.three > span {
  background: transparent;
}

.projects li {
  text-align: center;
  background: rgba(255, 255, 255, 0.2);
  margin: 9px 12px;
  font-size: 13px;
  padding: 3px 0;
  border-radius: 2px;
  cursor: pointer;
}
.projects li:hover {
  background: #fff;
  color: #FF6347;
  transition: background .2s, color .2s ease-in-out;
}

.two .projects {
  padding-left: 10px;
  margin-left: 25px;
  border-left: solid rgba(0, 0, 0, 0.15) 2px;
}

.ellipsis {
  margin: 0 auto;
  width: 60px;
  border-radius: 30px;
  text-align: center;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
}
.ellipsis:hover {
  background: #fff;
  color: #FF6347;
  transition: background .2s, color .2s ease-in-out;
}
.three .ellipsis {
  background: transparent;
  font-size: 10px;
  float: right;
}

Comments