Quote App Concept by Matthew Bird

Developer
Boylett
Size
4,937 Kb
Views
34,408
  1. Quote App Concept by Matthew Bird Previews
  2. Quote App Concept by Matthew Bird HTML Codes
  3. Quote App Concept by Matthew Bird CSS Codes
  4. Quote App Concept by Matthew Bird JS Codes

How do I make an quote app concept by matthew bird?

Go take a look at this amazing dribbble by Matthew Bird! http://dribbble.com/shots/1436240-Quote-App-Concept. What is a quote app concept by matthew bird? How do you make a quote app concept by matthew bird? This script and codes were developed by Boylett on 20 August 2022, Saturday.

Quote App Concept by Matthew Bird Previews
IQ Test

Quote App Concept by Matthew Bird - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Quote App Concept by Matthew Bird</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Gafata);
@import url(http://c.boylett.uk/fonts/fontawesome/fontawesome.css);
html
{ position: absolute; width: 100%; height: 100%; background: url(http://c.boylett.co.uk/images/wallpapers/008.jpg); background-size: 100% 100%;
}
body
{ font-family: "Gafata", sans-serif; font-weight: normal; text-shadow: 0 0 1px #FFF; color: #FFF;
}
.slider
{ position: relative; width: 600px; height: 450px; overflow: hidden; margin: 50px auto; border-radius: 15px; box-shadow: 0 5px 25px rgba(0, 0, 0, .33);
}
.slider > .widget
{ position: absolute; width: 99999999px; height: 450px; white-space: nowrap;
}
.slider > .widget.do-slide
{ animation-name: do-slide; animation-iteration-count: 1; animation-fill-mode: forwards; animation-duration: 1s; animation-timing-function: ease-out;
}
.slider > .widget.backwards-slide
{ animation-name: do-slide; animation-iteration-count: 1; animation-fill-mode: backwards; animation-duration: 1s; animation-direction: reverse; animation-timing-function: ease-in;
}
.slider > .widget > li
{ position: relative; float: left; width: 600px; height: 450px; background: #000; white-space: normal;
}
.slider > .widget > li, .slider > .widget > li > img
{ width: 600px; height: 450px;
}
.slider > .widget > li > img { opacity: .6 }
.slider > .widget > li > blockquote
{ position: absolute; z-index: 1; top: 25%; left: 50%; width: 420px; margin: 0 0 0 -210px; text-align: center; font-size: 24px; line-height: 28px;
}
.slider > .widget > li > blockquote > credit
{ display: block; position: absolute; top: 130%; right: 7%; font-size: 18px;
}
.slider > .widget > li > blockquote > credit:before
{ content: "- "; padding: 0 5px 0 0; font-size: 14px;
}
.slider > .controls
{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.slider > .controls > .top
{ position: absolute; z-index: 2; top: 0; right: 0; left: 0; padding: 20px;
}
.slider > .controls > .top > a
{ display: block; width: 20px; height: 20px; line-height: 20px; vertical-align: middle; text-align: center; text-decoration: none; font-size: 12px; color: #FFF; border: 2px solid #FFF; border-radius: 50%;
}
.slider > .controls > .top > a[href="#close"] { float: right }
.slider > .controls > .bottom
{ position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; padding: 20px 25%; text-align: center;
}
.slider > .controls > .bottom > label
{ font-size: 14px; font-weight: 300; letter-spacing: 1px; opacity: .66;
}
.slider > .controls > .bottom > hr
{ display: block; margin: 13px 0; height: 1px; background: transparent; border: none; border-top: 1px solid rgba(255, 255, 255, .25); border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.slider > .controls > .bottom > .buttons > a
{ margin: 0 15px; text-decoration: none; font-size: 18px; color: #FFF;
}
.slider > .controls > .bottom > .buttons > a[href="#next"] { margin: 0; float: right }
.slider > .controls > .bottom > .buttons > a[href="#prev"] { margin: 0; float: left }
@keyframes do-slide
{ 0% { left: 0 } 100% { left: -600px }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- Hey! Go take a look at Matthew Bird's positively wonderful dribbble shot! http://dribbble.com/shots/1436240-Quote-App-Concept
-->
<div class="slider"> <ul class="widget"> <li> <img src="http://c.boylett.uk/generic/image_jpg_00005.jpg" /> <blockquote> Culture is a mass hallucination, and when you step outside the mass hallucination you see it for what it's worth. <credit>Terence Mckenna</credit> </blockquote> </li> <li> <img src="http://25.media.tumblr.com/ae324e7244c389e47e1095065d6969db/tumblr_n1iq25Wq701st5lhmo1_1280.jpg" /> <blockquote> The pessimist complains about the wind;<br /> the optimist expects it to change;<br /> the realist adjusts the sails. <credit>William Arthur Ward</credit> </blockquote> </li> <li> <img src="http://25.media.tumblr.com/d2f4810531ede7d2ad23504b695cd229/tumblr_n1iq6fDee61st5lhmo1_1280.jpg" /> <blockquote> Experience is not what happens to you;<br /> it's what you do with what happens to you. <credit>Aldous Huxley</credit> </blockquote> </li> <li> <img src="http://31.media.tumblr.com/f0cb0d2bc887555434fa3afe0530e1cf/tumblr_n1ipr3bTo11st5lhmo1_1280.jpg" /> <blockquote> By three methods we may learn wisdom: First, by reflection, which is noblest; Second, by imitation, which is easiest; and third by experience, which is the bitterest. <credit>Confucius</credit> </blockquote> </li> </ul> <div class="controls"> <div class="top"> <a href="#close"><i class="fa fa-times"></i></a> <a href="#share"><i class="fa fa-reply"></i></a> </div> <div class="bottom"> <label>0 of 0</label> <hr /> <div class="buttons"> <a href="#next"><i class="fa fa-chevron-right"></i></a> <a href="#prev"><i class="fa fa-chevron-left"></i></a> <a href="#like"><i class="fa fa-thumbs-up"></i></a> <a href="#search"><i class="fa fa-search"></i></a> <a href="#comments"><i class="fa fa-comments"></i></a> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Quote App Concept by Matthew Bird - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Gafata);
@import url(http://c.boylett.uk/fonts/fontawesome/fontawesome.css);
html
{ position: absolute; width: 100%; height: 100%; background: url(http://c.boylett.co.uk/images/wallpapers/008.jpg); background-size: 100% 100%;
}
body
{ font-family: "Gafata", sans-serif; font-weight: normal; text-shadow: 0 0 1px #FFF; color: #FFF;
}
.slider
{ position: relative; width: 600px; height: 450px; overflow: hidden; margin: 50px auto; border-radius: 15px; box-shadow: 0 5px 25px rgba(0, 0, 0, .33);
}
.slider > .widget
{ position: absolute; width: 99999999px; height: 450px; white-space: nowrap;
}
.slider > .widget.do-slide
{ animation-name: do-slide; animation-iteration-count: 1; animation-fill-mode: forwards; animation-duration: 1s; animation-timing-function: ease-out;
}
.slider > .widget.backwards-slide
{ animation-name: do-slide; animation-iteration-count: 1; animation-fill-mode: backwards; animation-duration: 1s; animation-direction: reverse; animation-timing-function: ease-in;
}
.slider > .widget > li
{ position: relative; float: left; width: 600px; height: 450px; background: #000; white-space: normal;
}
.slider > .widget > li, .slider > .widget > li > img
{ width: 600px; height: 450px;
}
.slider > .widget > li > img { opacity: .6 }
.slider > .widget > li > blockquote
{ position: absolute; z-index: 1; top: 25%; left: 50%; width: 420px; margin: 0 0 0 -210px; text-align: center; font-size: 24px; line-height: 28px;
}
.slider > .widget > li > blockquote > credit
{ display: block; position: absolute; top: 130%; right: 7%; font-size: 18px;
}
.slider > .widget > li > blockquote > credit:before
{ content: "- "; padding: 0 5px 0 0; font-size: 14px;
}
.slider > .controls
{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.slider > .controls > .top
{ position: absolute; z-index: 2; top: 0; right: 0; left: 0; padding: 20px;
}
.slider > .controls > .top > a
{ display: block; width: 20px; height: 20px; line-height: 20px; vertical-align: middle; text-align: center; text-decoration: none; font-size: 12px; color: #FFF; border: 2px solid #FFF; border-radius: 50%;
}
.slider > .controls > .top > a[href="#close"] { float: right }
.slider > .controls > .bottom
{ position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; padding: 20px 25%; text-align: center;
}
.slider > .controls > .bottom > label
{ font-size: 14px; font-weight: 300; letter-spacing: 1px; opacity: .66;
}
.slider > .controls > .bottom > hr
{ display: block; margin: 13px 0; height: 1px; background: transparent; border: none; border-top: 1px solid rgba(255, 255, 255, .25); border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.slider > .controls > .bottom > .buttons > a
{ margin: 0 15px; text-decoration: none; font-size: 18px; color: #FFF;
}
.slider > .controls > .bottom > .buttons > a[href="#next"] { margin: 0; float: right }
.slider > .controls > .bottom > .buttons > a[href="#prev"] { margin: 0; float: left }
@keyframes do-slide
{ 0% { left: 0 } 100% { left: -600px }
}

Quote App Concept by Matthew Bird - Script Codes JS Codes

function roll()
{ var slider = $('.slider > .widget'); slider.removeClass('do-slide'); $('.slider > .controls > .bottom > label').html(slider.find('> li').first().attr('num') + ' of ' + slider.find('> li').size()); window.sliderTimeout = setTimeout(function() { slider.addClass('do-slide'); window.sliderTimeout = setTimeout(function() { slider.find('> li').first().appendTo(slider); roll(); }, 1000); }, 5000);
}
$(function()
{ $('.slider > .widget > li').each(function() { $(this).attr('num', $(this).index() + 1); }); $('.slider a').click(function() { switch($(this).attr('href')) { case '#share': alert('You clicked share!\nGood for you! :)'); break; case '#close': alert('This would trigger a widget.close() event'); break; case '#like': alert('You clicked like!\nAwesome! :D'); break; case '#search': alert('This would trigger a modal with a search box'); break; case '#comments': alert('This would trigger a modal with any comments'); break; case '#prev': window.clearTimeout(window.sliderTimeout); $('.slider > .widget').addClass('backwards-slide').find('> li').last().prependTo('.slider > .widget'); window.sliderTimeout = setTimeout(function() { $('.slider > .widget').removeClass('backwards-slide'); roll(); }, 1000); break; case '#next': window.clearTimeout(window.sliderTimeout); $('.slider > .widget').addClass('do-slide'); window.sliderTimeout = setTimeout(function() { $('.slider > .widget').removeClass('do-slide').find('> li').first().appendTo('.slider > .widget'); roll(); }, 1000); break; } return false; }); roll();
});
Quote App Concept by Matthew Bird - Script Codes
Quote App Concept by Matthew Bird - Script Codes
Home Page Home
Developer Boylett
Username boylett
Uploaded August 20, 2022
Rating 4.5
Size 4,937 Kb
Views 34,408
Do you need developer help for Quote App Concept by Matthew Bird?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Boylett (boylett) Script Codes
Name
Procreate File Viewer
Countdown by David Jones
Animation Experiment
Amusement Park Ticket
Form by Andrew Coyle
Time Tracker Widget by Martin David
Commit Button by Andrew Coyle
Music Player by Sebastian Beltz
Simple Progressbar
Food Widget by Andreea Nicolaescu
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!