Cards Finish

public/css/cards.css

@@ -25,12 +25,17 @@
   background-clip: padding-box;
   position: relative;
   z-index: -1;
+  width: 100%;
 }
 .card .card-image span.card-title {
   position: absolute;
   bottom: 0;
   left: 0;
-  padding: 16px;
+  padding-left: 16px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  width: 100%;
+  background: rgba(100%, 100%, 100%, 0.5);
 }
 .card .card-content {
   padding: 16px;
@@ -58,4 +63,64 @@
 .card .card-action a:hover {
   color: #1f2d54;
   text-decoration: none;
-}
+}
\ No newline at end of file
+
+/* Draws the shape of de cal icon */
+.card .card-image date {
+/* 	Copperred mainshape */
+	width: 100px;
+	height: 100px;
+	background: #e8462b;
+	position: absolute;
+	top: 5px;
+	right: 5px;
+	-webkit-clip-path: polygon(100% 0, 100% 40%, 85% 50%, 100% 60%, 100% 100%, 0% 100%, 0 60%, 15% 50%, 0 40%, 0 0);
+	clip-path: polygon(100% 0, 100% 40%, 85% 50%, 100% 60%, 100% 100%, 0% 100%, 0 60%, 15% 50%, 0 40%, 0 0);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+/*Day Number*/
+.card .card-image div.day {
+	text-align: center;
+	font-size: 46px;
+	color: white;
+	line-height: 46px;
+    height: 46px;
+    margin-top: 2px;
+  }
+
+/*month */
+.card .card-image div.month {
+	text-align: center;
+	font-size: 12px;
+	color: white;
+	margin-top: 10px;
+	line-height: 12px;
+    height: 12px;
+}
+
+/*starttime Number*/
+.card .card-image div.starttime {
+	text-align: center;
+	font-size: 12px;
+	color: white;
+	line-height: 12px;
+    height: 12px;
+    margin-top: 5px;
+}
+
+.card .card-image date-overlay {
+/* Grey transparent overlay */
+	width: 100%;
+	height: 100%;
+	padding-bottom: 75%;
+	background: rgba(0%, 0%, 0%, 0.3);
+	position: absolute;
+	top: 0;
+	right: 0;
+	-webkit-clip-path: polygon(100% 0, 100% 40%, 85% 50%, 15% 50%, 0 40%, 0 0);
+	clip-path: polygon(100% 0, 100% 40%, 85% 50%, 15% 50%, 0 40%, 0 0);
+}
+

public/index.html

@@ -112,6 +112,32 @@
             });
         });
     </script>
+    
+    <div class="col-xs-12 col-md-4 col-lg-3">
+				 	<div class="card">
+				 		<div class="card-image">
+				 			<img class="img-responsive" src="http://cdn0.wideopencountry.com/wp-content/uploads/2015/07/JamCheesecakesInAJarTall-793x526.png">
+				 			<date>
+				 			<div class="month">October</div>
+				 			<div class="day">29</div>
+				 			<div class="starttime">18:00</div>
+				 			<date-overlay></date-overlay>
+				 			</date>
+				 			<span class="card-title">Jarcakebakery @ FoodLab</span>
+				 			
+				 		</div>
+                
+				 		<div class="card-content">
+				 			<p>This is the best event like ever! You can bake some jarcakes and eat the afterwards all by yourself.  </p>
+				 		</div>
+                
+				 		<div class="card-action">
+				 			<a href="#" target="new_blank">Zum Event</a>
+				 			<a href="#" target="new_blank">Anmeldung</a>
+				 			<a href="#" target="new_blank">Im Kalender speichern</a>
+                		</div>
+            		</div>
+        		</div>
 </body>
 
 </html>