Large Quotation marks with an HTML/CSS design

Is there a way to style a quote using large quotation marks?

I've tried various methods found online, such as using Blockquote with the :before and :after CSS styles. However, I'm running into issues with using an image within a div for responsiveness reasons. Additionally, I am working within the Twitter Bootstrap framework.

Below is the CSS code and HTML representation of the quote: 

blockquote {
  border: none;
  font-family: Georgia, "Times New Roman", Times, serif;
  margin-bottom: -30px;
}

blockquote h3 {
  font-size: 21px;
}

blockquote h3:before {
  content: open-quote;
  font-weight: bold;
  font-size: 100px;
  color: #889c0b;
}

blockquote h3:after {
  content: close-quote;
  font-weight: bold;
  font-size: 100px;
  color: #889c0b;
}
<div class="container">
  <blockquote>
    <h3>Whenever you see a successful business, someone once made a courageous decision. ~Peter F. Drucker</h3>
  </blockquote>
</div>

Although the responsiveness is somewhat functional, I am having trouble achieving the desired look as shown in the example. The Quotation marks are not positioned diagonally from each other.

htmlcsstwitter-bootstrapblockquote

Answer №1

It seems like you are looking to modify the appearance of quotation marks based on your query.

Choose a specific unicode value and include a quotes attribute. For instance:

blockquote {
    border:none;
    font-family:Georgia, "Times New Roman", Times, serif;
    margin-bottom:-30px;
    quotes: "\201C""\201D""\2018""\2019";
}

blockquote h3 {
font-size:21px;
}

blockquote h3:before { 
content: open-quote;
font-weight: bold;
font-size:100px;
color:#889c0b;
} 
blockquote h3:after { 
content: close-quote;
font-weight: bold;
font-size:100px;
color:#889c0b;
  
}
<div class="container">
<blockquote><h3>Whenever you see a successful business, someone once made a courageous decision. ~Peter F. Drucker</h3></blockquote>
</div>

You can also adjust the font-family to better align with your desired quotation mark style.

Check out this jsfiddle link for reference.

Answer №2

The Quotation marks are not positioned diagonally from each other

To fix this, simply adjust their position: 

blockquote{
    position: relative; 
}

blockquote h3:before {
    position: absolute; 
    top: 0;
    left: 0; 
}

blockquote h3:after{
    bottom: 0; 
    right: 0; 
}

Alternatively, you can follow this demo for reference: http://jsfiddle.net/pz6kx0bw/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Automatically synchronize dynatable with AJAX requests and JSON responses

I'm currently facing a bit of confusion as my code appears to be functioning properly, but the table is not updating as expected. xD I am fetching data from my database and loading it into a table, aiming for it to automatically update every three se ...

javascriptphphtmlajaxjson

Adjust the transparency level of the image's mapped area

I need help with changing the opacity of a specific area on an image map when clicked. The image has three areas, but I only want to target and change the opacity of the test2 area regardless of which area is clicked. Since my knowledge of jQuery syntax is ...

jqueryhtmlcss

Having trouble with the ".." shorthand not working in the HTML image directory path

My Website File Structure: -css - home.css -html - index.html -images - banner.png HTML Code: <!DOCTYPE html> <html lang="en"> <head> <title>myWebsite</title> <link rel="stylesheet" typ ...

htmlimagepath

two occurrences of the identical controller in AngularJS

Encountering a dilemma (admittedly, not the best approach). There is a single view featuring a split screen; an input field occupies the left side while its corresponding value appears on the right. Both sides are managed by the same controller, using the ...

javascripthtmlangularjs

Tips for adjusting the margin of a print document in a printTask?

Is there a way to achieve a borderless print? Currently, my printed output has a border around it. I would like the image to start at the top left corner without any borders. I attempted to set a negative margin to the print-style box, but it resulted in ...

javascripthtmlprintingwinjswindows-8.1

Issue with Bootstrap 4 anchor links not leading to intended target

I recently built a one-page index page using Bootstrap 4, complete with a navbar containing hyperlinks that smoothly navigate to different sections of the page. For example, the "Events" nav link takes users to the section identified by id="events&quo ...

htmlcssbootstrap-4navigationanchor

