What is the proper way to attribute the individual who uttered the quote in order to display it on your document effectively?

I inserted a quote into my document, see below: Unfortunately, the text for Fred Beecher, Director of UX, is not appearing directly under the quote in my document. The issue seems to be related to a fixed footer containing social media icons positioned at the bottom of the webpage. Upon inspecting the page, it appears that the text is being placed within the footer along with the icons. Is there a way to have the text for Fred Beecher... displayed right beneath the quote?

<article class="quote">
  <blockquote
    cite="https://careerfoundry.com/en/blog/ux-design/15-inspirational-ux-design-quotes-that-every-designer-should-read/"
  >
    <p>
      How do I explain what I do at a party? The short version is that I say I
      humanize technology.
    </p>
    <footer>—Fred Beecher, Director of UX</footer>
  </blockquote>
</article>

htmlcssxcodetagsfooter

Answer №1

By utilizing Bootstrap, achieving this result is entirely feasible. You'll see the desired output in the code snippet below.

**Keep in mind: ** I have integrated some Bootstrap 4 scripts to make this task function.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<blockquote class="blockquote">
  <p>How do I explain what I do at a party? The short version is that I say I humanize technology.</p>
  <footer class="blockquote-footer">Fred Beecher, Director of UX</footer>
</blockquote>

LATEST UPDATE: Alternatively, you can achieve the same outcome by eliminating all Bootstrap 4 CDN link paths. Use CSS exclusively to enhance your quotes. Below is the CSS code followed by the HTML markup.

.quote{
font-weight: 600;
font-size: 20px;
font-family: 'Segoe UI Light';
}

.footer
{

font-size: 20px;
font-family: 'Segoe UI Light';
}
<blockquote>
  <p class="quote">How do I explain what I do at a party? The short version is that I say I humanize technology.</p>
  <p class="footer">- Fred Beecher, Director of UX</p>
</blockquote>

Hopefully, this provides assistance.

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

Cache application

Experimented with the following code snippet from w3schools: Coding in index.html <!DOCTYPE html> <html manifest="demo_html.appcache"> <body> <script src="demo_time.js"></script> ...

htmlhtml5-appcache

Compatibility of Blackberry Webworks

As I prepare to build a Webworks app, the documentation indicates that it is designed to function only on devices equipped with OS 5.0 or later. However, I am curious if there exists a way to make the app compatible with devices running an OS version lower ...

javahtmlblackberry

Unique fluid layout with varied behavior

I am on the hunt for a layout that caught my eye some time ago, but unfortunately I forgot to save it. It featured 3 main columns that cleverly transformed into 2 when resized, causing the 3rd column to shift to the row below. It wasn't your typical l ...

htmlcsslayoutdynamic

Tips for getting rid of the ghosting effect or white background of a PNG image

As a new developer, I am currently working on my personal chess project and have recently mastered the drag and drop system. However, I would like to explore different methods for achieving this. Is there a way to eliminate the white background in the proc ...

javascriptcssimagedragchess

"Help needed: The HTML dialog element is obstructing the invisible reCAPTCHA challenge popup. Any solutions for resolving this

Visit this link to access the example in incognito mode. Click on the "open" button to open the sample signin form, then click on the "Sign Up" button to trigger the challenge. There seems to be an issue with using recaptcha inside a dialog. I'm not ...

javascriptcssvue.jsrecaptchainvisible-recaptcha

Is there a way to showcase views.py outcomes promptly and dynamically on template.html within a Django project?

I am working on a django website project with a template called exper.html and views.py handling the backend processing. My goal is to allow users to input parameters or text in a textarea, click submit, and have views.py process the input to generate ima ...

pythonhtmldjangodjango-views

Using JavaScript, what is the best way to change the x/y position of an element?

https://i.sstatic.net/5jUa4.png I have included an image to illustrate my request. In the setup, there is a container with a yellow border and content enclosed in a red border. My goal is to have the content scroll left by the width of one container when t ...

