Landing Page - Tailwind CSS

gonna build this cryptocurrency template um so we see so let's see how we can just build locked up intelligent css so i have my basic project setup so i have my main dot styles included so which has the complete tailwind css so first before we get into anything so let me grab the colors so um i just i'll just add this in the configuration file extend colors just keep it as blank colors so this will be the default color and let me grab two more colors so let's name it icon colors and this button color button so i think we are good with colors so let's hop in so before getting anything i mean you forgetting anything so let me just do a quick review of my tailgate css so now it's cool so it's generated the brand generated this color css for us so let's add a class background iphone brand and let me go to the live so now i can see the background color so let's do a primary container and container just for the say just give it a hint of 40 just for testing iphone red okay now it's okay so i want it to be center aligned so just make a mx auto so it will be align centerly so and i would like to give a padding of bx of like 2 would be fine ok now so let's start with this one with the navigation bar so i'll do i'm just to create a section i will be removing these two colors and height so section just i'll go with nav now there will be no background so no more classes so i will just grab the logo over here so copy has svg that will be fine so next thing is i want to give flex like siphon bro and then paste my svg let me check okay now my logo is here so i would i just like to add padding for my navigating navigation class by iphone 2 would be great i think you know every car for okay for venus max thing we'll see if needed anymore then i'd like to make it flex and justify space between because we are getting this menu to the other side so i want this to be in a single day when this all in another day so the space will be in between of them so now i just need to bring up the title of here and i just want ph one um see i might be crypto and the class text hyphen excel and vx iphone 2 text hyphen white so instead of just declaring text icon right here i just rather declare it over here so my complete and my life and just want it to be centered justify center okay so i think and i uploaded that did the trick so i can let it be so now my text i mean is here so let's make it a bit bold and transform it to the upper case okay now it's look far better so now let's add these menu items to the other side so inside the navbar i'd create another div flex flex iphone bro justify center by iphone auto so now let's add an anchor tag href will be hash and then it will be product products so first let's build a single moment first let's style the single one then we can just simply go on adding the others so i'd like to add some paddings so class px iphone 2 that would be much necessary so let me clone this features affiliate urls features um so this padding between is not that much good so i would like to add some space iphone x action two icon four okay this box four works so now i would like to clone three more features and then about and contact as well contact and then i'd like to bring up the login so now all our items are in place if you see um we have these two inspiratives so let's get that done so let's take this complete div and place it in flex flex iphone pro justify center and let's get this out of this day so i'll just like to clone this and this one will be logging and so space iphone 4 i'd go for 6 okay not here space iphone x iphone 6 so that would bring more space in between those two um so yeah okay that brought more space between these two now i need a horizontal line so i'll just use dave with um width of 0.5 and height of 4 with background of gray green race 500 okay okay now the height looks okay but the width is much more so gray iphone 300 gray iphone it's 700 with an opacity of 50. okay this looks nice awesome i think uh and i just like to reduce the height a bit instead of four i think i go for six so that looks better so now just have now just let get our button done so i'm gonna copy this one and just register register and the px is the same and the py will be added and now background iphone brand iphone button so we have a button color so we'll check so we will try to fix the alignment once we are done with this so next thing button and it's surrounded iphone full and i want px to be more my x padding will be more than the live padding so i'll go for six so now this button looks really nice so now two now these two are misaligned let's try to get those into an align so now they are aligned correctly so everything is aligned correctly so the fonts might be loft because the font used over here is different from font used over here so right now i'm not changing any font thing so um so i'd like to give more padding on the top so let's get to the navigation bar and okay let's get to the nav bar and here instead of padding y4 i'd like to make it well okay this looks more nice than i go so now let's let's just start designing the second section so i'll just minimize this one so below it started the flex flex iphone bro because uh these are side by side so i want this completing interactive and this one is another tip so i just took flex rope and justify them to justify between so i want them to be aligned stretch like the space should be in between of them so now let me grab this image copy as svg now let me create two names inside this so this is a big one usually i have you have to just so this looks nice now let's start designing this section so first thing we would like to design this one so let's start with the div inside this one so let me give flex flex iphone call so i want it to be in a column so inside this the background iphone gray iphone so i'd like to go with 400 with some i want another dig with background iphone light text iphone black so i just want to check the background gray so instead of padding i have to go with margins so the gray background will be visible so instead of this i think i think i can go with background iphone gray iphone 300 i'm not sure that that sufficient work or not okay so it's not that good so let's pull up the background color of it so it's white with an opacity of 10 so let's go with background white opacity opacity of 30 so i think we need more opacity 20 but these opacity will be applied to the content also so so let's test it once so i want more text so yeah okay this opacity has been applied to the complete child so let's get that color and have it so here the color is white with 10 percent opacities so the opacity code for i think i'm not sure let's go google open the city hex okay so the opacity code for the opacity code for is 1a so let me just run the build once now i'm just got gg grand iphone 10. now i just got some i think the opacity is very less so let's get let's get the opacity of 20 let's get opposite of 20 so let me just remove this opacity once oh now it looks very fine with that color so i want them to be so i want those to be in line and then justify center item center okay now padding let me just look after the cutting ladder so now so the content is 75 percent with bold and background white let's see px5 is too much let's go okay that's look fine [Music] okay that's look nice but i need this content to be in the center so let's first get the content ready then we'll see how to center those so the next content will be for the black friday weekend so i want my px to be two and i want this one to be rounded iphone full so instead of this to be rounded full i want my complete parent to be rounded full so now i'll just get the complete rounded over there so i think it's look awesome i think it looks very similar um [Music] here let's column so i want an h1 so this and i'd like to add few more classes for this so first class will be text iphone for excel and then front type friend bold then padding top iphone 4 okay this one is going far um let's just wrap it in a day okay now it's look kind of good so 4xl is far less let's go for 7xl okay this is far nice and i'd like to have some padding on right to be like light you're just playing right just go with margin right well okay i haven't seen much deflection and so right now we are just focusing on the web so we'll see for the mobile latter okay so that's good now let's get the bottom content so i'll go with some p tag and some classes text iphone excel font would be normal padding top iphone 8 so it will take more space and also like to use planning top light over here so it will take the enough room it will have enough room for it all right so and this one i'd like to have margin right so whenever it's in md greater than md i want to have a margin right off like 48 okay you got this one yeah um and more 64 bit and i want the font color should be a bit of gray so take style phone create 600 it's too much of gray so instead i'll just add an opacity of 70 wow that would look more nice and i just remove this so instead of just giving it margins i'd like to give it a width when we are in md with typhon 40 60 72 more 80 anything in 80 okay 80 still with 90 96 would be good change of that double license one by two oh this looks really nice okay but this will be only work when we are in md so we need to be more sure to reset those once we get to the lower resolutions so now let's get this button done so i'll just quickly grab the top button so i'll just go here and grab my register button so i'll just paste it over here and then spam i will just get this little arrow thing copying my svg and just paste it over here okay so i won't fill to be current color and i want my these text to be okay i want this to be text iphone brand iphone icon no button i'm not sure where it is your icon is okay it's somewhere over here so i just like to give it a background vgi for might and to this one i want inline flags okay now it's look far better justify center item center i'd like to give it a height of 12 width of 12 and text iphone center legs justify center items under so it would be okay no just take this in a day give me the kind of reset for everything so now it's so far good now i want this to be rounded fully rounded so okay now it's look far more similar but i need this to be high to be more lesser [Music] okay i was fine but the size of this one text iphone xm that should make the trick so let's just try the trick over here on type and size concise pixel no it's not working it's not working so let's just increase the height you

Channel: Karthik Ponnam

Views: 10,271

Keywords: programming, code, tailwind, tailwindcss, taiwind css, landing page, css, html

Id: 2eba4VQTogg

Length: 34min 49sec (2089 seconds)

Published: Thu Mar 04 2021