JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.jorisvandijk.com/example/js/jquery.localscroll-1.2.7-min.js"></script>
<script src="http://www.jorisvandijk.com/example/js/jquery.scrollTo-1.4.2-min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>kliko.al</title>
<meta charset="utf-8">
<link rel="stylesheet" type= "text/css" media="all" href="/home/eralda/Documents/webpage/home_ver2.css" />
<script type="text/javascript" src="js/jquery.cycle.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
</head>
<body>
<div id="container">
<div class="heading1">
<h2><a href="" rel4="bookmark">Fun & Entertainment</a></h2>
</div> <!-- end of heading div-->
<ul>
<div class="content">
<li><div class="post-content1">
<div class="topic-content">
<div class="event">
<a href="/events/event/2012/oct/17/1060/ikona-shqiptare/" style="display: none;"></a>
<div class="event-top"> </div> <!-- end of event-top div-->
<div class="event-date">
<strong class="event-day">06</strong><span class="event-month">Nëntor</span>
</div> <!-- end of event-date div-->
<div class="event-timeprice">
<span class="icon ico-time"></span><strong class="event-time">10:00 AM</strong>
<br>
<span class="icon ico-bookmark"></span><strong class="event-price">200 LEK</strong>
</div> <!-- end of event-timeprice div-->
<div class="event-content">
<img src="/home/eralda/Documents/webpage/fun1.jpg" alt="Event Poster" title="IKONA SHQIPTARE " height="120" width="180">
<h3 class="event-title">IKONA SHQIPTARE </h3>
<p class="event-description quiet">Galeria Kombëtare e Arteve hap në 17 Tetor 2012 ora ...</p>
</div> <!-- end of event-content...
CSS
/* CSS for kliko.al site*/
/* ---------------------------------------------------- */
/* GLOBAL
/* ---------------------------------------------------- */
* {margin: 0; padding: 0;}
html {
font-size: 76%;}
/*src: http://subtlepatterns.com/?p=1045 */
body {
font-family: Georgia, sans-serif;
background-color: white;
line-height: 125%;
padding: 15px;
background: url('green.jpg');
}
#container {
width: 1000px;
overflow: hidden;
margin: 50px auto;
background: url('green.jpg');;
}
/*header*/
header {
width: 800px;
margin: 40px auto;
}
header h1 {
text-align: center;
font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}
header p {
font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
text-align: justify;
}
#tagline p {
font-style: italic;
font-family: Verdana, Times, sans-serif;
}
/*photobanner*/
.content{
height: 233px;
width: 3550px;
margin-bottom: 80px;
}
/*keyframe animations*/
.event {
-webkit-animation: bannermove 30s linear;
-webkit-user-drag: auto;
-moz-animation: bannermove 30s linear;
-ms-animation: bannermove 30s linear;
-o-animation: bannermove 30s linear;
animation: bannermove 30s linear;
}
@keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -725px;
}
}
@-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -725px;
}
}
@-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -725px;
}
}
@-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -725px;
}
}
@-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -725px;
}
}
.content {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}
.content img {
-webkit-transition: all 1.0s ease;
-moz-transition: all 1.0s ease;
-o-transition: all 1.0s ease;
...