How to create a full page hover effect in Webflow

[Music] [Music] [Music] do [Music] so [Music] so [Music] [Music] [Music] [Applause] [Music] [Music] oh everything working yes oh man what a journey this morning already has been uh how y'all doing we made it to another saturday welcome to the pixel geek live stream i'm your host nelson thank you for joining me uh yeah so if you're new to the stream and you're in the live stream chat say hello um but uh if you're not here live that's fine it's a saturday you shouldn't even be here you should be having fun on your day off on your weekend all right so if you're watching recording of this i appreciate you as well but let's see who's in the door first so um i had to take a nervous p because before i streamed because i saw sketch together is here sketch together youtube channel is aka pablo stanley aka pablo planet uh yeah am i saying it right pablo planeta um aka um uh what's that figma oh maria figma or something and then oh man he did a latin uh latin sketch but yeah pablo stanley is is in the live chat room if he's still here uh welcome thank you for your support um let's see here who else is here in the door uh i can't see a pop oh pablo yeah well pablo stanley and pablo cortez uh my community manager thank you so much he's filling in for jake my live stream producer so thank you so much for helping me out a good is back the guy who's building something on the heels of webflow trying to build something kind of like webflow and i'm very interested to see what you do um alexander is here he's from france welcome hello i don't understand everything you say in english as i'm french i wanted to tell you like what you do i try to understand as much as possible thank you for all that you bring us my pleasure and um i you know i i only speak one language but i really wish there was more streamers more web flow or no code community members that created tutorials in their own language there needs to be more than english english isn't the only language in the world so if you have the means to create content and throw it out there there's a huge opportunity because the no code movement is just getting started so get on that huge opportunity uh yeah and if you create one send a link to my twitter cause i will subscribe i will help promote you i want to help grow this no-code community in every country every language like let's go um as vlad always says a rising tide lifts all ships all right scott citron is back yay welcome kimsey is here spreea w haven't seen your name before but welcome manchu is back what up um junior is back and darren is back from the uk welcome all in live chat and again you all spending your weekend with me means a lot i appreciate you uh but if you have somewhere to be get out of here all right these are recorded and you can watch these later uh so what do we do on these live streams i usually talk about things web design web design career life philosophical thing deep thoughts and then i do a tutorial and the tour the tutorials now are uh suggested by you the pixel geek community uh what you can do is if you have an idea or topic for a future stream please go to pxlgk.com ideas and submit your idea there then the community can vote up vote on which one should be next and that is how we're doing our streams from this uh from now on all right and today's stream was submitted by let's see here hemraj h-e-m-r-a-j and uh he wanted to show how do we create a full-page hover effect in webflow and let me show you an example so this is the example he gave us let me double check it's showing on the stream yeah it's working all right so doing something like this where you hover and then it has a hold there's a couple of things happening here you have a swipe you have a link hover effect you have this line growing right here it's very classy and blaze the creator of this portfolio because this is his blaze uh wonderful no-code community member uh when he first showed this to me amazing so me being more of a developer and not a designer when people come up with stuff like this i'm like oh my god it's amazing i wish i can create something like this but as a developer as i keep playing around with it i'm like okay i can do this this is easy this is easy to build relatively speaking however to design and create the concept that was the hard part so much props to blaze for creating this so i will show you how to create not the design but how to create this type of interaction and i think there's a couple of them and uh oh is there a glitch oh there's a glitch right there look at that so this first one doesn't have that gold line whereas pancakes does pancakes yeah so i'll show you how to do this um after my deep thoughts and just chatting with you in the live chat all right um let's see here also if you look at my pinned chat in the chat room if you want your site reviewed go ahead and submit your link to the the link in the pin chat i will get to that after the tutorial and this time i think one of you in the chat or last week someone in the chat said hey can we get on the stream as well while you're reviewing it and i'm like okay i'll figure that out cool i figured it out so while we're doing the live reviews uh pablo will go ahead and post the link to the zoom chat and i have the zoom i have the zoom link locked down so anyone can click the link but i i have that waiting room thing happening and like i'm hi you can't share your screen you can only share your video and um your audio so all right let's play nicely the first time doing this so let's play nice guys um so i'm gonna get you on the stream and you'll see me reviewing your site and i can get your honest reactions or we can have a chat back and forth uh so yeah um darren my kfc has just arrived all right cool have a good dinner all right so yeah we'll do that towards the end of the stream okay so what am i thinking about okay before the stream there is i i'm looking at my inbox and i have so many things in there and i'm kind of late with responding to some of them and i feel really bad and then yesterday i'm feeling more anxious about a couple of projects side projects that i have and and then trying to make sure i put in time for family and friends and then putting in time for myself as in like um doing some workouts and just so many things to got to the point where i was silently fighting myself in my head like a parallel paralyzing anxiety so i'm just in bed youtubing and i got to the point of youtube where i'm just scrolling trying to find something trying to find something that will make me go just just that little and then twitter and then read it and i'm like fighting myself like come on get up get up just do just get up oh and i finally found my way out of that where i'm like okay just write a to-do list okay and get up just brush your teeth cool you got that done hey there's this one piece of trash throw that piece of trash away and then it went from that to hey you know what you can throw away the recycle too hey you know what let's let's wash your face and then it just snowballed and then i was like okay i feel better and and then i stopped again and then i got back up and i saw the tweets response from uh people who are following me on twitter and thanks again to everyone in a dm from pablo stanley and i'm like okay okay i got this i got this so yeah um if you get to those points and we all do uh write a list and do the smallest thing you can think of throw one piece of trash away it'll lead to something else lead to something else and finally you're kind of out of it i'm not gonna say completely and just to say kind of um and then made me think more about our two brains we have like our evolved logical brain and then our monkey brain and it's always fighting each other and i'm like why do we have that we are our own worst critics and we always fight ourselves in our heads and then some lash out or take or use that energy in the wrong way or some like me don't use any of that energy to the point we're just doing nothing from the outside if someone's not in your head and from the outside it looks like that person's lazy but on the inside i'm having multiple conversations in my head and arguing with myself so just being honest and real as i do with all of these streams um just throw one piece of trash away or do a little bit of something and you'll get out and last thing about this is everyone is rooting for you everyone is proud of you even if you just take one little step forward that's giant all right so yeah and if you need any more support um go on twitter be vulnerable be real there's people who want to help all right that little speech made me hot so i have a fan going on okay i'm all sweaty already let's get the tutorial let's get to the tutorial geez um let's see here okay i have that open i want to make sure my windows are ready okay go to my screen okay let's turn this off turn this off all right how do we do this how do we do this all right so let's focus on creating the structure first as we always do okay so let's create the structure i'm gonna let's break this down um i'm not gonna do the left nav let's just make let's see here let's see here i'm thinking i'm thinking do we use grid or flex i'm more of a fan of grid than flex so i'm going to use grid make two columns so we have column one column two and then in column one i have all these text links okay so we'll make text links we'll do the gold line later but let's just do text links for now and then i need i need a way to overlap all these images and have some swiping thing but at the same time i want to make sure this is scalable so i don't have to make one two three four five six seven eight so i don't have to make eight different interactions so how do i make it scalable i don't know i'm just gonna go forward and see what happens all right blank page all i have is three images so we're gonna do three instead of eight um let's go first thing i'm gonna do is what just happened there we go control or command e for quick find type in grid we got a grid it's a two column grid congratulations we're gonna delete um okay cool my magnifier works i'm gonna delete a row because we only need one row let's take away the gap in between the two columns right here gaps zero there we go and let's turn off edit grid set the height here to 100 vh because we want to set that the whole height of the whole height of the page good good now on uh column one let's go ahead and control e type in div um jtel create one interaction that put pushes out the swipe overlay and then pulls it back and resets it to the original state then just make that class interaction okay yeah okay we'll get there i i see what you mean j-tel i think that's the answer too all right so let's see here okay so it has to be center center so let's go ahead and make this let's call this uh column one and we're gonna set this to flex center center so the child element will be center center so if i add another div in here there we go and let's set this to a max width of i don't know 75 of its parent and expand it okay cool that's what i want and now let's add some text links text link and there we go and call this text link let's go ahead and make it display block so it's the whole width let's add some padding we'll say like 20. let's make the width of where it's the size of this hi abin from india welcome so there we go do something like this with the font being what all the kids are using anyways montserrat no underline all right we'll use we'll use 333 for now there we go and let's make this medium all right um text link one copy paste text link two text link three all right so we have our three text right there how about wix's ad animation on webflow could be fun um i've never seen it but you know if you want to submit that as a stream idea go for it all right so you have these three and then we need to we need a div that does that swishing thing all right so i'm guessing we put that in column two um okay yeah so we put that in column so let's create a div and we're gonna call this column two right there and shortcut oh wait that's yeah that's right so shortcut how i named column two without even having to click here is i pressed control or command enter all right hotkeys hotkeys all right because i'm going to have things overlapping each other because i'm going to have this swiping door effect overlapping like that um i want this on top of everything in column two so i'm going to make this parent element column two position relative all right now i'm gonna add a div and this one we're gonna call it um sliding door okay so this is the sliding door and this lighting door is going to be positioned absolute set to left and the reason why i'm setting it to left is because i want that to be anchored to the left and so when i do a width it's going to start from the left and always be anchored to the left so that's all i'm going to be doing with animation the interaction is just setting the width going to 100 and back down to zero all right so uh for now i'm going to set this to 100 so i can see what i'm working on set the background to uh a slight gray i think that's what he's using so we'll just do that eff and now i'm going to set it back to sero cool now that we have that let's go ahead and do our first interaction let's do the sliding door interaction let's see here let me recap he does that so what if i go like this huh penny is here better late than never welcome welcome back all right well let's just see where this goes so what i'm going to do is with my text link selected i'm gonna click on the interactions element add element trigger mouse hover on hover start animation whoa oh ricky burgess thanks for subscribing um timer animation i'm gonna press plus and we're gonna call it sliding door uh we're gonna say sliding door close because it's you know the door is closing all right now we're gonna select this sliding door so what we did was we're adding the element trigger to this so if someone hovers on this we're going to affect this so that's why i've clicked on sliding door i'm going to set the size to 100 100 percent and there we go i'm going to set the ease to out quart you can choose whatever feels right to you yep there we go cool see just like that and done so hover out i'm going to start animation and what i'm going to do is i'm just going to duplicate this rather than recreating it from scratch i can duplicate and i'm going to call this sliding door open instead of the size being a hundred percent i'm gonna set it to zero percent so it's back down there all right let's do a test all right cool cool now let's go ahead and test some more so i'm going to test by let's go and save that i'm going to go and down here rather than setting the interaction um manually to each text link i can just tell webflow hey anything with that same class name go ahead and apply the trigger on okay so you can tell there's an interaction trigger right here because there's a lightning bolt rather than doing it manually i can just go here to the bottom right and say set this trigger on everything with a class of text link and then there you go so now if you look here all three text links have that lightning bolt so i did it that quick here we go open close open close open okay cool so if i go like this it doesn't break it nice okay oh whoops okay all right cool bailey joseph you're not late you're here on time don't worry so that worked um cool all right so we have that working all right the next thing we want to do is let's go ahead and do the text thing so let's just do the easy thing where the text turns turns gold all right so let's change this to be a lighter gray like this all right so this is not an interaction this is just a css hover where on hover change font color to gold all right so i'm going to go here to states a lot of people miss this little icon but um this little drop down but that's how you enter the states so on hover let's go ahead and change this color to i love gold that was my stupid austin powers impression yeah i'll stick to web design okay so there we go that's that's pretty gold right there all right so we have that gold and to make sure that we have uh so if i just preview it right now it just turns to gold it's not fading to it's not fading to the gold color so what i need to do is add a transition a css transition okay and so to do that is i click on my text link and i make sure that on this drop down i'm using none all right i'm using the none state and then i go down here scrolling down scrolling down to transitions press plus set the type to font color there it is typography font color and that's it so now if i preview it kind of fades to that color rather than just on and off switch do it with cms um dang it i should have done it with cms huh all right good challenge let me let me figure out this basic one first and maybe maybe it's doable um hold on hold on [Music] so okay cool just checking my notifications make sure i'm not missing anything important all right so we have those set up let's do one more small thing before we get into the big image on the right uh we should okay okay i got it i got it so let's do that gold that gold line right here oh is that gold oh wow that's a small detail that gold line actually has a border radius on there that's that's actually quite nifty okay we'll do that skapari welcome how are things going yeah i'm doing good you're here so i'm glad all right let's do that gold line so tyron welcome so what i'm gonna do is i'm gonna wrap each of these text links inside of a div i'll explain why soon but let's go ahead and wrap them text link uh we can just delete these two so i don't have to recreate it three times so we have this div block right there i'm going to add another div block before the text link and let's set this one to flex horizontally center and we're going to call this text link wrapper this one right here we're going to say um hoverline i don't know and this hover line is going to be let's start the width at 75 okay that way we can see we're working with we'll set a line height of i'm gonna say three not a line height but um a height a pixel height of three and let's push the text away by 12 and all these numbers i'm just guessing um yeah and let's go ahead and use that gold color oh i need to find that gold color let's go ahead and save that gold color in the swatch right there there we go hoverline background color gold all right that's huge that's too big let's make this okay so when we hover over this we hover over this i want this line to go from zero pixels to 55 pixels all right and so one more thing with this let's add a border radius of three so it looks a little classier so it looks yeah like that cool and i noticed that the text link ends right here i want it to go the full width of this of its parent so what i can do is set this to a sizing of expand or grow if possible that way this is the hover area the hit area for the text link so if i hover over this hmm hold on maybe it shouldn't be hover over this maybe it should be hover over this whole link wrapper yeah that'd be better okay the reason why is the reason why i say that is because watch this um if i let me show you why so let's finish this interaction i'm going to go here to interactions mouse hover sliding door close and the hover line we're going to add a size and the initial state the initial state of this hover line should be zero pixels okay and then the ending state should be 55. save and let me go to door open let me click on hoverline and the ending state of hoverline should be zero all right and we can go ahead and set that to out court and let me do that to the out court here on the hover state now watch what happens so that's nice right that works but what if i put my cursor here over the t so that's why i'm like um no we should put it on the link wrapper so there's a bigger hitbox so the hitbox the hover state is happening here but the box is moving to the right which makes that glitch and that loop happen so we don't want that so we're going to delete the interaction don't worry the interaction timelines are still saved inside of webflow so if you delete it you're still fine so delete this delete interaction and let's go to text link wrapper and we're going to plo apply that same interaction mouse hover to text link wrapper instead right and now we got to fix something so hoverline is not a sibling of text link wrapper so if i close this up text link wrapper has no siblings it has children so this hoverline is a child of text wrapper the sliding doors also oh wait that sliding door is all elements so yeah so save and then this one right here hover out start animation we're gonna do the open and this hover line has to be a child save now if i preview there we go and even if i put my mouse over the link even if i put my mouse over the text link okay so there we go now all i have to do is copy paste and there we go change the label one two three preview one two three smooth here do you want to play around with it i will post the link in chat there we go so pretty fun to play with [Music] okay now the bigger issue how do we do the image changing so i'm going to take a stab at it and if i do it wrong which i probably think i'll do it wrong uh someone needs to do it better again i am not a web flow master i am just a web flow nerd okay so i have column two selected because when i press ctrl or command e and type in image enter i'm putting the image inside of column two choose image of course it's a tesla why though why did you think i was gonna use something else all right let's uh call this um we'll just call it image whatever call it image uh let's because i want all the images to stack on top of each other i hope this is the right way um because i want them to stop stack up on top of each other i'm gonna do position absolute so let's go ahead and set this with or this position to absolute set it to full let's set the width to 100 and the height to 100 and it's stretching but that's okay because the power of object fill or object fit cover it scales so it doesn't stretch hi patrick welcome all right so we have that that's our base one um okay i think we're fine so i know the sliding door effect is not gonna work because the sliding door is not on a higher z index so i click on sliding door i notice that the z index is set to auto i'm going to set this to 10 all right so that 10 there we go all right almost there i'm feeling confident all right so this one is done let's go ahead and copy paste and it looks like nothing happened but i do have two images on top of each other now and this second image i'm gonna click on the little mini cog and then replace image and there we go and take the mini cog and copy paste the image so i have a third one click on mini cog replace the image and there we go cool cool and obviously the sliding door works but all three images are showing and they're on top of each other and like a sandwich you're layering things on top of each other of course the topmost layer is still going to be shown so we got to do some hide and show so let's number these so this one will be image number one so i'm giving it a combo class of one this one is going to be a combo class of two and this one is gonna have a combo class of three and the reason why i'm doing that is because i want a separate interaction for each of the text links and this is why when i'm thinking about can this be done dynamically without code probably not you would have to use code so let's go to this first text link wrapper we're going to add another hover so you can add as many triggers to a single element as many as you want all right so i'm adding a hover and um let's see here what do i want to do hold on ah okay sorry one more thing all of these images the parent selector the parent class name i want all of them to be off okay so i need all of them to be off so to do this to get back to the parent selector i can click on the on this orange right here and it shows me all of its inheritance so i'm going to click on image and now we're editing the parent class and i'm going to set this to display none i'm going to hide it so all three images are gone and you can tell by this eyeball with a strike through it it's display none cool now back to the first text link wrapper mouse hover on hover start animation and we're gonna say show image one i'm going to select image one and this one is going to do a it's gonna do a hide show so i'm gonna do a display block so it shows it save and then on hover out i'm just going to do hide image one i'm going to go to image one press plus uh oh not size plus hide show and hide it okay and this is why again i'm doing a combo class is because i only want to affect an element that has both of these classes not just image but image and one since there's only one of those it'll only affect that one image save and let's see if it works and kind of i think i did it wrong wait i'm missing something here oh it needs okay it needs to close and then open oh it just got more complicated when something looks easy that means it took a long time to learn and build when something yeah when something okay it's easy to make something complicated it's hard to make something easy so this looks easy but it was complicated to make so now i'm like oh god my brain my brain okay i got this i got this let me go back let me go back to the sliding door so it's supposed to close and then open so take the sliding door and size it back down to zero percent and out quart once it's done growing uh okay okay okay okay not um okay not too hard then okay so i i i just forgot that one more thing okay another thing i have to add some sort of delay because the image notice how it's showing up immediately so i need a weight for that sliding door to finish so this sliding door takes point five seconds okay it takes point five seconds to to close the door so i need to remember that number and so when i go to back to my show image 1 i need to delay this by 0.5 seconds and then when i hide the image i i think i also need to delete that by 0.5 seconds let's see here what what okay wait wait okay oh i feel like i'm gonna end the stream because i don't know how to do it i'm missing one last thing because look it if i go like this and then i remove my mouse nothing changes the door doesn't close again this doesn't change if he did custom code for this i'm gonna be mad yeah see it doesn't go away so what do okay okay okay i got this i got this i got this so we don't we don't hide image what okay so if i go like this i show the image and i don't hide it cool okay but what happens with the other two all right let's let's explore let's explore together okay so i have the door working correctly i think okay the door is working correctly okay this is why i was getting kind of nervous with this because i was like it seems too easy i know i'm gonna hit something but here we go this is it uh element trigger mouse hover on hover start animation uh we're going to just duplicate this show image 2 and then instead of pointing to image one i can go here and just click in class and click on image two okay now i'm gonna do the same thing for three i'm already feeling nervous because i already feel like this is probably not probably the wrong way to do it but i'm just going for it all right show number three click here image number three we're fine save all right so that works that works that works but wait what if i go back to two it's still picture number three patrick such amazing timing you'll see me implement this in some way you're in true oh thank you thank you patrick maybe a time delay on the trigger so it doesn't become too hysterical when dragging the mouse over the list i'm wondering why so here's the the link here's the link about tabs no way is he using tabs okay i'm going to view source like i feel like viewing source is like you know cheating but i guess we're at that point is he using tabs answer no he is not he's not using tabs he's using interactions and not custom code is he using custom code let's see here um button mobile nope wait oh you know that's uh that's okay that's the page transition page show okay that's part of it okay okay yeah he's not using custom code for this oh blaze what are you doing i need to understand this trick i feel like i'm almost i'm like so close okay what if he changes the index of the other images when you hover and see that's the thing you can't change z index with interactions can you can you uh let's go to number one show image one uh [Music] yeah there is no z index except for rotate but this z is different is it under skew oh skew there is a oh no there's no nope not a scale not a filter yeah why not just use opacity since the images are already stacked i wonder if i have to go through each one and turn off the others i feel like that's a that's just too much work but i think that's where we are now so here's what i mean if i go to this image and um i do a hide show for number two and there we go i display none and then i click on image three and i do a hide show is this the answer i feel like it's too much work though let's go here image two and [Music] see what flow interaction sometimes glitches out so look at class image 2 however it's highlighting image one it's so weird all right anyways go here hide show none that's not image two that's image one what do you anyways there we go image one what do you stop it image one should be hide image two should be show image three should be hide why isn't it okay yeah that's fine whatever right it should be hide save all right let's go to the third one let's just delete this all right so image one hide with a delay of 0.5 and then image 2 hide image three see how much clicking so imagine you have to do this for all eight i feel like there's a better way okay okay is that the answer if that's the answer then we've done it but i feel uneasy the reason why is because sure it's done but i always like to think of the human on the other side the human that will be that will probably have to maintain this site going forward okay that's what i always think about whether it be the client uh the client's uh web designer or uh webmaster who uses that term um in the future like what if i can't do any updates to the website or i have to do updates on the website and then like have you ever been at a company as a web developer and the next thing you know you're they're like okay we need you to update the site and then you've never touched that website and then you walk in the door you look at the code and you're like what the f just happened so you have to reverse engineer what that previous developer has done they have to go through their code and their design just be like okay where am i at and it's easy for someone to just leave it and just be like figure it out whoever's future person figure it out i did my job bye a better person would be like how can i make this so whoever comes into the door can easily just copy and paste the link and all the interactions are done all they have to do is change the link change the change the link label and change the image that shows up that's why leaving it like this makes me feel uneasy how can we make this scalable and right now i think the only way is with custom code hmm all right let's see what's in chat tyron what if you change the z index of the other images when you hover yeah there is no yeah there is no interaction for z index change the opacity that's the same thing as hide show skapar digital in the action can't you target and hide all images not related to the tab you're hovering i think that's what we're doing right now bailey you can write move perspective move z child perspective on column two um yeah but webflow interactions does not is it the x or something or it does yeah it doesn't i know what you mean hold on this 3d transform oh wait can i move on a z hold on hold on hold on i thought move is only x and y so if i take this one and say move there is a z but still there's the there's a problem of making it scalable uh are there two image second one becomes visible yeah i think it'd be can be done hiding the images on the left and sliding them to the right on hover and back to the original position on hover out then sliding door just cover the movement yeah but still um how do you have this this element relates to this element there's no it's like a distant cousin and it's like there's no such thing as distant cousin when it comes to webflow there's only parent-child sibling like how do i connect this all the way to here in a scalable way has to be done with code so here so here is how i would make it scalable maybe try using class adder i don't think we have to use fin suite class at her oh yeah that would be nice all right so the beginning of the stream that was for beginners the structure and the simple text hover this part of the stream is for intermediate let's go into advanced i'm gonna go and make this scalable with code i think geez well hold on let me check do we have any sites that need to be reviewed i want to make sure i give you guys time where let me see site review oh we have four all right um okay maybe i'll come back to this next week to finish off with custom code or probably do it in the middle of the week offline or not during a live stream just just do a recording but i think this is good to end off for now this is the unscalable way to do things which it's fine but don't leave it like that you want to make sure that not your like your future self is gonna say hey thank you pass nelson thank you for thinking about me and making sure that if i ever need to add or remove a link you just copy and paste the link block thank you you want to be like that right so um let's get into so we're done with the tutorial for now let's go into what you all are building so um let's see here a pablo pablo the link i'm gonna put the link in the chat for zoom so i'm starting up a zoom link there we go let's see if this works streamline oh that's already working cool all right so um there we go so if you've submitted a site review um go ahead and click on this zoom link this is a new zoom link um pablo because the other one just closed during mid stream so i'm just gonna put a new link right now copy link there we go so it's my first time trying to do this so bear with me okay site review um click that zoom link first person i'm gonna let in the door is himanshu so himanshu if you're still here uh call up now and i'll get you on the stream and let's see if we do this right all right okay okay himanshu let me see here so i have it set to um enable waiting room on zoom manchu if you want to get on and um whoever else submitted uh ayush skapari kimzy bailey ray if you wanna do go ahead and [Music] click in but i'm gonna go in order so i see alexander kamiah um in the waiting room but just keep waiting we're gonna go in order actually we're just gonna go in order by waiting room since because like what if himanshu is not here and then i'll just do him on who i'm on shoes later so kimzy let me get your link on my screen real quick and then get you on all right i feel like this is like a like a talk show now all right let's see do i do this right okay wait do i need my headphones or jeez okay so you're on hold on hold on uh okay that cool and i don't you're muted do i need my headphones on hold on gosh [Music] okay no this is a professional stream i'm a professional streamer hold on okay dummy okay okay okay my wavelength can oh can you hear me hello okay something's wrong beautiful hold on i'm supposed to be able to hear you but i can't um go ahead go ahead talk again hello geez one more time okay your levels are coming in and maybe i can't hear you maybe i can't hear you but the stream can stream chat room can you hear give her five minutes i'm doing something else in parallel okay oh sorry sorry for doing this to you i'm trying my best let's see here if i do got this so your audio is routing to wavelink and people hear you when you talk but why can't i hear you oh no oh there it goes i can hear you now oh cool yay i don't know what happened did i just push in the cable harder anyways are people in chat saying they can't hear they they should be able to hear i'm seeing the levels come in so you're fine okay cool yay so camilla welcome to the stream um finally yeah i was yelling at my laptop last week so it's nice to be zooming in nelson i'm telling you which element in which page it is listen to me yeah i'm glad you started this i was just like yelling at my computer like this so it's it's nice to be on zoom yay thank you so much um yeah so weird like a call calling thing but how can i help okay cool so i did fix the nav um it does look a little bit weird because i do have some custom code uh for mix blend mode on difference like on my nav and on my logo um so i just wanted to ask how you feel about the whole half black and white uh screens um and then is there a way that um so when you go on a page and you click the logo to open up this main uh fully expanded nav um the the circles move on hover while it's animating is there a way to pause that so when it's expanding um the circles aren't hovering so if you click on an about page right now and then click on the logo up top in the middle so oh oh it's not doing it on um so if you actually open the the url for the website at all i might do it okay let's go to about cool oh nice clicking on your yeah so while it's expanding the circles are hovering is there a way to pause that obviously it's like the tiniest thing i don't know if it's even that noticeable or not but so what is happening is that notice how if i hover here anywhere it does your interaction if i leave my mouse right here do you understand what's happening right there yeah the hover is still is still active while it's doing that second animation exactly so how do we make i wonder if you need custom code because um there's this thing called um css pointer events um so pointer events this code what it does is it says it says hey this element ignore it ignore any hovers ignore any uh clicks like just ignore it completely pointer events none there is no webflow interaction that uses pointer events so i'm wondering um i'll go ahead sorry i have one more thing um on is there a way to have a preloader animation show up on the home page but only the first time that it loads i also have to do that with like some a little bit of javascript right can you do a preloader is that what you're asking um yeah but for the homepage but only the first time that the website loads so if for example from about you go to the home page again you click that logo i don't want the preloader to show up every time just initially when the website loads yeah you you would probably need to use javascript like um you would probably need to do cookies where like a person comes to the site and when they're on the site uh you drop a cookie into their computer and the next time they come to that homepage you can have that cookie you can have the code say hey do you have this cookie um cookies cookies if you have this cookie then uh remove the preloader element if it doesn't have a cookie then let's give a cookie and that and don't remove the preloader element do you know what i mean yeah totally yeah um that sounds good now you can go ahead and roast me i don't have any of my case study pages ready yet but i'm ready i'm ready for some roasting okay all right so so when people first come to your website they see this right okay uh i don't know you i don't know why i'm here uh i am scared to click on anything if i already know you if we're already friends or you already know the employer or you already know the potential client whoever you're marketing towards or you're trying to talk to by sending them this link then you've already made that connection with them they already know who you are so they're gonna wanna click however if i just walked into the door here and i'm like huh who what where when why um i don't know if you're a designer i don't know if you're interiors i don't know what you do so excuse me positioning statement very important and usually people hide their positioning statement in the about page and if i read through here certificate uc berkeley background tier design um think outside the box that i date novel results my passion for each project is excuse me to take the initiatives my best friend my goals create products that are distinct and engaging um so copywriting is hard and as designers developers it is not our main forte writing about ourselves is difficult because it's horrible yeah because again and like i started with this stream we are our own worst critics we fight ourselves in our head all the time and if you're a designer everything you build sucks and when you just throw it out there and again i applaud you for being on the live stream and getting roasted this is not a roasting this is just to help you out it is hard and i appreciate you and i applaud you for being here so with that said what you've written is good pull some of this out and bring it to your home page so i've said this in the past but two paragraphs for your about page that's what you have now the harder part condense that into one or two sentences get the best parts and so the best parts that i'm seeing is uh you ha you have a background interior design not many graphic designers web designers have that shine a light on that i'm kamea i'm taking my in my passion for interior design and bringing it to the digital world to to fancy i'm just throwing i'm spitballing words i'm not a copywriter so don't take these exact words but i i'm just taking things that are screaming at me interior designer that wants to think outside of the room and create products that are distinct and engaging um i recognize the great design isn't about aesthetics it's about analyzing problem approaching logic creating meaningful experiences uh using my interior this background or my background interior design uh i love to think outside the box and go beyond aesthetics do you see what i'm getting at and all these keywords you've already written totally put that in your homepage okay so i have a question so i have been kind of trying to do that which is why i kind of wanted the preloader to just come out i mean i just wanted it to say my name and have like ux ui designer on the second line um do you feel like just having some sort of like pre-loader do that is not enough because i um what i'm really trying not to do is like um i don't know how to add anything to that main home page without compromising um the design i had in my head you know um to be honest the home page you oh you could do um what you know you can do that two column thing where this left has your name and your photo and your position yes see yeah i know that's hard it is hard and a lot of designers like to hide behind their home page like hey if you want to learn about me just go to the bout but you know so that's one of the things it that it's really hard as designers to break through you need to break through that your own and negativity that we will have for the rest of our lives yeah i just want to hide in my hoodie [Laughter] i do that too so take off the hoodie and imagine your homepage as you going up to a potential client to a potential employer and you don't go to a potential employer with a hoodie down and you're just showing your resume or your business card like here you go like you don't do that and then run away and yeah and then run away you don't do that you you go up with confidence you shake that hand or if we or elbow whatever you do now post pandemic but you you you show off confidence and then you say i am legit i am a legit designer that wants to help help my human being fellow human beings and i'm not willing to hide i want to show i want to show myself in the best possible light so for your page i would say take the two column route where it's your your name your photo your positioning statement and then have three rows instead of three vertical columns three rows oh but how would that change your your effects that you already have ah yeah can you make it at this point i'm i'm like towards the end so uh this is the time where i'm totally open to throwing out the whole thing and starting over you know well here's the thing about starting over which is beautiful you're not starting over from scratch you have new knowledge to step on top of so um i'm saying this with uh respect and kindness that if you do start over you you can still have some of these interactions happen but you you're you don't have space to tell people that you are a badass designer so um and and not many here's the thing how many interior designers can say oh yeah custom code okay i got that not many so you have i code and i cry so i thought that's the thing i thought we all do this does everyone do that yeah okay cool just checking so i anxiety crying and all that stuff yeah that comes that comes with the job that's yeah you know and it's and i think the crying comes from uh an honest heart of you really you really just care about the project because if someone didn't care about the project they'd be like yeah i'll just do whatever like i'll throw a template or i'll subcontract and like if it's good enough cool you know but we're not those type of people we actually care and we cry for our clients and then by the time we're done we're like yay it's done they like it now i'm gonna cry again because i'm looking for the next client never ending cycle so what you have so far is great um let's go to projects um yeah i like this slider effect and see you're doing two columns right now awesome view case study okay not ready yet oh none of those are active yet yeah okay let's go just the three main pages are okay cool um yeah so keep going i mean your branding so far that you have some sort of yin and yang type of thing going on like in like i get it you have an eye for design right there i get it i do i do all right so uh keep going just make sure that your home page is not just about these three links it's about you and you are a great designer who's coming from an interact uh inner interior design background that you're not scared of code and you're not scared to learn new things and you will fight through it so um i'm proud of you for being on the stream and proud of you for what you've done so far and hopefully i see you in future streams i'd love to see your progress yeah thank you so much um i love watching your videos you've been super helpful um and thanks for looking at my project my pleasure thank you bye awesome bye okay that was fun let's keep going all right himanshu you're up i'm gonna admit you and [Music] wait what's happening my stream deck oh my god my stream deck's not working jeez uh come on hold on let's go to site review okay that works oh i have to change the link shoe right there [Music] oh he's there cool come on you can hear me i cannot hear you are you muted did i mute you what's going on no try again no the stream doesn't hear you either i think it has to be on your end because i didn't change anything with the sound with the audio double check your mic because i i just is it me no i'm blaming myself again oh gosh stream deck okay oh i hear you i hear you finally can you see me at least yes i can see you i can i can hear you yay welcome to the stream thank you very much first of all thanks a lot so um being here is is it means a lot oh this is the first time i'm i'm on youtube actually oh well welcome to the internet um okay you can say that yes so uh how can i help what would you like for me to do for you today while looking at this website you can just you can just provide your review comments that should be all i don't need any specific specific help although okay so just gener general design uh feedback okay sure and um i know how hard it is to uh show up on a live stream so if you're nervous i uh i appreciate you and if you want to turn off your camera that's totally fine but uh it takes a lot of bravery to get on livestream so welcome yeah thank you very much or maybe i was excited as well to be on the show excuse me i was excited as well to be okay cool all right so tm consultants here we go we are your award-winning one-stop shop collaborative team of 80 plus upgrades you can do fresh ones there's a slight animation there oh okay okay the line okay uh one stop shop collaborative team of 80 plus oakland taranga wellington christchurch and queenstown based engineers all right um my first thought that's a lot of words people take about six seconds or less to understand why they're on the site now again coming from [Music] do i want to hire these people right now i don't know the positioning statement of we are your award-winning one-stop shop collaborative team of 80 plus auckland toronto wellington see how long it's taking me to talk it out it's too long to get to the point okay um when it comes to award winning a lot of people want to win awards and there's award shows and this is just i guess me personally but award shows to me word shows awards all this stuff recognition to me that's all fake because there's actually like even the grammys or the oscars or whatever you have to do you have to pay to get into the program and that's how they make money and so you're tr it's basically it's basically gambling i guess you know pay to win you know so uh does award-winning need to be called out so much now i'm wondering who are these people you know why are the engineers you know um collaborative team is what i like i want a team that works well with my team if i need to hire engineers one stop shop tells me that they that these people do a lot of stuff but this is very vague and when you say award-winning and underline it i feel like it's trying too hard um and it goes back to this story i was driving down the street and i saw three billboards one after another uh for the same casino here in san diego and each billboard said the same thing the best the best the best you're you're trying too hard like when there is no best right there's no best site there's no best engineers but there's people who care now i'm gonna scroll down and i'm looking for for explanations on why are they the best why are they the award-winning um let's see here let's bring your vision to life see i feel like this copy could be up here that i feel like that's the beginning of the let's bring your vision to life we can yeah yeah see again copy and i know that we designers are not copywriters but when the client gives you good imagery good copy it makes our job so much easier and that's why i feel like we need to push our clients more and more to give us good stuff okay all right so let's bring your vision to life now um this hero real cool but i feel like it can go even further by having a video in the background of these people actually building stuff it could be a background looping video and it would make more sense this imagery of this building in the background doesn't mean anything to me because it's zoomed in and i'm like i can't really see what it is i see a ladder but i would have to like wait i would have to really look at this photo and not scroll down to kind of understand what's happening all right so i'm scrolling down let's bring your vision to life okay so this is what they do awesome as far as the layout goes i like the layout it makes sense um i feel like there can be a break here after let's bring because i wanted to add oh i want to add code i feel like it needs go ahead so one question here regarding breaks right so if we are using breaks right so how do you handle that for uh mobiles right so let's say for desktop you want let's bring your ideas in single line but you want to work normally on on mobile mobile it's not right to have two elements right one for desktop and one for mobile max with 9ch 9 characters so that way you don't have to add a break tag you can just set the max with not as pixels but how many characters but how would it look like on mobile i mean yeah just make this bigger okay go to point yeah max with font size um some like that something like that but yeah i like this two column let's bring your vision to life this is what we do all right your button i like it uh i would set i would set the border i would set the border on hover to opacity zero the the border color to opacity zero um having it still there kind of feels odd yeah um okay do you need to underline professional team so if i were to ask you why did you choose underline what would be your answer maybe clients won't highlight that okay some things are not in our control right so we propose our idea but clients you know we want it no matter what yeah totally understand and i think you can get away with this without an underlying because the underline i feel like it it it makes the line height of this really really tight so if i find line height oh let's see here so line height 20 pixel okay so that would make more sense because right now it's like this it feels very tight so if you take it out a little bit more like a line height 70 i think that'll work but another thing you can do is just remove that line yeah remove that line and this span right here that you have for professional team um i would make this uh font weight normal and you can just pull out professional team as a font weight 800 and then go even further the color of this could be a little bit lighter kind of like this and then you can call out professional team by having color like something more bold you see what i mean yeah so playing around with the type design could help uh so you don't have to do underlying because i feel like underline is just very distracting but i know what you mean by um clients becoming the designers themselves and you're like oh god so i don't know i think i think they see something in some random websites and they say no no we want this in our website no matter what i think you can understand this yeah i understand um that's where education comes in not only do we have to design and build but we're also educators clients hire us for our skills and magic um they don't hire us because we're robots however there are clients that are like hey i want you to do this and this exactly if you get that client there's two options one you can you can drop that client and be like that's not how i work i'm sorry i like to put creative input i like to do push back and i want you to push back as well so we can come together to a great compromise because it's a collaborative effort it's a team effort to build a site it's not just you tell me what to build i build it and there you go i mean there's a lot of people do that but you are worth more you can do better and that's how you get better better playing clients the one that respects you as a human rather than a robot so you can drop them or you can take the harder path and educate them and say you know what based on my experience based on data based on whatever these type of uh um designs work best now you're not gonna win every battle but um you know it's up to you how much you can tolerate we've all been through it yes yeah so let's keep going um all right so this site right here uh this part right here i like your card design uh and the iconography that you've chosen they're all consistent cool however i wanted to click on each one i can't yeah so i think there's a miscommunication here because it feels like key industries oh i i'm looking for someone to help build um a hotel for me oh wait how come i can't see some of their past commercial work this feels like categories for their portfolio like oh they built a church oh they built a shopping mall i can't click so that's making me wonder latest engineering work um so the words are getting lost in the content or in the background image so this background image is beautiful oh these foot talk this photography is great oh man is this real is this the real projects or is this stocky it is real dude these should be at the top yeah you're holding back man like this is this is beautiful like if i want a restaurant or a bar uh like the design is so unique it's different the angled windows angled windows cost a lot and the uh and custom pools or something like what what's going on and this the interior design yeah this has to be at the top these images a a slideshow at the top um let's see here um majestic have you seen that i showed it a couple times on the stream but have you seen this yeah majestic pools like like again the photography don't hide the photography let the photography talk for the clients like um wiley architecture this is another one um that me and my wife built so her photos straight up and she doesn't have to say she's award-winning the photos talk for themselves like she doesn't she's been in the game for over 20 years this uh this uh architect she's been doing this for 20 years and she doesn't have to say award-winning she just says you know what i'm dropping the mic there's all my photos just saying whereas here it's like hey please hire us we're award-winning but yeah so this is beautiful bring it up all right so what our clients say um yeah line height right here is really too close so let's bring it okay it's not working i don't know oh it's because it's a slider but you know what i mean the the line height is really close to each other make it let it okay yeah let them breathe um notice how this image oh yeah that image has white borders within it where this one doesn't this so yeah yeah i know sometimes yeah right you can okay so the client uploaded this on their own right yeah yeah i get it we can do it yeah i get it so i'm not gonna fault you on this one i mean you can only do so much and then the client just uploads a photo and you're like but i get it i get it all right so actually i can reach up for this right because they're around liking hundreds of projects i can maybe i can bring in some other project on front okay dude these photos okay yeah yeah yeah yeah your whole yeah you're holding back you're holding it okay i'm gonna fault you on the first row because there's so much good stuff this right here come on come on oh [Music] yeah these are all great look at that angle yeah okay i'm gonna stop but yeah the the photos bring them out more bring them out more let's see here um okay so cms cool cool tags love it uh i was thinking something but it's all good never mind dude they have a lot of projects oh my god nice drop down can you can you hold it on what real foot yeah okay so the design of this looking looking at the spacing the the hover effect and how it feels it feels very wide open you need to copy the feel of this menu onto your pages because their page is very very close together it feels very tight whereas this is very open there's so much space um yeah this is nice cool wait wait you have all of these here all these services they should be here or i mean they should be linked to those things in some way all right cool so that's as far as i go but if you come back uh next time show me progress um i'd love to see what you've done but like it's there you're like really close with the design um and just play off of those images those images will make your life so much easier when you can just say hey this is what tm consultants do it'll talk for itself yeah yeah thank you very much and i just want to say i've been watching your videos and you have helped me a lot i'm glad i keep doing the good work thank you i'm glad i'm glad to help and that's why i do these so like just keep growing you got this and if there's anything else i can do for you just let me know all right sure thank you i'll be back yay all right have a good day bye okay thank you right uh cool all right last one scaparri let let's go pari join and let me get skapari's website up okay okay let me see here let me see go to zoom skari let me put you back here whoop wrong one right there oh skopari he's a streamer as well how's it going doing well yourself i'm good thanks uh i actually just want to change that quick oh there we go that's better hi professional streamer can i learn from you um yeah sure why not i'll be more than happy self i'm pretty new to it as well so learning as i go okay hold on i'm i'm taking a look at your what's going on there okay so you have two screens on one is on top yeah one at the top and two at the bottom so what do you stream um well currently on twitch it's me and a few friends we started a channel so we're just playing variety of games like um vr half-life alex and i've been playing some indie games like among us not among us um little nightmares and things like that cool cool that's why everything's so purple including your website it's gotta be a favorite color yeah that that twitch branding man um but uh yeah well congrats to you and getting your stream set up and streaming on twitch i know that streaming is super duper hard um but it takes courage so good on you how can i help you sir um so yeah basically the same just a general overall roasting of the website uh it's i haven't added any projects or blog articles just yet so i feel like i'm close to the point of launching the websites but before doing that i i'd like some input from from you as i've awesome friends as well to have a look at it cool all right so here we go um my first let's see do you have any okay so you have a pre okay oh okay okay okay um just refreshing multiple times just to see understand what's going on okay um all right tell me the story behind tell me the story or concept behind your logo because it seems you're using that multiple times yes so um from my mother's side of the family um ancestry is uh viking norwegian so that's the binding ruin the old norse binding room for creation or creative which is pretty much kapari so it's creative digital oh i like that cool and yeah you used it again here as your down arrow that's cool i okay let's see here now hi my name is jean is it gene or is it pronounced differently uh it's pronounced jean but uh many people call me jean so go for it bit of a nickname as well my name is john i design websites that work for you make money feel less stressed and enjoy your free time get to know me book a free call all right um i feel like the positioning statement could be stronger um because i always ask people you know for a strong positioning statement why are you in this game this game of web design changes every day and you always have to be on the forefront and if you just if if you just take a break for a year or something then you're already like you're already old news so what keeps you going like why do you love um creating these websites that would be yeah that would be the first thought right now is that something you can answer you don't have to answer it now but it's just one of those things that because i see this positioning statement i design websites everyone's cousin little brother uh can go on squarespace and spin up a template and hey i designed a website cool but that's what you're telling me right here i design websites cool but there's something deeper and i feel like you're playing off the your logo the the um norwegian right uh yeah north yeah so playing off of the the history of that like why did you choose that and why is that the main focus of your logo of your brand and you know like how does that connect with you and to me that could be some of your positioning statement of like i do this because it's creative and it's in my blood and i want to help people um enjoy their free time i want um you see what i'm getting at yeah yeah cool so i'll stop rambling um so to get the get to know me button that's i haven't created that yet that's going uh my thought process there was to have a little pop-up window with a video oh okay okay okay oh okay you have interactions in the back nice parallax happening nice nice nice okay um let's see here okay you're playing off of the blue purple gradients happening okay cool uh you need more of the website you need a bespoke business tool uh did you start from a template on webflow or did you see from scratch uh started from scratch nice nice i applaud you that takes you know again courage how long you been web designing um for corporates i'd say probably about 10 years now it's a long time coming that i'm trying to finally start my own agent's one-man agency if you want to call it that yeah it's hard it's hard yeah so good on you um let's see here so i feel you have your logo here again um i don't know if i would add this photo because it distracts from the testimonials that you'll be putting here it would be better if you had a screenshot of the website that you built for each of these clients so you click on this and it changes the image and you click on this it changes the image yeah cool yeah all right so yeah um these leaves i want to know uh the story behind the leaves um to be completely honest with you there's not really a story behind the leaves i just wanted to go for something that's um i'd want to say award award looking but in that's in that sense um yeah so i would oh let me skip this because i'll get back to it but let's see here cool yeah why this interaction it's cool but i want to know why um so the the the hero banner has some cool interactions and i feel like grabs attention um so i just wanted to carry that attention grabbing feeling throughout the website so there's i won't say there's necessarily a core purpose for this interaction other than just keeping the attention and giving the user something to to play with as they as they scroll through okay okay okay okay um nice spacing here frequently asked questions did you build this accordion um from scratch yes i did oh cool i usually just pull from a cloneable so you doing this from scratch good job you're better than me it took a while it took a few tries but i guess later later when you start getting more clients you're going to be like let me just take a component which is fine yeah but you understanding the understanding everything from the beginning that's good that's good all right um so i'm running out of time ayush i see you are waiting in the waiting room for zoom i'm gonna um we need to do come back next stream but i'm um yeah i'm running out of time i gotta go to um uh gotta hang out with friends but yeah because we're all vaccinated now yay but for for you john um i'm just gonna look over your homepage and so are you are you more of a dark theme or light themed type of person um normally normally i'd say a bit more of a dark theme cool i was going there too i would play harder on your logo so what i mean is the purple i know you love twitch and everything but what if you just go straight black go straight black and and have this rune be because you're already using the rune here but then that's it you're not playing around with it and so i would use this bottom part of the rune okay yeah this diamond part imagine it as your bullet for your bullet lists you know use that as your iconography um like you like instead of leaves you can have these stacked on top of each other these words stack don't trump each other like a like a bullet list and then you have um and then you have uh your your rune as those bullet points and also if you do something that's like just dark see how everything is just so open on this website that i helped build like the text there's hardly any text so you can have text on the left and then supporting copy on the right and i can see that here where the supporting copy is all these right here but then on the left it's like my my journey or some sort of headline you know what i mean like my web design process you don't need this interaction um it's distracting if anything um you can have my web design process and then those three cards or something and then if you go down like or maybe even try something something like this you know yeah um like well i do like that yeah so gail.agency like take some inspiration from this design i think it's a very simple well thought out design and these cards are chef's kiss i mean it's so simple and um it's so spread out and it just works um and so just play with that openness and and play on the play on your logo i feel like your logo can just be the center point of of your design so the purple i don't i'm not understanding the purple enough um and it's a nice callout color i mean your buttons could be purple instead of yellow um yeah so since you love twitch dark and purple you can still play around with those colors but make dark them the main color because i have right now it's like dark and dark and then you go here and then it's white i was like oh okay so you went from dark to white dark to white and so it's kind of feeling like i don't know which side you're on are you the the light or the sith i don't know but um yeah hopefully that helps like i see a lot of potential for this um but thank you so much for for coming on the stream and like again that's a professional setup great job cool thanks thank you for for your input i really appreciate it all right and if you can come back next time i'd love to see progress um but again thank you for your support and i hope you have a wonderful wonderful weekend cool thanks man you too one more thing shout out your twitch uh twitch link that's fine oh that's a friendly fire force friendly fire force okay i'll go ahead and give you a follow awesome all right thank you thanks a lot you're welcome bye bye okay ending meeting there we go all right i gotta get going sorry ush um very very sorry um ran out of time but i next time next time um be here and i'll i promise you'll be first all right um pablo can you make a note if ayush is here next time he is first in line okay and sorry if i missed a lot of the chat uh i was trying to focus on the recite reviews but uh time on me feeling the stress nelson feels fixed hear her now hi nelson how are you i'm fine uh beautiful clean work thank you nelson you're welcome also i'm famous on youtube yeah you're famous yay it's nice to see what everyone else is doing to hear their feedback much cleaner yes much cleaner with a dark ui uh hey good bye bye see you next stream bye okay let me where's my music play music and where's the therian all right so thank you all so much for being here this was a fun stream it started off kind of rocky even before stream i was struggling to get up but with your help your support i was able to do it we learned something today we saw some people's uh websites we helped them out i hope you all have a wonderful wonderful weekend i will too now that i've hung out with you all you all are so awesome remember that you are better than you realize it's your own head that's telling you otherwise break through that break through that because you will and if you ever need help ask for it people want to help we humans want to help each other so tweet it out find help and push through that all right y'all are wonderful you're all beautiful i'll see you next time and as always make the web beautiful together see ya [Music] you

Channel: pixelgeek

Views: 1,191

Keywords: webflow, web design tutorial, webflow tutorial, graphic design, web development, pixelgeek, pixel geek

Id: XIPVv1gvQxY

Length: 124min 5sec (7445 seconds)

Published: Sun Jul 11 2021