Design a Website Landing Page in Sketch (Tutorial) 🖥

what's going on everyone if you're new to this channel my name is Cody and I'm a graphic designer based out of San Diego and hopefully my moustache doesn't scare you away I promise I'm just trying it out so it's a little creepy I'm sorry but uh just bear with me today we're gonna talk about sketch so I've been getting a lot of comments from people all my youtube videos requesting that I make more sketch videos so this is one from Adam John Lea he says thank you for the excellent tutorial I would encourage you to please make more sketch videos much appreciated well thank you Adam definitely so I hear you guys feedback and I wanted to make another sketch video today so we're gonna jump into the software and let's make a like a quick landing page for like a adventure outdoor type style brand so for this design I'm envisioning a page that we can get users to want to scroll through and explore the different pieces of content so maybe using some nice like landscape imagery or some lifestyle imagery using some supporting typography to sort of build like a story on the page so I'm gonna kind of explore that and see what I come up with and kind of just design on the fly and maybe we can find something that looks cool that is engaging for people to interact with [Music] so now we are in the magical application of sketch now I know a lot of you're like what is sketch like I'm used to Photoshop and I love I know I know I used to love Photoshop I still love Photoshop it holds a special place in my heart I use it for almost everything photo related but now when I design websites and apps or anything really digital vectorbase I do it in sketch you know with the exception of like illustrator for doing you know some you know really intricate kind of illustration stuff but you can illustrate in sketch depending on what it is like buttons and icons and things like that but you know you got to leverage the software's for what they're built for so Photoshop is primarily made for image manipulation and photography that sort of thing sketch is made primarily for user interface designs so you're gonna have to evolve you're gonna have to adapt and I recommend that you learn sketch so this is why I made this video so that you know you're a little bit more familiar with the features and you can design very quickly in this software there's a lot of cool features that will make your life a little bit easier so I know you Dyk die hard to photoshop fans aren't gonna like this but it's time to evolve it's time to go into softwares that are made for what their purpose is so this is sketch so our layer panels on the Left we've got some sizing kind of transform tools here fills border shadows inner shadows Gaussian blur so a lot of the same terminology that you would see in Photoshop but you know everything here is laid out strategically in a way that will help you design more efficiently for user interface designs so enough about that let's just start off here with inserting a new artboard so we're gonna insert our board and since we're doing a website landing page we're gonna go to this one of these pre-program kind of template it's sizes here so you don't have to kind of guess what sizes are anymore sketch made it very convenient with all these sizes on the right side so for now we're gonna do our desktop view first so we're do a desktop HD and what it did there it just made a nice little art board for me and I can just grab this I can bring it down because I know for a fact that my sites or my page is gonna be a little bit longer than what was it 1024 something like that so I usually start by just dragging that down kind of giving myself a little bit more room to play around with so come up to the top here and I also want to turn on my guides so if I go to view this little guy right here if I click this we want to click layout settings this will allow us to put a grid in there you see up now right now it's not centered and I want it to be a little bit more true to what a like a bootstrapper like a you know web-based grid would be so I'm going to make sure I click Center it'll Center those and I want the width to match what I have here so let's do 14 was it 1440 we had let's just hit OK oh it didn't Center it hold on so let's click on that again layout settings Center boom now we have a full width kind of grid system here that we can use sort of eyeball and just make sure that our content is you know nicely kind of laid out and it's consistent throughout the whole page so we'll go ahead and click OK and you can do more things like your offsets your columns I like 1212 column grid for this you can change your gutter with some people do like 30 but we'll all use this for now so now that we have our sort of skeleton or kind of backbone for this site we can start building on top of this and we either turn this off with ctrl L or turn it back on with ctrl L so that's like a little hoc eat if you want to kind of toggle that on and off I know some people find it annoying to have this on all the time I do personally because you know I like to see what the final output would look like so a quick little toggle will turn on and off but for now we're gonna keep it on because if we have any really done anything so let's um let's start by entering a shape so let's do a rectangle and we're just gonna start in the left hand corner and just drag it across this way this is gonna be our navigation bar and see how sketch kind of tells you how big that that is so 1440 by let's just try 84 now and then you've got your fill in your colors so let's turn the border off and it's just give it a fill of white and maybe we want like ass little drop shot on this lift is add a shadow let's zoom in here you can hold the spacebar to move up it's a little move tool and I'm gonna toggle this off so I want to see what the shadow looks like so I want a subtle shadow so let's click into this and let's just bring the opacity right here and you'd set the blur to like ten would ensue that does know that's maybe nice I might even go on the y-axis one and maybe the blur lets you set six maybe and then I might even just tweak the color a little bit more so I want to be very like soft that probably won't show up on top of an image which we're gonna put here but if if we're scrolling over other content like white areas or like maybe even a gray background this this nice little subtle shadow will indicate that this is the the bottom of our navigation bar cool so we have a navigation bar now we need to make up a like brand or logo so I think I talked about making like an outdoor kinda lifestyle brand so let's go to insert shape will go to oval and I'm just gonna draw a shift and dragging its to like a see our navigation bars 80s let's do like a 60 so we've got a little circle here I'm gonna take the fill off and I'm gonna keep the border let's go to like a darker color like a the sketch gives you these gobo colors by default we'll just use a second to Darla's second to lightest and then give it a thickness of like maybe five and since we're creating an adventure brand let's let's make some mountains I know it's a little stereotypical but for sake of time I'm just gonna make a quick little and a mountain graphic so let's go to vector and then let's just draw this I'm gonna hold shift as I draw see if I bailed shift so if I click it it straightens it out I believe it gives you like a 45 degree angle or something like that so we'll click that and just make some little simple mountains nothing crazy here and then we'll bring our thickness up to five to match the outside and then up here you're gonna click finish editing so this is your whole path that you have here you can keep going and finish that up or just click finish it's a similar to illustrator and then we're gonna match up that color with our color picker so our color picker gives you like a little magnification or it's gonna go over the same color we had earlier so now we have like a little icon I could serve is like our logo and then maybe we'll just make a some you know text that can accompany of this graphic so let's go to insert text and just click and then it puts some like lorem ipsum there for you or some type something lorem ipsum so we're just gonna type and see cool hipster young adventurer brand I'm thinking coastal Nomad yeah that's cool and this makes it a little bit bigger so maybe like a 30 and maybe we can go bold on this Chalabi font that's cool actually I kind of want to go something else maybe circular there looks cool so coastal Nomad this is the name of our little brand I might shrink this down a little bit more actually okay let's go down like for kind of match the way to the font a little bit more summits like both of these I'm gonna right-click I'm gonna go group selection I believe there's a hotkey for that I'll put it in the the Edit we're gonna rename this double click on this and call it logo so now we have our logo I'm gonna drag it up on top of our navigation bar and I'm just gonna label this the background of my navigation bar just uh background just so that I know and I'm gonna click on my logo and I'm gonna click on the background so I'm shift selecting both and I'm gonna go to my alignment tool appear these are all your alignment tools this one right here is Center so if I click that it aligns horizontally so it centered our logo within this navigation bar which is what we want once you've done that you want to zoom in I always like to zoom in when I'm creating like some links and stuff because we're gonna do just that we're gonna create a link so we're going to insert text click that's way too big let's try maybe like a 16 at first and let's go to like a book size font here we go let's just type about this is our first little little link here and let's make it a textile house so I'm gonna click right here this little thing says no textile where and click that and go to create new textile something I'm saying textile like a textile shop anyways let's go ahead and just call it nav link inactive now if I if I make any more let's just say I made another another link in different fonts or say bold and like Aquatica or something like that if I typed blog as our other link and I lined it up all I have to do is go to textile and go to nav like and see what it just did there it updated it for me so it saves you a lot of time and headache later when you want to apply a style to your typography or your text so that you know you kind of have all your Styles in one little area like this and you have kind of like a library of your styles so find that very helpful when you're working on on multiple pages so let's just make a few more links here and maybe we can make a search a search icon so go to insert again shape oval I'm gonna hold shift and alt and I'm gonna make a little like magnifying glass circle so maybe like 18 points we'll get rid of the fill and we'll give it a thickness of about two women and see this is what cool about sketch is like it's all vector based so you get a little like really crisp like renderings of your graphics whereas if you're in Photoshop right now unless you're making a vector I think even if you make a vector it look like bitmap there'd be like little pixels that are all fuzzy on the edges so that's what's cool about sketch and one of the big differences here let's go to insert shape and we'll go to a line I will just drag right here this is our little magnifying glass I'm just move this down a little bit big [Music] and you can also round this so maybe run around in this let's go to borders and then the ends I want to be round see cool and then let's group this little guy we're gonna go to right-click group selection and we're gonna call him ICN for icon search I'm just gonna move him over oh yeah let's turn our grids back on so we can see where this should go alright let's so let's just make it a rule that we don't put anything past this this is like our container for our website so if I had maybe like a mobile hamburger menu we could just say that this is where it would kind of sit but yeah so it looks good turn it back off so now we have sort of like a really quick navigation and you know you can get a little bit more fancy with this but I'm just kind of making a quick navigation just for demonstration purposes so now that we have that let's group all of our elements so everything we just made right click group selection and we'll just feel like nav header that way if I turn this on and off it's all one element you could also make this a symbol so that if we wanted to update anything on this it would affect it every other place we have it on the site so you can imagine you have like 30 pages on a website if you wanted to change the blog a text or maybe the the logo needed to change we made all this a symbol it would update it on every single artboard for us so let's go ahead and do that great symbol we'll just call it nav header so let me just show you if i duplicate this bring it down come into here and I move my contact button over go to return to instance see how I just moved it for me so that's what I'm talking about take a smart object basically and it also it kind of like nests all these symbols into one big sheet for you so when you have a bunch of different symbols going on it'll put them all in this kind of symbols folder almost like its own page or document but we'll go back to page 1 we should probably call this let's see homepage cool and we'll delete that copy so now that we have our navigation bar let's make a hero image so let's go to insert shape go to rectangle and let's just drag like we did before word the header and just meet the edge and this to you it's 1440 by say let's do like 650 we might change this later but who knows take the border off let's make the fill 100% black because I might drop an image in there and I want to probably lower the opacity of the image so that you can kind of see a little bit of the black behind so now that we have our container here let's let's find an image that we can use as their hero image to kind of introduce people to the site for the first time so I'm gonna go to the Google and go to burst shopify calm this is Shopify's stock photo site that they built so thanks Shopify for making this a awesome resource and they've got at least two different categories and collections that you can kind of peruse through so we want to go through nature and see you got some cool photos why is there so many goats right here and sheep there's a lot of goats here anyways let's see if we can find an image that has people in it and kind of communicates a little bit more of that outdoor lifestyle so this won't work we got a person in there kind of right by the edge of this like River so let's just copy that image and let's just paste it on top so it's kind of big that's fine we're gonna select both our container and our bitmap so that's our image we're gonna right click and go to mask and what it does see it puts it in there we're gonna double click and make sure I've been our bitmap is selected and see this is an entire image right here so we're gonna scale it down to fit a little bit better holding shift as we scale so it scales proportionately and I might make my hair I'm Agyei little bit bigger and I look at it but yeah I want to make this container little bit bigger so I can just go up to here and go to like say 750 just type it in to click enter there you go and then I talked about making this this image a little bit darker so that we could lay some text over it so let's click on the image and go to say 85 see how it darkened it because I have that black fill behind this now we're gonna add some text so let's go to insert text and just click on top and already we know we want this to be our kind of like main and headlines so we're gonna make this bigger let's go to like a 65 for now and let's go to bold and let's make this white and let's just say let's see coastal nomads maybe this is like their intro statement that kind of tells you a little bit about them so let's try we seek adventure there we go and let's go 2 center-aligned and then let's click on this text and our hero and then click our alignment tool up here so we can Center it so there it aligned it horizontally I want to make this a little bit bigger now I'll give it maybe like at 80 yeah maybe a 90 screw it this is like the first thing you say people see so let's just make it nice and big now I want to add maybe like a little intro like a subtitle up top here so it's like maybe it says like you know coastal nomads we seek adventure so let's insert some more actually we'll just duplicate this holding alt and shift and let's make this about half the size 45 let's do you coastal and what I said Co something an old stone oh man but I might make this a different font to contrast a little bit better so let's go to let's see let's find a good but the condensed upper case kind of font so if I go through my bead in condensed let's just you all upper case so I think if you go to options text transform about upper case and then we will we'll go to character here and type in about eight space it out let's bring this down a little bit maybe like a 18 that's a little tiny maybe like a 23 and then let's give it a little bit more space [Music] see like there we go it's always nice to kind of Kern out your text a little bit like this to make it more I don't know like elegant and kind of classy your sophisticated I find that when you do that it just kind of looks a little bit more premium so let's do coastal Nomad and let's give this a little underline so let's go to insert shape line and just kind of drag this underneath this is just sort of a design element I maybe will go with like a cool like burnt orange or something to kind of contrast with our background let's find something that looks pretty cool and then let's go to thickness maybe like three I'll just zoom in so we can see what we're doing here so it looks pretty good you can align this perfectly on your own we're just gonna kind of quickly just make sure it's kind of going to spanning the width of the text and so I'll group these two group selection we'll call this um intro text for lack of a better name scheme and then we'll call this will actually make this a text style let's call it um let's zero Eero text that way any hero image we make on the site we could just copy this style we won't have any issues you do the same with that but we're fine with that for now so and then I'll group these two together group selection and we'll just call this titles and now that I look at this I want to make this image a little bit darker because it's still just a little bit of busyness happening here so let's go to like a baby seventy five seventy five works now let's make a button maybe there's like a call to action and kind of get people to explore the site more so let's go to insert shape rectangle and let's just draw in a box just expand it oops see I have my lock on that's why did that scaled it proportionally let's just unlock that and then expand this over here you can also just type this in so let's do like a 180 maybe like forty five is our height and then I'm gonna click this and I'm also gonna shift-click our hero image and I'm gonna click a line so that perfectly aligned it you got to work smarter not harder I mean you can work harder too but and let's make this the same burnt orange color let's go to our fill and let's just click this and let's just click our burnt orange and what would be a good idea now that we're starting to kind of get an idea of like our colors and our styles if you go to the colors here you can make some document colors so let's just click that burnt orange and click add new preset so now we have that so now whenever we want to use that orange already in our color palette and then let's grab this maybe we want to use the same text for our button font so let's grab that copy it and let's zoom in and paste it now it's a little big now so we'll probably go to like a 14 or 15 let's try 15 and it's centerline let's click both of them centerline them and let's do a vertical alignment too so now we know that this is perfectly centered horizontally and vertically within this button here and I might go to 14 now that I see it so let's make this button a symbol let's group it first let's call it BTN main so that's our button that's our main button and let's go to let's go to create symbol and we'll hit OK and see what it did here I made this thing called overrides so if I make another button bring it down here it recognizes that there's text within that button so if I want to type in a new label here so let's say about us see how it updated that without updating that one so this is really useful if you have a bunch of different buttons on a site and they all have to share the same style you can update the text without updating every single one so you would think that it'd be like a smart object where you update it and then they made that one about us but that's not the case because sketches super smart and it's currently better than Photoshop for using your face design sorry guys so let's go ahead and get rid of that one and let's move this one up and I just want to make sure that I'm aligning this to the bottom of the text here and then this hold shift and go one two three four so now we know it's 40 pixels away from that let's do the same with this guy up here let's go to the top of our biggest letter character one two three four there now they're like distributed evenly from each other and we're gonna put our button within the titles and even though it's not a title we're just gonna keep in group so that if we wanted to grab this element we can move it around it's fine well so now we have a hero image it's looking pretty nice let's make it a slider so if we wanted to feature multiple images this would be the first one so let's go to insert shape oval and let's hold alt and shift as we create this we'll make it I don't know 12 by 12 let's get rid of the border this will be the active like slide indication dot so we'll go to a hundred percent white and then we'll just hold alt and bring it over here maybe about 15 pixels or so and this will be the inactive state so we'll get rid of the fill go to borders and we'll make this one hundred percent white and then we'll just duplicate this again maybe there's three and see there each 15 pixels apart well shift-click all of these and we'll group these and we'll call them page or dots you might have a different name for them but that's what I've called them in my line of work and see if I hold shift and I kind of bring in like you can see that the it's basically telling us that we're centered within the document right now so let's make some some arrow navigations so that if anybody wants to click through the different hero images they don't have to just click this I can click you know the arrows but I think people like to navigate in different ways so let's give the user more options for a way of doing that so let's go to insert shape line and let's just draw maybe we want to make it the same height through this button bit about halfway here and make the thickness about three and we'll just duplicate this and then we will flip this little guy and zoom in let's just match up our corners here cool now let's group this we'll call it arrow we'll call it icon arrow right and then we'll make this little guy 100% white so contrast with the background and then make sure we have our group closed and we'll just drag them over here holding shift make sure it's straight actually we'll select that we'll click our background hero image and then we go to our vertical align and see how it kind of put it in the middle there so now that we've created all these elements we just want to make sure that we group all this stuff within our hero image so let's just grab our icon I paid your dots our titles let's just put it inside our hero there an hour our whole hero is one kind of big element that we have grouped just in case we want to move it around it's all United and we just you know keeps things clean so we have our header hero so now that we have this all looking nice let's make a section that can maybe send people deeper into the site for other maybe category pages or whatever it is let's just make some content here so let's go to insert text go ahead and click and we're going back to our circular font and let's take all this spacing out and then let's just go to this dark color and make this about and say 36 and let's go to like 48 actually [Music] and let's just select justify this and let's turn our guides back on so I want it to align maybe this guy right here this little gutter and then let's just find before we do this let's just see what content we're gonna put in here so let's go find a photo I'm actually gonna go to Magdalene she's another cool um stock photo site oh let's just go the editors pick it's a suite this looks like a big view Canyon bridge and uh Big Sur let's just drag this into our document so you just grab your image flop it into sketch well that's pretty big so let's just scale it down and bring it into here holding shift as we shift and alt as we scale down and keep it proportional now I want to make a container for this because this is probably every image you dragons probabiy a different size so let's go to insert shape rectangle and then let's just use our guides as a guide and be 540 by 540 that looks okay again let's make this understand black well that's our border one percent black and then let's do what we did earlier and just put our photo on top of the rectangle and click mask right click mask there are images in there let's turn this uh these guides off now and then let's just sighs this accordingly make sure that we got a nice little crop here so we can see the girl and the bridge looks cool now that we know what our content is let's just title it um you know maybe we're talking about the specific area so big exploring Big Sur if you haven't been to Big Sur you should definitely check it out it's really awesome so let's make some body copy here so let's go ahead and add a text box let's just drag it it kind of like on our grid here and then I'm gonna go to this site that I usually use hipstery up some hipster if some it's just funnier than lorem ipsum and like I feel like when I give this to developers they kind of laugh at it so I'll click beer meat and it generates a bunch of random kind of hipster lorem ipsum stuff so let's just grab that copy it and then let's just paste it into our text box and then let's just turn our thing off I'll line this up actually it's turning back on to make sure that we're lined up properly there we go looks pretty good so now we have like a featured image and we have some text maybe you want to add a button so let's grab this button that we made a symbol of copy it to paste it down here and I'll line it to everything so let's go to 1 2 3 4 I think is what we did and for this one let's do 1 2 3 4 cool say 4 looks a little crazy there let's go 3 3 & 3 so 30 pixels from each element is what our spacing is there and then let's just group this group selection let's go text left and then I would advise that you make this a textile maybe this is our H h1 a create new textile h1 headline and then let's call this our body copy so let's make a text out for this create a new textile body copy you can name these whatever you want but that's just what I'm gonna do for now and then for our button we don't want to go to about us since basically that's going to the about us we can just click our button here and then just type maybe it's read more BAM look at that and see it didn't affect that one because it's not it's own symbol I actually don't like that this is a square so I might make this a more of a rectangle shapes let's turn the lock off let's go to like 490 yeah let's do like 4 or 25 or 20 and then let's just make this a little bit smaller I think he was just taking up too much height there you can see more the image now more of a standard kind of picture format and then I'm gonna click both these elements and just align them vertically cool so this is basically centered within that block grab both of my pieces of content here and what I usually do is I'll make a background in this area so let's go to insert shape rectangle I'm just gonna drag this down so that it has its own container so let's do 1440 by let's say 650 just type that in made it on top of it but we'll just drag it down and we'll make this 100 percent white get rid of a border and we'll just call this background container and then grab our elements grab the background shift-click all these see how they're all selected and then it's go to vertical line and then are we on our grid we are on our good I might move this over actually right here so that they're on the same distance from the from the edge of the browser or window we'll turn it off let's bring in this element cuz I like this maybe we can put it on top of the exploring Big Sur so let's just go in here and grab it copy and paste it and let's just put it on top of our on top of our exploring Big Sur now I need to change the TEC color of this text let's go to that color maybe since this is not the hero image we make this little smaller we go to like say 18 yeah eighteen looks better we'll just make sure we'll do left justified I want to make sure it's lined up and then we'll make our line a little bit smaller and then maybe this is like some kind of intro title to be bold and brave I don't know I'm not a copywriter guys we're gonna call this image right and we're gonna make it a symbol and then we're gonna make this a symbol as well and text left cool so now we have two symbols we're gonna group all these together we want to keep everything nice and compartmentalize Mosul's like there are components so we're going to group these call it text left image right so now if I make another one of these just make our canvas a little bit bigger so if you click on the name where the artboard is just drag down if i duplicate this entire section and i double click I can change the image by clicking this override so what's cool about this is if I click on my image and go to choose image go to my downloads open and it should update my image there you go see because it's a smart not a smart object eye symbol it basically will let you override it with any image you want to upload so that's very helpful when you're designing multiple pages and you want to use components you can just update the content within it so let's go ahead and do the same idea with our text so let's click on that and let's go to travel and I don't know capture see how it updated that and then let's go to our title its sightseeing in SF see how very quickly I don't have to redesign anything I just copied and just updated my information very quickly so maybe we want to separate these two sections with a nice little quote and this is where that'll live so let's find another image let's go back to Magdalene and let's find an image that we can lay some text over here this will work just copy this or let's download this I should say thank you Gill's lambert i press you to think everybody else while i use their images as well but we're just using this for an example so let's select both images masks um and let's just shrink this guy down this is just gonna be kind of like a texture anyways so it doesn't need to be super super vivid or anything it's more just kind of like a background texture for a quote maybe somebody is giving a testimonial about coastal nomads and you know this is a good spot to do it so it creates kind of credibility so let's just let's grab this text copy it and paste and then let's make it white and then we will center justify this align it vertically and horizontally see that and let's just let's find it let's find a picture of a person that we could use that could be our testimonial person here we go easiest girl so we download this she looks happy and we'll bring her image and once it's done downloading drag it in let's just turn her eyeball off real quick and let's make a new layer so let's make a just make a shape Deauville and this will be like a little like thumbnail of her face so we'll go like 70 and we'll turn our picture back on and we'll put it on the top and just mask her in there now this image is huge so we have to size this down real quick we'll just bring it down bring it down Tao let's make sure her face is in there there we go she's a nice happy looking girl and let's just turn this down a little bit turn the opacity down just a tad maybe like eighty eighty percent and so this is like something that she would be saying so she's not saying exploring Victor we want her to say like little quotes here costal nomads are friggin rad yo so she has something good to say about coastal nomads let's give her like a little name so just grab this text [Music] make her text white let's call her Hilary Duff because I haven't heard anything about Hilary Duff from the news lately and I miss her and she's awesome so there's our Hilary Duff girl it's probably not her real name I might actually make this little bit smaller and just Center that let's grab all this and just make sure it's nicely centered here and there's a little testimonial to save time we're not gonna make a footer show you like in another tutorial but look very quickly we made this like landing page that's branded pretty nicely and it's consistent with its look and feel some nice stock images and you know you're using symbols to reuse elements that you know otherwise would have taken you like maybe double the time to to kind of recreate there it is so hopefully this video helped you learn a little bit more about sketch and some of the features that you could use to speed up your workflow if you enjoy the video please subscribe and I will be back next week with another video so leave some comments guys [Music]

Channel: Cody Brown

Views: 100,190

Keywords: design, sketch, tutorial, howto, layout, typography, website, graphic design, graphic, user interface, ui, ux, landing page, page, app, learn, educate, how-to, web, code, create, make

Id: Mv3p1LlmdHI

Length: 38min 27sec (2307 seconds)

Published: Tue Oct 10 2017

Reddit Comments

[u/DuplicatesBot]

Here is a list of threads in other subreddits about the same content:

• Design a Website Landing Page in Sketch App on /r/UI_Design with 3 karma (created at 2017-10-13 07:22:10 by /u/Codybrown23)
• Design a Website Landing Page in Sketch App (Tutorial) on /r/designtutorials with 2 karma (created at 2017-10-13 03:44:12 by /u/Codybrown23)
• Design a Website Landing Page with Sketch App on /r/web_design with 3 karma (created at 2017-10-13 03:23:23 by /u/Codybrown23)

---

^{I am a bot FAQ-Code-Bugs-Suggestions-Block}

^{Now you can remove the comment by replying delete!}