Figma to Webflow 2021 - Advanced Follow Along Tutorial

what's up youtube welcome back to the channel for webflow pros today's tutorial is a little more advanced we're going to be taking this sigma design and converting it to a desktop webflow site using the wizardry technique i hope to be able to make this a series where we cover mobile version and interactions as well we're using the wizardry technique for this because the design is so heavily based on grid all our type sizes and margins and everything needs to scale with the browser with until we reach the max container size all right so if you'd like to follow along i'll leave the link to this cloneable project in the description of this video it's going to have the fonts colors and images we'll need for this project and i'll leave the link to my figma file in the description as well where you can compare all the sizes of all these elements we're going to be using the wizardry technique if you'd like to learn more about that technique i developed you can watch the tutorial i'll leave the link to this as well in the description we're going to be using this calculator to convert all our pixel values to something more scalable across different breakpoint sizes so i have this project cloned and ready to basically get started so the first thing i'm going to do is go to the layers panel right here navigator go to the body tag and then go to the body all pages tag right here and we're going to change our background color to this dark color so every page on the site will have this background color and then we'll change our typography color right here to this main color right there and then what you'll notice is all text inside has this color applied now we'll change this font right here you're noticing that every font inside the body that i'll drag in from now on we'll have whichever font i apply here so i'm going to apply this font right here this is our project font and we're going to leave the normal weight we're using the wizardry method so the font size is one viewport width and then i have some of the code in here that basically is going to stop our project from growing at the max container size which is 1560 and also have a minimum paragraph font size so all that's in there if you'd like to learn more about that be sure to check out the wizardry technique but our cloneable project already has our max container with right here everything set up the way we need it so if we look over here this project is very heavily based on grid so everything's sort of aligned with each other and that's kind of how it's set up so for this i'm actually going to be using flexbox because it has more browser support with this and the way we're going to do that is using the box model so everything on the page is a box inside a box so we have our section you know which is this entire section here we have the container which is these two lines on the side the max width that you're seeing there and then we also have um sort of these columns inside of the container so you could use webflow columns but they're kind of hard to work with css grid is one option and then flexbox is another option and i'll show how to do that what we're going to do is each one of these will be divs which are our boxes that hold our content they're all going to have a little bit of space inside those divs to create the gaps between our columns this is a 10 column grid so this box right here for instance would be thirty percent the width of the entire containers because it's three columns right there so using this ten column grid makes it really easy to calculate the width of our different items so the first thing i'm going to do in webflow now is actually set some of our different font sizes and different things like that if you uh don't have the artboard or any element selected just click off to the side and then you'll see all the text styles in figma so we have a display text all our h tags in the paragraph so this h1 heading i'll actually just duplicate this style item so we can have a display text right here this one's going to need to have a class of display and then we can start calculating its font size so if i click on this icon in figma uh what you'll see is this is the font size here i'll just copy that size come over to the wizardry calculator and then it's based on a 1920 artboard with which this one is a 1920 frame so that's all lining up perfectly the way we need it so i can just copy this font size and basically paste it right here and hit enter and it's copying that new value for me so then when i come back over to my project i can basically go over under font size paste that in and then the next thing we'll need is line height so line height is a hundred percent in this which in webflow that's just equivalent of one when we're using unitless line heights and then we'll change our font right here to this font right there and then we also have letter spacing of negative nine percent so what that means in web flow is we will open up these more type options under letter spacing we do negative 0.09 em and that's the equivalent and web flow um so that's the process we need to follow using unitless line heights ems for our font size and ems for our letter spacings so let's go through that for each one of these i'll go to the h1 this time we'll go to the plus sign and go to the all h1 tags so we're affecting every h1 on the site um from there what i'll do is just open up this settings here copy that font size go back to wizardry paste that in hit enter and let's paste that new font size in here the line height is uh 96 so that is 0.96 letter spacing is negative 9 again so we'll do negative 0.09 and then the font so we can select right here and let's just keep going through this h2 let's go there we'll grab the style here copy that font size paste it in and let's go back over here paste this in here um the line height is 66 so that's 0.66 and the letter spacing is negative eight so uh negative 0.08 em and let's apply our font size here and then h3 is our next one um so this h3 right here here's the font size it's negative eight percent and 90. um let's paste that in and let's uh paste this in 0.9 is the equivalent and negative 0.08 and let's set our font size or our font right there and next one is our h4 so let's go over here to h4 and copy this font size this is 80. no no letter spacing and then we're going to be using our regular weight and this needs to be all caps so let's go ahead and paste in this uh font size and we'll add that there 80 is 0.8 no letter spacing and all caps for capitalize and then i think we said our normal uh regular weight right there perfect and then let's do our h5 we'll just copy this font size which is 50. that's going to go right here and then we can hit enter and come over to the h5 all h5 tag paste in that font size and what are we looking at 99 bold and all caps um so this is already bold 99 would be 0.99 and let's do all caps right there and then let's do the h6 right here um so this one i believe was medium again all caps and let's see what our sizing needs to be um what do we have 28 and this is 120 which is equal to 1.2 and let's check out the font size right here and paste that in right there oops right there okay um paragraph so the paragraph is this font size of 20 140 all caps and regular so let's paste that in and let's set the font size on the all paragraphs tag 1.4 and no letter spacing all caps and let's go to our all links tag right here and do all caps as well so that's all of our font sizes the next thing we want to do is figure out how much padding we need in this container so i'm going to drag out a rectangle to get sort of this size it's going to go to this line here because these are actually our columns past that line so this is 120 for our padding so what we can do is come back over to wizardry and do 120 just like that and then our container left and right padding we'll paste in those em values right there and then we also need our padding in between items so if we drag out sort of a rectangle or a box from here let's see how far apart each of our sections are and i made sure to make these consistent throughout so this is 170 we have to divide that by two and that's 85 per a container so if we come back over here and do um for that element size we'll do 85 and then once that's copied we'll come back into webflow and set our top and bottom padding just like that and that appears to be good there so then we can go ahead and start building out we'll start with this hero section here so i'm going to delete all of these style elements outside of the container we don't need them anymore and then in the container i'm just going to drag a div and i'm going to give this a class of grid and this is going to hold all of our grid items across the entire site we're going to give it flexbox and we'll leave it to stretch so that way items next to each other have the same height and we'll justify start is fine for there and then we're going to drag a div inside of that grid and then this is going to have a class of grid underscore item because it's an item element inside of the grid so we're using this beam naming convention there to keep our classes really clean and tidy um so then each of our items have a little bit of padding inside so there's 40 pixels separating each item so if we cut that in half that means each one has 20 pixels padding so if we plug 20 in here and then we add that padding to the top and bottom um in both the sides that is essentially our grid item right there um let's give it a 100 width by default if we need to change that we can change that with combo classes for each one um so then let's just go ahead and drop in this heading so this is an h1 heading we'll just drag that in to our grid item it's set to h1 and then we'll copy this text and we'll paste that in and we have our first grid item just like that let's go ahead and create our second grid item by just duplicating this and you'll notice even though this is a hundred percent is uh because we have flexbox applied it's sort of forcing them to stack side by side so what we want to do is actually allow wrapping right this i just click wrap and now they're allowed to stack under each other but they can still stack by side side by side if maybe each one of these was 50 percent what you'll notice is they go side by side um so we can do that that's what we need for our grid on this next box right here we had that sort of outline there is going to be um three columns so that's 30 of the entire page and what we can do so we have this grid right here we're going to name this all based on our section so this section right here is our hero section and let's go ahead and apply a combo class to this container we'll do is dash dash hero just like that so we know this is our hero section um this is how we're going to write all of our combo classes with the word is and two dashes before it so that we know that that this is a combo class um so we have that applied this is our hero let's see how much space we need from this heading to the top of the page is and i'm holding option on my keyboard and just with the heading selected and hovering over this top border um so that is 296 pixels so if we plug in 296 hit enter that is how much padding we need at the top of this hero so this hero is going to be a little bit different it's going to have a little bit more padding on the top and that's why we need that combo class and then what we can do this grid item right here is going to hold our hero content so what we can do is give it a combo class of is hero content and this is going to hold sort of the paragraph text and different things like that it's three columns so that's 30 percent width and then we can delete this heading outside of it and let's just drag in a little bit of paragraph text right here and then what we can do for that is just copy some of this paragraph text and we'll paste that in there we're going to want this line to sort of be underneath these words right here so when these words start to stack on mobile underneath each other we need to make sure this line is always connected to that so what we're going to do is just select over this and wrap it in a span and then with that span we can give it a class of hero underscore span because it's a span element inside of our hero section so that's how we're labeling that and then what we can do you see i can't add any padding right now that's because by default spans are inline but if we switch it to inline block now it will still stack next to this but we can add some extra padding i'll set the padding and ems so maybe something like 1.5 am we'll play with that value and see how it works and then we'll add a background image to this hero span so we'll just hit this background image and choose an image and we'll select this underline right there we need to anchor it to the bottom we need to turn off tiles so there's only one and we need to set its width to a hundred percent so that way it stays within this span container and then just like that this underline is now linked to this uh these words right here and that's looking great so the next thing we have is sort of this button and i'm actually going to use a link block for that so we're going to drag a link block into our grid item here and then we're just going to give it a class of a main button just like that and then what we want to do is we'll start by giving it a pixel border so our borders uh right here are three pixels and we'll set it to our main color and then let's give it a radius um so it rounds it out of 100 viewport width that just means the corners will always be perfectly round no matter how large the button is and then we can drag in some paragraph text and that needs to go inside our main button link block right there and then we need to grab the main button link block and set the text align to center that means all text inside the button will always be centered and then we can replace that text with this one here and um let's we also can grab the main button link block and set its weight to bold so all text inside the main button will be bold now we want this button to uh basically span the width of this container so with this grid item selected we already have a combo class of hero content applied to it we can apply flexbox and then switch it to vertical so they stack one under the other and leave it set to stretch and justify to the top so that's working perfectly fine there let's also see how much padding we have so that's 30 pixels top and bottom padding for this text so we'll type in 30 here hit enter and then with the link block selected the main button let's just apply this em the value right here of padding on all sides um and that's looking pretty good so whenever we have some paragraph text like this we may want it spaced apart from our content we'll probably use the same thing here and then a couple other places we can create sort of a div that's going to hold some of that content for us i'll just drag it in here and it my paragraph text is going to rest inside and i'll just give this div a combo class um that i can apply to other things in the future um it can be is um we'll see we'll say three dash um maybe bp which stands for bottom padding and we'll set the bottom padding to 3 am and what that's going to do is basically just separate this paragraph text from the button but i can also reuse this class in other places where i need a bit of that separation right there so that's going to come in handy probably later on and let's see what else we have we also have these circles in the hero so what i can do is drag in a div inside our grid item right here and then we'll call this hero underscore circle so this is one of the circles in our hero it has a width of 128 so if we plug that into wizardry and hit enter we'll set the width and the height just like that we'll give it a background color of this main color uh border radius will be 100 viewport width so it rounds it out um and then we can basically just duplicate this so we have two of them let's drag we had an arrow so we'll go to the image panel we'll go to this hero arrow right here and let's see what its width needs to be in the ams it's 21.9 so let's just paste that in there and then let's give this a class of hero underscore arrow set as width and ems then we want to center it inside this circle so we'll apply flexbox to hero circle and center it just like that then we want these two to be side by side so because this parent has flex it's forcing everything to stack one underneath the other but we can wrap these two and a div together to get them to be side by side so i'll drag in a div and call this hero um we'll call it album because this is the album info and then we're going to drag this uh circle and this other circle inside as well and then from here we can apply flexbox to those to basically align them to the bottom justify it to the left and then let's see how much space we need from the button it looks like 174 pixels so we'll plug in 174 and then let's come over here and add a bit of padding you can do margin or padding i just like adding padding in this situation because it's easier for me to select the parent container whenever i need to and then we're only going to add one combo class here we'll create one called is img for image and this one needs a background image so we'll scroll down to the background image section and let's choose this image here set its position to center cover and don't tile so it's perfectly centered like that and then they also overlap each other a little bit so if we look how far the overlap is happening i'll just drag out a box like this it looks like it is about 24 pixels worth of overlap so if we come back over here and plug in 24 what we can do is apply a negative margin a negative right margin here so i'll do a minus sign and paste in my em value and now these two overlap just like that i'm also going to right click and convert this circle to link block because this one will actually be clickable and that is our first grid item just right there um so here this was a three column grid now we have a gap right here so what i can do is add a bit of margin of 10 and that's going to create that one column gap right there so that way i can plug in my next grid item so i'm just going to duplicate this grid item for now you'll see we have this one in here i'm going to delete the content out of it and then this one is for our hero photo one we're gonna have two photo sections so i'm going to duplicate this class call it is hero img1 so this is for hero image one and let's grab this image so we're going to pull this image in here and we're going to say hero um photo one just like that set its width to 100 of its parent and then we'll set its height using em so its height is uh 675 right now we'll paste that in and then we'll apply that height right here it stretched it out so what we're going to need to do is set its fit to cover and that'll prevent it from stretching um and that looks good there i'm going to remove this margin because we don't need it for that one and then this was actually four columns so we need to change the width to 40 percent there um and that looks good right here so then let's duplicate this one more time and this time we're going to duplicate the class to be image two section and this one is only two columns so its width will be 20 and then we'll duplicate this photo class to be photo two and this one can be that photo the height we'll copy that and paste it in here and let's set the height right here and let's change the photo to be on this one all right and all these items are being stretched to the same height as each other which is great because then i can apply i can put something else in here this one is my h4 let's just drag a heading in here and set it to h4 and copy this right here and paste that in and then let's drag a bit of paragraph text underneath and let's copy all this paragraph text so from here up one up and paste it in here um so we need a bit of uh separation between these two usually i would uh prefer not to add margin to actual heading elements because a lot of times we don't want them to be off centered but in this case um the only other time i'm using this h4 is down here in the footer where i'm going to need that margin anyway so in this case i think it's perfectly fine to come over here to the all headings tag and put a bit of bottom margin here maybe 0.4 might be fine for there and then i can reuse this class i created of is three bottom padding to basically wrap this in a div apply that class and drop in this heading and this paragraph text and then that is three bottom padding is going to separate this photo from the next one also since this has a combo class of hero image 2. i can change the flexbox to space these apart just like that and that basically anchors this one to the bottom and that i believe wraps up the hero section so we can move on to our next section what i'm going to do is just select the whole section and duplicate the section and then what i'm going to do is remove this combo class of is hero from the second container because it's not the hero one anymore i'm going to delete a couple of the grid items out so for this container it's a little bit different because the amount of padding in this container is really really tiny and we're using that one other place down here so it can probably create one um class that i can apply to my containers that gives it this 22 pixel padding which if we convert that to ems will give us that unit right there so i'll create a class when this container is wider and then adjust the paddings on the side like this and that will make it a little bit wider there what i can do is grab this grid item and this is my first item right here um oh this is going to be sort of my i guess banner is what i'll call this so i'm going to apply a combo class of is banner um we'll say banner left just like this and then we'll set its width to 40 percent the width of the parent will give it the background color of our main color and we'll change the font color right here and then i'm going to delete that heading out of it and drag in a different heading instead this one i believe is my h6 so let's change that to h6 and copy this let's paste it in here let's figure out how much padding we need so looks like about 59 top and bottom so i'll copy 59 right there and let's set that for the top and bottom of this banner grid item and then for the sides i'm just going to increase it a bit until i get that alignment looking kind of how i want um yeah we'll do 6.4 something around there is good and then let's duplicate this item and then we'll duplicate this class and this time is going to be is banner right instead and then we'll set the width to 60 of the parent and then we're going to set the background color or reset that background color to be transparent and set the font color inside to be this light color so it's more of the white and then i'll delete that heading and we're going to drop in some paragraph text inside which would be this paragraph text right here and we have two groups in here we have this group with the icon and text and this group with an icon in text so what i can do is actually just drag in a div i can hold it and we can call this um we'll call it banner underscore item because it's an item inside the banner we'll drag the paragraph text inside and let's drag our icon inside and let's call it banner icon and for now i'm just going to set a width maybe three viewport or three em um and then let's apply flexbox to center justify just like that and let's duplicate the banner item so now there's two in here and with the whole grid item select it let's apply flex to put these side by side and let's space them apart like that um and then let's add a bit of margin to this side somewhere around 1.7 might be okay um let's get this text here and let's get the other image in so we're going to copy this and we're going to grab this image and then with the banner item selected let's set a width of maybe 40 um let's see how why do we want to make it 47 percent wide um that should be good for those two and then i may set a height on this icon to something like 4 am um let's see let's actually reverse that let's do 4 am for the width and 3am for the height or maybe three point uh 3.4 and then let's set its fit to contain and that's going to make both of these kind of similar in height even though they're a little different um and then let's with the grid item selected let's set a border of 3 pixels because that's the border we're using throughout this project set it to our main color and just like that we have sort of our wider grid section working perfectly fine there and all scaling so that part's great so the next part we need to do is sort of this merge section here so what i'm going to do is actually just duplicate the entire section that we just created so we have two sections so far let's duplicate this section and let's remove that is wider combo class and let's open this up delete one of our grid items let's remove the combo class from our grid item i'm gonna leave that as is for now so i'm viewing this one really as two parts we have our left and our right and um we have our h3 heading right here so let's just go ahead and create that it's actually going to be outside of the whole grid for once so but still inside the container and we're just going to call this merge so this is our merch we're going to drag our grid inside we're actually going to give this grid a combo class of is a merge and we're going to say merge left or actually we can just say merge column because they're both 50 percent and we can set its width to 50 percent and we have that grid and then we can duplicate to make two of them um and since this merch div right here needs flex to basically make them the same height and a line left and then we have our two grids side by side each are 50 of their parent container so then each one has an item inside as well this one has this heading which i believe we said was an h3 so i'm just going to drag that in make it an h3 and paste that in there um and then we also have the underline which is just an image right here i'll drag that under the heading and give it a class of merge underscore line uh set its width to let's see what the width was um it looks like it is this number here you can just come back into wizardry paste that in enter and set that with um perfect so that looks good and then next part we have a bit of paragraph text so i'll just drag that paragraph in here and this is just going to copy this and let's see i may give this a class that i can use called merch p for paragraph and then i can use that to basically add a bit of margin right here which i believe we'll just say 112 should be good and we'll use that as top margin on the paragraph to break it apart that's all for the first grid item so i'm going to duplicate that grid item so now we have two and this time i'm going to delete these elements out of the item and then this is going to be this item right here so it needs a combo class um we'll say is um we'll call it is merge link and then basically the width of these items there are 10 10 uh percent usually because it's 10 percent of the whole container um and it takes up one column but because we split this entire grid in half right here we're actually going to have to double that because 10 if we set that width to 10 right now would be super tiny but it's actually 20 will help us get those five uh side by side and then in each one of these we'll have that link so we're going to drag in a link block right here and that's going to go inside the grid item and it will have a class of merch underscore link it's going to have a width of 100 percent and let's see the height we can just copy that right here plug that into wizardry and then let's set the height here um the border is going to be 3 pixels the radius is going to be 100 viewport width this heading right here i believe is an h5 and then we have our paragraph so i'll just drag in a heading here make it h5 and change the text to say o1 we have a little bit of paragraph text which we don't need that and we're going to copy this word here that paragraph text is supposed to be bold so with the merge link selected we'll change the font to bold text align to center to center everything up inside and then we'll also apply a flexbox to stack them one underneath the other and to distribute them apart and then let's add a bit of padding on all sides so i'm holding down shift that is 1.1 am and then top and bottom we may actually do 2.2 something like that and that is our link so we have this link item right here let's just go ahead and duplicate the grid item that is our second third fourth and one more we need the fifth item there okay and let's change out all the text so this is zero two um and then let's add a combo class to this one called is active that way we can change the background color to filled in and we can change its font color back to dark and those are basically our items there that part looks great so the next part we have is sort of these images here um so that is this one here let's delete the text out of our item here and let's give the item a combo class we'll start with the second image so we'll say is merch img2 image2 um because we cut sort of our entire section in half a 50 50 split each of our columns are now worth 20 of their parent um so this one or this image here that's taking up four columns if that was each or uh 20 that's an 80 width um so this grid item here will actually set to 80 width and then we're going to grab the image that goes inside it which i believe is this one here and then we're just going to say merch uh image one is what we'll call it it'll be a width of a hundred percent of its parent a height of a hundred percent of its parent and a fit of cover and because the two sections are being stretched this will just always be as tall as the content and that looks pretty good there so then let's set up our next image so we're going to basically duplicate this grid item here and then for this uh one we'll just duplicate the class this will be merge image one we're doing that first one uh we'll duplicate this one merge image one oops this one was supposed to be image two so that way this one can be image one perfect um so then we have that this one is three columns so that's gonna be sixty percent width and it's offset or it's pulled over into the next section by one column so that would be a negative 20 percent margin and it's also overlapping this photo by one column so again that's another negative twenty percent margin on this side now those two are lining side by side um the image itself is actually going to have a fixed height this time so it's a little bit smaller um we can go ahead and save that height and let's paste that in for our height here and then let's grab our grid merge column that we have here set the align to basically top and then we'll set the height on this image to a hundred percent or actually let's switch that to align bottom and then we'll push this image off the bottom it looks like it's 311 pixels from the bottom so we'll do 311 and then we'll set that for the bottom margin on this image and then we have one more image we need to do so let's just duplicate this grid item and this is going to be let's see we'll grab this one let's do image three and this is image three as well and this one is two columns so that would be that means this is forty percent and then we need to basically pull it over by a column so we can try negative 20 percent and then it cuts into the parent by 20 just like that and then it doesn't have a height we can remove the height on that and then the image itself that one is going to need a specific height we'll say 188 and we'll plug that in for the height of this image and let's see instead of height auto we'll just not set a height at all and then margin from the bottom is 87 pixels so let's do 87 right here and then let's change out our images so this image would go this image goes here this image goes to this one here and then this needs a higher z index so that way it sits on top um and that's looking pretty good we also want this image to tower above these words so what we can do is actually give these words uh we'll say is merch title we'll just increase the padding and that's going to increase the height of this image as well so that is looking pretty good there we have it set up and we do have a bit of horizontal scrolling now because that image is peaking over the edge of our entire section so we're going to fix that by dragging a div onto the page it's going to go in the body right here and we're going to set it we're going to actually just call it page wrapper and we're going to set its width to 100 overflow to hidden position relative and let's drag all of our page sections inside of that page wrapper and that'll stop any horizontal scrolling when we have elements hanging off the edge so that's looking great our next section is this one right here this is another one of those wider sections so what we can do is duplicate the one we have and then we'll add that container class is wider and then what we can do is open this container up and let's delete the parts inside of it um and this is going to be sort of our um i guess we'll call it card this will be our main card so we'll drag that in the container give it a class of card um is a hundred percent of its parent and then we need to have some text inside of it this text is i believe it's an h2 so let's drag that h2 heading inside the card that's in our container and then we'll grab the card and set text align to center and then switch the heading to h2 and copy all of our text um that's looking great there we have a bit of padding on the top 1 56. let's punch that in and we'll use that padding on the card for top and bottom padding and then for the side paddings maybe we do something like uh 2 pm or yeah we'll drag it out a good bit maybe 6 am [Music] let's set a background image and we'll pull it from this photo here set it to cover center no tile and we also need the logos so we can go ahead and drag those in and then we'll just call this card underscore logos and we need to get the width of those logos right here so we can get the em value for them right there and we can set their width perfect and let's also figure out the margin of uh 43 will be the top margin for these logos here and then let's wrap them both in a div and we'll just call this div hard content and that's going to hold the text and also the logos and with the branding of the new album they basically blur out the logo and the title like that and they did that in code on the live site too so what we can do is add a filter and it would be blur we would maybe do 0.07 em and that looks pretty good um yeah that works there so we have that set up and then we can move into our next section so i'll just go ahead and duplicate this section here and we'll remove the his wider clasp from the container we'll delete the card from this one and in this one we really just have um we'll start with i guess maybe our grid um so we'll drag in a div inside the container give it the class of grid and then we'll drag a another div inside that grid give it the class of grid underscore item and then this one is going to be resources so is resources um this is four columns so that would be a width of 40 and we'll do margin auto just like this to center it inside the parent um and then we'll just use this photo here let's get the height of it and yams and paste that and let's grab that photo which is here it needs to go inside the grid item and we'll call this resource let's say resources or yeah resources call this resource is image and its width is a hundred percent its height gets set in yams and it's uh fit it's set to cover and the radius can be 100 viewport width so it's perfectly rounded and that's good for the image part what i'm going to do is give this grid a combo class of is resources as well and that is going to basically flex everything to center um and then what we can do we have this text here this is actually our display text and it's going to be a parallax so what i can do is resource div resources underscore text and we can drag in maybe a heading and give this the class of display and let's copy the text make it say music resources perfectly fine and then we have this arrow which is a circle so i can drag that in here and then let's get the width and height of it um right here paste that in and then this can be resources circle and let's set a width let's set a height let's set a background color a radius and let's flex to center and we'll get the arrow image which goes inside it right here resources arrow and let's set the width um in ams so we'll copy this width here convert it over and plug in that width there um and let's apply flexbox to center center and then we'll copy this text and paste it in right there um this needs to be set not to shrink like this and then our display text here needs to be set to not to wrap like that and then we can set some margin on the circle using ems um spacing it apart kind of like this and then what i can do let's try setting its position to absolute and that's basically just centering it and let's also duplicate this one to make two of them and then we're going to add a combo class to the second one called is a second and then inside that we're going to set the text color to light and then we'll add some margin because they're both overlapping each other right now so you can't really can't really see it and let's add to the circle uh let's add is invert it for the combo class and that's going to change the color to light and then we can just replace the arrow image here with this arrow um so we're pulling this down by 19 let's actually pull it down by 9.5 which means this one this one had a combo class of his second let's give the first one a combo class of is first and let's give it a margin of 9.5 em um let's see 9.5 perfect that way we're kind of pushing these two apart i may even go as far as doing 11 and 11 here awesome and let's give this one a z index of one let's give our resource grid a z index of two and let's give this last text as the index of three so it's on top um and then we just need to rotate it it's rotated uh two and a half degrees pretty much so for that we can grab the main text that way we're doing both of them and let's rotate it let's say move it [Music] negative 2.5 degrees and that should rotate both of them um and that looks pretty good for that part right there um so we'll grab the entire section and let's duplicate it um and let's go ahead and delete the elements inside and remove the combo class so this is our footer section and and here we have sort of our i think this was what font was this before this is our h4 so what i can do is go ahead drag in a heading inside our grid item change it to an h4 and copy this text and paste it in here and then we have these grid items here which are each one uh grid column so i can duplicate this grid item and let's call this one give this a combo class of is social and its width would be ten 10 we can delete that um let's remove this combo class that we put on the grid that way it still aligns where we need it to align and then here we have this um social icon let's uh drag in a link block inside there so we'll just grab this link block it goes inside our grid item and we'll call this social underscore link we can set its width to 100 i'm going to try giving a padding bottom padding of 100 to lock in this sort of aspect ratio there and then what i can do this is the actual link part i can drag in the circle inside of it call it a social circle and the link is going to be position relative and the circle can be positioned absolute to the entire link like that so then with the circle we have this border three pixels um it's this color here so i can just add a border of three pixels make it this darker color um i think it was thirty percent of our main color and then do a radius of a hundred viewport width and then inside our social link we'll apply flex and then we can start adding in our different social icons which are under our images so right here this will be social icon and let's um let's go ahead and set a size on this so this will be 48 and 48 for the width and height and we convert that to ems and apply that size there apply flex to the circle to center it up and let's set the fit to contain and then we can duplicate the entire grid item um actually let's just paste in a couple more we're gonna have five of these um and let's change out the images and then maybe i'll reduce the width of these ever so slightly and increase the height a little bit just playing with it a little to see how we can get them mostly centered align the apple logo is kind of far off so i'll create a combo class is apple and kind of use that to pull this up because it's so far off um that looks pretty good there i can duplicate the entire grid item that i have up here and basically i want to bring this underneath all the other grid items and i'll drag some paragraph text in there and i'll copy our disclaimer and i can add this combo class is footer um copyright and we can set the opacity on the font and then we can also increase the padding to space it apart a little bit um that's looking pretty good for that part and the last thing i think i'll do is add this combo class as footer here position of relative and that way i can drag in a link block um for sort of the back to the top of the page arrow um so that's going to go here and we'll just call this footer top because it's going back to top and we'll position it absolute to the bottom corner here let's go ahead and get that arrow and let's put it inside the footer top and we'll give it a class of footer top image and let's set its width using amps maybe something like 1.1 am or something like that um and actually i may anchor it to the top yeah like that um so that all appears to be aligning only other thing is to get this to actually align i probably need to put it inside a grid item so we're just going to give this that way it has all the same padding we'll add a combo class of is footer top and then we'll use position absolute here to anchor it to the top there and set its width to auto and that way it has equal padding on all sides um and that looks great for the footer all right couple more little tweaks let's grab the parent uh this entire resource text and convert it to linkbot it's all caps because it's inheriting from that link tag so let's go ahead and grab the main resource text right here and said it's capitalize turn that off and then we can grab the second one here convert that to link block as well either one of those can be clickable back in this section because the width is being calculated as we drag in and out it's getting a little jumpy with those images so what we actually probably need to do is duplicate this one after all and make this column two and then take wrapping off so don't wrap and now that prevents the jumpiness of the images and then i think the last thing we need to do is make that uh nav bar for desktop anyway so let's go ahead and let's just duplicate this section up at the top and then let's open it up and let's remove this combo class we can delete most of the grid items in here we'll keep one of them um and let's add a combo class to this is nav uh for now we'll do a position um fixed to the top um and let's give it a high z index like 9000 or something um and then what else do we have so we have a let's give it a background color first of all and this is applied to the section it'll be the same as the body background color and the bottom border um what did we put here i think it is one pixel actually so we will do one pixel and make it our main color um and then let's delete this heading out of it and then this container we can have less uh top padding figure out what that needs to be in just a bit let's drag a link block in for our logo that's going inside our grid item and then we're going to call this nav underscore logo and then let's get the image right here the svg image and call this nav underscore logo image and then the width of that image right now we can copy as 100 pixels so we convert that to ems right here and set that width right there um and then this grid item is for is nav logo and then this should be one column so ten percent so we can just set its width to ten percent right there and then the rest we can really do just with one div that's going to hold because all of these will be in the menu especially on mobile i'm going to set it to don't shrink or grow that way nothing else squishes it down then i'll just drag in another div this is going inside of my grid right here this is going to be called uh it's just going to be called menu actually and it's going to have a width of 100 and then with grid selected yep that's perfect um let's see where did it go so my menu is right here with a hundred percent it can shrink if needed um or might have to set 90 width on this um so let's do that perfect yep so 90 percent width works just fine um i guess it will need to be a great item to have that same padding so what we're going to do is actually remove that do grid item oops do grid item and then we'll do combo class of is menu and we'll set the width to 80 um or 90 actually and let's see then we can grab some of our menu links so just drag in a link block and we'll say um menu link for the class and then we'll just add a bit of paragraph text inside um and then we can copy some of this text and so let's see what we need to do so we have that the menu link let's do align and stretch out the height and then on the menu links we'll do a line to the center and that'll just add a little bit of padding on top and bottom of the menu link and then i can probably zero out some of this padding um on the container and let's just duplicate a few of these links i think we maybe had five um let's see and let's plug in some of this text and then let's go ahead and set up this button right here so this would be a link it would be menu button and let's try and give it margin auto and that will anchor it to this side perfect and then it's going to have some paragraph text inside paragraph text can say this right here and then if we grab the menu button we'll apply flex center justify and we will make it bold and then let's grab a div block inside the menu button and we'll call it menu button circle and then we can get its width and height which is 40 so we can plug that into wizardry and let's just put that in here and we'll set it not to shrink because it's in flexbox we don't want it getting squished add a bit of margin add a background color um round off the corners and apply flexbox and then we can add the icon which i believe is right here and then this can have a class of menu button icon and i can set its width using ams maybe something like 1am and then i'm going to pull it up by negative zero point uh negative 0.1 for the top margin trying to center it up a bit um yeah something like that should look good and that is looking great and we have our nav uh basically set up on desktop and that has that appears to be working if you've enjoyed this tutorial please hit that subscribe button below for other advanced tutorials feel free to check out my patreon page i'll catch you in the next video goodbye

Channel: Timothy Ricks

Views: 23,391

Rating: 4.9874606 out of 5

Keywords: webflow, how to, tutorial, lesson, advanced, pro, course, building, design, development, interactions, animations, css, javascript, code, custom code, wizard, awards, interactive, figma, xd, sketch, convert, process, step by step, detailed, extended, full, grid, layout, column, flexbox

Id: 3g6irf8c8lw

Length: 63min 13sec (3793 seconds)

Published: Sat May 01 2021