What is the best way to steer a vehicle in the desired direction by utilizing the arrow keys on the keyboard?

Image1 Image2 While using visual studio code, I noticed that I can move a car forwards and backwards with the arrow keys on the keyboard. However, it doesn't seem to turn when I try to move in opposite directions. Is there a way to achieve this thro ...

javascripthtmlcss

Establish initial content for the specified div area

I need help setting page1.html to display by default when the page loads. Can you provide some guidance? Appreciate your assistance in advance. <head>     <title>Test</title>     <meta http-equiv="content-type" content="tex ...

javascripthtmlcssajax

The <br/> tag is not functioning properly when retrieving text from a MySQL query

Currently, I am involved in a project that involves an A.I pushing text onto a MySQL database. Our goal is to display the ongoing writing process on a webpage. We are still actively working on this. We are retrieving the data and regularly checking the da ...

javascripthtmlmysqljson

Utilizing a Downloaded Font in CSS: A Step-by-Step

Just starting out here. I have a font file in .ttf format that I want to use on my blog, but I need help with obtaining its code. Am I on the right track? * { font-family: 'providence-bold'; src: url('/font/providence-bold.regular.tt ...

cssfontstumblrtruetype

What is the best method for starting a string using the symbol '~'?

Hello everyone! I have a task that requires me to add a special feature. The user needs to enter something in a field, and if it starts with the tilde (~), all subsequent entries should be enclosed in a frame within the same field or displayed in a list ...

javascripthtmlcssstroke

Is Bootstrap CSS Carousel malfunctioning following a float adjustment?

Currently, I am trying to implement a carousel in bootstrap, but I am facing two significant issues. The alignment of the carousel is vertical instead of horizontal (my div elements are stacking downwards). When I apply the float: left property, the carou ...

htmlcssbootstrap-4

Carousel-item height in Bootstrap 4.6

I am facing an issue with a component in Angular 14 using Bootstrap v4.6: <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div cl ...

cssangularbootstrap-4carousel

Stop tooltips from appearing on hyperlinks in Internet Explorer

Is there a solution to disabling the pesky tooltips that appear in the bottom left corner of IE when hovering over links? Alternatively, is there a method to customize the text that appears instead of the default tooltip when hovering over a link (I attem ...

htmlinternet-explorertooltip

Stylesheets do not have the capability to support template tags

Imagine you have created a stylesheet in Django within the static files and everything is working smoothly. However, when trying to use the following line, an error occurs: .PostProfilePic { width: 50px; height: 50px; border-radius: 50%; background ...

pythonhtmlcssdjangodjango-templates

Tips for concealing the navigation bar during page printing in Bootstrap 5

When attempting to print the page body, I am encountering an issue where the vertical "navbar" continues to display and covers a portion of the content. Below is the code I am using to hide the navbar when printing: @media print and (min-width: 800px){ ...

htmlcssbootstrap-5

The Angular HTML Autocomplete feature is not functioning as intended when hosted on a CDN in Chrome, despite setting it to "nope" or "off"

When setting Autocomplete to "nope" or "off" in my input box for surname, I'm still able to select from the autocomplete list. This issue occurs when accessing our Ui app through CDN at link [https:// Xyz. net], but works correctly when accessing it d ...

angularjsangularhtml

Receive the height from the parent element using the box-sizing property set to border-box

Let's talk about a CSS challenge. .parent{box-sizing: border-box; height: 60px; border: 1px solid green;} The child div has its own styling: .child{height:inherit;background: red} Here is the code snippet: ...

css

Inline checkbox label with Bootstrap 5 styling

How can I align the checkbox with its label? Example <div class="row g-1 border-bottom p-3"> <div class="col border-end justify-content-center d-flex align-items-center"> <div class="h6 text-sm-center h-25&quo ...

javascripthtmlcssbootstrap-5

Safari and Internet Explorer 9 prioritizing min-height over height in rendering

For testing a website, I am using Safari 5.0.5 and IE9 on Windows. Within the CSS file, the following code is present: #contentarea { background-image:url('../images/img.jpg'); background-repeat: no-repeat; background-position: right to ...

jqueryhtmlcss