Classy Blockquote Styling

Developer
Andrew Wright
Size
3,212 Kb
Views
10,120
  1. Classy Blockquote Styling Previews
  2. Classy Blockquote Styling HTML Codes
  3. Classy Blockquote Styling CSS Codes

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 Previews
IQ Test

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;
}
Classy Blockquote Styling - Script Codes
Classy Blockquote Styling - Script Codes
Home Page Home
Developer Andrew Wright
Username andrewwright
Uploaded December 06, 2022
Rating 4
Size 3,212 Kb
Views 10,120
Do you need developer help for Classy Blockquote Styling?

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!

Andrew Wright (andrewwright) Script Codes
Name
Toast CSS
A Pen by Andrew Wright
ZC v2
ZC
Appointment Contact Form
Simple Blockquote Styling
Flat Chrome Demo Window
Create amazing Facebook ads 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!