Building the Sketch.com Landing Page with TailwindCSS

what's going on guys in this video we're doing a tailwind rebuild of the sketch landing page this is an absolutely gorgeous landing page it's fantastic for basically any software as a service you could use this as like a business landing page you could do so many things with the layout that they have here and we're going to be building this entirely until in css uh and in my case i'm going to be using vue but so long as you guys have tail and css installed you guys can follow along with whatever framework you're using so a couple things we're not going to be doing in this rebuild we're not going to be making this really sexy animation that we see on the right hand side as well as the little lines that pop up back here because that's kind of out of the scope of till in css we are going to be doing that we're not going to be using this javascript effect so as you guys see if i scroll down here i get that like slight little change in orientation again that's just javascript not tailwind and i think the last thing we're not going to do is this this svg kind of overlay on top of this div that to me just seems like a massive pain in the butt yeah and as you kind of scroll you know get closer different things pop up so we're not going to be doing that but aside from that basically everything else is going to be done and the end result is going to look remarkably similar so without further ado let's head on over to our development environments i've already spun this up here in vs code i have already done a couple of configuration settings to this development environment namely i went into our tailwind config.js and just added this little snippet what i'm doing here is i'm extending the base theme adding some extra colors and then defining another color called carrot and here are a bunch of hex values for various various numbers we have 50 f9 f4 e6 100 so on and so forth all the way down what this does is basically just going to give me a color palette that corresponds more closely to the private sorry not private primary kind of colors that they're using here because tailwind's colors don't really match 100 and that's fine so on top of that i also added a font now sketch uses a very particular font it's custom and it costs a fair amount of money so i'm not going to buy that but we are going to get probably 98 of the way there just using a free font from google called inter and it is super easy to get if you guys are using nux i just use a google fonts kind of wrapper but essentially all you have to do if you want to install it on your project and you're not using a framework is go to that page click select this style and you'll get this little css snippet that you can just then add to your website or if you are familiar with the import syntax you can do that too so in my case when i go over to my next file here i think all i did was i just added a custom class called font display with the font family of inter and sanserif as the backup that is all you have to do basically to be on the same page as me so without further ado why don't we actually start breaking down this website and uh getting it built now first thing i see right off the bat here is let's start with the navigation bar first thing i see is this looks to me like it's a full width div all the way across with a smaller div probably like 70 or 80 percent of the way uh the entire width of this page nested in the middle and then inside of this there are what looks to me like three containers there's this container on the left this other container in the middle and then another one on the right and each of these containers look to me like they're flex aligned with a little bit of spacing between each column so if i were to do something very similar to that i would start by first creating my master kind of container this one's going to go across the full width i'm going to just give that a quick background color just so we can see and why don't i just say py2 just so we can add a little bit of spacing here okay great so this right here is essentially the div you'll see that instead of py2 let me just go like h32 or something it'll be more realistic yeah there we go you'll see that this spans across the entire width of the page inside of that we're going to make another div we're going to make that a little bit smaller so let's do another one this time let's go bg blue 200 and why don't we go max with let me see is this 7xl oh let me add a little bit of a height to this too h32 yeah that looks to me like it's about 7xl and we'll center it with mx auto that's going to push it right in the middle of the page and let's just see how this width looks i think that's a little too big so we're going to do is we're going to turn that 7 into a six and ooh that is basically remarkably accurate perfect okay now inside of this blue div we're going to do a couple of other things we're going to create three kind of subdivs to me it looks like they're flex aligned to justify between that just means that basically each of these containers are being like stretched out as far away as possible from from every other one so let's do that here inside of this blue container let's do bg yellow 200. um let's start with that and we're just going to do h 32 on all of these for now because we don't actually have any content and i'm just going to copy and paste this three times changing the yellow to indigo and then uh do they have a teal color no it doesn't look like they have a teal color cn no let's just do green and then on the parent container because right now this is just gonna stack them all on top of each other on the pair container why don't we go flex and then i'll also add justify between so that should basically take every single sub element and just push it all the way to the left and the right now we don't actually see that here and the reason for that is uh i don't know so let me add a little bit of text to each of these and see if we can make that pop up i'm going to type menu here and on the right we're going to type buttons let's see if that changes things yeah there we go we just need a little bit of content in there to stretch the width out because otherwise the width just automatically goes to min so that to me actually looks pretty good from a layout perspective we have our logo and stuff like that on the left we have a little menu in the middle and then we have the buttons and stuff like that kind of call to actions on the right and there's actually a really sexy little hover effect that goes on there so i'm going to enjoy making that so why don't we start with the leftmost component here and that's just the title sketch with what looks to me like either a png or svg of their logo and i'm just going to cheat i'm just going to like copy and paste whatever that is so this is very clearly an svg so you guys can see there's a bunch of paths so why don't we just go to the parent svg element here and give that a quick copy and paste i'm going to put that in here that element and just quickly kind of command yeah perfect that looks good to me okay great right now we're using fixed width and height properties but just because we're already using tailwind let me get all their classes why don't i just go h32 sorry h8 with eight use tail one class instead and we'll see the height and width basically didn't change at all and that's because the height and width is is the same when you're doing h8 w8 i believe it's like 32 pixels now that is awesome i'm noticing here that there needs to be a little bit of padding between the top of the page and the logo so i'm just going to add a little bit of y padding onto this parent element let's go py3 let's see if that works yeah decently close decently close why don't i actually add this onto the child elements just in case we apply any colors or anything like that later and then turn this to py5 that should be better awesome yeah that looks good to me now on top of this svg we also need to add a piece of text here that's a sketch so why don't i go h2 and just type in sketch real quick i also added a space x2 here just to space out what we were going to be flex aligning so if i go back here you see that we now get that little flex line and it looks to me like it's just about space x2 so that was quite good unfortunately though it needs to be quite a bit bigger so why don't we go text 3xl and i believe this is going to be a font bold although i may be mistaken yeah i'd say that's reasonably about the same size now is probably the time for me to add the font display class by the way so why don't i type font display in and see if we can get something closer yeah there you go much better we're going to turn that font bold into a font semi-bold and we're going to also add tracking tighter to bring that text in together just a little bit and you know what let's actually do 2xl that'll be better yeah there you go looks a lot more realistic you'll notice that the spacing is a little bit off i think it's a little bit higher so what i'm going to do is two things i'm going to add a text gray 800 just to make that a little darker and then i'm going to go to the parent element here and i'm going to go item center and that should like give us a couple pixels basically and you'll see this is being pushed all the way down to the middle of this because we've explicitly set height properties so now we can just take all those height properties off oops don't take all of them off there you go awesome so that to me looks pretty freaking good in all honesty in terms of colors and stuff like that i mean i'd say that's probably 80 of the way there they're just a little bit darker while also being a little bit lighter than uh the text gray 900 class so we're just going to leave it there and then kind of move on next thing we got to do is we have to do these menu elements we have four designers four teams resources and pricing it looks something like they're spaced out maybe like i don't know space x6 or something like that so what we're going to do is we're going to go into this menu and we are going to space this out flex then we're going to space x let's do 7 for now and then i'm going to create a actually instead of that why don't we do this we'll create a ul instead of this div and we're going to do let's just do four allies there because there are one two three four things perfect and inside i'm just going to add like example example example example and let's see what this ends up looking like okay so we're stacking them all on top that's because we haven't added a flex and let's also add a space x6 class to this and yeah we're actually getting decently close why don't we go spacex 8 instead though that looks a little better to me perfect i'd say that's very reasonably close to the same width now the text does look a little bit smaller so let's try text sm and why don't we also center this to the div that we have that's going to bump them down a little and let's just start entering that text for designers second one is for teams next one is resources and the last one is pricing let's break those out good also the font looks like it's semi-bold so we're going to go uh font semi-bold and let's do text gray uh i think this is probably 700 yeah we'll give that a try yeah that looks pretty decent looks pretty decent i think they're at a size that's probably halfway bigger than sm right between sm and md for us so we're just gonna stick with this but aside from that looks pretty good to me the letters might also just be spaced out a tad more but in all honesty i'm not going to nitpick because i want this to be a seven hour video so let's roll with that and this is also going to be pushed over a little bit to the left when we spaced out this div so that should fix that i'm going to start removing these backgrounds that i've added just because i don't want this to get in our way of comparing the two and so when you remove them you can see this is actually getting decently close i think that the centers of these are a little off probably because i did not add flex to the oh sorry i didn't add item center to the parent flex container here so i item center this these should be pumping push down just a little bit see that buttons just went down a bit and this is a lot more a lot more clean in my opinion there's a little svg here that's spaced a little bit to the right of resources so in order to get that i'm gonna go to heroicons i'm just gonna go i think chevron down right yeah chevron down right here and i'm going to basically just flex align this list element and then i don't know space it out by like a couple pixels so if i go to this list element where it says resources i'm just going to go flex spacex let's just do one and then i'm going to make an h3 with resources and then i'm going to add that svg and i'm going to add just a quick little class let's just do width for height 4 and just see how that looks yeah it looks decent i'll also add an item center to this parent div and that's just going to bump it out just a tad there you go yeah that looks good enough for me all right let's get moving on these buttons on the right so that is the last thing we have to do here to finish off the snap bar let's go flex let's space these out by uh let's say three and let's just write sign in just two let's do two actually let's just do uh sign in and then i'm gonna make another one that says try for free awesome and i'm kind of a stickler here so i'm going to capitalize that good that looks fine to me looks like the text is actually a little bit smaller so why don't i go on this parent element just type text sm should get us a little closer nice and let's get started with the styling so first off this has text carrot 500 i believe yeah that looks reasonable to me i'm gonna go font semi-bold on this and that should honestly be it yeah it's basically good enough i mean obviously the font's not the same you'll notice that it's slightly different that's okay we've already talked about that looks like there's a a brief little hover effect that makes a little lighter so all we have to do for that is just go hover text carrot 400. so we're basically saying when we hover over this element just make it a little bit brighter and you can also make that a little bit slower by adding transition just to enable all transitions as well as a duration property that basically gives you the number of milliseconds for whatever transition you want so in my case now it's 200 milliseconds from when i hover over it to when it gets a bit lighter see it's just a little bit smoother than whatever it was before which is uh very close to what they're doing next thing we're going to do is we're going to make this button so it looks like the text is white looks like the background is the same color as the sign in and it looks like a little hover effect over it too which i'm going to get into in a second so why don't i add a class let's go background carrots 500. let's do px3py2 that should be reasonable uh rounded sm shadow sm and then what transform yeah let's do that and then hover negative translate y why let's do one yeah let's see if that works awesome okay cool so we're probably 90 of the way there on all honesty i didn't add an item center to this which is why we got that weird spacing so added that problem solved i also didn't add text white to this let's go text white and then font semi bold too that should be more reasonable there you go you'll also notice that when i hover over this i get that real slow kind of rise whereas this is a very fast rise i don't like that fast rise so again we can say we can uh save that by just going transition and then putting in a reasonably long duration so i think they're probably 300 or even 500. i added 300 here and you'll see that that kind of mirrors it unfortunately this is a lot smaller so let me see if we can go even smaller than translate y1 i think we can do they have a px yeah they have a px all right let's see this perfect much better okay in addition to this hover effect it looks like they also add a little bit more of a shadow and with tailwind's new utilities we can do that really easy let's just do shadow large on hover so that's theirs this is ours actually the colors look a little bit off now that i'm looking at it i think all the 500s need to be changed to 600s let's see yes actually they totally do perfect so why don't i just change these backgrounds to 600 and then i can hover this to 500 yeah there you go that's a lot more realistic i was wondering why that was off uh okay great and the last thing we want to do is on hover we want to make the background of this a little bit lighter so that it looks like this now and this looks like that perfect i'd say that's reasonable i think if i were to go rounded medium on this it would be a little too rounded so i'm just going to stick with yeah it's way too rounded i'm just going to stick with small and that's going to be a decent approximation okay guys so zooming out this is what there's ours looks like and this is what theirs looks like you'll notice that there are a couple of differences of course it looks like our roundedness is quite a bit smaller and actually these buttons need to be just a bit bigger actually i think the font on this in general needs to be a little bit bigger why don't i actually uh add py3 to this just see if that looks better yeah i'm gonna go px4 actually our buttons are just gonna be a little bit beefier but that's okay yeah so aside from that uh i believe that's basically it i can make these cursor pointers i mean i could just turn all these allies into uh i could just nest all these within a's but i'm not going to do that for now i'm just going to go class cursor pointer that way anybody anytime i hover over any of these you're going to get that cool kind of you know cursor pointer effect same thing that you would get if you go over here well i guess one more thing i could do is i could change the hover states here these go pretty light when i hover on them so if i were to go back here let's just do cursor pointer uh hover let's just do text gray 400 that's probably it yeah text grade 400 looks about right and we'll go transition duration 200 for those so now we have basically the same or very similar hover effect on each of these elements very cool stuff okay so now that we're done with this nav bar why don't we get started on this hero header section down here like i said i'm not going to be creating these uh these beautiful animations i think they're amazing i just don't have the time or where with all two and this isn't something that really tailwind is good for but we can get started on this instead yeah let's do that and then once i make once i get down to here i'll just start mobile optimizing it so that you'll see how responsive it is on each different breakpoint i usually don't like to make things responsive one at a time i like to just add a few components together make sure they all mesh well and then i can worry about that responsiveness you know after three or four that's that's what my workflow like looks like but yours may differ regardless let's get started looks first of all like there's a decent margin here between these divs so this is probably pushed down like mt24 or something like that then you have what looks to me like a this could be a flex layout let's see how this looks when we push it together yeah this could be a flex slip i mean you could do this in so many different ways you can do this with grid flex i like grid so i'm just going to use grid for this but essentially we have two divs one on the left one on the right this left one looks like it's flex call or i guess just block too uh you have like a very big heading then underneath it you have a little bit of a margin some smaller text then you have a decent size chunk margin with a flux container that has two buttons they are each spacex like three or four maybe and then you have a bunch of really tiny text down here now on the right hand side you just have this animation or really just this image in our case we're just going to apply a screenshot so let's do that i'm going to scroll all the way down here uh you know what why don't i actually make this semantic yeah there you go so now we know that that's a nav bar rather than just another div so it's going to be good because it's going to turn quite long so i just want to know where to start and stop uh why don't we just do nav bar there you go now we're going to go down here and do hero header all right so first thing we have to do is like i said we have to make this div looks like the width is going to be the same as before so we're just going to go max with 6 xl um i'm also just going to center align this with mx auto and why don't i just go bglo 200 and h64 for now you guys will notice you'll see that when i do most of this i uh oh sorry the template root in this requires exactly one root element that's just a little hand-me-down from div from view or nux so i'm just going to add that you'll notice that the way that i usually design things i add a bunch of these like placeholder divs just to see where things are so in this case i added this yellow placeholder div just so i could see looks i need to bump this down now with like an mt maybe 24. let's give that a go wow that was remarkable i am scarily good at that okay great so let's turn this let's use grid for this i'm going to if i had to guess i'd probably say this is like seven grid columns with this taking up four and that's taking up three so let's let's try that we're gonna div class uh with full h full bg pink 200 just to see the first one and for the second one let's just turn this to blue i've just created these two oh let's also go call span four this one's going to be call span three this is just going to tell us how many columns that each div should span so this is not apparently aligned right oh yeah because i didn't add grid make sure to add grid folks okay that actually looks really close i think i think that honestly might be it i believe we could probably get this a little closer if we wanted to but that to me looks fine in terms of spacing and layout you'll also notice that when these guys get a little bit smaller what looks to me like what is that the large break point it just turns to one grid column with one thing on the top one thing on the bottom so why don't we just add that in right now so don't forget uh grid call 7 when we are on large displays and then anything else let's do grid calls one and let's also only add this call span four and three on uh large displays and then otherwise let's do call span full that way they'll just both span the full width of each column so if i save that now we should have very similar functionality we'll scroll down to the large breakpoint which is here so i think it's a couple pixels smaller but yeah then we have that functionality where one of them goes to the top the other one goes to the bottom awesome exactly we're looking for so now we have to work on the actual text let's start with a big h1 because this to me looks like the main heading and then underneath we have uh what looks to me like let's just do an h3 for this i wish my emmett was working but it's not underneath we'll have another div so let's just do div class bg uh i don't know indigo 200 and inside of that i'm just going to put two buttons really quickly let's just do an aahref of this class is equal to bg caret 600 px4 py3 text sm actually no let's stick with tex md shadow sm and rounded small and then let's also just add this text so try for free and i'll also flex align this space x3 add another div here uh and then i'll just make that to say c pricing instead of bg carrot why don't we go bg white add a border real quick i think that's actually just border one let's just do border grade 300. there you go that should be reasonably similar yeah kind of not really maybe rounded md yeah that looks a little bit better and we'll work on that uh we'll work on that more in a second but okay uh i guess i'll just add like 10 things let's do five things of lorem here and then another like 15 things alarm that way we can just see what this all looks like okay and let's just make this really big because it's the h1 why don't we go text 5xl see what that looks like good size bad size yeah i'd say it's pretty decent let's go text 6xl font bold and why don't we just add font display to this that we can get a much more realistic looking font that looks good to me you'll notice that the text is a very bunched together on this sketch.com landing page whereas ours is a little bit more spaced out all we need to do to fix that is just that add a tracking tight or even tracking tighter so i'm going to add tracking tight to this h1 see what that looks like yeah that honestly looks pretty good i think good enough for me now to just copy and paste this text over and i'm just pasting into my url bar it's like a hand-me-down from when i used to do a bunch of wordpress developments uh because i really do not like when formatting is copied over all right this looks pretty good to me honestly i think their text is a little bit bigger so why don't we go 7 xl let's just see if that works yeah there you go that looks a lot a lot more accurate and let's get working on this paragraph or rather this h3 down here looks to me like this h3 is probably like text 2xl text gray 700 i would say and the tracking to me also looks tight yeah that looks fine and let's go mt3 bump that down just a bit more okay also looks like the leading so the space in line height looks a little bit bigger than ours so i'm just going to add a class to fix that let's just do leading uh relaxed that should space this out just a bit more yeah there you go that looks fine to me all right let's copy and paste this text over do this and give that a quick save how are we looking we're looking pretty good all right next up we're going to work on this div underneath with these buttons so this looks pretty big i'm going to go mt8 see if that's bumped down properly yeah that looks decent that looks decent you'll notice like the text isn't wrapping exactly the same and i think that's actually because of uh that's because of the tracking on this let's actually remove tracking tight and see if that works better yeah a little bit a little bit you'll see that there looks to me like there's a little bit of padding on the right hand side here and that is what's making theirs roll over a little faster so what we can do to do that is go to the div that is the parent element of all this stuff right it's the left grid column and why don't we go large screens padding right uh eight see how that looks there you go i'm pretty sure padding8 is basically exactly what they had and that's what ours looks like that's what theirs looks like next up i'm now going to space out these buttons a bit uh they're a little bit too close and i'm also going to work on like just getting that sexy hover effect down as well as just the general look so now i can remove these bg yellows bg pinks and bg indigos that i'm not going to drive myself insane and i'm going to space these out just a tad more so i got to go over here space x4 and then i'm going to change the color of this to white and then we'll go font semi-bold and i'm also going to add rounded sm oh it looks like we might have already done that yeah i'll tell you what why don't we just stick with sm everywhere so i'm going to go over here to this other button and go sm and now i'm going to add a little bit of extra space here so this is going to be px5 instead of a px 4 there you go and i'm gonna do the same thing to the other button as well so i'm gonna go px5 and that looks pretty good to me the shadow's a little bit too big on this why don't go shadow sm and then on hover we'll go shadow md yeah that looks much better and then we just have to do the same thing that we did to our old button up here down here so why don't i go back and just copy that over hover translate y px hover shadow lg hover bg carat 500 and if i use this more than one more time i'm just going to create a component class for this stuff that should work that looks good to me i'm just going to make sure to add the transition property and duration 200 on that cool so it's a little bit different oh yeah i got to do the same thing down here transition duration 200 transform hover negative translate ypx and then what it looks like the text changes a little bit too text goes just a little bit lighter so why don't we go text gray i don't know 700 see if that works yeah it looks pretty good to me i'll also add the font semi-bold let's just go tracking tight on each of these yeah yeah it's pretty good it's pretty good i could also change the border make that a little bit lighter perfect and i guess the last thing i can do is when i hover the border gets a little bit darker so i'll go hover gray 300 cool cool cool all right i think that's enough of me being a stickler with these goddamn buttons but aside from that if we zoom out it's actually looking pretty good it's looking quite similar we only really see these massive differences when we're zoomed in 50 times like i clearly like to be next thing we're going to do is we're going to add this fully featured 30 day free trial so i'm just going to copy this go underneath this button div and just do like a ptag looks to me like this is probably going to be a little lighter so let's go text gray 700 text ss yeah even lighter than that let's do a text gray 500 it looks like this wraps over probably right around here so i think that's probably like texts a max width 2xl let's see who max with 2xl let's also add 3 units of margin top yeah even closer man let's do empty uh max with md hell i guess we're doing max with xs perfect that actually looks really close last thing i'm going to do is just go leading relaxed space this out a little bit and yeah we're like literally 95 of the way there okay it looks great to me now i'm going to add an image on the right hand side here like i said before they have an animation i'm just going to use a screenshot i think i had this one here so sketch underscore screenshot.png so we have our grid here this here is the left side and then this here is going to be the right side so for this all i'm going to do is create an image put my source as assets sketch what are we doing here screenshot i believe dot png and then for class i'm going to with full height full objects let's do object cover and let's see how that looks i think this is the right folder right assets yes sketch screenshot okay so probably not the right oh never mind okay that worked out all right well i think that worked fantastic we're probably like 95 of the way there hell i think we might actually just be done with that i can't really see any major differences the background color here changes a little bit you'll notice when the lines appear on the page otherwise it kind of goes a little bit brighter we're not going to worry too much about that because we can't fix that but i might just be able to add a bg gray 50. that might be a little closer yeah no the background on this is white so i'm not going to go in there and edit that out we're not going to worry too much about that and awesome okay so that's what that looks like now that we're done that i can actually worry about you know mobile optimizing a little bit if we go on sketch's website and we start bringing the width of the page down you see that a couple things happen here so the nav bar changes quite considerably in addition to that we also have that kind of wrap behavior that we saw with the grid columns if you look at ours right now we go bigger we got that wrap but that wrap the element is actually absolutely massive and there's also a little bit of like cut off of the image as we go smaller and smaller and smaller we also need to add padding on basically everything so i'm going to do that as well and we need to make this image a little bit smaller when we go all the way down so instead of like width full for example we should probably just go with auto so let me start with that actually let me just take both of these out save that and why don't we actually just do uh max with like let's do lg for now and then lg we'll just go max with full perfect yeah that looks good to me we'll also go mx auto so that's going to push this into the middle and then we're also going to do that with this div to push this into the middle a little bit although it's already spaced out fully so it's not actually going to do much next thing we're going to do is i'm going to add padding on everything so i'm just going to add a little bit of padding to every single element on lg displays why don't we just do like px2 and otherwise we'll do px6 let's see how that looks let's get reasonably close to similar looks like they have looks like they have a little bit more in all honesty if i bring this down to 840 this is ours that's theirs so it looks like they probably have like i don't know 10 or something like that let's give that a try maybe even more let's do 14. i believe tailwind now has a 14 class yeah they do awesome yeah perfect that looks good to me we're also going to add a little bit of padding up to the up on the nav bar and we're also going to work on this cool little transition thing that we have going on so i'm just going to remember that so lg px2 and px14 on the nav bar it looks like they probably have i don't know three units of padding or something like that so why don't we go lg px2 and then let's go px let's do px4 for now yeah maybe even more let's do px uh seven see how that looks yeah there you go that's a lot better all right now let's work on actually changing the visibility of these divs it looks like when we go from a break point up until about large we have all of the divs and then when they go a little bit smaller it looks like we get rid of a few so we get rid of this try for free button we also get rid of this entire div and then it looks like we add another div so we have a div that's previously hidden on large displays that then pops up on small displays and that div looks like it's just a hamburger icon so why don't i just go to heroicons real quick type hamburger and copy that svg and get this sorted so this is them this is us i need to do a couple things first thing i have to do is i have to hide uh hold on a second i don't really like this either i think the pattern gets too small too quickly why don't i do this why don't i actually add this all the way up until xl instead of lg px2 let's do xlpx2 okay that's good too and i also don't like the fact that this is clipping our image so why don't i really quickly scroll down here instead of object cover let's just do object contain there you go that's a lot better yes it gets substantially smaller until we reach that break point and then problem is solved in all honesty though it doesn't look like theirs does so let me see if there's another way that i can fix that there's a bunch of object classes here um scale down maybe no that's not going to be it let's do object fill see if that works definitely not object fill because theirs doesn't stretch out why don't we try just removing this entirely now i guess we do need to have object contain of some kind flex shrink zero maybe that okay well honestly that degree of getting a little bit smaller is fine for now um yeah that's fine for now we'll work on that later at the end if we have extra time but okay great now we're looking up here at this navbar a couple things need to change the first thing you need to change the sketch text needs to disappear so why don't we go hidden and then on large displays it's a block so i go small it's going to disappear good let's do the same thing to this ul let's go lg block otherwise it'll be hidden oops sorry lg flex otherwise it'll be hidden go back here delete that awesome we see that we have it here and then we reach that break point it disappears good and let's also do the same thing that try for free button so scroll down here and i go hidden otherwise let's do lg block scroll down here boom that's gone and we go back up last thing we need to do is we just need to add another div with that svg uh that goes before all the rest of the stuff so let's just go div and why don't i just paste in that svg that i copied forever ago and looks like this is probably gonna be width eight height eight let's do that yes yeah i'd say that's reasonable let's actually just make the stroke with a little bit smaller and now let's add a hidden no actually we're going to add lg hidden there you go now it's going to disappear on large screens so this is ours now looks pretty good pretty good pretty good boom have that break point nice this is theirs i guess the last thing that happens is there's a little bit of a shadow that appears immediately underneath this so why don't we add that as well uh and it looks like it goes across the entire div so i'm going to use the top parent div in order to do that let's do shadow md and then on large let's do shadow none that should work oh wow that is remarkably similar awesome okay and aside from the fact that obviously their hamburger icon only has two little lines and rss3 i'd say it looks probably like 85 90 of the way there see if anything else happens when you go real small uh looks like their text gets a little bit smaller that's certainly not something that we've done so we can do that as well if i go back to the best product start with sketch that's going to be where where right over here let's do md text five excel and let's do let's do small text five excel on large screens we'll do text seven excel actually let's just do text five excel normally yeah there you go that looks a lot closer and honestly though it looks like we have even more padding so we can dumb that padding down a little bit get get it closer to theirs because right now we have 14 units of padding so realistically it's probably like md14 otherwise px like five yeah there you go and i think i added px5 up here too didn't i edit px7 so why don't i do that yeah there you go it looks a lot better okay perfect i'd say that's probably 95 of the way there i'm happy with that let us now start working on this little element down here the way that this element looks to me is that there is a flex container on the outside with two children one that's one two three four probably two-fifths of the way and the other that's three-fifths of the way and the one that's three-fifths of the way is center aligned so it's probably flex justify center item center and then there's a little bit of extra line height on each of these lines also the text here is bold there's a little bit of a border surrounding this it doesn't actually look like their border goes all the way might be one of those pesky little border bugs let's see this yeah there's like a little bit of a white space there and that's fine okay let's do something really similar so we scroll all the way back down to our current project we are here there's probably i don't know 12 units of margin so why don't i create a div let's add bg pink 200 for now we'll go with 96 probably an h44 and we'll also mx auto that so it'll be right at the center now we see it comes up here uh reason it comes up here is do i do i have h properties on anything else no i do not think so it's quite odd i might i may not be on the uh bottom elements hold on okay so we're a little bit spaced out here let's try to figure out why the hero header starts here and it ends all the way down here that's good i create another div and i don't give it a height property i just say that it's block it's px4 py4 bg gray 900 rounded four we should see a little circle this is my little sanity check where is that circle popping up looks like that circle is popping up here in the middle of the page it should not be popping up in the middle of the page so clearly there's probably still a height property that's applied to something on here okay in this case yeah it's this this says that it's height 64. so we take that off okay perfect yeah fix the problem so let me delete that again let me paste in our old div that's where it is let's go mt probably 12. yeah it looks basically remarkably similar and let's widen that bad boy out a little bit i believe this would probably be max with 3xl no 2xl we can also turn this bg to white add a border go rounded sm let's make that border grade 200 hell that's actually even smaller just xl maybe even lg no that's quite reasonably similar actually all right there's also shadow so let's add a shadow medium on this shadow actually looks substantially softer let's see if i can do large that might work no that's too strong excel still quite strong okay i'll tell you what i'll do i'll show you guys a little trick that you can use to soften your shadows with tailwind add relative to the parent div then make another div that is inset has the property that you're looking for and then set the opacity to like maybe half or something like that so we're basically just creating a a child element with the same shadow just making it a lot softer yeah i'd say that shadow looks decent our shadows are a little cooler than theirs they have a little bit of a warmer gray but that's fine now we're going to get to work on actually adding the the various halves in so let's make this uh like i need to absolutely position this that way i'm not going to be screwing with it when i do a flex so we're going to make the parent container flex and then underneath we're going to add two smaller containers the first is going to be our image container that's going to go with two-fifth and then we're going to create another one that's with three-fifths and emmet for whatever reason does not like tailwind auto completion so i'm gonna go back here save and we should be good to go oh i guess i haven't added anything in here so that makes sense let's go bg yellow 200 and bg red 200 should be seeing something oh wow yeah that is basically exactly what we're looking for okay great now that we've verified that that works i'm going to add an image to this left container uh the source is i think i already have this rotating mock-up or sketch mark yeah sketch mockup.png so we're going to go assets sketch mockup.png and i'm not going to any alt text because i'm not trying to rank this page that would be very illegal we're going to add object cover and it'll pop up every now and then and you'll also see that there's a little bit of a space underneath so why don't we go h full yeah that'll stretch out a little bit more cool that looks good to me obviously it's like slightly different but uh that's cool now we are going to change the other half to bg white and we're going to make this flex go justify center and item center and then we're going to add some text let's do h3s for this i'm just going to copy this text so switching silicon how sketch performs on apple's new hardware see if i can literally just go in here copy this yes i can save that and get out of this okay cool so we have the text in now why don't i add just like a general p8 property and all this and then on the actual h3 class i'll go font semi-bold and then text excel actually a little bit more 2xl let's also add a font display to this parent class just to make everything that beautiful [Music] font and why don't we go tracking tight and then leading snug we can go even tighter than snug yeah let's go tight you know what let's go xl yeah there you go it's a lot better this is actually even bolder so we're gonna go bold that looks quite close the font itself looks to be basically the same color so we are good okay awesome i wish this could be just a little bit bigger i think it would look better if it was bigger rather than smaller so why don't we make this just a little bit bigger let's go 2xl it's gonna be a little bit bigger than theirs but that's fine you know what i totally lied we're gonna stick with xl [Laughter] this is what uh being a designer is folks we're also going to this is why i'm not a designer rather because i don't like going back and forth all right so something interesting happened there when we added a rounded md class we see the parent element is rounding but the child element is not because i added a rounded md on the outside i didn't add a rounded md on the inside so to save this or rather to solve this issue i'm going to do a couple things one i'm going to go overflow hidden the only issue with overflow hidden on that is it hides the shadow that we have because 95 of that shadow is like overflow let me see if i can actually take this out do this now it looks like we're still hiding that shadow so never mind we're not actually going to hide that the way that we're going to do uh to solve that issue isn't to using overflow properties we're going to solve it another way so if we go back here you'll see that cutoff is still visible but our shadow is also visible which is good we're going to go to the image and we're going to make this image rounded md but you're going to notice it's going to screw up this side so we're only going to do rounded lmd that should work yeah there you go looks like there's a little bit of a gap just because the divs are both different sizes but oh actually hold on i don't need to put overflow hidden on that parent i could just go overflow hidden down here nope never mind rounded lmd let's do that and then let's do let's actually take this off okay cool so i think that actually works i added a rounded lmd on the parent element here so you see there's still a little bit of a gap and i don't believe they have that gap present yeah they don't but i mean for all intents and purposes virtually indistinguishable so we're going to go with that i'm going to now do the same thing over here on the right hand side so i'm gonna go rounded r uh md and that'll round it such that it is basically indistinguishable which is good it's basically what we wanted to go for let me see if i can add even more of a shadow here in all honesty shadow looks a little too extreme let me stick with uh when we go do md rather let's try lg yeah you know what i think lg is the most similar okay great that was about 20 minutes of me mumbling but looks like we got something that looked looks pretty decent in all honesty so what i'm going to do next is do these three little buttons a lot of people think you need to like include images for this type of stuff but you can actually just make this entirely in html and css so immediately underneath this div i'm going to make another div i'm going to make the width really small let's do like 16. hell maybe let's just start with 32. let's do bg gray what is this like 100 maybe we'll go height 8 for now and i'm just going to mx auto this so this gets pushed all the way to the middle okay great so that's us a little bit too big of course there's a substantially smaller so why don't i go with 16 we'll add five units of margin top here pump that down yeah that looks actually basically perfect and then instead of height eight let's go like height five i'll probably be more similar with what they have yeah let's do height six and then with 14. there you go that looks just about right our margin is a little too big so we'll go four i'm just going to round and fold this so that's going to turn this into a pill shape just like them perfect and now oh where did i put my vs code now i'm going to flex this item center and then justify between and i'm going to create these very small little circles to me it looks like these circles are like i don't know half the height probably so why don't i just go uh h3 with three bg gray 300 rounded full let's see what that looks like yeah a little too big so we're actually gonna go with two h2 perfect that looks fan freaking tastic to me and this isn't actually justified between allied it's justified around yeah because uh there's a little bit of space on the outside here was justified between it would push them all to the ends i suppose you could use justify between if you add a little bit of extra padding here to this little pill element but we're gonna use justify around see how that goes now that i have one all i need to do is copy this three times so we know those thres and we have this and it does look like there's actually a little bit of padding so i'm gonna go px1 let's push this in a bit nice and then this bg gray 300 i'm just going to change to like no 400 and then i'm gonna make the first one three hundred so it's a little bit lighter ah actually never mind they do it the other way and they go darker on the one that's selected substantially darker there you go i could like take a screenshot of that that looks probably like 95 of the way there super close and i'm very happy with that all right awesome next up we have this social proof div trusted by some of the world's best product teams we have a bunch of these super sexy logos and it looks like when we hover over them we got that all text it's really nice i really like this section in order to get this done all i have to do is add probably about 32 units maybe 28 units of margin top then have text that is uppercase looks like that's probably text md uppercase with like a font text gray 500 or so and then flex align these and then after i do that these two up here after like i've done both of these i can work on mobile optimizing these so trusted by some of the world's best product teams let's do it i'm gonna go mt 24 for now i'm gonna go h3 and then i'm just going to copy and paste this text in you'll notice it's already uppercase but good practice is just to go uppercase anyway let's go to text gray 600 and then we'll go text medium see how ours looks oh ours is actually going to be shimmyed all the way over to the left-hand side so why don't we go mx auto and why don't we also make this max with 6xl i'll bring that in a bit oh never mind that didn't actually work uh text center then yeah because we did an mx out of the parent container there you go this looks a little bolder too so it's probably like semi-bold or something let's go font bold for now and then we'll do semi-bold after yeah that's semi-bold that is most definitely semi-bold and we're going to go tracking tight on this bad boy nice see that's like 90 of the way there yeah it's a little bit different their font is just a bit more stretched out than ours but there's little we can do about that unfortunately so let's just roll with that and then they have this little font this little logo section so what i'm going to do here just because i'm finding it kind of hard to see i'm just going to add another div underneath with an empty of 32 and i'm just going to say like placeholder diff basically and we're always going to work on top of this that way we always have just a little bit extra space down here so that you know i can scroll up to about here and i can see you know the entire package i can see the next thing that i'm working on but anyway it looks like this uh this other div down here is flex aligned i would have to guess and let's see how it acts when we make it smaller so they stretch out this is classic justify between and then there's a certain break point yeah and then it flex wraps okay that's really easy to do now the question is how are we going to get these images actually these aren't even images i'm trying to like click and drag are these svgs yes they are svg every single one of these is an svg that is really cool uh okay well i'm just going to cheat and be kind of a douchebag here i'm not going to remake all this from scratch i'm just going to copy their home logos div which is where they have all their logos and then i'm just going to change all their classes because i don't want to you know i'm not i'm using their classes or rather i'm not using their classes for a reason right so we're just going to make them all smaller you can see that now they're arranged just like up and down we can mimic the effect that we're going for just by going flex spacex probably eight i would guess let's see yeah there's a substantially bigger so let's not even use spacex let's go justify between for now yeah that's actually super close uh and then why don't we actually this looks a little bit smaller you know what they're probably justified around yeah there you go part of me thinks that sketch used tailwind for this because uh the spacing is so similar on so many of these elements i'm going to bump this down probably eight even more let's do 10. okay let's do 12. no let's do 14. yeah there you go it's really similar and then that actually looks good to me why don't we see what this does when we make it smaller so we go smaller smaller smaller smaller smaller all right so they end up getting way too close together and the reason is because i don't believe we applied a wrap property to this so we go wrap when they get too small what we should see happen is they start folding over and that's good that's exactly what we want because that's exactly what these guys do the only issue is ours when they fold over they do not have any spacing in between them so we can create a break point for them to fold over at or not a break point but a width at which they fold over just by adding a little bit of a spacex and let's actually make that even even bigger let's do spacex 12 and then let's only do that on uh really small displays yeah that looks decent to me why don't we just lock the same break point here see what ours does relative to theirs so theirs is already going that's because they have padding we do not have padding so if we just add some padding to this lg px2 and then what was the other pattern we added everything else should really standardize this uh looks like they do px5 right mdpx14 so we'll do px2 px14 and then px5 that should work yeah it looks pretty good i don't think they have that weird kind of like jump feature like we do theirs just gets smaller and smaller and smaller so i'm just going to take out this md px14 and just bump this up let me see if i need to actually there's also a little bit of a space vertically now that i'm looking at it in all honesty so what we could do to solve this is just go to every svg's class and then add a little bit of a py i believe oh nope never mind my yes that's more like it let's do an my4 and this way we can also remove some of that spacing so we'll turn the mt uh mt14 let's do that down to 8. there you go that's much better and let's just add a little bit more padding to this let's do padding 10. because to me that looks a lot closer to what they have yeah cool guys i would say that's probably 90 of the way there which is all i'm scoring for on this one now this video is getting pretty long i'm going to try and breeze through some of the rest of this stuff but first i have to eat lunch so i'll be right back all right just had a fantastic lunch man i learned how to make a donaire for the first time the other day and i am just crushing it one of the best meals we've ever had uh let's pick off where we left off this is them this is us uh scrolling down we've made it all the way to probably like probably half the website now in all honesty because we know about the container layout and different color scheme that they use and stuff like that what i'm going to do at this point is i'm going to mobile optimize these sections that i just did so that upon certain break points they don't like totally kill us and screw everything up i figure that yeah after they reach their small break points you see this little card here it ends up going from a div that is kind of like top to bottom oh sorry side to side to top to bottom there's also a little bit of padding on the outside that we do not have so why don't we add that in we'll start with the padding in order to get that done we need to create another element that is full width across the width of the page and then we need to add a little bit of padding to that and then we also just need to add those break points into the two flex children so let's go to our images um where's that sketch mock-up right over here that is this and let's do two things first i'm going to grab this entire div i'm going to wrap this in another div that's with full and then p i'll just do px5 because that seems to be our standard at this point let's make a little bit smaller and boom you see it this comes in a little bit just like theirs this is a part of what we wanted to do and the next thing we want to do is we want to make this width to fifth only occur on i'm guessing small screens and up i might be mistaken there but let's go with small screens not for now otherwise we'll just go with full so it's going to take up the full width below small screen sizes from small screen sizes and up it's only going to be two-fifths i believe this is what we want so small break point come and come and come in come and come and come in no apparently it's not coming in uh okay well we can just do flex then only on small and above and then just remove what we just did there with the two-fifths yeah let's try that okay that is really big maybe a little too big well it's certainly working on that break point but it's way too big why is that do i have a height full on anything here yeah i do explains that when we take that off yeah okay good so why don't i go height full and i'll only do that on small screens and above good and we'll see there's also something else in the background here it's a little lighter so what is that looks like something with a fixed width something like that could be this shadow div so why don't i take that out see what happens so it is that shadow div okay so for whatever reason this is not stretching the full width so i'm gonna top zero bottom zero see if that works left zero and then height full interesting interesting okay this appears to be taking the size of its uh of of rather the height of what it is here not here if that makes sense and i believe that there's also a fixed height property somewhere there you go fixed height 44. so if i take that out that should eliminate the issue yes it eliminates the issue okay great it's one of the downsides of using a fixed height properties guys one of the reasons i would encourage you guys to be careful with that i think we just remove height full from this entirely will look a lot better yeah there you go okay now we're going to make it smaller smaller smaller smaller and let's see if we get the intended behavior yeah we do awesome okay great that looks good to me how's everything else underneath good i think from a spacing perspective things get a little closer together when they uh sorry so this is a little bit further away on small screens there's a little bit more like vertical space and then it looks like this gets a little bit closer together unfortunately i don't think we can mimic the exact breakpoint that they're using because it looks like they're using like an extra small break point yeah so i don't think we have an extra small break point on the tailwind no we don't this is with 60 and this is like right about what here yeah right about here so what like 500 whereas we break at like 600. so ours is gonna look a little bit different we'll also notice that it's a little rounded on the left hand side and that's because we didn't take out the rounded lmd so why don't we only add that to small and above there you go problem solved so yeah that's a slight difference right there let's fix the height of this though why don't we add uh mt8 and then small screens let's do mt0 that'll pump this down a bit if we go back here let's actually do more let's do mt16 uh can we do even more 32 and then medium empty 0. looks like we're combining mt's actually we should never be doing that took a little bit smaller smaller and let's see how theirs looks they have a relatively constant height yeah that looks fine and then oh never mind it jumps way up so we should not be doing that why don't we go mt12 but why does it go to mt32 right after so on big screens it's md12 that makes sense smaller smaller smaller underneath that it turns to mt-32 okay so why don't we do mt-24 instead that would look more reasonable you know what let's just do this on lg instead that would simplify my life quite a bit there you go okay good so we're done with that aspect of mobile responses mobile optimization why don't we move on to building out these beautiful grid systems uh i love the way that they built these looks to me when i first look at this that we have a three column grid one two three sorry one two three the there are two grids that are repeated there's one up here and there's one down here the top grid is literally this spanning one third then this spanning the other two thirds and then the bottom grid is just these one two three little explainer sections so we can actually make that incredibly quickly and i'll show you how i'm gonna scroll all the way down to the bottom here we're going to do this above our placeholder div our placeholder div i don't know if you guys can see is all the way down here in the corner looks like spacing wise is probably about i don't know 24. so why don't we go mt24 we'll do a bg yellow 200 grid grid calls 3 we'll do height 64 for now just so we can actually see this and then we'll go max width 6xl mx auto to push this into the middle great that looks good to me and from a height perspective it's also very similar so we are also going to uh make two subdivs here one that is excuse me grid uh no call span one that's gonna be the first one let's just do bg pink 200 and then the other one is just going to be call span 2 and we'll just do bg indico 200 so left 2 kind of 1 3 split here which is basically the exact same width as theirs and let's get working on the left so first left we have what looks to me like an h2 work fast create beautifully i'm just going to copy and paste that in next up we have your best work happens when tools and abcd are available then we have a button that's learn more and if you guys pay close attention you'll notice that this learn more button is the exact same as the button that we made up here so i can actually go to my try for free button here the one that's in kind of the middle of the page so not this one that'll be this one here and i can just copy that in so why don't we go down here paste that and there may be a difference actually in terms of width this might span the entire width we'll see i think i might have to go inline block on this bad boy yeah there you go uh and let's get to styling this to me we scroll down here this to me like looks like it's probably like two-thirds the size of this uh there's also a little design thing on top actually i totally forgot about that so why don't we go like h4 i hate using h4s but i just can't think of anything else to use here uh so we'll start with uppercase you know what we're actually just going to take the same text that we used for here because that looks the exact same so why don't we go trusted by some of the world's best product teams and then font semi bold track and type text center blah blah we're just going to copy that and then we're going to paste that here the only difference is i don't think this needs to be in the center so we're just going to take that out uh let's see design design yeah it looks good to me next up we're going to add just a little bit of padding here mt2 then we're going to go text uh for xl font bold and let's do text gray 800. another thing we should do to all of these is add font display that's something that i've previously forgot so if i go back up here and add font display you'll notice that the fonts are actually going to change so this is going to change and this is going to change yeah that looks a lot better i was wondering why that looked a little off if we scroll back down we'll see that text uh where are we right over here that text 4xl is actually decently close right it's probably like 80 of the way there i think if i make it a little bit bigger it might be a little too big yeah it is a little too big so why don't we stick with 4xl and then ours is a little bit smaller but that's okay why don't we just do an empty four on this to bump down the next part of the text and then let's just go text lg text gray 700 might even be 600 actually and you know what i think we go xl there you go we'll go leading relaxed and then let's actually go 600 here and you'll notice that this wraps a little bit earlier than we do and uh that's probably because we haven't added any padding to the right of this so why don't i just go on lg and go pr8 yeah there you go that looks really similar now for this learn more all we have to do is do like an mt8 that should bump it down quite a bit say that's reasonable quite reasonable um yeah it's pretty good and then instead of learn or rather try for free we'll just go learn more and i think they had a capital on that didn't i no they didn't i lied awesome now we can start removing all these nasty colors as well as the fixed height it's one thing that i have to remember to do more often and when we take all that out including the yellow this is what we're left with work fast great beautifully work fast create beautifully so quite close quite close next up we have an image we're going to apply that image here so i'm gonna go image source uh actually no this is a video that's not an image at all why don't we do this uh why don't i just copy the source and i have to replace the image with video here yeah okay that's good i did not even realize that that was not a an image okay that's good and then what else are we going to do we are going to add i think autoplay loop probably and then i'm going to add a class to this image let's border let's do border grade 200 let's do rounded md and then that look to me looks like there's a shadow xl on that image easy yeah you see that is perfect additionally by adding that i think some of the transparency in the background layers were removed so it just looks a lot more similar to what we were going for whatever reason ours isn't playing i don't really it's been so long so i've used a video tag so muted loop plays in line so if i do that plays in line that should probably work i i think it probably takes a little bit of time because we're on a local host but uh i uh you know we'll get back to that oh yeah there we go i just need to reload the page and yeah perfect now we have that video playing fantastic it's honestly a very high quality video like the more and more i zoom in i would expect to be losing a fair amount of quality but no i wonder if that has the implications for the load speed regardless i'm just gonna turn this spacing just like one pixel down or one uh one unit of margin top down just because i think that's a little too much and aside from that yeah looks pretty great let's do the other three down here bring your ideas to life build designs that scale and uh customize your workflow the way that this is built is basically the exact same as what we had up here so we could do it in two ways one we could do this in the same container or two we could just do this in another grid i would feel more comfortable just doing this in another grid that way we can customize the breakpoints and stuff like that a little bit better and i don't know i just prefer modularizing everything so i'm going to go down here create another div we'll go class grid max with 6xl we'll do grid calls 3 mx auto mt what's this mt20 probably let's do mt20 and font display and then i'm just going to create three sub divs and we don't actually even need a class for this i think we can just like wrap these with an h3 a p tag and an image tag looks like yeah that looks good to me i'm just going to copy the text from the first over and i'm going to find this image copy this bring this here and then let me just format this so it looks a little better okay and then we have yeah we have this good now i'm going to add what's that text gray 800 still okay yeah that is text grade now it's exactly what we wanted why don't we go text excel on these i think that would be fair yeah then we'll go font semi-bold and then looks like they have very little spacing here or margin top on this text but i think it would actually look better if we add a little bit more so i'm going to do that and then just see if there are any other differences looks like just the color is the only thing so let's go text gray 500 to this which is actually really close which is fantastic and honestly it looks like they have tracking tight setup the image itself is a little bit smaller i think we could probably do h20 so when we h20 with 20 no it's h16 let's do that add that perfect and there's a little bit of spacing over here so let's do mt3 that should work there's a downside for some reason this image is pushed a little bit over to the right whereas their image is not i'm curious as to why i'm gonna quickly hop into the uh looks like it's because they position relative this i don't really see why that would work but uh yeah let me add relative and see if that changes anything whatsoever no i didn't think so there needs to be something for it to be relative to so for whatever reason they they have that set up why don't i just do this on large screens because i assume i'm going to want to change things why don't i go negative ml1 yeah there you go that aligns it perfectly to the side great now that we have this we're just going to copy and paste this three times so perfect uh there's a little bit of a gap in between actually that we do not have so why don't we go to our div and we'll just go gap x let me just go gap in general uh six that'll add a little bit of a gap between these space these out a little more make them a little sexier yeah that's pretty close we need to go even more let's do gap eight and now i'm just going to copy and paste the rest of this text so build designs that scale is the next one customize your workflows the one after that uh choose from hundreds of plugins sure lay the foundations your products design system okay space these out and now i'm just gonna open these new tabs with these images so this one is here and then this one is here okay that should work yes okay awesome that is ours that's theirs it's looking real good to me last thing we got to do is just add a link that says browse extensions that goes to the side so that is on the third grid element underneath the p tag let's do uh text carrot 600 i believe font semibold and we'll just go browse extensions and i think they're just using an arrow if i had to guess i would say they're just using an arrow i might be mistaken let's see what they're using please be an arrow um oh no they're actually using an icon image they're legitimately using an image for that interesting i would not recommend that so we are going to just uh do this ourselves and go flex spacex to justify center let's do that justify center sorry justify uh hell i'm not even include that i'm an item center we're gonna go down here div that and then i'm gonna go hero cons we're gonna go arrow this is a pretty long arrow so let's use a shorter one here space that out and then the class is going to be like width 3 height 3. if we go back here we should have a tiny little arrow uh we should just change that to text carrot 600 i believe yes what's their error look like man that's a sexy arrow okay we're going to make our arrow a little bit bigger to try and compete all right i'm happy with our arrow also i lied it's text care at 500. go back down and then we're gonna space that out by two awesome and then last thing is we're gonna add four units of top padding cool that looks good to me yeah again we're very similar very similar if we just go back and forth back and forth uh yeah we're probably like 80 90 of the way there a couple differences i mean the shadow is a little bit uh softer than their shadow spacing wise looks pretty close uh they have less spacing than we do but i honestly think that ours looks better i think they should have a little bit more spacing to to disambiguate between the header text and the uh paragraph text looks like they might have a shadow on these no that's actually part of the image so yeah aside from that uh you know it looks pretty good to me last thing is they might have a little shadow on this that we do not have now we have a little bit of shadow that's fine okay guys awesome so now we've done that we're going to do basically what looks like the same thing just reversed so whereas this text is on the left hand side and the images on the right hand side looks to me like they just have the image on the left hand side now and the text on the right hand side also looks like the background color of this is actually darker up here than down here so this is a good opportunity for me to show you guys how the background gradient uh works on tailwind i would assume this is probably equivalent like bg gray 50 and this is probably bg white so all we're going to do now is i mean if you're using a framework like me you could just create a component and then just copy and you know create a component in uh components up here oops that was a bad idea let me remove layouts again so my entire project doesn't crash i keep forgetting not take this out no do not do that here yeah there you go sorry about that uh you could create like a components folder and just make this kind of grid system a component and then you know add a couple of fact a couple of little arguments in that can like move these things around we're not going to do that just because i'm doing this in html i'm assuming a few people are probably going to follow along in just pure html css so i'm just going to copy and paste actually both of these divs right here immediately underneath and actually there's one thing i'm going to do before then i'm going to create a wrapper element with the background color property so we're going to go bg gradient uh let's do two bottom let's go from gray 50 to white let's do that let's paste everything else inside and then let's see what this looks like awesome yeah that actually looks reasonably close difference of course being that if we go to our bg gradients we should add some padding to this so i'm going to add i don't know 16 units of padding no that's too much padding let's do eight units of padding let me see if i still have that height property anywhere because that usually ends up screwing me no i think i think that's good but we might that's pushing pretty high oh you know what i know why no i don't think we have heights here yeah i think the heights are generally good uh nope nope nope nope nope nope no heights okay that's good let's get in ptsd because last time i hided uh okay so interesting then we have this kind of weird thing happening where if i scroll down a bit sorry scroll up a bit and i add extra padding to this element it actually pushes it around so let me try and figure out why that is so i am right over here right now if i remove all this margin and all this padding this should just come real close okay good so i'm going to empty 24. it's going to bump me down good now i'm going to py8 cool i'm going to py 16 now let's do even more let's do 24. yeah i think that's more similar to what they have perfect again they're using much warmer graze than we are and that's just a fact of life nothing we can do to change that aside from of course you know get warmer grays but i'm not invested enough to spend the time to do so i would say at this point all we have to do is switch the order of these elements so i'm going to take out the div that's on the left hand side here and i'm going to push it to the right hand side there we go and then i'm going to i added a little bit of a padding to the right of this there's no need for me to do that what i'm going to do instead is i'm going to go to our grid and just add like a gap gap x8 and that looks reasonable and then i'm going to change this video to an image remove this stuff and then i think i took a screenshot earlier today rotating mockup yeah rotating mockup so i'm just going to change the source to that rotating mock-up image which is at uh slash asset slash sketch rotating mockup.png if i save that i should now have that image and that happens every now and then uh good yeah i totally do have the image only downside being because we copied it over uh we have like the border classes and the shadow classes and stuff like that we don't actually need those for these so i'm going to remove the border i'm going to move the round out i'm also going to remove the shadow that should not blend into the background yep totally does and aside from that i think we could probably space this out a little bit more so why don't we go to the gap x and just turn that into a tent yeah that looks better okay now i'm just going to do the same thing i did earlier keeping everybody in sync and uh copy and paste the text here looks good to me bring ideas and feedback together and move effortlessly to development let's do that and then i just have to do these images as well so let me just open this copy this uh where is this here so i'm gonna copy and paste that over and i'm gonna copy and paste oh oh boy i hate doing that um here let me do this and then i'm going to add a source to this and the source is going to be this last image hopefully let's see if that works where are we all right where are we at now yep good that looks uh that looks really good to me the only difference being they don't have that browse extensions thing down here uh on this second grid so i'm just going to get rid of this entire div all that div that we put all our hard work and effort into awesome that looks really similar cool all right now i'm going to see what kind of mobile optimization we need for this i probably should have done this before now that i think of it because uh by doing this before when i copied and pasted it over i wouldn't have had to do it twice but whatever you live and learn looks like first and foremost we should probably add a little bit of padding so actually first and foremost we have a large large break point here where the grid that is three columns turns into one column so unfortunately i have to do that twice but it says grid calls three we should actually go grid calls one and then on large displays we'll go grade calls three and call span one is actually fine for that so now ours should immediately yeah perfect in addition to that we should mx auto this uh and then a large we can just go mx none no mx zero i think i'm extra it'll pump that uh hopefully pump that to the middle or maybe not let me think real quick yeah these should become these should come substantially uh closer to the middle why would that not happen well to debug why don't we turn the background red and see where we're at so here that's the width if we go smaller that is the width so uh the width is spanning the full kind of width of the container i could do a couple of things i guess i could turn the width to half but it would make more sense for me to wrap this in another div that's mx auto let me see if that works we're trying to get this work fast crate beautifully to pop into the middle um i suppose in all honesty i didn't even need to do this i could have just copied and pasted this over here so i'm just going to remove this div class thing remove that and that should work too yep totally does last thing i want to do here is i don't have any gap spacing on this i should have added a little bit of spacing why don't i just go gap eight that'll bump this down a bit make it a little closer to what theirs is and the last thing i'm gonna do is i'm gonna go px lg px2 otherwise i'll go px5 all right makes everything a little bit smaller makes the spacing and stuff like that more similar to theirs let me scroll down a little bit more see what else is going on here so it looks like additionally they have that padding applied to the bottom grid because we have two grids we have that grid on the top that's kind of one third two thirds and we have this bottom grid so i'm going to do the same thing i'm gonna go lg px2 and then px5 so that should bring these in a bit it's good and let's see what kind of break points these go for looks like these break really oh sorry that's mine i was wondering why that wasn't breaking earlier looks like there's uh just breaks at the medium break point and then they're all just at the side so we can do that really easily this is grid calls three for medium upwards otherwise this grid calls one and i believe that's all we would need to do yeah that is all we would need to do oh the width is actually down to three quarters yeah so we could do that too if we go to each of these divs how many divs do we actually have here one two three four five six okay good that's only we wanted we could go uh with three quarters and then mid we go with full so that's actually too small now is it let me standardize these and see where we're at let's go smaller actually yeah no they probably just have a max width element max with uh designator so let me go max with xl that might work better whoa that certainly does not work better okay let me erase some of this stuff i feel like my multiple cursor selectors uh got me in kind of a pickle there let's go back start this bad boy from scratch uh where were we yeah it looks like we add a little bit of extra spacing there onto this work fast crate beautifully here so let me see why what is that with three quarters probably the wood three quarters if i take that out let's see what happens yes that totally was the width three quarters so why don't i apply this let me see actually if i don't apply it it looks like this which is not what we want we want it to be a little bit smaller so why don't we go four-fifths and then lg width full with full with four-fifths four-fifths four-fifths and then why don't i only do that on medium and then it should still just be with full everywhere else uh hell we could probably do that all the way up to small in all honesty small small small small small small and then it breaks and then we're good only downside being we haven't done that down here so we have kind of that weird messed up look but that's perfectly fine okay awesome i i like this it's not perfect it's not exactly what they have but i think it's a good compromise so we need to do something quite similar here to the second div unfortunately so i'm just going to copy the various classes we've applied here because we're going to need to apply that again and let's scroll all the way all the way all the way down to where we have that second div here the way that this works is again it turns into grid calls one sorry it turns into grid calls three and large displays so if i make it smaller you'll see that it folds over which is exactly what we wanted additionally there's a bit of padding so we can do our px lg px2 otherwise px5 and that's just going to go over the entire elements puts things kind of in the middle a little bit and then on this m sorry call one here which is here we can just paste in the previous classes that we had and that should now push this into the middle a little bit yeah that's good and then gap x10 we're just going to move to gap10 okay awesome so now it should go full width good otherwise it's kind of the middle just like theirs awesome let's do the last little piece of mobile optimization we need to do add that padding on large and then small we'll do px5 and then we'll do grid calls one and only go to grid calls 3 from i believe medium and up let's see medium medium yes broken awesome cool that looks great to me yeah very responsive there's a lot of stuff that's uh that's moving around as we move the page and that's essentially what we want cool last thing i got to do is just create this element like i said before i'm not going to add all these wonderful beautiful svgs you guys can add that on your own time if you'd like actually looks like they have a skip navigation button i'm not sure exactly where that is or why that pops up but i'm not going to rebuild that either i'm only going to kind of make this sexy little gradient happen and i think that's just our carrot 500 to our carrots 600 maybe even carrot 700 so in order to do that i'm going to go down here go div class let's do bg gradient from 2 rather to b let's do from bg i think that's carrot 500 probably from carat 500 2 carat let's do 2 carat 700 let's do h64 and let's do this yeah a little too dark we'll do 2 carat 600 now we're going to mx auto this turn the max width to 6xl now it's going to pump that in the middle yeah that's perfect now we're going to rounded to xl and then shadow excel it's getting pretty similar they might even be more rounded than us can we go 3xl is that a thing yes yes we can and then it looks like they have in all honesty it doesn't look like this is center aligned i think they screwed something up here let me see if i refresh the page that fixes it no i think they actually just have a little bit of extra spacing that's pushing this to the right oh well you have been investigated uh get started with sketch today we're just going to go h2 i'm doing my best to keep these classes relatively semantic here we're going to text white text 3xl this is font display too and then we're going to go tracking type and then we're just going to copy and paste this put this here and let's go mx auto that should bump that in the middle oh i did not bump that in the middle oh sorry text center not mx auto always mix those two up and then we're going to go font a bold we're also going to turn this into a flex call container go justify center and item center and that's just going to pump everything by the middle we're going to make this a little bit bigger 4xl and then we're going to do our h4 underneath it which is turn your ids into incredible products with 30 day trial so go over here uh i believe this is like text white opacity 50 or something let's do opacity 70. yeah so that would be text excel too maybe a little bit bigger actually let's do text 2xl let's add a quick mt4 oh never mind that's way too low d2 and let's see if we can actually move this to 5xl yeah there's no real good middle ground here between ours and theirs the only thing i can tell you for sure is that there is a little bit tighter but aside from that that's yeah that's basically it last thing i'm going to do is i'm going to make this button so let me close this h4 go down here actually let's do ahref just for uh continuity i'm gonna go bg white rounded sm shadow sm let's do px4 py actually that's cpx5 2 we'll do goes up again so we'll do hover let's do transform first then hover negative translate y px i believe and then we'll also hover change the background to gray i think it just goes gray does it go orange you know what i think just opacity 80 actually that's probably enough and try for free and then we'll just go a let's see ours well ours looks ugly [Laughter] let's go text carrot 600 and font semi-bold and then we'll go py3 and then space this out by six so how are we looking guys i'd say it's decently similar a couple of differences of course with the font and stuff but honestly aside from that i'm oh almost happy i was going to say with what we have last thing i do is add a transition put the duration of 200 yeah that looks a lot better it's not perfect by any means but uh again we're like 89 of the way there okay awesome last thing i'm gonna do is these colors actually i think they could be even lighter yeah there you go that's perfect and then i'm just gonna add a little bit more padding to this so let's go py actually let's just do p in general let's do like eight that should bump this down a bit make this a bit bigger no oh it's because i got a max h property set here so let's actually do py 16. double that space good and then i have a feeling we're going to need px8 later so i'm just going to put that in for now that looks good to me guys awesome and you'll also notice that the background is getting lighter as we go down just like the just like sketches landing page does and then when we make it all the way down here underneath there's going to be a little cut off where the bg goes back to that nice color so let's work on the footer and then let's finish all the stuff up so let me sort that out good we're going to create a footer now the way that this footer is set up is it's a full width footer so all the way from one side to the end and then inside of that there's nested uh max with 6xl and it's like kind of two components there's a component over here then that has a border on the bottom and then there's another component with like a grid layout that looks like one two three four five six at the very bottom there's a little copyright we're not going to do that just because i don't want to get any legal trouble that's essentially it so i'm going to go div class with fall bg gray 50 first i believe 50 is probably enough and let's just go h64 for now just so i can see what that might look like yeah that's perfectly fine we're also going to go mt 16. bump this down a bit let's do mt20 actually should give us some extra room good and then let's get working on our newsletter we're gonna have another div inside it's max with 6xl border b border gray 200. and then it's going to be uh flex item center justify center now justify center not justify center we're just gonna stretch it all the way across div has no ending tag why is that oh did i get rid of a another tag no i just didn't write it over here there you go cool we should also mx on this that'll push that in the middle good got that border bottom we got nothing there so why don't we start creating our divs first div is going to be width one half and it's going to have a h4 with that and then underneath there's just going to be a paragraph tag with that cool let's go to this and add like py4 or something let's add py8 who am i kidding i love my padding then let's just copy this div over do the next section the next section is kind of interesting oh let me just font bold this first font semi bold rather uh the next section is kind of interesting actually we have uh what looks like an input just smacked up against a button so in order to do that all we have to do is just create a parents div just with what looks like a border do they even have a border yeah let's just do that we'll make that uh parent div span the full width of that half container and then we'll have an input that class is going to be like py let's do 4 for now px2 actually let's do py 3 px4 background white and then let's do rounded sm you know what actually no we should put this on this that would be better a lot more apt uh and then let's just put a placeholder here that says your email address and then we'll have just an ahref i suppose with the same padding and it'll say subscribe and that should be good decently good i mean for now okay we're back to ours let me just give this thing a quick refresh uh scroll down scroll down where are we okay we got the button that's the subscribe right over here it's not happening because we didn't flex these and we also didn't justify between these so flex justify between let's turn the background of this ahref to carrot uh 600 pop that up and for whatever reason the border i'm always kind of iffy on borders here i think if i were to add a border yeah it looks okay it's not the best board i've ever seen not the worst board i've ever seen for some reason the border uh doesn't go all the way over this oh you know what we could just add a border carrot 600 and that should just make this pop out a little bit more cover that yeah that looks fine to me looks like theirs is actually pushed a little bit more so why don't we explicitly add a width this say four-fifths and why don't we go to here and do with one-fifth hmm no never mind let's not do that for whatever reason this looks like it goes a little bit wider than half actually now that i'm looking at it so instead of half why don't we do uh it's not thirds could it be fifths let's see one two three four wait one two three four five yeah we could try that let's do two fifths and let's do three fifths you know i almost wonder if it would be better to just grid this might solve a couple of issues because now that i'm looking at their website if we go rather below a certain break point it looks like the width of this changes hold on let me go back down so it looks like it has a certain like max with that break point here as we go up it gets kind of wider and wider and wider oh boy that's really annoying and then it gets just a little bit wider than uh than half yes why don't i do that let me just oops there we go yeah let me go back down to subscribe to our newsletter monthly digest latest sketch news and resources first of all this looks to be a little bit darker than the background let's do 600 and then let's also do like tracking tight pull that in a little bit it's pretty good it's pretty good one thing that i uh really like tailwind for is the number of grid utilities rather like with utilities that they have like we have 112 212 312 all the way up to i believe like 10 12. so i could do i could do uh sevenths i think yeah seven twelfths that might work let's do seven twelfths and here let's do five twelfths let's see if that's more accurate yeah that actually looks substantially more accurate it's a little bit off and it looks like this is a little not rounded enough so if we round this push that to medium then that should be good then we have that issue again where uh uh the borders don't kind of wrap entirely but if you go overflow hidden problem solve for that and that actually gets rid of some of the uh the one of the other issues we had here so that's really nice last thing is it looks like this subscribe button lights up a little bit when we hover over it so we go to the subscribe button why don't we go hover bg carat 500 then hover shadow medium granted because we're overflow hiding we're probably not going to get that shadow yeah unfortunately we're not going to so why don't i actually take this overflow hidden off let's see how that changes and then because we have this border around it we also have to change the border value sorry not bg i'm in border we have to change the border color as well any time that you have a border in addition to just the background element you have to make sure to change that on hover now let's add a little bit of a duration on this maybe even more theirs looks like it takes another little bit to come into effect yeah that looks pretty realistic and then i wonder if we could even shadow large that button because for whatever reason that button looks like the uh shadows a little bit more yeah there we go that's more like it okay great and then why don't we go border sorry rounded uh r medium let's see if we can get something similar hell maybe even small is fine yeah no let's do medium okay perfect we have that hover button uh hover effect now the only thing that we have to change here is we have to make this input field the full width of this little container so why don't we go to this input field and then make this with full it's gonna push it all the way through and i don't really like how it how it works how they have their setup but that's fine granted we could always just go focus outline none and then instead do focus like ring two or something like that and just use tailwind's built-in ring utilities the only issue with that is then we would have to round this as well there you go and then instead of rounded md we would probably do rounded lmd that we wouldn't get that yeah but then it kind of pumps out a bit so i don't know i'm not really that much of a fan in all honesty so let me just get rid of those yeah there you go that looks fine okay let's see what else we got to do here we have that line that's good uh now all we really have to do left is create a one two three four five six column grid layout so let's scroll down excuse me to where we have that bg gray 50 that's right over here and now let's create a grid with uh grid call six it's gonna be really interesting dealing with the mobile responsiveness of this and for now that's good oh let's just do a gap they probably have a gap probably quite a big gap in all honesty let's do gap x16 and let's just see how that goes and for now why don't i just create a bunch of uls i think i'll start with that yeah let's just create six uls and then in every single one why don't i just do example element and let's see how that looks okay oops so obviously a little bit spread out so we should do mx auto max with 6xl let's do our paddings as well should push that in good um and i'm realizing now we also i don't think i don't think we did the padding on this element too so while i'm at it why don't i just make it really easy on myself just copy that over to here actually and now everything here should be pushed in the same amount good and then let me see if i did that up here did i add padding no i didn't add padding because i actually need to wrap this in another div with these features and that now should push that in a little bit cool to verify this i'm just going to squeeze in yep great we have that little bit of padding that's nice and then the padding goes to five on smaller displays which is nice uh and you know i should probably also change some of that text size because that text size is a little too big so why don't we do lg and otherwise we'll do text 3xl and then lg and then otherwise we'll just do text excel and that should be good all right let's give this a quick try nice yeah that looks uh that looks fine to me not perfect i mean i think it just i think it jumps down a little too fast so why don't we do md text for xl just so we have like a kind of an intermediary there cs3 that's four sorry that's five that's four and that's three there you go looks good to me okay so yeah now that we're dealing with this bottom section what we would have to do is add a little bit of empty to the uh to this element looks like that's probably gonna be a seven or eight so i'm just gonna go seven yeah i think seven is right and then all of these uh let's just wrap this in an li and then just make all of these like the parent element basically so the the parent not the parent rather the uh kind of the header element so in order to do that we're just gonna go font semi bold yeah that looks good and i think some tracking might be at play here no it's not okay good awesome now i'm just going to copy over all of these titles so product apps resources company follow us and more so products oops apps resources company follow us and more see how that looks good that looks decently similar i would say the padding might actually rather the gap on the grid might be a little too much so let's maybe pump that down to 14. see if that works maybe even 12 actually yeah there you go i'd say that's a little better awesome let's remove the height from this element now because we no longer need it now that'll just be however tall it is fantastic and now let's just check take a look at how these things are built it looks like they're just links they probably start at like a text gray 500 and when you mouse over it goes like texture 800 or so looks like there are a few cool like little svgs that we have to take care of this svg is going to be cool because i don't think there's like a rotate uh what would this be like negative 45 i'm not 100 sure so we might have to do some funky stuff with that this looks like it's going to be fun i'm guessing these are all just svgs that they have so if they are i'll just copy those svgs and we have some more like heroicons placed here there so just to make sure that i get everything right from the get-go let's do a list item um let's do this so we're going to make another list item and inside of that list item we're going to have an aahref we're just going to go to that little number sign for now and the class is just going to be text gray 500 and then hover it'll be text gray 800 we'll have a transition and then we'll have a duration 200 on that and that should be good let's just do overview for now overview and then hey let me make that a little cleaner and let's see what that looks like that's pretty good i would say the first element probably has a little bit of extra margin top so i'm gonna go margin top uh like one here bump that down just a little bit extra maybe even more let's go merge on top about two for whatever reason that's not really adding much space here looks like my cat's having a fit i'm going to uh i'll tell you what i'm going to do actually i'm just going to go to this ul and then add a flex flex call and then space y and we'll just do like four and that way all of these will be spaced out at about four so maybe three actually there you go i think that's actually gonna work great so uh this is actually literally still too light so that's uh tex gray 500 actually has to go to text screen 400 yeah there you go that's much better and awesome now that we have that done we can just start banging off the rest of these i'm going to just copy and paste this a couple times i believe it's four on each one three four one three four yes so it's four for all of them so i'm just going to copy and paste this like four times in in every single one here so we go li good paste that four times let's format this a little better awesome and now i'm just going to start changing these names boy this is going to be fun so what do we have overview for designers for teams and pricings for designers for teams feel free to skip through this section if you'd like pricing then we have mac download mac releases mac beta mac download mac releases mac beta and then what get mirror good and then we have get help extensions events and meetups and blog get help extensions events and meetups and then blog about us careers press labs about us careers press and labs and then twitter facebook instagram dribble it's always been interesting to me how wait a second twitter oops facebook my bad so it's been interesting to me how twitter is now really taking the forefront and uh kind of like the web development community there's an extra b in there right yeah manage a license launch license developer platforms terms and conditions and i think lassen's privacy right oh not just status okay that was fun great we have that little effect thing going on fantastic okay last thing we have to do is let's remove this placeholder div at the bottom because we no longer need that so this is going to go all the way down to the bottom and let's just space this out just a bit more ours actually looks pretty good but i'm just going to space ours out a little more because the padding needs to be a little bigger so this is a god awfully long footer right let's do mt why don't we actually just do py uh 10 on this that way we'll get a little bit of the bottom too yeah there you go that looks much better like i mentioned earlier we're not going to do the sketch bb thing for whatever reason this looks like it's came back so i'm going to go back to that input element and i'm going to make that rounded md yeah there you go awesome and then the last thing i'm going to do now is i'm going to add these little arrows and stuff like that so they're actually quite easy to do you could just go to whatever the section is that you want so in this case mac downloaded let me just command f this mac download i just need to make this class a flex container and i'm just going to do like space x2 and i need the hero con where the arrow is down so i'm going to go arrow down oh they didn't have that we're just going to go arrow down and then right next to this i'm just going to go down class is equal to let's do text screen 400 and if i had to guess i'd probably say w3h3 am i right whoa it looks a little high now it needs to be a little bit bigger so we're going to go w4h4 and then we just need to add item center to this i always forget nice that looks relatively similar ro is a little bit different i probably should use the fat arrow here rather than the super narrow one but that's okay and spacex 2 might be a little too big let's do spacex one yeah that's better okay so that's that now we need to do the same thing just with that diagonal arrow i don't think these guys have diagonal arrows no they don't so let's do uh let's do an arrow narrow right and we're doing that for get mirror so i'm going to go down to get mirror paste in that svg let me go to my li and of course do flex item center space x1 the class for this is going to be w4h4 and then textgray400 let's see what this looks like yeah so it's a little bit to the right i'm going to see if we could do transform rotate negative rotate uh 45 let's see if we can do that can't we oh yeah we can okay perfect nice so now we have uh some something very similar going on there you notice that we don't actually have the mouse over on that svg i wonder if we can get that by putting this wrapping this text in a span putting the svg inside of the a tag and then putting all of the relevant elements on that attack i wonder if we could do that i don't know if we can no no we can't make that svg hover unfortunately so in that case i'm just going to take that out and make it like it was before okay good now if we scroll down where are we here careers so now we're going to do careers careers looks like it's just a circle with the number nine in it in all honesty so i don't think that's an svg or anything in which case we could just make it ourselves let's go class uh let's see the same thing spacex one let's go item center we have the a over here now i'm just gonna make a div i'm going to go w6 h6 bg gray what 400 rounded full and then i'm just going to go hover like vg grey 800 let's do that let's just put the number nine in and while we're at it we'll just we'll add flex to that justify center and item center just to pump that nine in the middle let's see where we are oh that's actually quite similar wow look at that yeah that's actually super similar color colors too i'll add a cursor pointer to that but it looks like i can't combine these so that they both uh hover which is kind of annoying but you know it is what it is still looks pretty good i guess the text would probably be sm there too just make sure we got it right yeah that looks good to me nice i really like that and then we just have the twitter facebook instagram dribble social media svgs yeah i knew they were going to be svgs so for that we could just do the same thing i'm just going to paste that svg in for twitter this svg in for facebook this one for instagram it's nice that they excuse me it's nice that they make this so easy and then this one for dribble and then what i'm gonna do is i'm just going to add the same classes i think this is spacex one item center i'm just going to add these same classes to the four allies that are like the parent parents of this so if i do this i go back now i have them why are they at the oh yeah they should be at the beginning whoops uh so that sucks okay well it just means i gotta cut these and put these after so that svg is going to go first this one's going to be second this one's going to be third let's put that there and then dribble is going to be fourth i'm just going to format that and then you see there's this main footer nav item icon i'm just going to take that out completely go text gray 800 400 and then hover text gray 800 and i think i think they're doing text gray not h not background are they no they're probably doing background actually and we'll go fill current now it'll fill with whatever our uh our colors are let's do that and we'll also remove this text gray 400 because there were two and one we had a cursor pointer while we're here something weird happen with the dribble one looks like the dribble uh one is on another line why is that oh i pasted outside of the li nice going so if i format that this is going to pop over good and then we just have the same arrow for developer platform is get uh mirror so i'm just gonna go get mirror literally just copy this over i'm gonna go developer platform and just replace this entire li and i'm just gonna type developer platform and then manage license just has that little chevron down and that chevron down is going to be the same as if you remember on ours that little chevron down up here oh never mind that doesn't look good weirdly enough i think this is just a little too long yeah it totally is a little too long why would that be spacex one too big could be let me see if i just add tracking tight to this and remove spacex one if that's gonna be enough space yes uh wait yes it is gonna be enough space but i want it to space out a little bit perfect okay yeah that's indistinguishable awesome and uh what was i just talking about oh yeah manage license i want to put that little chevron down so you guys know what that chevron down looks like why don't i just go all the way up to the very top again and you'll see i have that chevron down resources right here i'm gonna copy that svg i'm gonna go all the way back down to where it says manage license and then i'm gonna put that here and then i'm just gonna copy the other styles for putting these oops putting these within the li so let's copy and paste that right here awesome last thing is just to change that color so why don't i go to svg text gray 400 nice oh yeah cursor pointer all right last thing we have to do here is mobile optimize this layout so i scroll all the way down here to theirs and i start pushing this in a little bit you'll see they have pretty ample padding around this element and if we scroll down to hours we have something pretty similar going on although i think our padding is substantially lower yeah it is substantial until you reach that large break point and then it becomes similar so all that's really telling me is we probably don't even need the lg px2 so i'm going to find lg px2 and i'm just going to remove that and we're just going to just get the px5 really so why don't i just do this oops sorry let me put that back yeah let me just do px5 that should should be a lot better for some reason that lg px2 is still applying here so i'm going to go lg px2 delete that there you go now that's a lot further in which is nice yeah it looks a lot smoother that way on top of that it looks like the bottom here needs to wrap a little more because theirs goes from six column layout to a three column layout the second that it gets a little bit smaller and boy is that super annoying we have to uh scroll all the way up every single time that happens so screw that if i go to this grid which i believe is right here that means that on large screens i want it to be grid calls six no excel screens i want it to be grid call six large screens will do good grid calls three on medium screens why don't we do grid calls two actually why don't we do small grid calls too and then otherwise we'll do grid calls 1. that should solve 95 of our problems see theirs goes 3 yeah i figured this goes 2 and so on and so forth so ours goes there ours goes to 3 then ours goes to 2 and then ours now goes to one and i suppose uh the last thing we need to do is just add a gap here because the gap is on uh x but it's not on y so i wonder what would happen if we just make that gap 12. how would that look a little bit big so why don't we do gap x at 12 and gap y6 pump that up yeah there you go that looks a lot better okay cool so that footer is done and now that i'm looking at it we also need to fix this top section here because theirs folds over after what looks like the medium break point and ours does not fold over after the medium break points so why don't we fold ours over after the medium break point uh where are we here okay so this is width 7 to 12. why don't we just put that on medium we'll just put that in full otherwise and that should work now right so we just go go go go go go go go go you know what actually we don't even have to do that we could just go actually no we should do that but the major issue here is we just don't need to flex this so we go medium flex otherwise just going to be block yeah there we go and then i don't think they do this but i'm going to add three units of margin top just to space that a little bit more on smaller screens awesome it's about as small as it gets and then as we go up up up up up up up stretches out even more alrighty i am quite confident to say that uh we did a pretty good job here we rebuilt essentially you just scroll all the way up to the top of the screen so you guys can see where we are we rebuilt what i would say is probably like 80 to 90 percent of all of the elements on this landing page we did it all in html css using tailwind and i will say i mean coming from a design perspective this is incredibly similar it's super similar like uh basically all of this is the same just minus some javascript and minus like a couple of percentage points on like the font sizes and the margins and little apps like this that you know uh little javascript plugins like this that rotate elements and stuff like that oh i guess the last thing actually is we didn't copy over this text let me do that uh what does this open up the design process and this is work fast create beauty let me see i'm just going to go down here and just change that because i want you guys to have this later i'm going to put this up on a github and you guys can use this yourself for like a project starter or something like that but yeah anyway aside like i said from a couple of little changes like that svg that rotating thing this is basically the sketch landing page this is one of the reasons why i love tailwind so much and i wasn't even using it super efficiently we didn't even use any component class or anything like that but you can mock up a landing page in really just a few hours it's a lot easier if somebody has given you a design that's why i always like like doing rebuilds like this when i don't have a designer to give me something just because uh developing and designing at the same time is always more difficult that's not to say that you can't do it though i've done it for a lot of my own personal projects a lot of my own startups i hope this video helped guys if you guys have any questions or anything like that about how to get started with tailwind why maybe some things aren't working out for you or like why uh i'm doing certain things feel free to give me a leave a comment below i'm going to respond to basically every single one means a lot to me to be able to you know help people like you guys out because youtube is primarily how i started anyway thanks so much for watching i'll catch you guys in the next video

Channel: Saraev Media

Views: 1,001

Keywords: tailwind, tailwindcss, tailwindcss html, html, css, html css, landing page html, landing page tailwind, tailwind builds, tailwind build website, tailwind website, tailwind mockup, tailwind website make, landing page tailwindcss, tailwindcss builds, tailwindcss build website, tailwindcss website, tailwindcss mockup, tailwindcss wireframe, tailwindcss rebuilds, tailwind rebuilds, nuxt tailwind, nuxtjs tailwindcss, nuxt tailwindcss, vue tailwindcss, vue tailwind

Id: tiCxOKfZcas

Length: 138min 12sec (8292 seconds)

Published: Sun Feb 21 2021