Pulling Out the "Brains": Pull Quotes

6 minutes
Share the link to this page
You need to have access to the item to view this lesson.
One-time Fee
List Price:  $99.99
You save:  $30
List Price:  €92.99
You save:  €27.89
List Price:  £78.38
You save:  £23.51
List Price:  CA$137.45
You save:  CA$41.24
List Price:  A$151.16
You save:  A$45.35
List Price:  S$135.19
You save:  S$40.56
List Price:  HK$780.93
You save:  HK$234.30
CHF 62.75
List Price:  CHF 89.64
You save:  CHF 26.89
NOK kr746.44
List Price:  NOK kr1,066.40
You save:  NOK kr319.95
DKK kr485.47
List Price:  DKK kr693.57
You save:  DKK kr208.09
List Price:  NZ$162.71
You save:  NZ$48.82
List Price:  د.إ367.26
You save:  د.إ110.18
List Price:  ৳11,754.54
You save:  ৳3,526.71
List Price:  ₹8,355.11
You save:  ₹2,506.78
List Price:  RM471.70
You save:  RM141.52
List Price:  ₦148,504.56
You save:  ₦44,555.82
List Price:  ₨27,850.05
You save:  ₨8,355.85
List Price:  ฿3,667.15
You save:  ฿1,100.25
List Price:  ₺3,237.21
You save:  ₺971.26
List Price:  B$536.56
You save:  B$160.98
List Price:  R1,860.71
You save:  R558.27
List Price:  Лв181.88
You save:  Лв54.57
List Price:  ₩137,529.28
You save:  ₩41,262.91
List Price:  ₪370.54
You save:  ₪111.17
List Price:  ₱5,857.18
You save:  ₱1,757.33
List Price:  ¥15,730.09
You save:  ¥4,719.50
List Price:  MX$1,865.18
You save:  MX$559.61
List Price:  QR364.73
You save:  QR109.43
List Price:  P1,372.24
You save:  P411.71
List Price:  KSh12,798.72
You save:  KSh3,840
List Price:  E£4,765.16
You save:  E£1,429.69
List Price:  ብር5,766.54
You save:  ብር1,730.13
List Price:  Kz85,491.45
You save:  Kz25,650
List Price:  CLP$92,315.76
You save:  CLP$27,697.50
List Price:  CN¥710.65
You save:  CN¥213.21
List Price:  RD$5,945.67
You save:  RD$1,783.87
List Price:  DA13,466.25
You save:  DA4,040.28
List Price:  FJ$223.74
You save:  FJ$67.13
List Price:  Q777.11
You save:  Q233.15
List Price:  GY$20,940.43
You save:  GY$6,282.75
ISK kr9,731.40
List Price:  ISK kr13,902.60
You save:  ISK kr4,171.20
List Price:  DH993.14
You save:  DH297.97
List Price:  L1,776.17
You save:  L532.90
List Price:  ден5,723.02
You save:  ден1,717.07
List Price:  MOP$804.80
You save:  MOP$241.46
List Price:  N$1,868.71
You save:  N$560.67
List Price:  C$3,682.58
You save:  C$1,104.88
List Price:  रु13,372.54
You save:  रु4,012.16
List Price:  S/378.41
You save:  S/113.53
List Price:  K389.58
You save:  K116.88
List Price:  SAR375.05
You save:  SAR112.52
List Price:  ZK2,628.45
You save:  ZK788.61
List Price:  L462.80
You save:  L138.85
List Price:  Kč2,295.14
You save:  Kč688.61
List Price:  Ft36,685.32
You save:  Ft11,006.69
SEK kr732.55
List Price:  SEK kr1,046.55
You save:  SEK kr313.99
List Price:  ARS$90,190.46
You save:  ARS$27,059.84
List Price:  Bs691.24
You save:  Bs207.39
List Price:  COP$393,082.02
You save:  COP$117,936.40
List Price:  ₡53,058.41
You save:  ₡15,919.11
List Price:  L2,471.86
You save:  L741.63
List Price:  ₲752,814.07
You save:  ₲225,866.80
List Price:  $U3,886.51
You save:  $U1,166.07
List Price:  zł403.09
You save:  zł120.94
Already have an account? Log In


