Classy Blockquote Styling
How do I make an classy blockquote styling?
What is a classy blockquote styling? How do you make a classy blockquote styling? This script and codes were developed by Andrew Wright on 06 December 2022, Tuesday.
Classy Blockquote Styling - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Classy Blockquote Styling</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div style="width: 960px; margin: 0 auto; padding-top: 80px; padding-bottom: 80px;"> <h1>Full-Width, Left-Aligned</h1> <div class="testimonial-quote group"> <img src="http://placehold.it/120x120"> <div class="quote-container"> <blockquote> <p>Overall, fantastic! I'd recommend them to anyone looking for a creative, thoughtful, and professional team.”</p> </blockquote> <cite><span>Kristi Bruno</span><br> Social Media Specialist<br> American College of Chest Physicians </cite> </div> </div> <hr style="margin: 60px auto; opacity: .5;"> <h1>Full-Width, Right-Aligned</h1> <div class="testimonial-quote group right"> <img src="http://placehold.it/120x120"> <div class="quote-container"> <div> <blockquote> <p>Overall, fantastic! I'd recommend them to anyone looking for a creative, thoughtful, and professional team.”</p> </blockquote> <cite><span>Kristi Bruno</span><br> Social Media Specialist<br> American College of Chest Physicians </cite> </div> </div> </div> <hr style="margin: 60px auto; opacity: .5;"> <h1>600px-Wide, Right-Aligned</h1> <div class="testimonial-quote group right" style="width: 600px; margin-right: auto;"> <img src="http://placehold.it/120x120"> <div class="quote-container"> <div> <blockquote> <p>Overall, fantastic! I'd recommend them to anyone looking for a creative, thoughtful, and professional team.”</p> </blockquote> <cite><span>Kristi Bruno</span><br> Social Media Specialist<br> American College of Chest Physicians </cite> </div> </div> </div> <hr style="margin: 60px auto; opacity: .5;"> <h1>600px Wide, Right-Aligned</h1> <div class="testimonial-quote group " style="width: 600px; margin-left: auto;"> <img src="http://placehold.it/120x120"> <div class="quote-container"> <blockquote> <p>Overall, fantastic! I'd recommend them to anyone looking for a creative,<br> thoughtful, and professional team.”</p> </blockquote> <cite><span>Kristi Bruno</span><br> Social Media Specialist<br> American College of Chest Physicians </cite> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Classy Blockquote Styling - Script Codes CSS Codes
html { background: #eff0ef;
}
h1 { font-size: 16px; text-align: center; margin-bottom: 40px;
}
.testimonial-quote { font-size: 16px;
}
.testimonial-quote blockquote { /* Negate theme styles */ border: 0; margin: 0; padding: 0; background: none; color: gray; font-family: Georgia, serif; font-size: 1.5em; font-style: italic; line-height: 1.4 !important; margin: 0; position: relative; text-shadow: 0 1px white; z-index: 600;
}
.testimonial-quote blockquote * { box-sizing: border-box;
}
.testimonial-quote blockquote p { color: #75808a; line-height: 1.4 !important;
}
.testimonial-quote blockquote p:first-child:before { content: '\201C'; color: #81bedb; font-size: 7.5em; font-weight: 700; opacity: .3; position: absolute; top: -.4em; left: -.2em; text-shadow: none; z-index: -300;
}
.testimonial-quote img { border: 3px solid #9CC1D3; border-radius: 50%; display: block; width: 120px; height: 120px; position: absolute; top: -.2em; left: 0;
}
.testimonial-quote cite { color: gray; display: block; font-size: .8em;
}
.testimonial-quote cite span { color: #5e5e5e; font-size: 1em; font-style: normal; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 1px white;
}
.testimonial-quote { position: relative;
}
.testimonial-quote .quote-container { padding-left: 160px;
}
.testimonial-quote.right .quote-container { padding-left: 0; padding-right: 160px;
}
.testimonial-quote.right img { left: auto; right: 0;
}
.testimonial-quote.right cite { text-align: right;
}
Developer | Andrew Wright |
Username | andrewwright |
Uploaded | December 06, 2022 |
Rating | 4 |
Size | 3,212 Kb |
Views | 10,120 |
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 |
Simple Blockquote Styling | 2,009 Kb |
Flat Chrome Demo Window | 2,240 Kb |
A Pen by Andrew Wright | 3,275 Kb |
Classy Blockquote Styling | 3,212 Kb |
Appointment Contact Form | 3,408 Kb |
Toast CSS | 2,914 Kb |
ZC | 4,459 Kb |
ZC v2 | 7,385 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 |
Simple Login Form Template | Banunn | 3,571 Kb |
A Pen by John Malc | F789gh | 1,420 Kb |
Parallax with only CSS | Thulioph | 2,297 Kb |
CSS3 Fullscreen Background Slideshow | Leetech | 3,435 Kb |
Portfolio Page | KaylaMT | 1,983 Kb |
Social buttons | Flacu | 2,022 Kb |
LBCA - Mail canvas | Emnbdx | 3,856 Kb |
Ipad Mini Showcase | Hornebom | 10,479 Kb |
Lecture 1 | Law | 0 Kb |
Ball Physics | Getsetbro | 3,149 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!