Updated index

content/home.php

@@ -94,26 +94,29 @@ Design::header($setup, 0);
     <div class="content-slice pull_right">
         <h1>Event center</h1>
 
-        
+
         <?php
-            foreach (Get::publicEventListHome(3) as $result) {
-                ?>
+        foreach (Get::publicEventListHome(3) as $result) {
+            ?>
 
-                <div class="event-item">
-                    <div class="event-date"><?php echo date('d', $result['time']); ?><span><?php echo date('M', $result['time']); ?></span></div>
-                    <div class="event-content">
-                        <div class="event-left">
+            <div class="event-item2">
+
+                <div class="event-content2">
+                    <div class="event-left2">
+                        <div class="event-image"><img src="<?php echo $result['img']; ?>" alt="eventimage" /></div>
+                        <div class="event-con">
                             <h1><?php echo $result['title'] ?></h1>
-                            <p>Content goes here</p>
+                            <p><?php echo strip_tags($result['description']); ?></p>
                         </div>
-                        <div class="event-right"><a href="?page=eventview&e=<?php echo $result['id'] ?>"><button>Læs Mere</button></a></div>
                     </div>
+                    <div class="event-right2"><div class="arrow"><a href="?page=eventview&e=<?php echo $result['id'] ?>"><i class="fa fa-chevron-right"></i></a></div></div>
                 </div>
+            </div>
+
+            <?php
+        }
+        ?>
 
-                <?php
-            }
-            ?>
-        
 
 
     </div>

css/style.css

@@ -213,6 +213,14 @@ a:hover {
     box-sizing:border-box;
 }
 
+.event-item2 {
+    width:480px;
+    height:90px;
+    max-height:90px !important;
+    margin-top:10px;
+    box-sizing:border-box;
+}
+
 .event-date {
     width:50px;
     height:50px;
@@ -234,7 +242,18 @@ a:hover {
 }
 
 .event-content {
-    width:370px;
+    width:400px;
+    height:90px;
+    float:left;
+    background-color:#333333;
+    margin-top:0px;
+    padding:5px 5px 5px 5px;
+    border-radius:2px;
+    box-sizing:border-box;
+}
+
+.event-content2 {
+    width:420px;
     height:90px;
     float:left;
     background-color:#333333;
@@ -256,7 +275,7 @@ a:hover {
 
 .event-left {
     padding:10px 10px 10px 10px;
-    width:250px;
+    width:270px;
     float:left;
     font-size:12px;
     font-weight:normal;
@@ -266,6 +285,32 @@ a:hover {
     height:70px;
 }
 
+.event-left2 {
+    padding:10px 10px 10px 10px;
+    width:350px;
+    float:left;
+    font-size:12px;
+    font-weight:normal;
+
+    text-overflow: ellipsis;
+    overflow: hidden;
+    height:90px;
+}
+
+.event-left2 h1 {
+    max-width:200px;
+    overflow:hidden;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.event-con {
+    width:400px;
+    margin-left:50px;
+}
+
+
 .event-left h1 {
     max-width:250px;
     overflow:hidden;
@@ -281,10 +326,28 @@ a:hover {
     font-size:10px;
 }
 
+.event-image {
+    width:125px;
+    height:70px;
+    float:left;
+    margin-right:10px;
+    margin-top:-5px;
+}
+
+.event-image img {
+    width:125px;
+    height:70px;
+}
+
+
 .event-right {
     float:left;
 }
 
+.event-right2 {
+    float:right;
+}
+
 .event-right a:before {
     content: "";
     padding-right: 3px;
@@ -292,6 +355,13 @@ a:hover {
     font-size:13px;
 }
 
+.event-right2 a:before {
+    content: "";
+    padding-right: 3px;
+    color:#0093a1;
+    font-size:13px;
+}
+
 .event-right button {
     width:90px;
     height:25px;
@@ -302,6 +372,20 @@ a:hover {
     margin-top:30%;
 }
 
+.event-right2 .arrow {
+    margin-top:50%;
+    width:25px;
+    float:right;
+}
+
+.event-right2 .arrow a {
+    text-align:center;
+    color:red;
+    font-size:25px;
+    padding:10px;
+    float:right;
+}
+
 .eventextra {
     height:80px;
 }