What adjustments can be made to alter the height of the borders on the left and right side of the block quote, and link the border to a different div element

Block Quote Example

I'm looking to create a blockquote that resembles the image provided. I have successfully implemented the top and bottom gradients, but am facing challenges with the left and right borders as well as rounding the quotations more. Additionally, I would like to add a connecting line to the right of the blockquote. Any assistance on achieving this design would be greatly appreciated!

Current progress:

/*-------Testimonial Section Styles---------*/

section#testimonial-section {
  height: 300px;
  margin-top: 100px;
  width: 100%;
}


/*------Block Quote Sttyles-------*/

.testimonial-paragraph-wrapper {
  width: 100%;
  padding: 20px;
  margin: 10px auto;
  text-align: center;
}

.testimonial-border {
  display: inline;
  margin-left: 117px;
  float: left;
}

blockquote {
  width: 100%;
  padding: 36px 50px;
  position: relative;
  background: transparent;
  margin-bottom: 0px;
  /* gradient shining border */
  background-image: linear-gradient(to left, rgba(108, 178, 61, 1) 100%, rgba(108, 178, 61, 1) 100%, rgba(108, 178, 61, 1) 100%), linear-gradient(to left, rgba(108, 178, 61, 1) 100%, rgba(108, 178, 61, 1) 100%, rgba(108, 178, 61, 1) 100%);
  background-size: 90% 5px;
  background-position: 100% 0%, -510% 100%;
  background-repeat: no-repeat;
  border-left: 5px solid rgba(108, 178, 61, 1);
  border-right: 5px solid rgba(108, 178, 61, 1);
}

cite {
  font-style: normal;
  text-align: right;
  float: right;
  padding-right: 100px;
  padding-top: 20px;
}

blockquote::before,
article blockquote::after {
  top: 0;
  bottom: 0;
  width: 25px;
  content: '';
  position: absolute;
  background: #61a036;
  -webkit-box-shadow: 0 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px rgba(0, 0, 0, 0.25);
}

blockquote::before {
  right: 100%;
}

blockquote::after {
  left: 100%;
}

blockquote p {
  font-size: 20px;
  line-height: 1.5em;
  margin-bottom: 28px;
  color: #61a036;
  padding-left: 40px;
  padding-right: 40px;
}

blockquote p::before {
  top: 0;
  left: -33px;
  color: #61a036;
  content: '“';
  font-size: 10em;
  position: absolute;
  text-shadow: -3px 0 #000;
  padding-top: 0px;
}

blockquote p::after {
  right: 16px;
  color: #61a036;
  content: '”';
  bottom: -32px;
  font-size: 10em;
  position: absolute;
  text-shadow: 3px 0 #000;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<section id="testimonial-section">
  <div class="container">
    <div class="row">
      <div class="col-md-8 text-center">
        <div class="testimonial-wrapper">
          <div id="testimonial-border" class="testimonial-paragraph-wrapper">
            <blockquote>
              <p class="blockquote-text">My son had to go to the doctor’s office and my insurance didn’t pay for some of it, and rent was due ... then I looked at the calendar...I was going to be getting a big payment from FusionCash in only 3 more days, straight to my PayPal® account!</p>
              <cite>- John Hughes of Grants Pass, OR</cite>
            </blockquote>
          </div>
        </div>
      </div>
      <div class="col-md-4 pull-right">
        <div class="testimonial-img-wrapper">
          <img class=" testimonial-img" src="http://res.cloudinary.com/alexscloud1234/image/upload/c_scale,w_200/v1516656363/ryan-fields-328391_lxjslk.png">
        </div>
      </div>
    </div>
  </div>
</section>

htmltwitter-bootstrapcss

Answer №1

Utilizing flexbox makes creating the connecting line a breeze—simply incorporate a pseudo element on your container and adjust the position using the order property.

(I've removed Bootstrap from the equation for simplicity, feel free to customize as necessary)

/*-------Testimonial Section Styles---------*/
#testimonial-section{
  margin:20px;
  display:flex;
  align-items:center;
  position:relative;
}

#testimonial-section:before{
  content:"";
  height:4px;
  flex:1 1 10%;
  background:#61a036;
}
.testimonial-img{
  flex:1 1 20%;
  border:4px solid #61a036;
  border-radius:50%; padding:10px;
  display:inline-block;
  height:100%;
}

