Einstien Quotes

Developer
Barbara Laird
Size
5,220 Kb
Views
4,048
  1. Einstien Quotes Previews
  2. Einstien Quotes HTML Codes
  3. Einstien Quotes CSS Codes
  4. Einstien Quotes JS Codes

How do I make an einstien quotes?

An incomplete implementation of http://dribbble.com/shots/1383332-Author-Quotes-Ui by http://dribbble.com/bluroon. What is a einstien quotes? How do you make a einstien quotes? This script and codes were developed by Barbara Laird on 16 January 2023, Monday.

Einstien Quotes Previews
IQ Test

Einstien Quotes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Einstien Quotes</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.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(https://fonts.googleapis.com/css?family=Nunito:400,700);
body { background-color: #4c4f52; font-family: 'Nunito', sans-serif; font-size: 14pt;
}
.slider { color: white; width: 315px; height: 375px; display: block; position: relative; box-shadow: 0px 0px 6px 3px #303234, 0 30px 20px -15px #303234; overflow: hidden;
}
.slider::before { content: ""; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/81117/albert-einstein.png); background-size: cover; opacity: 0.10; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1;
}
.slider > .slide { top: 65px; position: absolute;
}
.slider > .counter { display: block; position: absolute; top: 18px; left: 18px; z-index: 999;
}
.slider > .progress { width: 0px; height: 5px; background-color: #2ec7bf; display: block; position: absolute; bottom: 0; left: 0; z-index: 999;
}
.slider > .progress::before { content: ''; width: 315px; height: 5px; display: block; position: absolute; bottom: 0; left: 0; z-index: 998; background-color: #2ec7bf; opacity: .25;
}
.center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.quote { padding: 0 20px; font-size: 18pt; text-align: center;
}
.quote::before { content: '\f10d '; font-family: FontAwesome; color: #2ec7bf; font-size: 18pt;
}
.quote::after { content: ' \f10e'; font-family: FontAwesome; color: #2ec7bf; font-size: 18pt;
}
.author { width: 315px; position: absolute; left: 0; bottom: 23px; right: 0; margin: auto; text-align: center;
}
.author img { width: 62px; height: 62px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 5px solid #2ec7bf; position: absolute; left: 0; bottom: 25px; right: 0; margin: auto;
}
.love { border-radius: 50%; border: 2px solid white; padding: 4px 4px 2px 4px; right: 18px; top: 16px; position: absolute; content: '\f08a'; font-family: FontAwesome; display: block;
}
.love:hover:before { color: #2ec7bf; content: '\f004';
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<!-- * Font Awesome by Dave Gandy - http://fontawesome.io */ -->
<div class='slider center'> <div class='counter'></div> <div class='lang'></div> <div class='love fa fa-heart-o'></div> <div class='progress'></div> <div class='slide'> <div class='quote'>The difference between stupidy and genius is that genius has its limits.</div> </div> <div class='slide'> <div class='quote'>Before God we are all equally wise - and equally foolish.</div> </div> <div class='slide'> <div class='quote'>I never teach my pupils. I only attempt to provide the conditions in which they can learn.</div> </div> <div class='slide'> <div class='quote'>Perfection of means and confusion of ends seems to characterize our age.</div> </div> <div class='slide'> <div class='quote'>If you are out to describe the truth, leave elegance to the tailor.</div> </div> <div class='slide'> <div class='quote'>It is a miracle that curiosity survives formal education.</div> </div> <div class='author'> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/81117/einstein_1.png'> ALBERT EINSTIEN </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>

Einstien Quotes - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Nunito:400,700);
body { background-color: #4c4f52; font-family: 'Nunito', sans-serif; font-size: 14pt;
}
.slider { color: white; width: 315px; height: 375px; display: block; position: relative; box-shadow: 0px 0px 6px 3px #303234, 0 30px 20px -15px #303234; overflow: hidden;
}
.slider::before { content: ""; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/81117/albert-einstein.png); background-size: cover; opacity: 0.10; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1;
}
.slider > .slide { top: 65px; position: absolute;
}
.slider > .counter { display: block; position: absolute; top: 18px; left: 18px; z-index: 999;
}
.slider > .progress { width: 0px; height: 5px; background-color: #2ec7bf; display: block; position: absolute; bottom: 0; left: 0; z-index: 999;
}
.slider > .progress::before { content: ''; width: 315px; height: 5px; display: block; position: absolute; bottom: 0; left: 0; z-index: 998; background-color: #2ec7bf; opacity: .25;
}
.center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
}
.quote { padding: 0 20px; font-size: 18pt; text-align: center;
}
.quote::before { content: '\f10d '; font-family: FontAwesome; color: #2ec7bf; font-size: 18pt;
}
.quote::after { content: ' \f10e'; font-family: FontAwesome; color: #2ec7bf; font-size: 18pt;
}
.author { width: 315px; position: absolute; left: 0; bottom: 23px; right: 0; margin: auto; text-align: center;
}
.author img { width: 62px; height: 62px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 5px solid #2ec7bf; position: absolute; left: 0; bottom: 25px; right: 0; margin: auto;
}
.love { border-radius: 50%; border: 2px solid white; padding: 4px 4px 2px 4px; right: 18px; top: 16px; position: absolute; content: '\f08a'; font-family: FontAwesome; display: block;
}
.love:hover:before { color: #2ec7bf; content: '\f004';
}

Einstien Quotes - Script Codes JS Codes

var current = 0, max = $(".slider > .slide").length;
$(".slider > .slide:gt(0)").hide();
$('.counter').text('1 of ' + max);
setInterval(function() { $('.slider > .slide:first') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('.slider'); current++; if (current >= max) current = 0; $('.progress').width((current+1) * 315 / max); $('.counter').text(current+1 + ' of ' + max);
}, 3000);
Einstien Quotes - Script Codes
Einstien Quotes - Script Codes
Home Page Home
Developer Barbara Laird
Username bhlaird
Uploaded January 16, 2023
Rating 3.5
Size 5,220 Kb
Views 4,048
Do you need developer help for Einstien Quotes?

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!

Barbara Laird (bhlaird) Script Codes
Name
Windows
Color Wheel
A Pen by Barbara Laird
Playing with colors
TIme Since
Coming Soon
Happy New Year
Movember
Hipster quote callout
SVG Shape Hover Effect
Create amazing art & images 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!