Fax Byline Image with airSlate SignNow

Fax byline image

hey how's it going this is ralph and in this video i want us to work on styling pull quotes so you may not have heard that term before a pull quote so i happen to have a browser page open already that has examples of pull quotes that's not it right there there it is so let's look at this so a pool quote i know you've seen these before this is on often on news websites but when there's a lot of text it's going to be a chunk of the text that's kind of emphasized styled differently than the rest of the content and that's pool p-u-l-l it's supposed to pull the reader in it's supposed to attract them so that they will read more of the story and spend more time there pool quotes and there's tons of different styles of this so over the past few months i have been i read a lot of news and whenever i see a pull quote that i think has been styled in an interesting way but also in a way that we can style in our 295 class i've been saving it well 295 has started so i took those images and sent them over and i've put them on here now i know they're really tiny when you're looking at these directions you may i'm not sure if you can do this on your end if you can actually click and make these pictures bigger or not to see them probably not because i'm only giving you view access but i guess that's okay my objective here is not that you duplicate these exactly or that we duplicate them exactly my goal is that you get some inspiration and see some examples of pull quotes and then you try to use some techniques to do a similar kind of style so our goal here is that we're going to work on some of these together and i think we'll just do two of them together and then i'll have you do one on your own and that'll be our participation activity our class activity so to speak so um so i've got the directions open right here and basically i'm just making the video that i'll put a link in to this particular part now before i started this video i did actually start a little bit of work i have my code editor code editor open i've got a pull quotes.html file open basic page and i've got a css file with nothing on it i am going to ask that you style this to fit with your own portfolio theme so it has your colors and stuff like that i don't have that myself so let me just go ahead and do a font family verdana and um that's pretty good there and i guess i'll do some padding on the body eight pixels excuse me and just kind of see how that's looking yeah pretty good okay so i want to have a few examples all on one page let's see let's try to be a little bit creative with how we do this i'm going to create a little navigation menu on mine so i'm in the body of my page i've got my headline one and i'll probably do a few things off-camera which i know are within your wheelhouse so but for now i'll go ahead and create a nav href and i'm going to do hashtags because i'm going to do links within the page here and i'll do uh pull sample one okay let's do that and i'll end up with two and three great and two and three and looks good and let's head down here article h2 id equals pull sample one okay okay so we'll get a little bit of formatting here i'll do a little bit of styling off off screen i want to have a nice horizontal menu going across the top so the user can click on a particular menu item and it'll jump down to that particular sample okay now within this let's go ahead and do a few basics and i know i don't even know which one i'm working on yet but we do know we want a couple things we want the pull quote to stand out amongst regular text so i'm just going to go ahead and create a paragraph of lorem ipsum text let's go ahead and do view and word wrap that's alt z that's pretty good we got a paragraph there copy paste and paste and we'll play around with our middle paragraph now how do we want to style this middle paragraph you have a couple of options really you could just put a class on this our goal is ultimately we don't want to have too much html change but there are a few tags that you're probably not aware of that can actually use to mark up this individual text for instance there is a block quote tag and you notice i can do block quote opening and closing block quote tag by the way that little effect that i just did there when i changed one tag and it automatically changed the in tag that is an add-in i have for vs code very cool i need to tell you about all my add-ins at some point um let's see where they're right over here extensions and let's see it's the auto rename tag that one's pretty nice so when you rename the opening tag it'll automatically rename the closing tag i need to do a separate video just reviewing these different uh add-ons and stuff like that that come in handy let's turn that off for now okay so block quote well is it a block or an inline element well based on its name it's probably a block element so block quote is another writing term and you've seen that maybe in your essays and your research papers that's when you indent the left i'm trying to make sure i'm right on the camera here the left and the right margins so that the quote which mol which is multiple lines is indented more than the regular text so they have a tag for that and we can use that to our advantage the other tag which comes in handy from time to time i don't know if i'll need it yet but i probably will need it on some other stuff is there's just a queue tag yeah so there's a queue tag opening and closing queue tag if you're going to make a quote now by default that's inline but of course with the power of css we can make it look different ways so i'm going to try to use both of these in certain situations i'll leave that on there for now just so we can see what that looks like but i'm using the block quote because our pull quotes are generally going to be multiple lines and there could be a situation where we use both the block quote tag and the q tag in conjunction so let's start off with this for a moment and i think that's pretty good and of course you can't really tell much on my html because i haven't really done any styling i'll do that off camera but before i start to do any styling let's look over at the directions and see which one do i want to play around with first and i'm probably just going to do these top three i think these top three here are probably the most intricate and so those would be good or at least i'll do these first two these first two would be i think would get us all the basic skills and then i would encourage you to do maybe this other one up here or one down here or something like that so let's see so i'm looking over here in the far left and i can see i know it's it's small and it's blurry and stuff like that that's okay but i can definitely tell that the pull quote is a larger font and it's a bolder font than the regular text now of course you can also see there's some top margin and bottom margin on that and what's interesting of course is it's got these little corners these little maroon or burgundy corners on there well those are going to be an interesting challenge for us and those are going to require pseudo elements which is going to be part of this activity i want you to utilize pseudo elements on at least two of your examples one of them could be the one you're doing with me right now so and you may have depending on when you took cis 195 you may have tried a little bit of pseudo element in your 195 class it just came up last fall but if you took a previous 195 it definitely didn't come up so let's see what we can do here um okay so let's start small and let's focus on the things we know that we can definitely do very easily and i think that's with the top and bottom margin and also making that font a little bit actually maybe top left and right margins and making that font a little bit bigger and a little bit bolder than the surrounding text okay so there's my block quote cool i've got that let's head over and you know what i need to mark this oh this is pretty good i've got this id up there for i need to write this properly pull sample one okay i've got that and since my block quote is down here you know what i really should have my id in the article so now it's going to be easier for me to designate the children or the descendants within my pool sample one up there cool so i've got that of course i've got auto save on let's give this a try pull sample one in fact before i go too much further i'm gonna do a thin border on this two pixels solid and uh dc very light color or hardly be noticeable i'm sure and let's just see how that looks yep very thin border on there i don't even want it to stand out but i just wanted to use that so that i can make sure i get plenty of margin let's do um 24 pixels top and bottom eight pixels left and right give a little bit of space around that that looks good and i think all of my paragraphs i'm going to do this up here all of my paragraphs and all of my blog quotes hopefully this won't come back to haunt me but of course we can always change it if it does let's go ahead and make sure they have a nice margin on there too how about just a margin bottom of 16 pixels a little bit of spacing there great and i think i'm also going to do headline twos remember that's called a group selector when we want to style different elements the same way all right i think that's pretty good pretty satisfied with that now this would look better if it was multiple lines i don't necessarily want to create too much more text on there so if my web page was just a little bit narrower there we go we'll start to get the example right there so i can see how that's looking so i'll just keep that page open off to the side let's go ahead and get back to my code editor did i close it that's weird i guess i closed it all right but i'm back open again got that let's see i'll just do a windows write and let's bring this over here so it's a little bit spaced a little bit better cool all right now let's take this one particular block chord so this is my pull sample one space block quote now what do we want to start off here well we definitely know the font is going to be be a bit bigger 120 i don't know we'll try it bold or do i want to do bolder let's try bold first and see how that looks and i need to hit go live again because i must have exited out so let's do that there we go that's actually looking pretty good i'm curious what boulder will do for me and if it changed i didn't quite notice let's go back to bold just kind of looking over here to the left it's saved i've refreshed okay so no difference okay but still i've got the font size and stuff like that i'm feeling pretty good about that now in my example though i'm going to push this drag this over here so it's a little closer to my working page so okay it looks like there's pretty big margins on there i might come back and clean that up but i'm really curious about these corners that's going to be our biggest challenge here how do we get those corners on there and by all means work ahead of me if you're so inclined what do you think i will do next pull sample one block quote colon colon before let's just work on the before for a moment okay so this is how we generally create our pseudo elements we use the before or after selector and i'm going to create some content and my content is simply going to be an empty set of quotes it's invisible content now you could put characters in here in fact i'll show you real quick we could have in whatever and by doing that that content is going to show up let's see if i get it to show up here pull sample one i've got that properly block quote before i think everything is saved properly let's refresh now i'm not seeing it show up here let's make sure color red there it is i i just didn't notice it uh mixed in with my lorem ipsum text but there it is right there in fact uh just to be cute with this i'll go ahead and take that and do the after cool well this makes it really obvious we can easily add content before and after an existing element and what's great about this of course is i haven't had to change the structure of the html let's turn my word wrapping back on view toggle word wrap there we go it's just the same old html in fact as few changes as i can make to the html the better okay so if i can do that what else can i do let me just mess with the before for a little bit let me go back to an empty set of quotes okay so what looks like all right everything's gone let's do this display block and i'll set the width to be um and i don't know i'm just guessing here i'll try it let's do 80 pixels and a height of 80 pixels now i can't do color red because it's not a font but i could do background color of red got our width we have our height there it is now it's showing up over there okay that's pretty interesting so let's look at our sample for a moment well this isn't this definitely is not a block but what do you think is creating this shape what would be your guess here what should i write next border left let's do 16 pixels solid and i'll do um i don't know what color that is but can i just write burgundy is that going to work i don't think it's gonna work how about maroon ooh that looks like that'll work okay let's see what happens with this interesting interesting okay let's try border top 16 pixels solid maroon i'm waiting a second here of course i can speed this up ctrl s to save all right that's looking pretty good instead of 16 pixels this was more like 32 and 32 and instead of my background color being red what if my background color was transparent hmm pretty pretty interesting looks like i'm starting to get that shape there now of course that shape looks a lot smaller than mine so i can dial this back a bit maybe it's only 50 pixels and 50 pixels okay now clearly the relationship between this little corner bracket and the text is not matching up with my example here so there should be a little bit more space involved so let's go back for a moment here and pull sample one block quote let's put in some really big margin left on here how about if i do a margin left of 100 pixels and a margin right of 100 pixels and i see i have a typo there so let's go ahead and fix that up okay great so that kind of squeezes things in a little bit that's cool but then i can go to this content this pseudo element why is it a pseudo element pseudo means pretty much fake right so this is a fake element it's because it's an element that i'm working with i'm styling it i'm giving it width and height i'm giving it borders i'm giving a color however the element doesn't exist in the html it's a fake element it's a pseudo element all right so i've got all of that however let's go a little bit further let's um position relative i'm going to push it over to the left and i could probably do the math to figure this out i know my pseudo element is only 50 pixels wide so if i pushed it over negative 60 pixels that should be more than 10 pixels over let's see if i can get it to refresh there we go it looks like i can go a little bit further let's try something like 90. oh i'm liking that i'm liking that a lot and hmm maybe i want it to be do i want it to be down a little bit let's try this what if i do top something like 20 pixels let's see what that does yeah it pushes it downward a little bit if i did a negative top that would push it upward i actually like that a lot i think it's going to look pretty darn good there so using the techniques here we just tried for this before can we do this for after i bet we can so let's see content empty set of quotes display block width 50 pixels height 50 pixels if you're wondering could have i have doubled up a little bit on this i certainly could have could have done a group selector comma and then done some things in common and of course the things that are different are going to be like the the border and the position but that's okay little redundancy is okay especially if you're aware of it what else do i need to do background color transparent the default background color is probably okay but i want to acknowledge that i'm setting that this one's going to be a border right 32 pixels solid maroon and a border bottom 32 pixels solid maroon position relative well before i worry about adjusting it let me see where it is by default oh yeah it's in a weird spot so this is not going to be positioned left and top what if i start off with something like right hmm you know what i think i need to do here instead of just nudging this out of position this is where position absolute could come in handy so i'm going to change this position relative to position absolute now that's going to probably temporarily mess things up for me and that's because my parent which is the block quote needs to be position relative so let's see what that does okay so now that the parent is positioned relative the children which by the way these little um pseudo elements are children of the parent block quote now i can have a little bit more control on them so i can do something like right 0 pixels and bottom 0 pixels to start let's see how that looks that gets them roughly where i want so now i can start to play around in fact let me adjust these to zero and zero and see their default location position relative is great when you just want to nudge something but position absolute is nice when you really want to have ultimate control on it now of course it could be that one of them was going to be position relative there's no rule that says both of these need to be position absolute so i could have done position relative just for the before which was working out pretty darn nice for me but let's go with this for a moment now the other thing that can make our lives a little bit easier so we can understand what's going on let me put a temporary outline on here two pixels solid and i'll just do green i want to put a temporary outline on my block quote and so we can really see where these little pseudo elements are showing up okay cool so let's go to the before one and i'm going to go to the left negative let's do negative 50 pixels that should be just a little bit of overlap i think i might be okay with that and let's move it upward negative 40 pixels see how that looks not bad but let's try to be balanced a little bit negative 50 all right that could be okay i know i'm overlapping some content but we'll fix that up soon enough now let's go to this bottom right one which is my after i'm gonna go to the right 50 pixels in the bottom 50 pixels oops that's not what i want i'm going to the right 50 pixels the bottom i guess to move it downward i need negative 50. there we go and the right is going to have to be negative 50. okay i think that can work what do you think let's look at the sample for a quick moment yeah there's just more space above and below so if i head over to my block quote and i do even more margin top and bottom let's see i've got margin left and i've got margin right margin top 100 pixels margin bottom 100 pixels probably a little bit too much there let's dial it back a bit to 8080 while i'm here let's get rid of that outline that was just there as a visual aid in the short term hmm i might be pretty satisfied with this yeah now of course the bottom right one's always going to look farther away from the content at the top left just because my text is left aligned so um at a glance visually that doesn't appeal to me but it is kind of like our mock-up so i guess we're okay with that for now now i'm pretty happy with that so i think we'll go ahead and call this one done but the thing to keep in mind is is that we were able to create this quite easily with pseudo elements and it required hardly any editing to our html notice it was just the use of block quotes if this was a regular paragraph look at that closing tag changes my paragraph is just a normal paragraph but as soon as i make this a block quote it gets the styling that i want for that block quote very very interesting cool okay so let's see what else do we have on here let's try one that might be a little bit more challenging for us what about this second one under gizmodo it's a interesting kind of blog a bunch of tech articles there so in this one notice they have a blue border on the bottom they have a blue border on the top and then they have a little quote image right there on the middle that looks kind of neat and the text of course is looks like it's grayer than the surrounding text it's a little bit larger than the surrounding text and it's also italicized i can tell that from that small picture okay so let's make that our second example so i'm on the html already in fact i'm going to zoom out real quick just so you can kind of see an overview of this i'm going to take my entire article copy that paste it and this is going to be pool sample oops pull sample number two pull quote sample two and i think i'm pretty good with that block quote block quote all right let's zoom back in so you can see what i did here so i just duplicated my article it's my new one though has a new id and of course there's a new headline too but otherwise it's three paragraphs in the middle paragraph is a block quote okay so just kind of get a visual aid of this now oh the the text is centered too i can tell that here we do have noticeable margin left and right all right all right all right let's see what we've got here there's my pool quote sample two let's head over to the css for a moment pull sample two let me go ahead and give it a similar border in fact i'll just copy i'll just do a group selector up here there we go just so we can have that thin border just to kind of give it some structure and i can kind of see that this is one unique section down here pool sample two all right and let's mess around with the block quote in there now there's a couple things we know right away of course we know about margins and borders and stuff like that so let's give it a shot let's see i'm going to go ahead and i guess in no particular order but i'll do margins first i'm going to go ahead and do a margin 24 pixels top and bottom i'll do something like 80 pixels left and right let's see how that looks okay clearly you know and that's affecting it's right down here in the lower left don't forget i've got auto save on my editor and i've got of course this go live which means it's auto refreshing after a second or two on my web page so i'm seeing the update right away down there okay that looks pretty good what about those borders let's try a border top 2 pixels solid it was a pretty nice shade of blue hsl hey don't do that hue saturation light i don't know the numbers i'll start off with 100 50 100 let me just do hsl we don't need to do semi-transparent or anything like that uh that's giving me a white there let's go to a shade of blue jump right over there oh it's jumping over to rgb hsl there we go okay so that's not that's not too shabby so hue saturation and light it's a pretty shade of blue i'll go with that one so i'm using 194 common 97 comma 42 for hue saturation light which is of course a css function i'm going to do the same thing with border bottom 194 97 42 okay so we've got those borders on there now of course if i want more space in between the border and the text that's padding so i can do padding of 16 pixels top and bottom and 0 pixels left and right and that's going to create more space when it refreshes there we go more space above and below if i want to exaggerate that i just do a bigger number 32 pixels perhaps see how that looks okay i'm gonna do this real quick just so that my page is up a little bit higher let's do a padding bottom 500 pixels that'll allow me to scroll this up a little bit higher so we can focus just on that pull quote sample too all right that's looking pretty good now there's only so many things we can do here we might have to get an image involved this is looking pretty good but we do have this little quotation mark up there now sometimes this can be created with css and i'm not saying you couldn't create this with css obviously we know how to create a disk a circle with css we can do that and we could probably do quote marks too but it's not unusual for people to incorporate an image here i think i want to do that since i didn't use an image in the first one it might be interesting to do an image here so let me just do a google search for quote mark and images in fact let me do a file type png and it doesn't matter you know obviously doesn't matter which one we go for necessarily basic one right there i'm actually i am looking for ping in intentionally because i did want to have a transparent background and there's a good chance this may have that if i right click save link as is that going to work nope don't want to do that save images this may be what i want maybe baby baby so let's see i'm under my web dev too let's go to images quote marks one i'm going to call it quote marks one just in case down the road we use multiple quote marks and let's see this may be satisfactory it's uh i know it's gray but i'll deal with that and i should be able to put it on a disk easy enough and position it yeah ooh nice little bright blue ones there too those are pretty cool plain old square ones lots of good ones out there so if you're at all handy on photoshop or an image editor nothing to keep you from making your own quote marks on there too right we could probably even do it with regular quote marks in html and then of course use a google font or something like that a custom font to make them nice and styled so that's a reasonable way to go too but i'm going to give this picture a try let's see what happens so let's see jump back over to my example now let's see where do i want to put that i think i'm going to go let's see that's sample one i want to be on sample two pull sample two block quote i'll do the before content empty set of quotes once again an invisible pseudo element okay creating the pseudo element i'm looking at my clock here because the next division playoff game with the baltimore ravens and the buffalo bill starts up in 15 minutes or so so let's see if i can finish this second one up in that time okay so that's going to do that of course i want to do display block and for now let's give this an outline so i can visualize it oh i like this right after the block let's go ahead and give it some width and height um we'll just start off with 80 pixels by 80 pixels and let's see where that shows up so remember i'm looking over here at my pull quote sample two it's okay that's definitely not where i want it to be but i can see that it has structure now how can i get those quote marks in there background image url let's see i'm in my styles folder so let's go up to my images folder and then my quote marks one of course background repeat no repeat background size i guess i can do 100 um because i want them to fill up the space regardless of what size i have there now clearly these are wider than they are taller so let me go ahead and adjust my height a bit until it looks good it looks pretty good they look a little pixelated a little blurry but i guess i won't get too bothered by that now of course this could be smaller this could be something like 50 pixels in width and that's going to make the background image smaller at some point i'll do some like 35 here there we go again a little tinier okay there we go that looks pretty good and let's see actually you know if i want to make this a disc though it would be better if they were a square if it was square shaped so let's go back to 50 pixels and then i could do something like border radius 50 that'll make that disc shape that i want that may not be showing up here because i'm using an outline instead of a border so let's change this out to border see if that works for me there we go but now you can definitely see that my quote marks are my quote marks even the right position let's see where's my example yeah yeah i guess they are the little tails are up at the top so i guess that's okay who knows if it matters it probably does matter right because if the quote mark is to the left or above the quote you probably need to have that certain quote mark where the little tails are facing upward as opposed to facing downward so obviously with a pull quote you have a little bit of artistic license you don't always have to have two quote marks ooh although i do see quote marks on there too there's individual quote marks on that we might have to fix that up so let's see otherwise i'm pretty happy with this but clearly my background position needs to be just a little bit now if we did something like 50 percent or center that would probably do it yeah that looks pretty good i think i'm pretty satisfied with that now clearly i didn't have a true png image because i can actually see the faint gray background on there i'm going to try not to get too bothered by that i just needed to hunt around more for a better quality image but i think that's good for this demo certainly however definitely based on my example i want to get these quote marks centered in over that top border so that's really my objective here with this hmm how can we do that well if our item is positionable once again i'm going to do a position absolute and i'll start with top zero left zero there we go and of course if i'm going to do that the parent should be position relative or position absolute it's okay to position absolute within an absolute position parent we just don't do that as often okay that's position relative oops i was just looking at the wrong one there it is okay so now how do i get it well let's do this part this is going to be pretty easy right well it's not where i want it so zero pixels is not good but i don't know what the width of the page is going to be so of course i can try fifty 50 actually that's not what i want to do there let's keep that at zero let's do the left of 50 that's going to move it over a little bit too far over and then for the top well i know this thing is 50 pixels tall that'll be easy i can just move it negative 25 pixels and that's going to move it upward that looks pretty good it's just over too far to the right so in addition to the position i'm also going to do a transform translate x based on this syntax translate x must also be a css function whenever you see this syntax of the css value having a set of parentheses like url or hsl that's the sign of a css function so translate x and i'm going to move it over negative 50 now this negative 50 percent relates to the width of the actual element so 50 pixels of width moving it over negative 50 is the same thing as negative 25 pixels in this example and that's getting that little quote mark where i want now if i just take my hsl copy that and replace the green then at the very least even though i don't like that little gray background i can see that all right at least those quote marks have the right spot and of course if i wanted more space on there i could do a little bit more margin top or padding top i mean a little more padding top on that block quote so block quote right now i have padding top of 32 pixels no no no no where is it at i must have it on here somewhere oh let's i'm getting my twos and my ones mixed up so i have padding top and bottom of 32 pixels well if i just want to change the top hmm let's see i guess let's do it this way come on let's do this let's do padding top of 48 pixels right of zero bottom 32 left to zero top right bottom left that gives me a little bit more padding on the top than the bottom and that's pretty good let's see how this is looking up here we had a couple other things i remember the text is centered that should be pretty easy for us to do so we just go to our block quote text align center it's definitely larger font size i'll do 120 which is 20 larger than the default and i can see font style italic that's definitely true okay that's looking pretty good now the other tricky thing of course i know there's an easy solution to this is that our block quote actually has some quotation marks in there hmm well the problem is to do this dynamically would actually be a little bit tough because i've already used one block quote before so i can't just slap on another block quote before if i wanted to put quotation marks on there so that's kind of a bummer so what's a really good solution to something like that i don't know if there is a really good solution so you might have to fill me in if you think of something creative here so here's my problem i would like to get quote marks before and after this paragraph and of course the easy solution is to just do quote marks before and after i was wondering if there was a way i could do this though without requiring the web developer to write those quote marks in could we do a more automated of course we could have done a block quote after and then content colon quotation marks in order to do those but i guess that's okay for now until we think of something a little bit more efficient when i say efficient i mean it requires less editing of the actual html it sure is nice if a web person can just go to the content and change out the paragraph to a block quote and get the exact styling they want so if this paragraph was a block quote then we would have two of those right there and that's all it would take but i think we're in pretty good shape and it looks you know it's not it's a different color of course but i think it looks pretty darn good and obviously font color changing to a gray would be easy enough for us to do all right i think i'm going to leave you with just these two however i want you to do three of these now what would be the most interesting one for you i think it would be this one over here on the top right you could use the exact same quote image the little quotation symbols that you got before look at this one i know it's tiny and it's tough to see but clearly the text is blue it's not italic it's it's it's dark blue there's a very obvious left margin but notice the right margin is no different than the regular paragraphs okay now the other quirky thing with this one is that i see some extra text down here that's been formatted this is probably from the author within the block quote this is an interesting challenge for you and i'd like you to tackle this one so of course the quote symbols are over here on the left it doesn't matter if they're green or not don't worry about that however if you used a font then you'd be very easy to change those into green but what about that author let me at least start you up on this one let's see i'm gonna zoom out a bit on this pull quote sample two i'm gonna copy that paste it now this is gonna be number three number three zoom back in okay so we've got our pool samp our block quote there for pool sample three but this one's got looks like an author let's see can i zoom in on that one a bit at least for the short term yeah look at that so we've got our quote there and within the quote there's a paragraph class equals author actually i'm going to do class equals byline let's make this a little bit challenging for you i'm going to take this one and i see it's todd boldwin and then we'll do another paragraph class equals byline 27 year-old self-made millionaire all right so be it okay i'm going to leave this html like this i'm going to encourage you to write your html the same way i did so this block quote notice it contains two paragraphs after the main quote okay class equals byline class equals byline can you style these two bylines separately differently even though they have the same class can you do that because it looks like it needs it in the sample okay so that's your challenge there i know this is a participation activity so i'm not looking for perfection but i'm looking for effort so of course what i want to see on your example is that you followed along pretty closely one of your pull quote samples has these uh little corner brackets nice big bold corner brackets on there kind of like a picture frame right something like that and then pull quote sample two has a top and bottom border with a quote symbol right up there at the top for pool quote three you're going to work ahead and see if you can do this one now if this one seems too tough for you then obviously let's resize this again that down let's move that up there somewhere i got several pictures on here there's a few simpler ones obviously there's one with just a border there's one down there with some center text this one also looks like it has author information at the bottom too which is good the reason i'm stressing that i'd like you to practice either this top right one here or this bottom one here is because you're gonna have a quiz coming up where i'm gonna challenge you to do something like that so that could be a pretty good one to try so so give that a shot okay like i said i'm going to stop my video here uh there's my examples and for at least for the first two and go ahead and give a shot at that third one talk to you later