#testimonial-section blockquote{
  margin:0;
  border:4px solid #61a036;
  flex:1 1 70%;
  position:relative;
  color: #61a036;
  font-size:1.5em;
  font-family:sans-serif;
  order:-1;
}

#testimonial-section blockquote:before, #testimonial-section blockquote:after{
  text-align:center;
  background:white;
  position:absolute;
  font-size:8rem;
  width:4rem; height:5rem;
}
#testimonial-section blockquote:before{
  content:"“";
  top:-2rem;
  left:-2rem;
}
#testimonial-section blockquote:after{
  content:"”";
  bottom:-2rem;
  right:-2rem;
}

.blockquote-text{
  padding:1em;
}

cite{
  font-size:1rem;
  position:relative;
  top:0.5rem;
  background:white;
  float:right;
}
<section id="testimonial-section">
  <blockquote>
    <p class="blockquote-text">My son had to go to the doctor’s office and my insurance didn’t pay for some of it, and rent was due ... then I looked at the calendar...I was going to be getting a big payment from FusionCash in only 3 more days, straight to my PayPal® account!</p>
    <cite>- John Hughes of Grants Pass, OR</cite>
  </blockquote>

  <img class="testimonial-img" src="http://res.cloudinary.com/alexscloud1234/image/upload/c_scale,w_200/v1516656363/ryan-fields-328391_lxjslk.png">
</section>

After this stage, focus primarily on positioning elements.

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

What is the best way to retain the background image in a fixed position?