javascripthtmlcss

When rendering in React, retrieving the value from sessionStorage always yields a single result

I have encountered an issue with storing the jwt key in localStorage when a user logs in. I am trying to make the app render either "Login/Register" or Logout buttons/links based on whether the key exists. However, the function I created seems to always re ...

htmlreactjs

What causes the default styling of a browser user agent to be altered when a background image is added to an input button?

Take a look at this example: http://jsfiddle.net/eJSGn/ input{ padding-left: 20px; } input:last-of-type{ background: url(http://skiorboard.com/wp-content/uploads/2014/03/search.png) no-repeat; background-size:15px 15px; } <in ...

htmlcss

Can the script be loaded into a TypeScript file?

I'm currently in the process of integrating this script tag into my Angular 2 project, but I'm searching for a way to incorporate it into the typescript file so that I can access its methods within the .ts file. <script type="text/javascript" ...

javascripthtmlangulartypescript

Trigger the onChange event for a number input using JQuery

Regarding the input that has type number: <input type="number" id="input-number" onChange="DoSomething();"/> Is there a way to trigger the onChange event using jQuery? [UPDATE] I was able to achieve this with the following code: $("#input_0").tr ...

jqueryhtml

Optimize your HTML with Meleze.web's ASP.NET MVC 3 Razor minification and compression features

I came across meleze.web on NuGet, which claims to remove extra white spaces in generated HTML results. However, after adding the necessary configuration to my web.config file and running the application, I have not seen any changes in the result. Are th ...

asp.nethtmlasp.net-mvc-3razorminify

Scroll Bar Menu (User-Controlled)

I'm looking for any libraries out there that can replicate or provide a similar horizontal scrolling menu to that of espn.com's homepage. I'm relatively new to jquery and feeling a bit lost on where to begin. I did some searching on Google, ...

javascriptjquerycss

management in the same row or in the following row fashion

Looking to achieve a specific behavior for a label and control: If the screen width is less than X, the label and control should be on different rows with the control expanding to full width. If the width is equal to or greater than X, the label and cont ...

androidcsshtmlresponsive-design

Modifying the appearance of the search box

I'm looking to customize the appearance of my search box. On Stack Overflow, you'll notice the search box is a perfect rectangle. I want mine to have rounded edges, like an ellipse, rather than being rectangular. How can I achieve this look? Than ...

htmlcss

Utilizing exclusively CSS for parent div, achieve dynamic resizing animation

I want to create a transition effect on the parent div when the child div disappears without using display:none My goal is to have a dynamically centered div that animates using CSS transitions only. Here is my current approach. document.querySelector ...

htmlcsscss-transitions

Error in altering element width dimension

For my Bootstrap card project, I have some specific rules in mind: The card should have a minimum width of 250px (card #1 - looks good) If the first line exceeds 250px in length, the card should increase its width without wrapping the line (card #2 - widt ...

htmlcsstwitter-bootstrapbootstrap-5

Bug in Responsive Mega Menu Detected

Hey everyone, I've got a Mega Menu below for you to check out! <div id="menu-wrapper"> <ul class="nav"> <li><a href='#'>Brands</a> <div> <div class="nav-colu ...

htmlcss

Steps to download a file once the submit button is clicked on an HTML webpage

I have a radio button in my application that displays file names from my Google Drive. My goal is to allow users to select a file and download it to their local device using the corresponding download URL. To achieve this, I utilize an HTTP GET request w ...

javascripthtmljqueryajax

When you hover, a panel will slide in from the right. When you move the mouse

Hey everyone, I've been trying to implement the solution provided but I seem to be missing something. Can you take a look at my fiddle? http://jsfiddle.net/cancerian73/Ej5k8/ body { position: relative; min-height: 3000px; margin: 0; padding: 0; to ...

jqueryhtmlcsspanelslide