<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/xmark/pen/lkuoB?limit=all&page=50&q=food" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='//fonts.googleapis.com/css?family=Roboto:400,700|Roboto+Condensed:100,400|Roboto+Slab:100,400'><link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">html,
body {
height: 100%;
}
body {
background: -webkit-radial-gradient(circle, #8dcded, #0a2c3e);
background: radial-gradient(circle, #8dcded, #0a2c3e);
font-family: sans-serif;
line-height: 1.5;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.wrapper {
position: relative;
width: 1024px;
margin: 0 auto;
background: #fff;
padding: 3em;
box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.45);
}
.grid > li {
position: relative;
float: left;
width: 25%;
overflow: hidden;
border: 5px solid #fff;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
.grid > li:before {
content: "";
display: block;
padding-top: 100%;
}
.grid > li:nth-of-type(5n+1) {
width: 50%;
padding: 10px;
overflow: hidden;
clear: both;
}
.grid > li:nth-of-type(10n+6) {
float: right;
}
.grid > li div {
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 1em;
}
li div.rotate {
padding: 0;
}
.class1 {
background: #3629b8;
}
.class2 {
background: #a129b8;
}
.class3 {
background: #b82964;
}
.class4 {
background: #b85a29;
}
.class5 {
background: #abb829;
}
.class6 {
background: #40b829;
}
.class7 {
background: #29b87d;
}
.class8 {
background: #2987b8;
}
h3 {
font-family: "Roboto Slab", sans-serif;
font-size: 1.55em;
color: #fff;
font-weight: 100;
}
#fuzzytime {
text-align: center;
}
.iconbox i {
color: #fff;
width: 100%;
text-align: center;
margin-top: 20%;
}
.iconbox h3 {
text-align: center;
}
p {
font-family: "Roboto Condensed", sans-serif;
font-size: 1em;
color: #fff;
}
#news li a {
color: #fff;
text-decoration: none;
font-family: "Roboto Condensed", sans-serif;
}
.float-right {
max-width: 100%;
height: auto;
margin: 1em 0;
border: 5px solid rgba(255, 255, 255, 0.4);
}
.wooyeah {
overflow: hidden;
}
.animated {
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.delay {
-webkit-animation-delay: 0.30s;
animation-delay: 0.30s;
}
.delay-three {
-webkit-animation-delay: 0.60s;
animation-delay: 0.60s;
}
.delay-two {
-webkit-animation-delay: 1.0s;
animation-delay: 1.0s;
}
.delay-one {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.animated.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
.animated.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
</style></head><body>
<div class="wrapper cf">
<ul class="grid">
<li>
<div class="rotate" data-timing="5000">
<img src="http://lorempixel.com/500/500/people" alt="" />
<img src="http://lorempixel.com/500/500/nightlife" alt="" />
<img src="http://lorempixel.com/500/500/food" alt="" />
<img src="http://lorempixel.com/500/500/city" alt="" />
</div>
</li>
<li>
<div>
<h3 id="fuzzytime"></h3>
</div>
</li>
<li>
<div class="weather">
<h3 id="weather-name"></h3>
<p id="weather-description"></p>
<p id="weather-temp"></p>
<p id="weather-wind"></p>
</div>
</li>
<li>
<div>
<h3>Latest news</h3>
<ul id="news" data-timing="10000"></ul>
</div>
</li>
<li>
<div class="rotate">
<img src="http://lorempixel.com/300/300/nature" alt="" />
<img src="http://lorempixel.com/300/300/nightlife" alt="" />
<img src="http://lorempixel.com/300/300/people" alt="" />
<img src="http://lorempixel.com/300/300/food" alt="" />
</div>
</li>
<li>
<div class="rotate" data-timing="10000">
<div class="wooyeah">
<h3>Lorem ipsum dolor.</h3>
<img src="http://lorempixel.com/500/175/nature" alt="" class="float-right" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus nostrum explicabo eius assumenda minus delectus quis, numquam, aliquid natus nihil sunt inventore eveniet animi corporis. Reprehenderit fuga dolorum repellat, sed?</p>
</div>
<div class="wooyeah">
<h3>Expedita, sequi, quos.</h3>
<img src="http://lorempixel.com/500/175/nightlife" alt="" class="float-right" />
<p>Aliquid, reprehenderit, officia. Possimus veritatis ipsam modi in, alias sint fugit et sunt officiis odit numquam explicabo labore aperiam repellat, debitis quaerat, impedit, error. Mollitia magni maxime similique eum, atque.</p>
</div>
<div class="wooyeah">
<h3>Enim, voluptatem, explicabo.</h3>
<img src="http://lorempixel.com/500/175/city" alt="" class="float-right" />
<p>Assumenda unde ipsa totam molestiae sapiente libero omnis, inventore, obcaecati iure dolorum officiis culpa velit ratione reprehenderit enim optio qui soluta? Laudantium ab placeat facere similique ex fugiat, deleniti, officia?</p>
</div>
</div>
</li>
<li>
<div class="iconbox">
<i class="fa fa-twitter fa-5x"></i>
<h3>twitter</h3>
</div>
</li>
<li>
<div class="iconbox">
<i class="fa fa-facebook fa-5x"></i>
<h3>facebook</h3>
</div>
</li>
<li>
<div class="iconbox">
<i class="fa fa-codepen fa-5x"></i>
<h3>codepen</h3>
</div>
</li>
<li>
<div class="iconbox">
<i class="fa fa-google-plus fa-5x"></i>
<h3>Google Plus</h3>
</div>
</li>
<li>
<div>
<h3>Ex!</h3>
<p>Maxime tenetur, et aperiam nam odit temporibus perspiciatis?</p>
</div>
</li>
<li>
<div>
<h3>Fugit.</h3>
<p>Libero assumenda eos corporis, sequi soluta enim consequuntur?</p>
</div>
</li>
<li>
<div>
<h3>Fugiat.</h3>
<p>Iste, odio magnam, vero fugit voluptatum vitae pariatur!</p>
</div>
</li>
<li>
<div>
<h3>Quaerat.</h3>
<p>Neque dolor optio eum velit quam, id at.</p>
</div>
</li>
<li>
<div>
<h3>Minima.</h3>
<p>Error suscipit, reprehenderit ullam, laudantium est esse iusto!</p>
</div>
</li>
<li>
<div>
<h3>Totam.</h3>
<p>Cupiditate molestias natus beatae expedita. Ab, hic est.</p>
</div>
</li>
<li>
<div>
<h3>Voluptate.</h3>
<p>Porro necessitatibus, sint molestias ea reiciendis iusto voluptatem.</p>
</div>
</li>
<li>
<div>
<h3>Id.</h3>
<p>Dicta a facere consequatur labore cupiditate voluptas quo.</p>
</div>
</li>
<li>
<div>
<h3>Aperiam.</h3>
<p>Culpa facilis, delectus excepturi, dolore aspernatur repellat minus!</p>
</div>
</li>
<li>
<div>
<h3>Explicabo?</h3>
<p>Placeat tenetur culpa temporibus aliquam cumque veritatis tempora.</p>
</div>
</li>
</ul>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >var uniqueRandoms = [];
var numRandoms = 8;
function makeUniqueRandom() {
if (!uniqueRandoms.length) {
for (var i = 0; i < numRandoms; i++) {
uniqueRandoms.push(i);
}
}
var index = Math.floor(Math.random() * uniqueRandoms.length);
var val = uniqueRandoms[index];
uniqueRandoms.splice(index, 1);
return val;
}
var grid = document.querySelector(".grid").children;
for(var i=0; i<grid.length; i++) {
var toadd = "class" + (makeUniqueRandom() + 1)
grid[i].classList.add(toadd);
}
function looseTime() {
var d = new Date();
var h = d.getHours();
// if (h>12) {h=h-12}
function hours12(date) { return (date.getHours() + 24) % 12 || 12; }
var hour = new Array(12);
hour[1] = "one";
hour[2] = "two";
hour[3] = "three";
hour[4] = "four";
hour[5] = "five";
hour[6] = "six";
hour[7] = "seven";
hour[8] = "eight";
hour[9] = "nine";
hour[10] = "ten";
hour[11] = "eleven";
hour[12] = "twelve";
var hours = hour[hours12(d)];
var hourplus = hour[hours12(d)+1];
var report;
var m = d.getMinutes();
if (m < 10) {
report = "just after " + hours;
} else if (m >= 10 && m < 20) {
report = "quarter past " + hours;
} else if (m >= 20 && m < 30) {
report = "heading for half " + hours;
} else if (m >= 30 && m < 40) {
report = "just gone half " + hours;
} else if (m >= 40 && m < 50) {
report = "quarter to " + hourplus;
} else if (m >= 50) {
report = "getting on for " + hourplus;
}
document.getElementById("fuzzytime").innerHTML= report;
}
looseTime();
var doit = setInterval(function(){looseTime()}, 60000);
jQuery.ajax({
url: 'http://api.openweathermap.org/data/2.5/weather?q=Cambridge,UK&units=metric&APPID=48fa395ba290ba63613f94c639dced4a',
jsonp: 'callback',
dataType: 'jsonp',
cache: false,
success: function (response) {
jQuery('#weather-name').text(response.name);
jQuery('#weather-description').text('Outlook: ' + response.weather[0].description);
jQuery('#weather-temp').text('Temp: ' + response.main.temp + ' \u00B0\C');
jQuery('#weather-wind').text('Windspeed: ' + response.wind.speed + ' kph');
},
});
jQuery.ajax({
url: 'https://ajax.googleapis.com/ajax/services/search/news?v=1.0&rsz=8&q=javascript',
jsonp: 'callback',
dataType: 'jsonp',
cache: false,
success: function (data) {
jQuery(data.responseData.results).each(function (index, entry) {
var newsitem = '<li><a href="' + entry.url + '">' + entry.titleNoFormatting + '</a></li>';
jQuery('#news').append(newsitem);
});
jQuery.mark.rotate('#news');
},
});
(function (jQuery) {
jQuery.mark = {
rotate: function (options) {
var defaults = {
selector: '.rotate'
};
if (typeof options == 'string') defaults.selector = options;
var options = jQuery.extend(defaults, options);
return jQuery(options.selector).each(function () {
var obj = jQuery(this);
if(obj.attr("data-timing")) {
var pause = obj.attr( "data-timing" );
} else {
pause = '5000';
}
if(obj.attr("data-pause")) {
var delay = obj.attr( "data-pause" );
} else {
delay = '0';
}
var length = jQuery(obj).children().length;
var temp = 0;
function show() {
temp = (temp == length) ? 1 : temp + 1
jQuery(obj).children().hide();
jQuery(':nth-child(' + temp + ')', obj).fadeIn('slow')
};
function init() {
show();
var megap = setInterval(show, pause);
obj.hover(function () {
clearInterval(megap);
}, function () {
megap = setInterval(show, pause);
});
};
setTimeout(init, delay);
})
}
}
})(jQuery);
jQuery(function(){
jQuery.mark.rotate();
});
//# sourceURL=pen.js
</script>
</body></html>
