Build a Gym Website Using The Tailwind Starter Kit

[Music] what's going on guys so it's been a while since i did any kind of project or tutorial and i wanted to start out here with something rather simple i found this tailwind starter kit from creativetim.com which is absolutely free really cool resource creativetim.com actually has a bunch of resources but this is pretty much like a starting point or a boilerplate template for building websites and there's an html version there's a react angular and view starter kit as well if you want to you know use it for those frameworks but basically what i want to do is is use this starter kit or this starter theme so we want to download it you can download it right here and what we're going to create is this gym website so i called it the power room and basically we just have this large hero image and if i reload you'll see this fades in we're going to implement the javascript animate on scroll library if i scroll down here you'll see that these will start coming in from the side this area here we have our trainers that have kind of a flip effect we have our contact form that comes in diagonally and then we have our footer all right so we're going to start out with the starter kit and then we're going to basically turn it into this so we're not starting from scratch we're going to mess with the tailwind classes take a look at those tailwind is different from like bootstrap and materialize because it's all very low level utility classes that pretty much do one thing per class like if you want to set it to position absolute you can just use the class absolute stuff like that so now that we have this downloaded let's open this and another reason i wanted to do this is because it's it's like it's something that you would do as like a freelancer tools like this like starter kits these are invaluable when you're doing freelancing because you need to get project up projects up and out quickly rather than reinventing the wheel so if this will do for your project using the starter kit it's going to save you a ton of time so we have dashboard landing page login and profile there's different pages we're going to use the landing page and as you can see like i said there's react view angular we're just going to grab the html version maybe i'll do another video where we use it with reactor view but i'm going to create a new folder on my desktop and let's call this power room website and i'm just going to go ahead and bring landing and assets into this folder and assets is just it's some images that we're not even going to use we're not going to use these images and then vendor has fought awesome in it so let's open this up with vs code and if we open up looks like i'm going to rename this nope don't want to delete it i want to rename this to index instead of landing and we'll open that up and you can see on the side here just how long this is this is another reason i didn't want to do it from scratch so i'm going to open this with with vs codes live server which is an extension that i have installed but of course you could just open it up on your file system and this is what it looks like so this is the starter kit or the starter template you have this large area these three boxes here little menu at the top it is responsive as well so if we go small you'll see that i mean it's not really fancy but it isn't it is responsive down here we have this section this section here they're using svg and polygon for this slant right here these right here which are like the employees or whatever and then this area with the icons in the form and then the footer down here so we're going to start with this and we're going to end up with this and add a little animation all right so i'm going to jump back into vs code and let's start we'll just go from the top down we want to start changing the title here so we'll say the power room and if you take a look at these classes and there's a ton of them when you're using tailwind it's not just the starter kit it's whenever you use tailwind you're going to have a lot of html because you're going to have a lot of classes and what that what that saves you from doing is having to write any css i mean you write you might write some custom css here and there but you have a class for pretty much everything and they're very low level you don't have like an alert class or a button class that implements a whole bunch of css properties you have like absolute to position absolute top zero to set the top to zero px2 for padding on the x-axis for left and right p y for padding on the top and bottom font bold text small and you can be small md for medium lg large and xl for extra large and then certain spots you might see like this right here lg colon and then some class this just means that this only pertains to large screens okay so it's not going to uh be in effect if it's not you know if it's lower than a large screen so and we'll learn more about these classes as we move along but let's start changing this up a little bit so the first thing i want to do is uh let's actually just kind of label where everything is because i know there's a lot here so the navbar starts here so just go ahead and say navbar and there's a few things i want to do here i first of all this title here let's change this to the power room and it has a text sm text small as the default here i'm going to change it to text lg to make it a little bigger so now if we check that out you can see that the text is bigger another thing i want to do is get rid of docs and download and i want to make these icons orange i also want to get rid of the github because that really doesn't make sense for a gym so we'll do like linkedin or something like that so let's go down where we have let's see so the docs right here this is the docs and it's just one li in a ul so we're going to get rid of this this whole ul right here okay get rid of that and then this ul is gonna be the social media icons as well as the download button so here's the first social media the second and then uh the third and then we have the download button which is in this li so i'm going to get rid of this entire li here all right and then for the icons let's see and we can just kind of label these so this is icon one icon two icon three and you can save this for you know future projects if you want to create some other type of website using this starter kit so the i click the actual icon is the i tag right here so fa facebook or fab fa facebook is the font awesome class i'm going to get rid of these text grays and what this means is on large screens it'll be text gray 300 which is going to be a little lighter on small screens or i'm sorry on anything less than large it'll be text gray 500 but i want to change this to be orange all the time so i'm going to set this to text orange and we'll do 500 so basically of 100 through 500 for different shades of that color so we're going to add that and let's do it on icon 2. so we're going to get rid of not on the link we want to put it right on the button here so get rid of this oops paste that in there and then this one here and i'm actually going to change this to fa dash linkedin whoops okay and instead of star right here i'll just say like profile so if we save that we take a look now we have our orange icons and that's pretty much all we need in the header here next thing i want to work on is the big showcase our hero area so if we go under the nav we have this main tag which then wraps around everything so we can put a comment here and this is the main area and this is where the hero starts so we'll say hero so this is position relative we have padding top padding bottom uh as everything centered so the style here has the min height set to 75 viewport heights so basically if you think of a hundred slices across this is taking up 75. i actually want to make it bigger so i'm gonna actually set it to 95 just a little bit above where it cuts off like that so if we take a look now you can see this is much lower and then for the overlay here that's coming from this span so you have the background image right here you can change that we're going to change that and you have the span which is the overlay so opacity 75 so it's set to 75 percent if i set that to like opacity 50 you can see that now the overlay is not as dark so you can control that pretty easily you can get you can change the color we're going to leave it at bg black though for the image i'm going to swap that out i actually have all my images that i'm just going to paste in and they're all from unsplash so you can get these in the description i'll have all the code and you can just grab the images from there or i might even put all the images in the description so right now the image we just see the man's ass and and that's we don't want that so we want to position this differently and if you look right here there's this bg center class so this is basically just you know centering the background image i want to set this to bg top so we're not just staring at his ass so now you can see this looks much better this part in here we want to change this up we also want to add a little download brochure button maybe it's a you know a gym brochure pdf or something you can download so if we go down here you see this right here this your story starts with us we want to change that so we're going to change that to feel the power and then i want power to have i want that to be orange so i'm going to put a span here and let's add the class of let's say text dash orange 500 and we want to put power just the word power in there and if we save that now we have that orange and then for the text i just have some text that i'm gonna paste in here real quick so just put welcome to the power room we are a fitness and training center that whatever then download your brochure to get started today so now what i want to do is add a button here and if you want any you know if you want to check out the tailwind docs just say tailwind css and you can search for anything so if i search for a button and i want an outline style button like this and you can have you can basically just grab this if you want actually i want to grab the classes because this is a link but we can use the same classes so we'll just go ahead and say a oops a href and this will just go nowhere but you know normally it would be some kind of pdf because we're going to say download brochure and then we'll add those classes in okay so let's take a look at these classes bg transparent a transparent button on hover i want the background to be orange 500 and the text here let's say text orange dash 500 font semi-bold that's good hover text white that's good for padding i want it to be a little bigger so i'm going to use p 4 which is just padding all over and let's see we have border blue we don't want to use blue we want to use orange and hover border transparent that's good rounded that's good uh let's also make this an in because if i save it right now and we take a look you can see it's it's kind of like over this text we want to display it as a block so that it gets pushed down and so we can add some margin to the top so i actually want to display it as an inline block and then we'll add mt so margin top five let's also add a cursor pointer to it so now if we take a look that's good that's what we want all right now this down here so these three boxes and this section here are all in the same section and i just want to completely get rid of them of course you can keep them and change them up if you want but right under the hero here let's see so we have section and then these are going to be the three boxes you can see award agency free revisions and verified company and then we have that part where it says working with with such as a pleasure right here i want to get rid of all this so that's this whole section so i want to grab from this section all the way up to where it starts which is right here and i'm just going to completely get rid of that so if we save that and we take a look now it goes right to this section here now as far as this right here this slant goes that's coming from so we have a div with the and inside the div is an svg with a polygon and this this div is what's giving it that slant now we also have another div here with an svg in it because this was adding the slant for the next section but we don't need this so this div ends here i'm going to just get completely get rid of that okay and if we take a look we still have the slant here from this one um but what i want in notice that the different color here so i want this to be black i also want this to be black so for this this is going to be the section right here so we'll say bg black and let's add text white so it makes this black but this still isn't and the reason for that is because this polygon element right here has this class of fill current uh we also don't need this text gray so i'm going to get rid of the whole class itself and this polygon and now if we go back you can see that this reaches up now and this is black and we also still have that slant going on all right now for this section here we have quite a bit to do so let's swap out the image first and i'm just going to put a comment here saying that this is we'll call this the about section and you might even want to give this maybe give this an id of about just to kind of identify it let me grab the image for this and all of these images come from unsplash of course you can download them locally if you want but we'll paste that in there and yeah so we get that image over here we want to change this up quite a bit so let's see where that is so it says a growing company i'm going to change this to safe bodybuilding and then i want to have a small tag above it that says about our gym like that and then the safe bodybuilding heading i'm going to change that to text 4 xl make it a little bigger and i also want it to be uppercase so we can just simply add the uppercase class here so if we save that get safe bodybuilding i don't want this big pink icon so that is this icon here which is wrapped in this div so this div with the icon let's completely get rid of that and we'll take a look good the small tag i want this to be the same orange that we've been using so that's kind of the color theme for this is black and orange so let's change or add too small let's add a class of text orange 500 all right and then this text here i don't want it to be gray i want it to abide by the text white that we put right here so let's get rid of this class okay we don't want that and let's also make instead of semi-bold for the safe bodybuilding we'll do font bold okay now we have the icons or the the ul with the li with the icons so let's see i want to change obviously change the icon i don't want to use this fingerprint i'm going to use the f a dash dumbbell icon here and i want to make it a little bigger so i'm going to use fa-2x which is a font awesome class to make this a little bigger and then also i don't want it pink so we're going to get rid of this bg pink and text pink i'm not going to have it rounded either so we can get rid of this we don't need uppercase we get rid of all these classes and then let's see px we can get rid of that let's do py3 so that's just padding on the top and bottom inline block that's fine text excess i don't want it to be small so i'm going to get rid of that and then down here i want the text to be a little bigger i also don't want it gray so i'm going to change that to text xl or extra-large and let's change this to the latest and greatest gym equipment let's see what that looks like okay so the icon isn't showing up and i think i know why because this wait yeah we have double fas all right so let's also make the icon orange let's add we'll add it to the span here around it we'll say text orange 500 all right so that looks good now let's do the other two so i'm going to just copy so we have each one in the list item i'm going to copy this whole list item here with py2 and let's replace this one and this one so that's one two and the second one so this is the second one let's change this to we'll say five five inch quality for padding and then the icon here i'm going to change from dumbbell to hard hat so hard dash hat and then the last one here we'll change this to let's say three professional trainers and i'm going to use fa users here all right so let's save that okay so that looks pretty good should match this one good and i'm i'm not going to add the animation until the end now the next section we have is going to be our trainers right now we have these heroes and we have four columns i want to change it to three so i'm going to show you how to do that let's go down to the next section and let's put a comment here and this is section what did i call this one oh i just said about section so this will be trainer section now this is the heading part of the trainer section so we're going to train train we're going to change this to meet say meet our trainers and i want this to be uppercase so i'm just going to add the class of uppercase and then this text i don't want to be gray so we can get rid of that text gray 600 and then i'm just going to grab the text that i want to put here okay paste that in now this let's actually mark this so this is the trainer card wrapper and then each card is going to be this right here where we see this w full and then the 6 out of 12 columns on medium 3 out of 12 on large so basically you'll have 2 columns on medium screens and you'll have 4 columns on large because taking up 3 out of the 12 is going to give you 4 taking up 6 out of the 12 is going to give you 2 and just to show you that so we have you know 4 columns each one takes up 3 out of 3 out of 12 on large when we get to medium it goes to 2 columns because it takes up 6 out of the 12. now what we're going to do is take one of these out because we only have three trainers so we need to change those those those fractions up a little bit but let's first mark where these are so we know that this is card one this w full and then that so this ends here right so then let's make another comment we'll say card two and this ends here so here we'll say card three this ends here and i want to get rid of the last one so this last one ends right here i'm just going to grab that whole div and completely get rid of it so if i save this you can see we only have three now but they're not centered because they're still you know three out of the four which give which gives us four columns just the last one isn't there so to change that let's go up to card one and instead of six out of 12 for medium i'm going to use four out of 12 which is actually three columns and i want that to be on medium screens and up so we'll get rid of the large all right and then let's see for this large we'll do mb0 and b12 we'll just leave that for now but let's go to the second card and let's do the same thing we'll get rid of this and this is going to be 4 out of 12. this one will be 4 out of 12. so let's go ahead and save that and now that looks much better so let's work within each of these i want a different image i want it bigger i want to get rid of these icons change the names so back up to card 1 right now it's taking the image from the assets folder i'm just going to grab an image from unsplash and put that in for the source for the image so max width right now is 120 that's kind of small i'm going to change that to 250. let's also change let's see so rounded fall gives you like a circle image i just want rounded corners so that's going to be just the rounded class like that all right and then let's just take a look at that good so that's what i want um and we're going to change this trainer's name his he's going to be mr rogers and down here we just have like kind of a slogan so he's going to be the neighborhood watch man and let's get rid of um actually we can keep the text gray that'll be fine so let's see these are all his icons these are wrapped in this div here so i'm going to get rid of that entire div all right let's take a look at mr rogers okay pretty buff looking all right so the next one is right here romania haydeed so this is going to be strawberry shortcake and strawberry shortcake is a known cupcake smasher and we want to change that image so let me just grab that and let's paste that in here and again we want to get rid of rounded fold just make it rounded and the width will be 250. all right so let's take a look at strawberry shortcake good we don't want these icons though so again right here this mt6 div with the icons i'm going to get rid of whoops i'm going to get rid of that here let's get rid of that okay so we have one more card here let me grab the image paste that in let's change this to 250 rounded and this is going to be ronald mcdonald and ronald mcdonald will say double whoop ass with cheese and then we'll get rid of his icons get rid of that okay so that section should be done let's take a look good so we change the columns and obviously we change the style of the cards you know the elements inside so i think that's good um next we have the contact form now this i believe is broken up into two sections you have this one and then the one with the form so let's take a look so this is gonna be the contact header section and i want to change let's see we don't want gray we want bg black and text white and then let's see we have our svg here once again i'm going to get rid of this class we'll say contact us and then i'm going to just grab the text for this part and let's get rid of the text gray we don't need that okay and then we'll save that and let's take a look i don't want these icons here so we want to get rid of those so believe that's going to be this let's see yeah so that wraps excellent services korean market yeah so i'm going to get rid of that whole div actually where was that it's this i'm just going to mark it with a break point and then we can get rid of that all right so let's save take a look good now this part here obviously we want the background to be black so this is the next section so we can mark this as the contact form and let's see it's bg black and i'm just going to leave the text like want to work with us stuff like that oh one thing i do want to do contact us is a heading so our header so i want to add uppercase to that so let's see what that looks like good and then i want to make the font the form that orange color let's add it to we have this one to work with us this div is the whole wrapper for the form so here let's add bg dash orange 500 and text white now this text here has has classes directly on them so we want to get rid of the those colors like right here text gray text gray 700 right here and right here here just get rid of all those so that the text white drops down to these as well alright so save that looks like i missed the full name here okay good now the down here the footer i'm going to basically just keep this except i want to get rid of these and i want these to be orange these icons and we'll change up the copyright so let's go down to the footer and we'll just give this we'll just say footer obviously and then let's find those unordered lists because i want to get rid of those these are the icons uh let's see so useful links actually will probably get rid of this whole div yeah because these are all like the unordered lists so right here let's go this is 513 let's go up to where i put that break point where is it right here get rid of that okay so let's take a look yeah so that got rid of those and then over here this let's keep in touch part i'm just gonna say follow us on social media and i just want to change the colors of these so right on the i class or the i tag here let's do bg dash orange 500 we're going to do that for all of these so there and here instead of we'll just do linkedin here instead of dribble and uh yeah so we'll do that and then there's also wait a minute github okay so that's that button alright so we'll get rid of this last one we'll just have three and this will be linkedin so let's check that out and these actually should be text not bg so we want that to be text text and where's the other one right here text all right cool now the copyright we can change that so we'll just say copyright the power room and be sure to check out creative tim's website and down here is just a script to toggle the the responsive hamburger menu but i think that looks good now let's check smaller screens so when we hit like really small these will start to stack okay so everything should be centered um this i want to add some spacing here also at the top notice how this this text part here isn't directly in the center and i believe it's because of a certain padding right so let's go back up to where we have our hero which is right here and where is it right here so this div that surrounds this text with this padding right 12 we're gonna just get rid of that okay so save that and now that text is in the middle so also the contact the spacing down here where the contact is i want to fix that so that's going to be let's go down to where our contact header is this is why it's good to add these comments so you know exactly where everything is so where we have the container for the header area so large padding top 24 large padding bottom 64. that's why it looks okay on large screens but let's add here a padding bottom dash 20 oops want to be within quotes padding bottom 20 and let's do padding top dash 20 all right so that looks much better it still looks good on large screens as well all right so i think that we're ready to add our animation so for animation we're going to be using animation on scroll which is probably my favorite library for for doing stuff like this it's really easy to implement it's very lightweight so we have like fade up fade down there's all types fade right and then if we go down some more there's flips there's zooms there's all types of um different effects you can have now to implement this i'm just going to go to cdnjs.com and just grab the cdn so i'll search for aos and we want both the css and the js i'm going to copy the css tag and i'm going to put that right above where we bring in the compiled tailwind css file and then copy the js tag and we're going to put that down at the bottom so right under the the script here and then we need to initialize this so we're going to add our own script tags and we now have access to that aos object and we just want to pass in to init an object and we can basically set pass in some options here and on the github page in the documentation you can look at all the options but i just want to set a delay of 200 milliseconds just a slight delay the duration so you can make it as fast as slow as you want i'm going to do 1200 milliseconds and then once i don't want it to run once meaning that if you scroll down and you scroll back up and you go back down the animation will run again if you only want to run once when you land on the page then you would set this to true so now that that's initialized we can just simply add the data dash aos attribute to whatever we want to animate so the first thing going up to the top here let's go to the hero which is right here and i'm going to add this onto the where is it so down here i want to go to the container and i'm going to add an attribute of data dash aos and we're going to set that to the type of animation we want which is going to be just a fade in okay so if i save that and we go back and i reload you should see that just fades in in 1200 milliseconds now down here i want to have these fade in to the right and to the left these two elements here so let's go down to our about section and we have the image this is so basically we have a flex wrapper here that has this div with the image and this div with the text this div with the image i'm going to add data dash aos and we're going to set this one to let's say fade in right so this it i know it's on the left side but it's going to fade to the right it's going to come in you know to the right and then this div which is the next flex item so this is the first one this is the second one with the text i'm going to add data dash aos and we want to set this one to fade in left because it's going to come in left right so now let's go up top here and you can see this is completely black but as i scroll down oh it's not fade in it's just fade so fade dash left and uh was the other one what the hell is the other one fade right there we go and it'll keep doing it because of that fault i set once i set to false if you set it to true it should only happen once so it's up to you on you know how you want that to happen now these i want these to use the flip animation so let's go down to where the the trainers are so here trainer section and we have our card one here so i'm going to add data aos and we're going to set this to just flip right so you can you can choose which way you want to flip so that's flip right i'm going to set them all to flip right this one data aos to flip right and the last one here ronald mcdonald we want him data os flip right okay let's check it out there we go so when we come down to it we have that flip effect and then the last animation is going to be on this form i want it to come up from the right so let's go down to the form not the header but where the form is and we're going to want to put this on i believe this div right here so let's add data aos and we're going to set this one to fade i think it's fade up right let's try that yep there we go so as we come down the form comes in at a diagonal angle all right cool so that's it i mean i know that this is you know we didn't build this from scratch but this tailwind starter kit is is pretty useful and again you can use it for angular react and view and it's just something to start with you could change this up to look like a completely different website you know implement different menus and stuff but it's just a starting point uh and again i think it's good for like freelancers and people that need to get stuff up out and quick and also if you're not that great with css you can just change around some of the tailwind classes tailwind in general is good for that but that's it hopefully you guys enjoyed this little project the link will be in the description and that's it i'll see you next time

Channel: Traversy Media

Views: 74,393

Keywords:

Id: mO3aXUgjnIE

Length: 41min 30sec (2490 seconds)

Published: Fri Oct 02 2020