Is there a way to fix the size of the picture in my code? The current size is 5834*3886, but when I minimize the browser, part of it disappears. Here is the CSS code I have written: .contact{ position: relative; min-height: 100vh; padding: 50 ...

cssbackground-image

Prevent users from saving changes made to dropdown menu values (as well as other user-inputted content) using Inspect Element on the website before it

Recently, I started testing my website for bugs and stumbled upon a major issue that caught me by surprise. I never realized that changes made with Firebug or similar plugins on websites could actually be saved and implemented. Despite my efforts to preve ...

htmlformssecurityfirebugweb-inspector

Include the attribute exclusively for the initial division within a group of corresponding elements

Looking to change the appearance of this HTML code without being able to edit it directly? <form method="POST" id="go123pago"> <div align="center" style="width:220px"> <div style="float:left;padding:10px;width:190px"> ...

jqueryhtmlcss

Combining 2 blocks to form a unified element

I receive a lot of HTML output like this: <div> <h4>This</h4><p>Value 9.6 m.</p> <h4>That</h4><p>Value 9.6 m.</p> <h4>The other</h4><p>Another 7.69 m.</p> <h4>And yet< ...

csscss-selectors

How to achieve a seamless iframe effect using CSS

With the introduction of new HTML5 iframe attributes, there are now more options available. One such attribute is the seamless attribute, which has the ability to: Create an iframe that appears to be seamlessly integrated into the containing document. ...

javascriptjquerycssiframe

Declaration of Character Encoding in CSS3

Do I need to include a character encoding declaration in CSS3? When I add the @charset "utf-8"; declaration, Visual Studio's CSS3 validation displays a warning. Can anyone offer some guidance on this issue? ...

css

A collection of jQuery objects that consist of various DOM elements as their properties

Seeking a more concise and potentially more streamlined approach using jQuery. I have an object called lbl which represents a div. Inside this div, there is a span tag that contains the properties firstName and lastName of the lbl object. Here's how t ...

javascriptjquerycssdom

In Firefox, the CSS height and width values are displayed as X pixels, whereas in Internet Explorer, they are automatically set to 'auto'

When it comes to measuring div box dimensions, jQuery can be a handy tool. Here is an example code snippet: $(document).ready(function(){ var h = $("#testbox").css("height"); }); Interestingly, the same code can give different results in different brow ...

javascriptjquerycssinternet-explorer

Opt for JavaScript DOM manipulation over jQuery for element selection without depending on jQuery

I am attempting to target a specific element using JavaScript: element = '<div class="c-element js-element">Something Here</div>'; When I try to select this element with the following code: $(element) The result is not as expected ...

javascriptjqueryhtml

Limit on the number of rows/entries selected for each query and the maximum

Is it possible to set a limit on data selection in a drop-down list through coding? For example, having 3 selections in one drop-down list, with each selection limited to 20 people choosing from the data. <tr><td><label><font face=&a ...

phphtmlmysql

Navigating between pages using the ExpressJS and Angular 1 routing system

Can someone help me troubleshoot an issue I'm having with my Express API and Angular front-end? Whenever I try to access the /about route, it keeps defaulting back to index.html and displaying a 404 error message. Can you take a look at my code and pi ...

htmlangularjsexpress

Is there a way for me to gain access to alter the price function within Magento?

Now, I am faced with the task of customizing the discounted price for my Shopping cart. After some independent research, I discovered that by modifying the view.phtml and item.phtml files, I can properly display the desired price. However, I still feel uns ...

javascriptphphtmlajaxmagento

Utilizing a dropdown list in HTML to dynamically change images

On my HTML page, I have implemented a dropdown list box. My objective is to change an image and update a label based on the selection made from the dropdown list box. I already have an array called 'temp' which represents the number of items. The ...

javascripthtml

Adaptive Design - Content Fragmentation

I am currently working on a webpage layout that has the following HTML structure: <div class="row"> <div class="col3">test 1</div> <div class="col3">test 2</div> <div class="col3">test 3</div> </div ...

htmlcssresponsive-design

Is the navigation bar offset causing an issue?

After struggling with my navigation menu in Google Chrome, I finally found a solution. However, the nav bar is now offset on one page but not on another. For the aligned main site view, visit , and for the left-offset forum view, visit . This is the HTML ...

htmlcss

Utilize a class within a Framer Motion element to incorporate animations or set initial properties

Is there a way to apply a class using Framer Motion tag in the animate and initial props? Here's an example: <motion.div initial={{ className: 'hidden' }} animate={{ className: 'visible' }} > <div>yo</div> & ...

cssreactjsnext.jsframer-motion

Missing CSS in dynamically loaded content on IE

I have been searching everywhere, but I just can't seem to find a satisfactory answer to this particular question. Whenever I load a few items on the page, they are displayed correctly at first. However, if a user decides to change the language, the ...

htmlcssajaxinternet-explorerdynamic

What is the process of utilizing jQuery to hover over a relevant cell?

I'm interested in learning how to implement jQuery to highlight related tables. Initially, I explored this JS fiddle and discovered a method for highlighting both vertically and horizontally. I conducted several searches to find a similar approach, ...

javascriptjqueryhtmlcsshtml-table

Ways to increase the values in a textbox

My task involves handling checkboxes that are populated with data from a database. The goal is to have certain checkboxes pre-checked based on the retrieved data, and if any are not checked, their values should be entered into a textbox. For instance, con ...

javascriptjqueryhtmlajax

Can you provide examples of design patterns commonly used in HTML and CSS?

Starting out with Ruby on Rails is exciting, but I am feeling overwhelmed by CSS and HTML. While there are plenty of books on CSS and HTML patterns, I am more interested in learning what is actually used on real webpages. For example, when creating a simpl ...

htmlruby-on-railscss