Quote Styling
How do I make an quote styling?
Pure CSS Block quote style. What is a quote styling? How do you make a quote styling? This script and codes were developed by Xavier Porter on 27 October 2022, Thursday.
Quote Styling - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Quote Styling</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae!
<cite>Somebody famous</cite>
</blockquote>
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi? Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget leo nunc, nec tempus mi?
<br><br>
Curabitur id nisl mi, ut vulputate urna. Quisque porta facilisis tortor, vitae bibendum velit fringilla vitae!
<cite>Somebody famous</cite>
</blockquote>
</body>
</html>
Quote Styling - Script Codes CSS Codes
blockquote {
font-family: Helvetica, Arial, serif;
font-size: 14px;
font-style: italic;
width: 90%;
margin: 0.25em 0 2em;
padding: 0.25em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote:before {
font-family: Georgia, serif;
display: block;
content: "\201C";
font-size: 100px;
position: absolute;
left: -10px;
top: -35px;
color: #ccc;
}
blockquote cite {
color: #870237;
font-size: 13px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
| Developer | Xavier Porter |
| Username | xporter |
| Uploaded | October 27, 2022 |
| Rating | 3 |
| Size | 1,769 Kb |
| Views | 16,192 |
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!
| Name | Size |
| Unsplash.it image viewer | 2,500 Kb |
| Spotlight Solution 1 | 2,499 Kb |
| Foundation 5 Menu - Accessibility | 1,999 Kb |
| Style tiles with SCSS | 13,579 Kb |
| A Pen by Xavier Porter | 3,680 Kb |
| Restarting Counter-Reset | 2,331 Kb |
| Transforms examples | 1,445 Kb |
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!
| Name | Username | Size |
| Form Labels | Bartuc | 2,717 Kb |
| Print element on a page | Mrs_snow | 2,081 Kb |
| Twitch TV | Natester13 | 4,488 Kb |
| Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
| Modal Dialog | Gigaleet | 2,251 Kb |
| Wikipedia Viewer | Thalpha | 4,426 Kb |
| The Rope | Chribbe | 2,886 Kb |
| Social Profiles | Lachlanjc | 1,939 Kb |
| Rainbow Drops | Csbarnes | 2,365 Kb |
| Animated Slide Hamburger Mobile Menu | BJack | 2,247 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!