Okay, so something you might want to do is create some pull quotes. And I think you have enough tools now to be able to do that. So what we're going to do is I'm going to take a quote from this particular piece, which is an old story by Lloyd Arthur Eschbach about zombies, and I'm just going to pull a few words out and create a poke. So, I found the content that I want to pull out. So it's this little section here out of the winding sheet of fog into the moonlight crypt of strange, strange craft. Alright, so I'm going to copy it, and then I'm going to paste it again.

Actually, what I want to do is I want to move a little bit further down. I'm going to add blockquote class equals class with full quote, and I'm gonna go ahead and close that blockquote just so I don't Forget to do it, and see that I mistyped something there. Alright, and then I'm going to add that again, here. So if we scroll down, we should see here is that section again, as a separate quote. So now I'm gonna go to my CSS. And I'm going to do first of all put the class in and add some content here.

So a couple things I want to do here, I want to set a width of, say 200 pixels. And maybe that's a little bit small. Let's try 300 pixels. And I want to up the size that it stands out, so into font size to n. So it's a bit bigger, that's maybe too much. Let's go down to say 1.5. So a little big, let's do 1.25.

All right, so it's a little bit bigger, but not quite Crazy large. I'm gonna float it right. As you can see there, scroll down a little bit so we can continue seeing it and add a border. Just on the left hand side, let's say bye, pixels, about red and solid. That is way too close to the text itself. So we want to do something a little bit more some padding rather padding, we can just do padding on the left.

And let's see what that looks like. That's probably good. It turns out this red is a little bit lighter or a little bit. Yeah, a little bit lighter than I want. So I'm gonna color I picked out a little bit earlier. Just going to change to that color.

More of a deep read, which I think fits in better with what we're looking at here. Now, I only added padding to the left, but I think it might be nice if we add a padding to all sides and what is going to help with that is going to make the border pop out a little bit higher as well. So just change the padding to one m, and the border is out a little bit more. You know what I think I want to do one M. So on the top and bottom, I think I won't do point five M. And then on the left and right I'll do a single M and that will then put it like that. I can also change maybe the color here to maybe gray it a little bit. So let's do is to make it pull out a little bit and there we have a pullquote we can also maybe move this up a little bit, which I think might be a good idea.

So I'm just gonna cut it and paste it up. be up in this previous. So another thing we have to think about is that with blockquote comes some default styles. So if that having too much space around it, which I feel we are, we can remove some margin. And make sure that we're not having too much on the top and bottom foot with that did do was that it brought this information right here to close my opinion to the border. So let's give it a little bit more margin.

Instead of zero. Let's do 0.5. And that's not quite enough. Let's do one and there we go. There's a little bit more spacing. I think also as we make this smaller, to look a little bit better, because we have text that's not continuing here.

Yeah, I think I moved that up a little too far. Let's try. See what it looks like. If I put it in again, where Yeah, that looks pretty good. There you have your notebook, you can certainly do variations on it, we could add a background color to say, the very dark red, say like this, oops, forgot the hashtag. Maybe that's a little too dark.

Stuff that to say that that it's too bright. There's about right. So we can do some place with some things like that we can make the border quite a bit larger if we wanted Penguin, just how we wanted the thing to look and how we wanted it to interact with the other content. For using that background color, I changed the color of the text back to white. Maybe too much. Let's try something a little bit off white, so a little bit less pronounced.

But yeah, there you have it. You can play with your boss. quotes and just add them on your own without needing to do need to hire a designer or do anything more than just add a little bit of text and a little bit of CSS.

Sign Up


Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.