UI Quotes

Developer
Francois Coron
Size
4,430 Kb
Views
20,240
  1. UI Quotes Previews
  2. UI Quotes HTML Codes
  3. UI Quotes CSS Codes
  4. UI Quotes JS Codes

How do I make an ui quotes?

What is a ui quotes? How do you make a ui quotes? This script and codes were developed by Francois Coron on 08 November 2022, Tuesday.

UI Quotes Previews
IQ Test

UI Quotes - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>UI Quotes</title> <link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,700|Open+Sans:400,600,700,300' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <div class="widget"> <h3 class="widget__title">Quotes</h3><span class="widget__random"><i class="fa fa-refresh"></i></span> <blockquote class="widget__quote"> <p class="widget__quote__content"></p> <cite class="widget__quote__source"></cite><span class="widget__quote__source__function"></span> </blockquote> </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>

UI Quotes - Script Codes CSS Codes

@charset "UTF-8";
*,
*::before,
*::after { box-sizing: border-box;
}
body { font-family: "Open Sans", sans-serif; color: #2A2A2A; background: #009688;
}
a { color: #009688; text-decoration: none;
}
a:hover { text-decoration: underline;
}
.widget { position: absolute; width: 300px; top: 50%; left: 50%; background: #2A2A2A; border-radius: 5px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.widget__title { padding: 20px 0; text-align: center; color: #009688; border-bottom: 1px solid #009688;
}
.widget__random { position: absolute; top: 15px; right: 10px; color: #009688; cursor: pointer; border: 1px solid #009688; height: 24px; width: 24px; line-height: 22px; text-align: center; border-radius: 100%; font-size: 10px; -webkit-user-select: non; -moz-user-select: non; -ms-user-select: non; user-select: non;
}
.widget__random:hover { background-color: #009688; color: #2A2A2A; -webkit-animation: rotate 400ms; animation: rotate 400ms;
}
.widget__quote { padding: 20px;
}
.widget__quote__content { padding: 20px 0; font-family: "Merriweather", serif; color: #F2F2F2; font-weight: lighter; line-height: 1.6; text-align: center;
}
.widget__quote__content::before { content: '”'; opacity: .2; font-family: "Open Sans", sans-serif; display: block; font-size: 50px; margin: 0 0 20px; line-height: 0;
}
.widget__quote__source { text-align: right; margin-top: 1.5em; letter-spacing: 0.08em; display: block; text-transform: uppercase; font-size: 12px; font-weight: normal; color: #009688;
}
.widget__quote__source::before { content: ""; display: inline-block; vertical-align: middle; height: 1px; width: 10px; background-color: #00635a; margin-right: 10px;
}
.widget__quote__source__function { display: block; margin-top: .52em; opacity: .3; color: #FFF; text-align: right; font-size: 11px; font-family: "Merriweather", serif; font-style: italic;
}
@-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

UI Quotes - Script Codes JS Codes

var myQuotes = [
{	quote: 'L\'homme veut être le premier amour de la femme, alors que la femme veut être le dernier amour de l\'homme.',	cite: 'Oscar Wilde',	function: 'Ecrivain'
},
{	quote: 'L\'adulte ne croit pas au père Noël. Il vote.',	cite: 'Pierre Desproges',	function: 'Comédien - humoriste'
},
{	quote: 'Dans la vie on ne fait pas ce que l\'on veut mais on est responsable de ce que l\'on est.',	cite: 'Jean-Paul Sartre',	function: 'Ecrivain - Philosophe'
},
{	quote: 'Si j\'avais à choisir entre une dernière femme et une dernière cigarette, je choisirais la cigarette : on la jette plus facilement !',	cite: 'Serge Gainsbourg',	function: 'Chanteur'
},
{	quote: 'Certains ont l\'air honnête, mais quand ils te serrent la main, tu as intérêt à recompter tes doigts.',	cite: 'Coluche',	function: 'Humoriste'
},
{	quote: 'Ne mépriser la sensibilité de personne. La sensibilité de chacun, c\'est son génie.',	cite: 'Charles Baudelaire',	function: 'Poète'
},
{	quote: 'C\'est drôle comme les gens qui se croient instruits éprouvent le besoin de faire chier le monde.',	cite: 'Boris Vian',	function: 'Ecrivain - Chanteur'
},
{	quote: 'Qui a la même vision du monde à vingt ans qu\'à cinquante, a perdu trente ans de sa vie.',	cite: 'Mohammed Ali',	function: 'Boxeur'
}
]
var radom = function() {	var randomQuote = Math.floor(Math.random() * myQuotes.length );	$('.widget__quote__content').text(myQuotes[randomQuote].quote)	$('.widget__quote__source').text(myQuotes[randomQuote].cite);	$('.widget__quote__source__function').text(myQuotes[randomQuote].function);
}
radom();
$('.widget__random').click(function() {	radom();
})
UI Quotes - Script Codes
UI Quotes - Script Codes
Home Page Home
Developer Francois Coron
Username francoiscoron
Uploaded November 08, 2022
Rating 3
Size 4,430 Kb
Views 20,240
Do you need developer help for UI 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!

Francois Coron (francoiscoron) Script Codes
Name
SVG CREAM
Hover img
Light card transition on scroll
Simple Button Icons
Starter CP
Typographie
A Pen by Francois Coron
STAR WARS LIGHTSABER
Starter jade
Buttons
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!