feat: events page

1 files changed, 52 insertions, 0 deletions

diff --git a/style.css b/style.css
index 15978f7..899ceec 100644
--- a/style.css
+++ b/style.css
@@ -27,12 +27,17 @@ abbr{
     padding: 20px;
     border-radius: 10px;
     background: linear-gradient(45deg, #dbc562aa, #92878dbb);
+}
+
+.audio,
+.date-cont{
     box-shadow: #111 10px 20px 15px;
     transition-property: box-shadow, transform;
     transition-duration: .5s;
     transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
+.date-cont:hover,
 .audio:hover {
     box-shadow: #111 15px 25px 30px;
     transform: scale(100.5%);
@@ -52,4 +57,51 @@ audio {
             linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
             linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
     box-shadow: #111 2px 2px 10px;
+}
+
+.date{
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}
+
+.date hr{
+	transform: rotate(90deg);
+	width: 2em;
+	height: 0;
+	border: 1px solid white;
+}
+
+.date div{
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.date-cont{
+	padding-left: 10px;
+	padding-right: 10px;
+	margin-bottom: 10px;
+	margin-left: 10%;
+	margin-right: 10%;
+    border-radius: 10px;
+    background: linear-gradient(45deg, #dbc562aa, #92878dbb);
+	color: white;
+    display: flex;
+    flex-direction: column;
+}
+
+.date-cont img{
+    display: none;
+    max-height: 50vh;
+    margin: auto;
+    margin-bottom: 20px;
+}
+
+.date-cont.toggle img {
+    display: block;
+}
+
+.date-desc {
+    text-align: left;
 }
\ No newline at end of file