Live! - Everything Webflow - Layouts, Interactions, Support - 11/16/2021

yo yo what's up everyone john here with web dev for you here to help you build awesome website without code in webflow i do these live streams every monday through thursday from 12 pm to 1 pm central and we cover everything web flow to design systems uh building complete layouts and web flow working with interactions and animations and if you need help with a personal project i also provide support via the super chat function here on youtube so if it is a personal project you can drop a super chat and i can help out yeah so i have a really fun live stream today i'm super excited to announce a few things today but on the agenda for today we're going to recreate this site here it's called well the tagline here is just mission but we're going to be working with mixed blend modes where when we uh when we have a background appear behind an image the text changes color and uh oh apologies about the dog there he's wigging out and we're also going to create this menu here where the entire page zooms out and we have the menu items here at the top all right so it's a fun menu i mean we can scroll through the site still and the menu stays intact but uh it's just a fun fun way to have a menu on the site all right so this is what we will be building uh i might have to go and check on my dog in a second if he doesn't stop barking okay all right one second everyone i do apologize about this i can't have that in the live stream so i will be right back and all right i'm back uh sorry about that everyone uh hey tazewere hey marcelo uh hey manuel hey daniel uh yeah so this is is gonna be what we're gonna build today um it was inspired by uh this site here so one thing i want to work on we can work on this together i looked up blend modes but i couldn't figure out how the site turned the text to white over this colored background so i'll show you what i did to change this color here from black to white but um maybe we can kind of brainstorm together and see how they changed the red to white here because i would want to achieve this effect just making the text white but i'll show this down the line uh yeah this will be cloneable uh daniel i'll make a cloneable so you can just clone it into your project and copy and paste it and you can use this menu for sure um but yeah i was inspired off this you know this site has this type of menu and i just really like it so yeah so we'll work on this and yeah cool cool uh the other thing i wanted to mention before we get started with this build is um is my new template so this is the lilo template it was just added to the webflow marketplace this morning it is a beauty template it's a content a lifestyle blog template for content creators so you can check it out here i did a whole youtube video on it you can check the youtube video out on my channel and i cover everything about the template super happy and proud of this template i did put quite a bit of work into it had a great designer work with me on it but yeah i just really like the template it's a blog post template and uh just a lot of different layouts that you can use and uh you know to create a really nice site newsletter here in the footer and a lot of different pages um different categories and things like that so all the categories can be changed and all the colors can be changed but i do like the layout and how the categories can be accessed within the template to check out different blog posts all right so just wanted to showcase that template uh the video is on my youtube channel and you can check out the template in the webflow marketplace it's called lila right here and yeah so just wanted to kind of mention that all right so let's get into this build so for today's agenda we're going to work with mixed blend modes sticky positioned elements and an animated menu from 12 to 12 30. then from 12 30 to 12 40 i'll field any questions about this build and then from 12 40 to 1 we'll just have a general webflow discussion and i'll field any super chats hey rasheed so marcelo wrote uh marcelo ferreria ferreira wrote hi i have a question if you have time how can i put a text on the home page and i hover over the text it shows a highlighted image from the database thanks uh yeah we'll get into that marcel uh marcelo um we can do that for super chat at 12 40. and yeah i can i can cover that uh cover that all right cool so this is the site here in webflow let's go ahead and start building it and i might reference this site here just in case but let's see what i started with here um to do okay so we're gonna add a div block uh this is gonna be the page wrapper okay so i'll just open the navigator so we can see it in the navigator as well then in the page wrapper we'll add a section and i'll call this section hero and let's make this section 200v or 300vh because i want some scrolling to the site so i just added some scrolling and then in the section we'll add a div block this will be the container plot a div block we'll call it a container we'll give it a max width of 1440 that's fine and then we have this hero wrapper so let's add that and let me just double check here so hero letter wrapper yep great uh so i'll go back in here and we'll add a div and i'll call this hero letter wrapper for this text i'm using railway font so let's go ahead and install it so i'll go into fonts we'll add railway and i am moving fast just because i only have 30 minutes to build this but i do want to showcase it uh if there's something that you're uh that i cover and you have a question about just let me know in the chat and i'll i'll go over it again all right so we have the hero left wrapper let me add the text block and let's say hero text and we'll set the font to railway and let's see let me look here let me just reference it uh so this text is 280 okay so let's do 280 line height of one dash and we'll say mission okay cool and that looks good let's set this to flux and center all right nice and then we have kind of a black background here so i'll set the height of this to 500 and set the background color to black alright cool so then for the section hero i'm going to add some margin or some padding let me just double check yep so the section hero will add some padding of 160 so it's lower on the page and then for this hero letter wrapper we're going to set it to a position sticky so the position i'm going to set it to sticky and set it to 160. so what this does essentially is it doesn't allow it to scroll past 160. so because we applied 160 of padding to the section and then for the sticky uh hero letter wrapper we set the position sticky and 160 from the top when we scroll this text stays in place until the entire container scrolls past the site and uh yeah hopefully my dog isn't too obnoxious back there i do apologize about that he's being a bit rambunctious um yeah so position sticky allows us to stick elements relative to the top of the browser and once the parent element finishes scrolling past the position sticky element the the position sticky element moves with the rest of the parent element so here the parent element is the container and this is the child element the hero left wrapper which has the position sticky so it stays in place and then as we scroll it moves with the rest of this area um nice what's up dale hey pavish all right so now let's change this hero text from black to white so for this we need a a piece of code and i'll just make it fully black so i'll go ahead and add an embed element and we'll make it 100 by 100 and just position it absolute or position it fixed in the top left so we have access to it here um so all i'm going to do here is open create a style tag and i'm going to do target the class hero text open curly brackets and then we're going to use a mix blend mode and i'm going to say difference okay close the curly bracket and style close the style tag save and close doesn't quite work so i think i might have let me reference the code here uh mix blend mode yep that should yeah i might have to apply it to the the hero letter wrapper so let's try that although it should work for the text but let me try this okay and then okay yep there we go so yeah so we have to apply it to the parent element and not the actual text which is interesting but i applied that piece of text hero letter wrapper mix blend mode difference so essentially there might be another blend mode where i don't have to change the color but let me actually i think it's multiply let me try that multiply save and close nope difference it might be exclusion exclusion yep exclusion okay so exclusion allows us to leave the text um oh wait no it doesn't no still has to be white all right so i guess i'll make the text white and just use difference here all right and i'll quickly showcase like mixed mix blend modes css and this will cover the different different blend modes you can use so here's a great article from css tricks it covers all the different blood modes normal multiply screen overlay um maybe overlay would be the one uh dark in and all all of them here hard light soft light difference exclusion saturation hue luminosity uh color and things like that so uh so yeah those are the different blend modes and i just want to experiment here a little bit i want to try maybe overlay see how that works save and close and we'll change the color to what to black no that doesn't quite work all right so we'll just we'll stick with difference and just change the text color to white initially so mix blend mode difference all right cool so when we hover this uh hero letter wrapper stays in place again because of position sticky 160 from the top this section hero has 160 of padding from the top so when we scroll the text stays in place until we get to the bottom of the the container and then the text moves up all right so just a little effect it could be helpful in some situations uh but yeah let me call this hero background color uh so if i were to add an image and i'll showcase this here let me just drag and drop some images some darker images and we'll add the image and let's see i add this image here set it to cover and once we hover like it's using the image we can see the image is over the text so it does create an interesting effect but what i want to know or try to do is like do what they did here where the text just turns white like this i'm very curious to to know how they did this unless oh wait i might have an idea actually unless this this and this isn't a text element it could be a clip path yeah it's possible i mean it's possible these are like images maybe div style no it is a character it's a character yep um anyways i'll i'll keep researching that because i think somehow they might have hollowed out the text and i can see like a red background to the text here and then as we scroll there's like a block moving up to create the white there for the text anyway we'll figure it out i'll i'll get to that all right so yeah that's the first part of the site working with mix blend modes the next thing i'll cover is yeah i covered uh position sticky now let's create the menu so for the menu we'll select the body and i'll add a div block and i'll call this menu dash wrapper and i'll set the position to fixed fixed and full and i'll give it the background color of black all right so there we have the menu looks good um and yeah let's design the menu so here i'll add a div block inside of the menu wrapper and i'll just call this the nav bar and then i'll add another div block and i'll call this the menu item menu items wrapper and in here we'll add a div block and i'll call this menu item actually let's add a link block right because this menu items are linked blocks and i'll call this menu item and then we'll add a text block in here excuse me menu item and we'll remove the underline and we'll make the text white okay and then we'll set it to railway right here and the different menu items are home projects history so let me just try to remember all those so they're all capital case home we'll make the text um 18 make it semi-bold and line height of one dash all right cool so that's the menu item text and nice so for the menu items wrapper or let's see for the nav bar let's add some padding so i'm going to add 5 vw from the left 5vw from the right let's say 3vw from the top and 3vw from the bottom or 3 vh something like that or we could use pixels either way it works um so menu item i'll just copy and paste seven times and i'll add margin of like 30 35 for the margin and it'll make sense in a second why i chose 35 for the menu item text let me add some letter spacing maybe two so we have home projects and i'll make a capital case so i don't have to keep making them capital projects history philosophy master works culture and contact master works culture and contact all right i do want more space for this navbar so we'll do like five vh and five vw okay uh nice so we have the menu items that looks good and great so for the menu items wrapper i'm going to set an overflow of hidden because if we look at this menu when we click the menu items come from the bot the top to the bottom and they reveal so that's what i want to do for this menu as well all right uh yeah let me do something like this it looks pretty good let me just look at the padding here for this menu wrapper yeah uh yeah v8 is fine okay all right so we have our menu items um now what we need to do is create the menu button so let me put the menu wrapper behind the page wrapper and for the page wrapper i'll give it a background color of white and set it to a position of relative so it comes to the front and the menu wrapper is now behind this uh this section all right and for the container i do want it to be centered so i'm just gonna set the spacing to auto alright so now that menu i created is behind this page wrapper so here's the menu so i'm going to add a menu button here in the upper right so i'll add a div block and we'll call this menu button and we'll set it to 50 by 50 position fixed top right we'll give it some margin of 40 40 and 40. set the background color to black and the border radius to 50 so it's a circle all right so that's going to be our menu button and nice so now we can get into the interaction so when we click this menu button we're going to go into interactions click the plus on mouse click we're going to start an animation i'll start a new time to animation and i'll call this menu open all right so click save i'm going to go ahead and hide this page wrapper for a moment so let me do that now so we can just see the menu and we'll just work with the menu for now okay so let me select the menu button down here um go to interactions menu open and we'll work with these menu items so we have seven so we'll work with these seven so i'll select the first one and i'll move it initially i want to move it negative 100 so it's not visible and we just want the selected element just that specific menu item because we're going to stagger them in so i want them to be uh i want to select them individually so again we're going to create this menu where they stagger in one by one all right so i'll duplicate this seven times duplicate duplicate duplicate duplicate i have seven menu items then i'll just right click change target select the second one make sure it's the selected element right click change target select the third one change to selected element right click change target select the fourth one then i'll say select the l selected element right click change target the fifth one and selected element right click change target the sixth one i think there might be eight change target and selected element so let's see one uh one two three four five six seven eight so there's eight home projects history philosophy oh this last one here we don't need okay so i'll just delete this last one and let's start over so let me select the menu button go into the interaction first second third fourth fifth this should be this one yep and this one is this one and this one is this one okay so i'll just do selected element okay great all right so we have all those so i just want to select all of these and we're going to set it as the initial state so i'll select all of these hold down shift and right here i'll set it as the initial state so initially they all start at negative 100 and then we'll stagger them in one by one so here i'll just right click duplicate all seven of these and then i'll just move them all back to zero percent and we'll see an easing of ease out cirque and i will stagger them so first one home second one has a delay of 0.1 third one is 0.2 fourth one is point three fifth one is point four sixth one is point five and the seventh one is point six okay so if i play it we have that nice stagger effect for the menu items all right so so far so good um the last thing we need to do let me save this and let's bring back the page wrapper right here i'll set it to display block select the menu button go back into the interaction and when we click the menu button i want the entire page wrapper to scale scale down so that the menu we can see the menu behind it so for the page wrapper i'll say scale or i have to select it here page wrapper we'll say scale and we'll scale it to point let's say 9.9 yep that looks good and we'll do ease out circ all right and i'll start it with the rest of the menu items and no delay perfect uh great so yeah and then for the menu button we're going to change the background color to white when we click it so we can see it on the black background and we'll start it with everything else and no delay and ease out cirque is fine yeah you probably can do it through code rasheed but i like to stick whenever i kind of like to stick to the native interactions in web flow because it could get a bit tedious using code and plus using interactions you can target more elements at once than just the menu items if that makes sense so you have more control over every little aspect of the site using the built-in interactions in webflow i'm hoping staggering comes out soon for interactions that would be a great addition all right so so far so good we click the menu button and there we go so now we just need to do the hover out so on second click we'll duplicate this and i'll say menu close i'll delete these initial states because we don't need them and then for the menu items let me just select all of them and we'll move them back to negative 100 and they don't need any delay okay good they don't have delays and then the page wrapper will scale it back to one and the menu button will change the color back to black that's it we just have to reverse the the animations then i'll save it and let's check it out so i click the menu comes in click again and there we go perfect uh the last thing let me see if i can do this for the page wrapper um and let me actually do it to the section here i want to set it to a position of sticky as well and 160. no that doesn't quite work so let me undo that let me try to the page wrapper um position sticky 160. no that doesn't quite work okay i was just trying something there because ideally what i would want to happen is we um we see the menu but the menu always stays there and then we scroll the contents of this section so maybe to the page wrapper we have an oh uh an overflow of scroll let's try that no that's not gonna work um see i'll remove that uh but yeah that's essentially how we built this site um yeah it's the same same thing here and i can just publish it and nice cool so we worked with blend modes we worked with position sticky so this mission text is positioned sticky when we scroll it turns white and there we go and then we have the menu uh here and for the menu button i'm going to change the cursor to a pointer so the user knows to click on the menu button uh yeah any questions so far kind of covered quite a bit there so but it is a very cool menu let me see let me think if there's a way i can yeah just have it because if we look at this site when we open the menu the user can scroll inside of here which is ideally what i would want to happen um but i'm sure they're using some script or some code for that all right here a letter wrapper container yeah that looks good and all right i could probably make this a little bit wider to kind of match the size there of the image nice so it's cool i can change out any of the images and we can see that blend mode effect so you can see it for this car yeah blend modes are very cool highly recommend kind of doing you know researching them because you can create some like really unique effects with it all right so that includes the build portion of the live stream um yeah if there's any questions or we want to discuss anything let me know um any super chats let me know but yeah i think that's it for this build i can i can have any color here nice um so yeah if anyone has any idea how they turn this white let me know and we can maybe try to recreate it but yeah if there's not many questions we can make it a short live stream today we don't have to go the full hour thanks dale appreciate it yeah sometimes i think i talk too fast through it and i'm not sure how much of it is like super kind of digestible in a way for everyone to be able to use so very happy to hear that uh it is a vote of confidence for me to keep kind of explaining in this way uh yep because i know there's a lot of little details that a new user you know seeing me build is probably like this what is he doing but i've been building in webflow for probably over three years now so ended customer support for two years so basically working in webflow non-stop for a while so yeah that's why i always i welcome questions um if you want me to clear anything up if you're new to the live stream definitely feel free to to ask any questions um yeah so uh let's work with some different blend modes here let's try let's see i did exclusion let's try hue what does hue do hue doesn't do anything okay don't want to use that about color manuel wrote john do you maybe know a web flow like tool for newsletter development it's such a pain in the ass for newsletter development newsletter oh emails um nah just just mailchimp maybe uh yeah but uh yeah i know emails can be tedious all right very nice um i'm trying to think if there's anything else i wanted to cover yeah no we can just look at inspirational sites how about we do that for the uh the remainder of the live stream and i'll pay attention to the live chat here if there's any anything that comes up um so yeah i went to code drops here um if you want like to see website inspiration if you go to codedrops.com they have inspirational websites roundup every couple of weeks or every week and that's where i saw this website and uh i looked at it and i was like wow it's really really nice and there's a lot of other things to the site that we can kind of work on building um they have like this text here a lot of nice animation you know that's nice also using blend modes here we can see this this is a blend mode that's nice i do like this effect where it's like it's an image and the image is scaling as we scroll we have this button very nice yeah a lot of nice effects to it and again that menu oh there is one thing that we didn't do um so if we look at the menu here not this one this one it has this hover effect so we can quickly do that now for the page wrapper let me hide it and we'll just select the menu item text actually let's select the menu item and let's add some padding maybe like five pixels from the top and the bottom and when we hover over actually let me undo that it should be applied to the menu item text so 5 pixels from the top and the bottom okay so then we'll select the hover state for the menu item text we'll change the color to black the text color and we'll give it a white background color okay and that's it and i'll go into here let's bring the the page wrapper back right here and i can preview uh stream is lagging that's not good um let me know if it continues to lag but yeah there we have the hover effect over the menu items so we just did that by selecting the menu item text and adjusting the hover state changing the text color on hover and changing the background color that's it and let's publish it and cool all right simple design can be effective but yeah i did notice they're using they're using blend mode for this but i'm just very curious i think it might be under projects no not projects oh wait what was that oh wow that is cool let's do this uh next week very nice uh master works what's this yeah i just like the scrolling and the feeling of the sight it's very well done yeah i wonder what they're using for the the site maybe it's wordpress yeah where did i find the the site philosophy okay back to normal now uh rox rocks rocks um okay cool yeah so if anyone has an idea of how they got this to be white over this image let me know because i definitely want to do that but this part is cool like this is all position sticky like we can do that with position sticky so this leads me to believe that this red text is like they're individual characters obviously because we have this type of scrolling going on but i just i'm curious like how they turned it into white text here from red to white it probably is a blend mode i tried looking at the code but i couldn't quite figure it out uh yeah nice so this is a site i'm going to use definitely for inspiration let's check out another one and just as a reminder there won't be a live stream tomorrow or friday because of no code conf so if you're if you don't know yet you should probably should know uh no code conference webflow is tomorrow you can register for free and they're going to have a lot of great videos a lot of great people uh webflow people like timothy rex and lacey alex i know alex great great guy um alan yeah a lot a lot of great talent arcway for sure uh brandon uh brando that's gonna be amazing uh bryant and vlad is obviously going to be talking uh of course because he's the founder but yeah just a lot of great talent is going to be talking at no code conf and uh highly recommend attending and watching a few videos so yeah and we can talk about it next week about no code conf next week uh so yeah tomorrow and thursday there won't be any live stream uh cool so let's check out this site it's called palette let's see if we can find any inspiration uh yeah that's funny that's uh that's true i actually didn't even recognize that but that's very true so um eric wrote he probably wouldn't separate the word um assets i had yeah that's so true i wonder if they thought about that when they built it maybe they didn't but that's clearly a thing where here it says ass at yeah um yeah maybe because i didn't notice maybe other people wouldn't notice i don't know didn't but now it stands out for sure oh that's cool oh it's really i like how they add that paint drop inside the color that's really nice very nice nice images nice textures nice it's called palette dot eco and eco-friendly paints for a healthy home nice they have a calculator different colors looks like it's a shop maybe shopify not bad very nice layout let's check out another site cleo let's check out the menu cool very big text a quick spot that doesn't suck building credit a money app okay clio that's cool so position sticky here for this nice position sticky not bad it's kind of uh loud i would say this website feels really loud almost too much for me not something i would want to get into really from the look of the site maybe it's for some people that like that type of style but it just feels loud for for something that's around money or money management at least for me i don't want this much flare i would say like it just feels like like too much i don't know it's not bad i have to read kind of the content and swear jar roundups oh seems kind of interesting save like it's your side hustle i might check this out actually it looks kind of cool but definitely a different way to save maybe it just gives you creative ways to save money so cleo never stores your bank manage your money in read-only mode you're covered by 250k pledge okay interesting site um i like how they change the cursor to pizza it does feel like a webflow site i'm pretty sure it's a web flow site let me see yep it's weird but i can tell what's a web flow site and what's like a wordpress site i don't know if you guys find that as well but a web flow site just has a specific feel to it and visually and like scrolling scrolling wise like yeah i don't know what that is maybe it's like very small details but we can see it's web flow it's made in webflow and nice all right so that's cleo let's check out this site it's called mesa nice design great photography very nice i like that little detail where this little icon appears when i hover over the different images i like that and is this a website i don't think it is let's check no didn't feel like it all right yeah not bad kind of i like that alignment and the layout the responsiveness is good menu kind of a little plain but it works very responsive that's great and nice let's check out another site make awesome hi yvonne yeah i just covered uh today i just covered kind of making this type of menu where the entire page scales down and you have the menu behind the entire page yep so ideally we would want to have it so it doesn't scroll up once it's scaled down yeah i'm just trying to think if there's a way to do that maybe setting it to position fixed so having the page wrapper positioned fixed and full let's try that no that doesn't quite work all right um yeah i probably wouldn't need to be position sticky but i'll revisit that and see if i can find an easy way to do that uh what was the next site uh yeah make it awesome maybe the photo container has overflow hidden with an internal page scroll that drops the white text maybe the photo container um it has an overflow hidden yeah i see what you mean um yeah so essentially setting the page wrapper to let me say 100 vh and setting it to overflow hidden and would that work let me let me try that i think i'd have to set an explicit height okay and then to the page wrapper the overflow would be scroll yeah that that works um [Music] but i think the scale we'd have to set the scale to like point eight maybe or 0.7 that does work yeah um let's see no that does work i like that [Music] yeah great great idea yvonne um let me see if it's similar yeah i like that one other thing we can do actually to make it even better um we can for the page wrapper let's set the scale or let's set the uh the transform uh origin to the bottom so i think it'll scale from the bottom rather than the middle yeah perfect okay nice we're getting somewhere um so we changed the transform origin for the page wrapper so now we can just um instead of point would i say point seven for the scale we can change it back to point nine now let's do point eight maybe eight five point eight five point eight seven let's try that and yeah that looks looks good we'll do 0.85 yep 0.85 yeah great idea yvonne that worked really well and let's preview it perfect yeah so now the menu stays in place we have the nice menu and the site scrolls and if i do this we have this nice scrolling we have kind of this horizontal scroll here at the bottom so i might i'll probably add like a piece of code page dot page wrapper open quotes overflow x hidden so we don't have that horizontal scroll bar at the bottom and save [Music] and there we go so we don't have that there was a scroll bar here at the bottom that's not the case anymore and perfect yeah great idea yvonne looks really nice should the scroll bar be inside i think so yeah um if we look at this one they do have a scroll bar it looks like they might have styled the scroll bar but there is a scroll bar inside and it does make sense because we want to scroll this isn't this is essentially the page but we've just changed the size and we want to scroll inside of here right and then if we zoom out we can scroll the entire page this way all right yeah great thinking yvonne on windows scroll bars inside look ugly yeah there is a way to style scroll bars you can style this um maybe i'll get into that in another stream but there's a piece of code you can add to style the uh the scroll bar let's see how this looks like in safari yep looks great uh the blend mode doesn't seem to be working well in safari so that's one thing to note we can see we don't see the text so i didn't actually check the the compatibility of blend modes so i'm curious now actually if we visit this site in safari what we get um you know blend mode still work fine in safari so it might be certain blend modes don't work well let's check this out yeah no blend mode seem to work fine unless they're using like a polyfill for safari which is possible yeah thanks yvonne let's see here yeah i like this effect where you scroll and the image zooms out as you're scrolling it's a nice effect and it looks like the images are positioned sticky as well it's very nice yeah i'd be curious to build something like this it's uh i like the design and the subtle details to make it pop definitely a lot of inspiration on this website all right cool so let's look at one more site uh so we're looking at make it awesome oh whoa whoa that just blew my mind okay this is a website like on steroids i i don't quite like this to be honest it looks a little tacky but everything else okay this looks cool what this is a visual spectacle yeah it's called kirifuda dot co dot jp uh definitely check this out it's kind of trippy yeah almost a little too much for me but it's interesting let's check out creative nights yeah it's pretty it's pretty intense um yeah yeah not bad uh yeah i don't know a little too much as well for me uh let's check out random or oatly let's see this uh take me sure to us that's cool sure nice see what this is built in yeah cool i like it yeah i like the design it's very creative all right so i think that'll be it for today let's do one more and yeah nice e-commerce shop nice and simple i like it oh this reminds me of my e-commerce site that i have huh interesting let's see here inspect is it webflow no okay all right uh yeah i think that's it for today's live stream uh thanks everyone for watching again uh next live stream will be next monday not tomorrow or or thursday because of no code comp if you haven't registered just head over to no code conf it's going to be a lot of fun super excited to watch some of those videos and yeah just have or just learn more about you know what other developers and creatives are doing with webflow i think it's going to be really cool all right thanks everyone definitely check out my new template if you go to the webflow marketplace um do a flow template marketplace and uh check out workflow templates and it's right here it's called lila it's a content lifestyle blog post or yeah it's a lifestyle lifestyle blog template for content creators yeah that's what i meant to say all right you can check it out all the images looks good all right yeah have a great day everyone um again we had a lot of fun building this i'll make this cloneable a little bit later today so you can just copy and paste into your project but yeah have fun at no code conf and see you next week thanks everyone bye

Channel: WebDev For You

Views: 307

Keywords: webflow, web design, web development, live web development, live web design, building a website, learning webflow, webflow for beginners, website live stream, webdev for you, webflow live website build, webflow flexbox, webflow layouts, webflow web design, css mixed-blend modes, webflow position sticky, webflow animated menu, webflow menu, webflow interactions

Id: Qx3v8HQ4Pjc

Length: 60min 55sec (3655 seconds)

Published: Tue Nov 16 2021