Webflow Tutorial - Mint Redesign Concept

hey guys my name is Jose Oquendo I'm a Chattanooga based web designer and web flow developer and in this video we're going to be taking this design that I did just a concept unsolicited redesigned for the mint.com homepage and we're gonna be developing it in web flow here's the final product and we're going to be doing some cool stuff like using text columns to create this double column layout we're gonna be using relative and absolute positioning to get content display perfectly aligned inside of these kind of funky swooped images we're going to be using flexbox to create kind of this off-center two column layout and last of all we're going to be using CSS grid to create this nicely organized footer if you want a little bit more information about this design like the whole purpose of it and how I tried to improve on the current mint.com homepage go ahead over to my dribble and there's this kind of lengthy function I've written this much but in a lengthy design rationale for all the decisions that I made so if that sounds interesting stay with me and let's get designing in web flow all right so with any project the first thing that I do is style my body tag sounds kind of weird but if I just click on anywhere in the canvas when there's nothing on it my body is automatically selected and if I just click here in the MD selector I can click body all pages and I have the ability to make I guess I would call these like global changes to the entire website here's where you can save yourself a ton of time because for example just by setting a verda as the font here I no longer have to declare a Verta as the font anywhere else headings paragraphs links a text field all of those things will be averted from here not because as CSS or cascading style sheets implies anything from parent elements cascades down to its children by the way the design here calls for a veneer which is actually aim my opinion a much better thought that's what actually one of my favorites I'm so jealous that meant uses it but I actually don't have it as a web font and so we're just using a Verta as a clothes alternative I've also set my font sizes 18 pixels and if you've watched it in my previous episodes you know that I like to use MS as a unit size for typography as opposed to a hard pixel and that's because it's more responsive and that kind of thing so feel free just google ms or REMS and that kind of thing and you can read up on while actually you should use ms as your font size i set the line height to 1.75 ms of 18 pixels in other words that would be 20 what am I thinking 27 so this will be technically be 27 pixels because it's 18 times 1.75 I probably did the math wrong there and I set my background color to Azure this very light blue gray so so there Bernard alright let's get started adding some elements here and I'm hoping to keep this to under an hour we'll see how far we get but with this navbar there's basically three elements there's a logo there are the links in the middle and then there are the more important links on the right and so to do that I want to use flexbox and to do that I want to get all of these elements outside of the kind of like out-of-the-box container that these nav bars come with I'm go ahead and add these back in I want to make sure that brand is at the top so it's all the way to the left and then I want to add one more dip block before the nav menu and we're going to call it middle nav because it's gonna hold all of those links that were in the middle this one over here on the right we'll call it right nav and with that dick block selected the one that we added that contains everything we'll call it a nav container set it to flux box make sure it's set to vertically aligned middle and left align is fine and then with here with its like brand link box set it to expand set middle nav to expand and set the right oops I thought I named this right nav or something else things right now okay but don't want the link itself to be named right now I want the parent element to be named right nav and expand right reason that these are showing up on the left is because elements are automatically set to text-align:left so I just come down here inside just text the line or right everything will go to the right let me delete one of those elements and copy here we can just delete these and name this an out of link let's go ahead and change the color of our navbar because when we style the text we want the white to show up against this off black all right so I know that this will be white by the way I usually like to make these I usually like to set the color of typography in a parent element because usually you're like all of the text will be the same color of course there's exceptions to that so like here all of the all of these links will be white but with web flow these nav links whatever reason they don't inherit the color of their parent you have to declare the color in the link itself all right I happen to know that these are 15 over 18 m/s okay and they're abner medium and so normal here feels just a little bit heavy so that's four of these and there's how it works credit cards support blocks how it works is it support here or credit cards alright there's actually more spacing here than currently in them and webflow there are 60 pixels of spacing and Isis scroll up here this is currently set to 20 on either side if we make it 30 on either side there's now 60 pixels of spacing because it's 30 plus 30 and you'll notice that this broke and it went down to the bottom line the reason for that is because we've got these these children of nav container they're all set to expand meaning that they're they're also going to expand with the same intensity so they're all exactly one third of the parent element and a way to fix that is another words this box will not get bigger so as this stuff increases if it gets grows beyond this line it's just going to cascade down to the next line obviously we don't want that because we want them to be on the same line so with middle nav selected instead of expand I'm just gonna set it to don't shrink all right so it's great about that is that this will continue to kind of like stay at the size that it should be but these will shrink and these will still the size of this will stall always equal the size of this which is also what we want all right so let's uh turn logo this is an SVG that I took from the current mint mint site a couple of notes first is that you should always type in your alt text for your images or SVG's so here we're just gonna do MIT logo the reason that you want to do that is for screen readers one so it mixed your images more accessible and two this is SEO for SEO if you have some keywords and this alt text then it's going to help you to rank higher in terms of organic search results so always do your alt text and if we just give this a class name we can go ahead and give it a specific height all right now it's 32 you can just set it to one or the other height or width and leave the other alone because it'll automatically scale to the correct using the correct ratio but the Nagas bar she liked it I'm just going to add sixty pixels of padding on either side to bring it in so it's not flush with the edge and then over here I'm going to copy and paste and we're going to use a combo class combo classes are great for some situations because you can kind of you can borrow from it's really hard for me to do two things at once but you can borrow from another class just make a couple of tweaks and what you don't have to redo all of the all of the stuff alright so all we did was make it green which is great and then let's go ahead and add our button I'll just call it button and unfortunately we'll have to steal a bunch of stuff from here course typography here all right and one thing I know is I think it took me a lot to figure this out but the celina here since since we haven't set it inside of the element itself this 1.75 ms refers back to the font size for the body tag so it's 1.75 times 18 as opposed to one point seven five times 8.3 m/s so in order to take care of that is just kind of like scale up and down with arrow keys and now since we set it here it's not referencing this instead of so it's 15 pixels instead of referencing the 18 of the body tag alright and then we want to make sure we set to light the background needs to be transparent it's got a border around it with the same aquamarine color and we're gonna use border radius so right now let me get this to the middle so with right now I'll make this flex box as well and I line to the right and in the middle this is not aligning correctly now I'll share with you why in just a second but yeah so instead of for having these square corners in 90-degree corners by adding a quarter radius of four pixels I'm just kind of rounding the edges a little bit and it just gives a little bit of a softer feel not quite as harsh and then of course we need to make it green all right so with these nav likes this is just like a quirk of web flow they'll sometimes get these margins it's kind of weird so let's say it's 2:30 on their right to push it away from here and I think it says sign up free this is login all right and that is our nav bar if I it's always good to test the responsiveness of your work so if I kind of scroll in here hmm all right so maybe if we bring this down to 40 keep it from breaking or I wonder um okay so this is more like this is more like 20 all right so there it doesn't break but I like how it looks with the 30 on either side so let's see if we can make brand if we could make this one shrink if need be no I didn't like that what if this is done shrink you know what I actually don't think we need this and this could be 20 it's gonna be 20 and I'll start bringing this in I guess we will just have to leave it at 20 it's kind of unfortunate but it's important to make sure that your stuff is responsive whoops all right still looks okay let's move on to the header we're gonna add a section and you always want to make sure that you assign the correct tag for proper HTML markup and to help with search engines crawl on your site so we'll call this header and we're doing something interesting with this header we're gonna let the hair image kind of dictate its size reason for that is because it has this kind of like swoop and so I'm gonna give this a class a hero image and set so if I come over here to that design you can I see it like it takes up about 75% of the width so if I just do with is 75% you'll see a time has the right amount now maybe it's a little too small or the 80% okay yeah that feels better and so with the section selected let's give it a class of header I can set the text online to write something that we did with the text up here that now shifts the image to the Ray and now the height of header is determined by the height of this image okay that's important to know for a specific reason in just a second all right so next I'm going to do is I'm going to set the positioning of the header to relative and what that means is that when I drag in a new dead block and we'll could just call that header content instead it's positioning to absolute and all it not means that it's taking up the full kind of height and width of its container which is the next available parent element that has a positioning of relative so your see down here it's targeting header so if I give it a background color just so that you could see it it's making that area black okay all right then we're gonna make it flex box and position everything in the middle so that when I add a new block it's going to be right dead center in the middle right where we want it okay next we're gonna add a container class and we're going to be reusing this container class across the whole page and it's essentially the one of the most fun day tional kind of building blocks of making a responsive site so here's what I mean if I set the width as a percentage as opposed to a fixed pixel like 1320 it means that as I scale in the browser it's still 85% of the width so it's scaling along with the browser next we'll add a heading and let's go ahead and steal this text when I brought it in you'll notice that if I hover over it there's like a B for bold text and then the heading is outside of it and that's because it's got a bold attached to it so I'm just gonna clear the formatting to get rid of that and then with the header content selected I'll set the text aligned to left which will push it to the correct side and I worked on this video earlier so this is the second time I'm filming this so if if I click on this element something with that we did with the body tag if I click in the empty space here do all h1 headings I'm able to set the style for every h1 heading that's gonna appear throughout the whole website so that's very key so I set my font size here that's about 50 pixels I set the line height as that's 1.25 times 15 and avert a semi bold go back to the design you'll notice that there's a line break after of so there's two ways to do that one is to just go in here and click enter and now I've got my I've got my line break where I wanted but it's actually not ideal because if I come down to mobile you'll notice that there's this weird line break your should fit right here but it doesn't because there's an artificial break right here all right so the way I like to handle this is let's add like a custom class like hero h1 and we give it a max width so we'll just start off with 450 for now and I'll slowly increase it until it breaks where I want it so around 600 pixels so what's great about that is if I go down to mobile again your is now showing up in the in the right spot it's breaking naturally so I still got the line break that I want here on desktop but on mobile it's looking good all right the next thing is a paragraph and this just for the sake of time I am gonna I just have a little line break there and since we already set the typography in the body tag so if I go to body body all pages this stuff is already set I don't have to do anything with this paragraph it's already has stylings that should have according to this the one thing I do want to do is there's 20 pixels of margin at the bottom and the top so I'm just going to give this a subclass or a class of cero sub-headline just give it that 20 pixels bottom in top all right next we're gonna add a button this button is gonna have a filled background but we can still use the button class that we already created and just use a combo class just to make a couple of tweaks so we don't have to recreate everything so I'm just going to take change the font to white the background to our blue and take off the green border and there we are this is gonna say sign up free alright and then we're going to add a text link we'll call it two text link and here it's going to introduce that bold text and that's fine here because to accomplish the same thing I'd have to click here make a span create a class for that span it's just kind of annoying so what it's doing in this and the HTML is its wrapping it in a strong tag strong equals bold and so it's kinda doing the same thing we would do if we wrapped it in a span and gave it some like CSS styling to make it bold so there it's fine let's push it away to the right about 20 pixels let's take off the underline make sure we declare it as black and what I'm going to do is give it 3 pixels of padding and then a bottom border that's blue there we go the reason I didn't use this underline is because one I feel like it's nicer for it to be just a little bit further down from the text not quite up so close and secondly I can't change the color of that underline unless I change the color of all the text as well so that's why I used a bottom border as opposed to the underline alright so looking pretty good unless I'm wrong I think that's our but that's the header maybe the one thing is what the hero let me go back to all h1 I think I had a little bit of reducing of the character spacing okay so with here h1 I need to lower this until your cascades down to the next all right there you go next we're going to start this next part of the website that has the benefits of using mint and whenever you start designing a new piece of content or like a new group of content you always want to introduce a section that's letting search engines know ok this this content is grouped together it's kind of like the chapter of a book like when you start something like that a new piece of content you want to start a new chapter there's still at the the reader know like Oh something new is starting the same thing with sections then we're going to add our block container and the nurse with the container it's actually flush to the left that's because up here the reason it's in the middle is we were using flexbox to push it to the metal so all we have to do is set the margins on left and right to auto and now it's going to appear horizontally middle aligned alright next I'm gonna add another dip block inside of my container and it's gonna say it's going to be we'll call it benefits parent okay and it's going to be hard to see this at the moment but what I'm going to do is done here in the typography section I can create columns so I'm gonna set the columns to 2 all rights right now you can't really see anything let me add another div block and now you can see the columns so with this step block I'll call it benefits all right and when you're using when you're using these like text columns the children of the column needs to be in line block I'm not sure why I just through trial and error I've discovered that it needs to be that otherwise you have some really weird line breaks okay we're not quite done with a styling yet but we need to add some stuff so that this starts to make sense so the first thing we're going to do is add an image and I think the first one is key budgets if I were taking my time with this I would go ahead and fill out the alt text but we've already talked about that let me call this spot illustration and I just from having worked at this previously I know that all of these are about 160 pixels tall so so here I'm just gonna set the max to 160 pixels okay underneath that spot illustration there's gonna be a heading upward my heading go no let's try that again a heading there we go and we're gonna head to h2 now what these h1 to h6 means is that you kind of like setting up the table of contents of your book the website being the book of course so h1 is the title of the book h2 are the immediate chapters within that book and h3 would be like sections of the h2 age for would be sections with h3 and so on and so forth alright so I've already like I said I was working on this tutorial earlier so I've already styled my h2 with the appropriate font stylings there so let me go back to benefits child and set it to align middle and let's go ahead and copy this create budgets that stick [Music] then I'm gonna add a paragraph and let's go ahead and copy this alright now I want to go ahead and give these paragraphs a max width so I want them to kind of feel like this is like a block a block of content so let's go give it a 500 max width we can make it make it a little bit smaller like 494 maybe there we go all right okay so one thing I'm noticing is with the container I knew this would happen benefits container I want to set it to middle align and that's gonna push the two columns towards the middle so let me turn on x-ray mode you can't see the second column but it's pushing this to the middle as opposed to being left aligned and what's nice about that is I can take off this in the benefit so I can take off the middle aligned I love for there to be as little code as possible so really quickly let me add a new just like spacer oh why did that end up there collapse along and just make it like 100 eh just so that I can scroll down and see what I'm working with okay I'll delete that later and then the very last thing is we're gonna use a link block to create our button region we can't use the button button it's because I used a little icon here just to give these a little bit of these buttons some interest and so let's do I Khan button and just gonna figure out the padding or they quick 10 top and bottom and 15 on the sides okay we know that it's got a border of blue oops and the radius let's add some text where's the text okay I'm gonna do my very best not to add they CSS class to this cuz like I said I like to do as little code as possible so I'm gonna do 15 over 18 m/s I know that's upper or it's all caps no underline safety black and unless I'm mistaken that's everything looks like it's out just a little bit bolder let's go from normal tests on my Bold all right and then it says create your first budget and then inside of that button oops I'm in the wrong thing I'm gonna add the are my little budget icon thing alright so the reason that they're stacking on top of each other as opposed to side by side is because this text block is set to display block meaning it's kind of like saying this element is greedy for space it wants the whole row it will not share that row with any other element so so we could do one of two things we could give this a class of display:inline-block and it would fix that but or I could use flux box and but it's messing up it's going anding to the full width so I didn't want to have to assign a CSS to this though I guess I'll have to okay so we'll do icon button text so we'll make it inline block that we spoke about before and there's about ten pixels of margin to the left to push it away from this icon the last thing is let's make sure all of the spacing is correct our is 20 pixels spacing above the icon button there's 10 here and this is supposed to be 30 this is such a 30 okay perfect so all that spacing is correct so now I can just oh I need to set but if it's child and you set it to 120 pixels our spacing be low so if I turn on x-ray mode I hover over this you'll see that spacing below the element all right now if I copy and duplicate three four five six there's now six of these in a nice two column layout one thing I want to do is with a parent you know right now there's nice space in between these two but if I were to start bringing this these n you'll see it gets just a little bit tight so I can change the spacing in between these two like maybe 30 30 M so it's 30 pixels is better that just ensures that there's plenty of space between our two elements we get out of x-ray mode okay and then with this one this child we're going out a combo class we'll just do margin top 120 and set its to 120 and that's pushing it down so that they have more of a staggered layup just kind of what I wanted all right the last thing I want to check is the responsiveness of you know like here on this big wide screen this is flush so it looks nice but I want to make sure that as this responds down okay so here it's getting a little too close to to this right here so what I can do is let's find our hero image and we can give this kind of like a minimum a minimum width let's do something like the 1916 and actually that's perfect so so at least there's like this this looks like maybe fifty or sixty pixels well not at least I'll be that spacing right there I'm gonna come back out okay everything is responding nicely I think I saw this button break oh it was that this came down to a second line okay yeah that might happen so but a very few computers have quite this like the small of a screen so I think we're okay how much is that 992 pixels you know they're very few browsers that are quite that small all right so what's left for this section is basically just to change all of these to the correct illustrations in text so I'm gonna go ahead and do that now but I'll fast forward it when I edit it so I'll meet you on the other side [Music] okay so I should have finished fast-forwarding and I wanted to stop here because we're going to be using font awesome - at our our social media icon there so if you've got to find awesome this is a great collection of thousands of icons they have some that are free and they have some that are paid for or you have to pay to use the social media ones are free so you can just download the web font upload it to your website and it's a great way easy way to easy way to add icons social media icons so let's go ahead and add text there we can get rid of this and then we'll call this F a brand for font awesome font awesome brands change it to blue and copy the text there and alright Kaunas not showing up alright so to get it to stack on the same line set the positioning to inline block and it is 24 pixels 24 over 18 m/s and that looks good wait it needs to say download so if I copy and paste what I can do is do FA button so give these a combo class and just give them five pixels of margin left and right so that they're 10 and let's copy this Apple logo and there we are okay so I think that does it for this section let's go ahead and work now on this call to action section it's gonna be interesting because this swoop here is actually above this section so this is going to this is going to get interesting alright so again anytime we have new content a new block of content mean to add a section I'll just add that there and we'll call it CTA section and we're simply going to do the same thing with the content that we did with this so instead of giving it some sort of height I'm just gonna add our image choose image yes all right and so now this image is itself setting the height of the container again if I was doing so I just had an alt text there but I don't need to do that and then with the CTA section selected add a new div block we'll call it CTA content needs to be absolute full and you'll notice that right now it's targeting the body so it's actually taking up this entire screen here that's because you need to go to seek a section and set it to relative all right so now if I click on here I'm not clicking on CTA content and then I can add a div block and it's gonna be right in the middle and we need to give it a class of container all right and then we're just go ahead and add our another h2 heading h2 and let's copy and paste signup form in today removes that formatting and with container we can just add a combo class that says text-align:center we'll add a paragraph you know one thing I might want to do is let's change this name to CT a container and essentially like I want the container to be this width so 600 and let's just make it run it after six hundred and fifty pixels so max is fifty okay because I want to add my form here where's the form block here yes and so it'll take up that width of our container so let's get rid of these things all we need is the field and the submit button with form let's call it CTU form we can make it flex box online Center and all in middle okay great now let's get our spacing right so that should probably be 40 now 43 and 10 let's make sure that 10 is there is I don't want that 30 there cuz it's gonna start off the alignment so let's make it margin top 0 and with CTA form we can make this 40 all right CTA input field let's remove that 10 pixels margin bottom actually with CTA form I wonder if we can make it fully expand all right I didn't do anything okay with the input field I want to get rid of the background color and to your email and let's take off okay so we can see what working with we need to set the font to our dark and I want even the placeholder text to be dark slate gray there we go it's a little bit too small so let's make sure even though it's set to 18 pixels here that's not 18 that's just probably how these forms work so let's go set this to 1 M and C ta submit actually I went to reflect I just started to button blue button let's try that button blue button okay and then with a CTA form let's set it to a background of white at about 60% or so is it 16 yeah let's get rid of that border on the input field okay and then blue button let's actually duplicate the class as opposed to a new combo class and we'll call it CTA button so I don't want it to have a corner radius of four I want to have a core memories of two because when I make the CTA form for it's gonna feel a little more natural like it's kind of kind of cascading in and then let's give it 5 pixels of padding top bottom and right so you can see kind of what I mean that for and that too it feels like they're kind of related and I think this is more like 20 supposed to 10 and sign up free all right I like that let's make sure everything is looking nice and responsive even at the smallest size it's a little tight but it still works okay and then I need to use with the CTA section I'm going to use negative margin to make sure that this kind of overlaps with this nobody be using viewport width to determine because I want it to be nice and responsive so when you use something like negative 10 viewport width that's pushing it up above maybe just a little bit more I want to be like right there I kind of like right at this and so since it's attached to the viewport width as the viewport gets smaller it's gonna bump this section down another option would be to have like hard pixels like- 200 pixels for example and problem with that is when I start scrolling it in since it's fixed I'm sure that isn't luck to you Ben you know what I'm gonna leave that there I think that looks good okay all right so we finished up our CTA section our next section is this I like blog teasers so again since we're moving onto like a new block of content it's going to add a new section and tag here make it section add a div block and give it our container class and then in that container class add a new div block you'll see why in a second with our heading make sure it's h2 okay with that div block I'm just going to call it text-align:center and that way I can add these two elements and the Granby center-aligned I just looked at it before I closed it and this had a max width of 650 and you know even though this is set to middle align this is not in the middle for whatever reason so we can just set this to Auto align on both sides and that works alright let's add a new dip block and this is going to be our blog teaser parent and then we'll have another div block that would be blog teaser child and the child I'm going to add another deadlock and call it a blog teaser thumbnail and in that deadlock I'm going to add an image and let's go ahead and make it the first ones I think is this one alright so essentially this is about 40% of the width and this is about 60 so with the blog teaser thumbnail I'm gonna set the width to 60% sorry 40% all right I want to push this away from the top 60 pixels whoops so that would be with the parent about 260 okay and then I want to add a new dip lock over here whoops I'm sure the thumbnail is above and set it to call it blog teaser copy copy copy and okay the blog keys your child I want to use flexbox to centra align this with the photo and add a text so there's this kind of like zoom in a little bit there's like this badge here so it looks like it's two elements but it's really just one it's essentially like a button but that's it's not clickable all right so let's call it badge just over 18 M's all caps is about 1.25 pixels of letter spacing character spacing I guess it's called and it is white and it's got a background of that see green and five pixels top and bottom ten on the side so five pair ten there well what seems like a lot okay I think it's because of this let's set this to 1 M here we go maybe 1.25 okay and then it probably has a little bit of border-radius it's it's smaller instead of four let's date - all right and that's I can get let's push this content away blog teaser copy by adding 60 pixels of padding and there we go next we want to add a heading and these will be h3 is not h2s remember since this heading these three things will be inside of this section is h2 is kind of like the chapter and then this h3 is kind of like a section within the chapter and then with the blonde teens you copy let's set it to align left and let's just steal this all right add a paragraph and I don't think we need to add okay couple of things I don't think we need to add a max width here this needs to be set to inline block not block I can block it's taking up the entire width of that container and then with the thumbnail selected this is kind of like the same issue we ran into with the navbar it needs to be do not shrink awesome last thing I'll do is add a little bit of spacing there's 40 pixels spacing down below its need to be on blog teaser child's there we go did I go to there hover over there you'll see that so the 40 pixels down here alright so if I copy that block use your child go to block II as your parent and just paste it three times I now have my three article teasers there alright so I'm going to go ahead and change this content out I'll fast forward so you don't have to wait through that and I'll see it on the other side [Music] all right so we're back we've got all three of our articles in so all we have left is our footer so let's go ahead and add a new section let's delete our spacer we probably don't need it now and we'll call this butter and make sure that I said the tag to butter all right to get that swoop I'm using an SVG I'll just go ahead and add it in there I'll give it a CSS class of swoop and height or width I want to set to 100 okay and then with footer I'm gonna add a div block and call it footer enter and to set its background color to that same color and there's a little bit of padding above or I guess it's like kind of like this area here so about 80 pixels let's just set that right there right oops I said this in the wrong place okay that's why I was like why is it soaring up weird okay there we go I've known assists with SVG's if I go to preview there's kind of like this like one pixel a line I don't know why that happens just sometimes does I just will do - one pixels of margin and kind of eliminated that little line all right then we'll add a link block and inside of that link block will add our dark logo with Lego selected we'll give it our logo class and the link block will call it footer logo and set it to margin Auto set our line okay where footer inner let's add a new okay actually wait so I'm going to be using CSS grid just to do all of this just because um well first of all this should be the line left like so there just be really easy to create these columns with CSS grid so sorry to switch back and forth we need one two three four five columns and one two rows all right so with footer inner selected let me add a grid it needs whoops like I said one two three four five columns to rows we name class we'll call it footer grid and let's reduce the space between the columns we can go ahead and add this spacing between these two rows so this can be 60 whoops 960 there we go okay and with I wanted to push it away from the logo 50 all right so just 15 let's see that's great what I like to do is just add a div block and add everything in there because if I add the elements kind of like soullow things can get a little screwy so add that in there and then this will be download you know what I forgot to do is um I forgot to add my container actually no that works I guess maybe just okay yeah okay there we go all right this is gonna be like our footer column header and it's obviously somewhat bold 21 pixels so 21 over 18 m/s and it's so my bolt okay so that looks about correct then let's steal these buttons so that's the Google Play one is this one okay App Store Google Play I think here I changed it App Store all right and then what I'll do is I'll add like footer FA button as a combo class and I want to set these to block to make sure I'm just clean I don't want to do that yet let's give it a fixed-width because I don't like how this button ends here so if I just do but start at 200 whoops I'm just kind of like okay if I just kind of like work my way up there 168 pixels looks about right and it looks like it's a 15 as opposed to 20 let's change this to 15 these have 20 pixels of margin bottom all right maybe our let's add a new block and paste that in there like this how it works and then this needs to be a text link because these are these are links underneath these little column headers so footer link and I think these are like yeah 60% of the color 15 pixels so 15 over 18 ends will be a 1.5 I'm playing hide just a little bit of character spacing no underline they are black but 60% and I think that's it it's gonna be way too much of a pain to type all of these out so I'll just do a couple like min to bills and to me the longest one alerts and advice meant bills so obviously I need to change these to inline-block alright and then I think there's a little bit of spacing 7 that probably should be 5 pixels of spacing okay how many are there in this one 1 2 3 4 5 6 7 so 1 2 3 4 5 6 whoops 7 all right now so here's where the magic happens is if I hold option I can just duplicate these so now it's tips and into it and I think there's also one done here so Claire that dead block just copy it down there this is policies and I think there's just three one to live with a footer in ER and let me go ahead and add the spacing here sixteen there we go all right one two three four or five as an assets so I need to delete two from here and one from here and let's just give these just a little bit more spacing let's do one point seven five all right it feels like breathing a little better and then with a did block selected copy over here and this is gonna be follow we delete these and basic I'm just gonna steal this but I'm going to call that footer social is they need to be in line block two three four I think one two three four yeah oops made a mistake so these need to be links so FA brand further social F a brand better social so that's the Twitter bird before and I just need to add the get rid of the underline in there sorry about that there's only four so there needs to be more spacing between them whoops we'll take care of that in a second just figure that out twenty pixels so I'll just hide that here 20 pixels and I'd like for them to be middle aligned so I think what I can do is add a deadlock add this here and then just scoot these in here I've been middle aligned and let's do it inline-block again look it's not just you in line lock house of mine okay I guess with this we can do better social icon call them and just set this to a vertical hmm that didn't work either I think it might be because okay I think what I need to do is change it from one frame to auto where we are and that feels better okay and then the last thing is it's basically just one paragraph so I think I can add that just by going to here adding a paragraph and then adding footer link even though it's not a link I just want to have the same styles and then here's the beauty of CSS squared is that I can just stretch this all the way to the right it'll take up the same width as the columns above it but if I click on it here it's now left the lines perfectly with this how it works it would be really hard to do that with flexbox almost impossible so CSS great is just absolutely perfect for what we needed to do with this footer and the last thing we need to do is just move this whole footer up a little bit so let's try like 200 pixels like we did before and the foot is trying up over there so what we can do with this whole section is just set it to Z index to go to relative Z index to and now it's going to show up on top of the footer so that's perfect and then I realized that um this probably needs to come down so CTA section this one let's try minus 200 and see what happens here whoops it's too much give me something like that no no I think -100 looks better all right let's check out the responsiveness all right still looking good I think it looks a little tight when it's like right here so let's try using VW yeah - six maybe what does that look like here uh yeah that looks better okay okay the footer is a little bit tight here [Music] but I think once we got into tablet we'd increase the container size and I think that would be okay all right so I don't think we left anything out I think that's pretty much it we finished this page I'm not quite sure how long it's been but I hope that was about an hour if you follow along through the whole video thanks so much for following along I hope this was helpful to you if it was make sure that you subscribe to my channel and I'm hoping to keep doing these videos that you keep getting ideas on how to develop your own web flow sites I love web flow it's been an incredible resource to me in my freelance career I hope it is for you and yours and make sure you hit subscribe so that you get notifications of videos that come up soon and all that jazz so thanks for sticking with me it is 958 at night have a good night

Channel: Jose Ocando

Views: 24,375

Keywords: tutorial, webflow, mint, developer, web development, designer, web designer, ui ux, re-design, flexbox, css grid

Id: sle_swITyZE

Length: 71min 34sec (4294 seconds)

Published: Thu Dec 27 2018