learn everything you need to know about spelt kit and Tailwind CSS by building a beginner-friendly and awesome looking landing page spelt kit is an advanced web development framework that has been constructed on the fundamental concepts of spelt and Vite this web development tutorial from James MacArthur will help you build skills as a front-end developer welcome my friends to today's video where we're going to be learning spel kit by building the ultimate landing page not only are we going to be using spel kit but we're also going to be using Tailwind CSS and in building this landing page we will learn everything about componentry State and spel kit Global stores responsive web design props styling and so much more here's a quick demo of the project we have our home landing page some call to actions little reviews functional links we can click on them and it takes us down to a nice feature display where we've got all the different functions and pain points that our app solves we've got some user reviews some Interactive activity some frequently asked questions and at the bottom a conversion section and finally a neat and tidy little footer and as you would expect it looks great on a mobile device too we can scroll through everything is nice and responsive we've got a neat little menu we can click on the menu sections come through to them so on and so forth this felt kick course is totally beginner friendly however if you do have a bit of experience with HTML and CSS that will help if not there's a link in the description that will be of use to you and hopefully by the end of the video you'll be an absolute spel kit Pro you'll be whipping out applications landing pages web applications you name it on the Fly and you can add it to your resume happy days thank you guys so much for watching don't forget to smash the like And subscribe buttons and without further Ado let's get started and it is now time to dive into the code to initialize our excellent project today we are going to start off inside of the Tailwind documentation uh to initialize a spel kit project now this web page and all other links will be linked in the description down below and that includes the GitHub repository for this code as well if you want to compare anyway so we're going to open up this site and run this command just here so inside of our terminal we're going to be in the directory of our choice you could do this in a vs code terminal as well and we're just going to go mpm create spelt at latest and then we're going to give our uh app a name so it's going to be gy app landing page we're just going to hit yes to install the correct packages and we're going to be initializing a skeleton project we're not going to have any type check and we're going to use es linting and with that all done we can go ahead and open up a visual studio code window hit open and just navigate to the directory and open that up inside of our Visual Studio code editor we'll know that we're in the right place if we can see the name of our application just up there and inside of our spelit application we would expect to see a source directory a static directory and then just a few extra Files The Source directory is where all the magic is going to happen however before we dive into that we just have to finish configuring our project and we can quickly do that by coming back into the documentation So within our vs code we're going to open up a new terminal that should already be in the correct directory and we're just going to go ahead and copy and paste these commands in verbatim so that's one done now we'll install the next one paste that just there that's going to create a configuration file now we're just going to copy this content straight across into our uh spel kit. config.js just uh replace it completely keep scrolling we're going to copy this content into our Tailwind do config file and finally we're going to copy some Tailwind directives into a file that we're going to create inside of the source directory and that's going to be an app.css file and we can just go ahead and paste those directives in right there finally the last thing to do is to create a plus layout dosf inside of this route directory so we're going to create plus layout dosf and just paste this uh script tag in here as well as the slot tag now if we quickly take a look at the source directory where as I said before this is where the magic happens we're going to first see a lib directory we're not really going to be touching that for this tutorial we have a routes directory and this is a critical directory this is how the multi-page application functionality of spel Kit works so essentially you can create sub folders within the routes and these will correspond to the page routes in your web application there's some reserved keyword or file spout file names uh namely the plus lout and the plus page the plus page is the uh file that will be rendered at a particular folder route uh on the page so just in here we can see welcome to spel Kit this is the uh content and the plus layout for the equivalent level or you know it's actually inherited from any parent uh routes as well if it doesn't exist at a current route is going to wrap our entire application so a is a wrapper where the plus page gets rendered via this slot content as if it was a parent tag and the children contents was just within here now that might appear a little bit confusing but we'll see how that works a bit more momentarily after that we have our app.css that's just a standard CSS file which we we had imported into our layout and finally we have the app. HTML which is the uh you know this is the standard HTML document and this is where all of our spel kit project gets rendered essentially in this div right here now we're not really going to be working too much in these files just occasionally and maybe a bit at the beginning but by majority it will be in the layout and Page files while we're over here we're going to create a new folder called components and this is going to have all of our component alal kit component Tre that we will then render within our page dosel file now that that's all done we can go ahead and boot up our project by typing in npm run develop uh or just run Dev that's going to start our project on a local host uh that we can then open up in our browser and we have our project right here if we go ahead and type class text green 400 we would expect that to change the color of the text as it has indeed and we can confirm that Tailwind is indeed working within our project now to continue configuring our project we're first going to come over to Google fonts this is once again Linked In the description down below and we're going to be having two fonts for our project one of which is going to be open Sands and so we're just going to scroll down and select pretty much every single font family that uh or font weight and style there is so that's just going to be all the italic and non-italic sized fonts right up to the very boldest of them and then we're just going to also look up Poppins which is going to be the font for our headers and stuff and we're going to do the exact same same thing select all the different uh versions that they have takes a takes a minute or so and once you've selected them all the way up to the uh bold ones then we can select this button in the top right hand corner and if we scroll down a little bit you will see a link tag show up just above my head there we can see that it's the link and at the bottom there'll be a cop button we're going to hit copy and come back over to our document and in the app. HTML file inside of the head tags which we have just here these contain the meta information about our document and we're going to paste in those link tags so that we can see them right there there's three of them uh now while we're doing that we're also going to look up the font awesome uh CDN package it's 6.0 CDN once again Linked In the description down below and we're just going to copy the link tag for this top version right here and we're going to paste it directly underneath the other link tag this is going to allow us to use their funky icon set which is going to be absolutely brilliant and the last thing we're going to do inside of our app. HTML is add a class to the body and that's just going to be relative uh background of white or a BG of white we're going to give it a text of slate 800 so just not a little bit lighter than black and then we're going to set the default text size to small we're on a small screen it's going to uh increase to a base size so that's going to be our first breakpoint we're also going to give it a display of flex a flex direction of column so that's a flex call and finally A Min height of screen underneath that we're just going to create a secondary div and this is going to have a class of inset Z opacity 5 so it's barely visible absolute uh a zed index of -1 we use the square parentheses to enter a custom value and finally a BG grid which is going to be a custom class that we will Define momentarily we can go ahead and save that and we can see our application hasn't really changed all that much but it is uh here for us after that what we're going to do is come into the app.css file now throughout the course of the tutorial We'll add a few custom CSS styles to this to begin we're just going to start off selecting the HTML tags which is the wrapper for the entire document and we're just going to give it a scroll behavior of smooth for some smooth scrolling we're going to use the asterisk to select every single element and we're going to give it a font family of open Sans and a backup of sand serif and then finally after that we're going to select the H1 H2 and H3 tags in addition to a custom class that we're going to Define called Poppins and we're just going to give that a font family of Poppins and a backup of sans serif and uh two more things to go we're quickly just going to select the span give that a font family of inherit and also a font weight of inherit uh we'll see why that happens shortly and the last thing we'll do for the minute is Define that background grid style uh and that's just going to have a background size of 40 pixels by 40 pixels and it's going to have a background image that's a linear gradient to the right of gray one pixel through to trans parent one pixel and so that's going to be the horizontal line and then after that we're just going to comma and include a second linear gradient which is going to say to uh bottom let me see if I can scroll that down a bit to bottom so this is going to be the vertical one and that's also going to be gray one pixel uh and transparent 1 pixel so if we save that we can see the Light Grid background show up in our document which is pretty nifty that's going to look super cool and we can also see that our fonts have changed and updated with that done we're going to come over to our layout. spelt file now in here what we're going to do is actually start off by taking a look at how our document is going to be structured a successful landing page relies on telling a good story uh to sell a user on a product and for us that's going to be in the order of first a header at the bottom we'll have a footer and and then we're going to have a hero section which just looks cash money we'll have a product description section after that we'll have some user reviews so that you know now the user has been excited about the product they've seen uh what it's about they've seen that other people like it and then finally we're going to have a frequently asked questions uh cuz Often by that point people have questions and lastly a conversion so this is going to be the general structure of our page we can just leave that there for now with that done we can uh come into the components folder and we can actually go ahead and create all these components so we can start off by creating a header dos felt uh we can create the footer dos felt we can have a hero dots felt then we can have a product description well we'll actually just call it uh product do do felt then we can have a reviews dosf uh a FAQs dos spelt and finally I think the conversion dosf so that should be uh pretty nifty if we come back over to our spelt uh our plus layout. spelt the first component we're going to render out is the footer and that's going to go just underneath the slot uh and we can see that we just need to import that component from the appropriate directory there's also just going to be one last component that we're going to make called the section wrapper do and this is just going to be a section so we can actually Define the section that has some certain Styles uh specifically the class of and this is going to be a dynamic class so we're going to wrap it in curly parentheses and this is just going to have a minimum height of the screen a display of flex a flex direction of column and a padding X of four we're going to add some Dynamic styles to that a bit later after that we're going to have a div that has a class of flex Flex call Flex one so that it occupies as much space as it can and a maximum width of 1,400 pixels uh an MX of Auto and a width of full we can open that up and then finally we're just going to render out the slot which if we recall from earlier is the child content that gets uh wrapped between the opening and closing section wraid tags what that will allow us to do is come over to all of these uh primary components and we can call the section wrapper just like that and have it uh consistently wrap out different sections so that they're all styled the same the first one that we're going to style is the hero section so we can come over to our page and get rid of everything default in there and we can whip up a main section which is just going to have a class of flex and flex column and in here we can start off with our first uh component which is the Harrow we can open up the herrow component just there and close it this can be a self closing component and nothing is currently showing up however if we come back over to the uh hero component we can now see that we have that show up just there now the first thing that we're going to have inside of our hero component is actually the header the header is going to show up at the top of the page uh keeping in mind that we have to import that file or that component with that imported we can actually start off styling our header this one's going to be pretty straightforward for the most part we're just going to start off with a script tag uh and underneath this we're going to open up a header tag this is going to have a class of flex Flex Co relative Zed index of 20 and within that we're going to open up a div this is going to have a class of Max with 1400 pixels that's going to be our maximum width for most of our elements we'll give it an MX Auto a width of full display of flex uh the default is flex row so we don't have to add Flex calls in this one we're going to give it an item Center which is a line item Center and justify between uh and also we're just going to give it a padding of four but a padding y of six so it's a little bit bigger inside of this element we're going to first have uh an anchor tag this is going to have an href back home and this this is going to contain uh an H1 tag that is going to be the name of our application so in this case it's going to be swy Molly however we're also just going to wrap the Molly tag inside of a span because then we can go ahead and give this a text Indigo 400 and on the H1 itself we can give a class of font uh semi bold we open up our page we can see swally Molly comes up in the top left hand corner and the Molly is the secondary color which is just as we would like it after the anchor tag we're going to have a button uh this button is going to be for our menu icon which is going to display on a smaller screen so we can come over to font awesome icons once again Link in the description down below and just look up menu and here we can see we get a three bar icon uh we can go ahead and copy this code snippet and just paste it right on in the button if we come back to our page we can indeed see that show up in this corner so that is perfect and we're just going to give this a sneaky class of uh medium hidden otherwise it's going to be grid and place items Center and this is essentially going to default to the grid display how however on a medium break point and above we're going to hide the element so we can see that just disappears up there however should I drop the page size it's going to show up now we're going to inverse this Behavior inside of a nav element so this is going to only display when the uh hamburger icon disappears so this can have a class of hidden by default until we hit that medium breakpoint and then we can give it a display of flex item Center a gap of four and on a large screen uh breakpoint we can give it a gap of six so it gets even bigger inside of here we're going to have uh some anchor tags this one the first one can be uh product after that we can have a secondary one that says uh reviews and then finally we could have an anchor tag that just says FAQ and then at the bottom of this we're going to have a button and this is going to have a class of special button which is a class we have yet to Define and in here we're going to have a paragraph that just says start free today so there we can see all that show up which is all well and good and then if we go on a screen that's too small it uh swaps over to the hamburger icon now for each of these I'm going to select all of them at the same time and just give them all the same class and that's just going to to be a duration of 200 uh and on Hover we're going to say text Indigo 400 and give it a cursor of pointer and we can go ahead and save that and so now when I uh hover over these elements we can see it changes color as you would expect the other thing I'm just going to do is add an hre on each of them that's just going to make the link functional and we're going to uh have it scroll us to a section with the ID of product for the first one for the second one it's going to be href uh pound reviews and finally it's going to be href pound FAQs inside of our section wrapper component we're going to apply these IDs dynamically and we can do that by initializing a script tag and having the section wrapper receive some props now the way that we receive props is we say export let uh and then the name of the prop so in this case it's going to be uh ID and we can go ahead and just say ID is equal to a dynamic ID just like that and additionally we can come into the component itself and we can there within pass in that ID so this one for the herrow is going to have an ID of uh actually it's not going to have one but the product for example when we create our section wrapper just like that making sure to import it we can then add the ID of our product that's going to be passed down and uh consequently used for that section now as you may remember inside of our header section we had a button down the bottom that had a special class now this is a class that we're going to Define inside of our app. CSS file we're going to do that by saying button uh and we're also going to define a class called button so this is going to select all buttons or anything that we give the class button to and in here we're just going to say border radius of 8 pixels border is going to be 1 pixel solid transparent we're going to give it a padding of 0.6 em uh vertically and 1.2 em horizontally we'll give it a font size of 1 m a font weight of 500 uh a font family of inherit a background color of white a cursor pointer and finally a transition we're going to set the transition on the uh border color to 0.2 seconds now underneath that we're going to add a button hover effect and that's just going to set the Border color to uh a hex code which is # 646 cfff underneath that we're going to set a button Focus event and a button Focus visible and that's also going to uh have a an outline of four pixels auto- web kit D Focus d ring-c color and so those are just some button Styles uh and now we can Define the special button this is going to have a border color of # uh 646 CF and we're also going to uh create another one called special button dark and that's instead going to have the background be the uh hex code that we've been using so that's 646 CF and we're instead going to get give the color to white and now if we come back into our application we can just see that's uh styled our button up here for us so that's coming along nicely uh but there's just one more thing we have to add in here and that is a DOT special button uh hover event and that's just going to set the Border color to a dark blue or just a regular blue uh and so we can just see that show up uh there it just gets slightly darker so with that done that's our header we can now come into our application and start stying the rest of our hero section and to do that I'm going to replace this ASD stuff with a div that has a class of flex Flex call Gap of 10 a flex of one uh we're going to give it an items Center ad justify Center a padding bottom of 10 until the medium break point where we're going to give a padding bottom of 14 that's just going to Center absolutely everything and in here we're going to have an H2 tag this is going to have a class of text 5 extra large until we get to the small breakpoint then it's going to be text 6 XL medium text 7 XL I'm sure you're starting to get the idea finally a large of text 8 extra large we're also going to give it a Max width of 1,00 pixels an MX of Auto and a width of full uh and lastly a text of Center inside of here we're going to have a Spam that has a class of text Indigo 400 that's just going to contain the first word which is gy after that we can carry on the sentence uh that just says training then we're going to have a secondary span this one's going to have a class of text slate 600 so it's going to be light lighter than normal and we're also going to give it a class of line through so that it looks like it's being crusted out and this is going to say is hard and then after that we can have a break point uh and we can finish off and continue saying just got and then finally have that span again that's a text Indigo 400 and easier so with that all done we can see we get uh this styling just here one thing I forgot on the h Two element is to give it a font of semi bold now the line through didn't show up and that's because I spelled it incorrectly through and now we can see uh Gym training is hard just got easier it's pretty nifty little sentence because it shows what we do and it shows the common sentiment underneath that we can have a paragraph This is going to have a class of text extra large small text 2XL medium text 3 XL uh likewise with the one above a text Center and a maximum width that's slightly shy of the above one th000 pixels an MX Auto and a width of full inside here we're just going to say less thinking and more doing we're the trainer in your pocket full of and then we're going to have a span this is going to have a class of italic and then we're going to have personalized workouts exercise explanations analytics uh and then after the spam we're going to finish the sentence that says and much much more full stop we can see that show up just there that is all well and good and then under that we're going to have a call to action button uh that's going to be a component that we can create so that's going to be ctas do spelt and with that created we can go go ahead and render that just here ctas just like that obviously nothing shows up because it doesn't yet exist but if we come into the component it's pretty straightforward and we're going to have a script tag that we're going to modify a bit later it's going to have some Dynamic styling but for now we're just going to have a div that has a class of flex item Center and a gap of four and inside of here we're going to have our button this is going to have a class once again it's Dynamics so we wrap it in the curly parentheses and that's going to be special button uh we'll add more to that later inside of here we're going to have a paragraph that just says uh contact us and this is going to have a class of text base small text large medium text extra large uh and then we can go ahead and duplicate this button except the second one is going to be special button dark which is the darker button we defined and this is just going to say get started uh and then we're going to have the HTML right arrow which is an Amber sand and then r a r r r and that's going to give us our two little buttons just here which is pretty nifty now for the last part of the section we've got the review part so that's just going to be a div with a class of flex item Center justify Center a gap of Two and a text size of Bas in here we're going to have a paragraph that says 4.6 this is just going to be the example rating underneath that we're going to have a uh some mapping we're going to map out some content and we do that in spel kit by uh using the curly parentheses and then using an each Loop essentially so it's for each it item in an array in here we have to pass in an array so we're just going to create one on the Fly it's got five elements and we're just going to call each or refer to each element as index as it gets rendered and in here we're going to have a repeated unit so this is going to be a div that gets repeated for each element in the array and this is going to have a class of grid Place items Center and relative and in here we're going to have a font awesome icon this is going to have a class of fa solid fa a star and an opacity of zero uh we'll see why in just a second and then after that uh icon we're going to have a div this is going to be a pretty clever div so it's going to have a class it's a dynamic class so we use the curly parentheses to wrap our string and in here we're going to give it a position of absolute uh top of Zer a left of zero a display of grid and place items Center and then we're going to have a space at the end of the string and then use the uh plus to append a conditional style so we're going to say if the index is equal to four uh I.E it's the last element in the array then we are going to have the turnery operator or the question mark uh and if the if the index equals 4 evaluates to true we're going to say width of 60% uh and an overflow of headen and if it is not true so we separate the true and the not true statements using the semicolon we're just going to have an empty string so if we go ahead and save that that's not showing up for us and that's because I haven't put anything within this div cuz I'm a muppet so inside of the div we're just going to have the icon this is going to be the class of fa solid fa Star as above and we're just going to give this one a text of Amber 400 so now if we go ahead and save that we can see we get these stars showing up that looks excellent and you can see well actually you can't see let me just move this over it cuts off that last star at 60% uh which is the 4.6 so that's why we did all of that and then after that div uh we're just going to after the each sorry we're going to have a paragraph that just says 500 plus so that's just going to imply that over 500 people have rated the application 4.6 on average and yeah that's pretty much our landing page if we uh look at it on a mobile device so let's right click and inspect we can hit mobile and we can see that it uh pretty much looks uh just as you'd expect uh looks pretty nifty if I say so myself now obviously we have to come back to this nav menu but we will do that shortly but first we're actually going to move on to the next section which is our product dots felt so thus far inside of our product dots felt we have our section wrapper and that has an ID of product now if we inspect this page we would uh expect to actually see that section show up so if we just come in here here well actually the first thing we have to do is come back into our page and actually render it out so inside of here we can render Out product doel making sure to import it and now if we come back to our page we can indeed see here we have our main then we have our first section and we have our second section and we do indeed have the IDE of project uh project so that's perfect we can go ahead and close that again now inside of product we're going to have some product cards but we're also going to have some information so up here I'm going to say let uh product features equal to an array we'll fill that out momentarily uh but first we're going to enter this down onto a new line and in here we're going to create a div that has a class of flex Flex Co a gap of 10 until the small break point then we're going to have a gap of 14 uh and then on a medium break point we're going to have a gap of 24 we'll give it a flex of one item Center ad justify Center and a padding bottom of 10 uh until the medium break point then we'll make it 14 inside of here we're going to have a div that has a class of flex Flex column a gap of two and this is going to contain a paragraph tag with a class of opacity 60% or just 60 a text size of Base until we get to the small screen that'll be a text large and on a medium screen a text uh extra large and text Center this is going to say start your lifetime then we'll have a span that has a class of text Indigo 400 uh gym streak and then after that we can have today so if we come back we can see that show up right there uh and underneath this paragraph tag we can have an H3 and this is going to have a class of text 4 XL until the small screen then text 5 extra large uh medium text 6 extra you get the idea a Max width of 1,000 pixels using the square brackets for the uh custom value an MX of Auto and a Max uh sorry and a width of full a font semi bold and a text of center now this one is going to say features for everyone uh and once again we can see that show up there so that's kind of how we're moving onto the second page and then underneath this div we can create a new div that has a class of grid grid calls one that just means it's a singular column until we get to a medium screen then we're going to see grid calls uh two we'll give it a gap of 10 until the medium then we'll go for a gap of 14 and then on a large we'll go for a gap of 20 width full Max width 1100 pixels actually I might not do the max width for the second let's just see how it looks but we will give it a relative and a text size of base and now in here what we're going to do is we're going to have each uh product features as uh product feature we'll just do the singular version and this is once again going to uh map over each product feature and have the card for it now we'll close that each block and for this we're actually going to define a component called the product card. spelt and in here we're going to open up a script tag and we're going to say export let index just so we know what the index is and in here we're going to create a div that has a class of Flex Flex call a gap of eight until a medium screen then we're going to have a gap of 10 uh and the other thing I'm actually going to do is copy this div right here and paste it inside this component because it's actually meant to uh wrap that bottom one so I'm also going to paste the closing tag on the other side so I'm just moving that whole div into this component the other thing we're going to export let is the product features uh what it's actually just a singular product feature and we'll see how that will work in a minute now the first thing we're going to have inside of here is an H4 tag this is going to have a class of text 2 XL until a small screen then it's going to be a text 3 XL medium text 4 XL a Max width of 1,000 pixels uh a width of full font medium and a relative positioning we're going to use some pseudo effects here so we're going to say after and give it an absolute position after top of full after lift of zero after width of 1/5 of the parent element after a height of 1.5 after a margin top of one after background slate 900 and after PR uh well actually sorry that's the last one is just a general PR of 10 so padding right of 10 inside of this H4 we're going to render out the slot uh text uh and we'll see how that works shortly after that what we're going to do is uh have a paragraph and this is going to say product feature and we're going to access the description and then underneath uh this div right here well actually sorry still within it uh we're going to have a secondary div and this is going to have a class of flex Flex column and a gap of three uh and in here we're going to have a new each and this is going to be product feature. featur list as list item uh so we're just mapping over all of the feature list we'll see where this gets created shortly and in here we're going to have a div that has a class of flex a gap of two and an items Center and then we're going to have a div that has a class of grid Place items Center a padding X of 1.5 text size of extra small until the small screen then it's going to be a text of small it's going to have an aspect of square which means that the height will match the width we're going to give it a rounded of full so it'll be circular a border of uh 1.5 pixels so that's a custom amount so we use these uh square brackets a background of white a border solid and a border of green 300 we're doing all of that so that inside we can have an icon so that's going to have a class of fa solid fa bolt and a text of green 400 uh underneath this div just here we can have a paragraph that has the list item uh now obviously that's not going to show up for the second but if we come back into our product feature we can go ahead and render out the product card ensuring that we do in fact have the opening and closing uh product card features in here we're going to pass in the product feature equals product feature so we'll pass that down as a prop we're also going to pass down the index uh which we can just access by adding a comma here and just access that index now you'll see just here we have the shorthand for passing props that's uh absolutely fine that works too and in here we're going to have an if statement uh so we're going to say pound if and in here we're going to add a semicolon and an else if and then we're going to have another else block and we'll see what we do with that in a second well actually we can just add it now this one's going to be uh if index is equal to Zer else if index is equal to 1 and then else so we just need three conditions cuz we're going to have have three product features now for our product features we're going to come to this array and create uh three objects now the object template is going to have a let's see what we access so here we're going to have the feature list and a description and an image so we're actually just going to have feature list that's an array description is just going to be a text description and then we're going to have an image URL that we uh use for the feature list uh once again you'll want to copy this straight from the GitHub code uh I'm just going to copy in the three features here so here we can see them uh well it's a list of four I guess you could say and I'm just going to format them all simultaneously so there's my first feature list uh as for the description for the first one it is just here I'm going to paste it across and then finally for the image URL we'll come back to that momentarily now we can just duplicate this three times cuz we've got three of them for the second one I'll just copy in the the new features so here they are just here quickly format them so that they are all strings in the array that's the second one we'll swap out the description happy days and then lucky last this one just down here so here's the description and this one actually has five features uh actually this one is not meant to be there and so we can just go ahead and select all of these we can have the quotation then the comma and just have that like there so there are our three featurist now back down here when we have the product card uh for the first statement I'm going to have some text so this is going to get rendered as the slot inside of the uh card just here and the reason I've done it like this is so that I can actually give it some neat formatting so this first one's going to say experience a beginner exercise uh and then we're going to have the span with a class of text and 400 and a font of medium with the word master and then we can just have class for the second one we are going to have uh lay the foundations for uh and then same again span class text Indigo 400 font medium uh routine and after that we're going to have have a break and then and consistency and then finally for the last one we're going to say workouts specific to your uh then span class text Indigo 400 font medium and then that can just say environment and uh then we're going to have a secondary span so we can just copy that first one environment and expertise and that's just going to check the index and render out the appropriate one as the slot component so there we can see it actually showing up it looks pretty decent obviously we're missing the images uh but that will happen in a second but on the whole that looks pretty good I might actually just get rid of this little break right here I don't think that we need it uh but we should include the space so that's looking pretty nifty for the images we're going to come over to the static file and we're going to create a new folder called assets uh and I'm going to go ahead and copy the images straight in and once again you can find these images in the GitHub which is linked in the description down below so I'm just going to copy them across we have the three images and so now in our little list for the first one we can just say assets SL uh let's say selection.png the second one will be assets SL uh training.png and the last one can be assets. gooal assets do/ go.png now we're not actually rendering out the image and the product card yet so we have to come back to the product card component and after this each just here we're going to create a div that has a class of flex item Center and a and that should actually be fine uh and in here we're just going to have a button that has a class of uh special button dark we're going to give it an mL of Auto actually I li I think that's meant to be an MR of Auto so margin rate of Auto a font of semi bold and inside of this button we're going to have a paragraph that just says try free today and then we have the Ampersand right arrow so we can see that button show up for each of them uh we're also just going to come up to this div right here this top one or the second top one I guess and we're just going to select that class and make it Dynamic so we're going to say plus index remainder 2 is equal to 1 so that means that it's an odd value if it's odd we're just going to set the order to two uh and that should set it to the other side when we add in the image div so on so the second to bottom div we're going to come on here and we're going to create a new div this one's uh pretty nifty cuz it's going to create an application looking feel so this one's going to have a flex Flex Co drop shadow overflow of headen a rounded bottom of large and a medium uh actually this is the this is the one right here so this is just going to wrap this one in parenthesis and just uh add this check down here so we're going to copy that check just out of the top one uh and instead paste it into this div just here and we're actually going to say if the order is equal to yeah if it's odd then the order is one that's absolutely fine so now we can go ahead and create that div we're also just going to have to create this drop shadow uh class so we're going to come back into our app.css and use the period and then the class selector and then in here we're just going to have a filter it's going to have a drop shadow and it's going to be minus 10.89 23 pixels uh then a 14.52 3 pixels and then a 35.0 973 pixels and then an rgba of 29 140 comma 242 and then a 0.2 so with that done we can come back into our product card here we have uh this div right here inside of it we're going to create a div which is going to like pretend to be the the action bar at the top and that's just going to have a class of rounded top extra large a height of eight until we get on a small screen we're going to have a height of 10 a background of white an opacity of of 60 a padding X of three and then we're going to say Flex items Center and a gap of two and in here we're once again going to use the each we're going to create an array that just has three indexes and we can just call this I and in here we're going to have a div that has a class of rounded full it's just going to be a circle so we're going to say aspect square a width of 2.5 until we get to small screen then it's going to be a width of three and it's going to have a background of indigo uh 300 this can just be a self-closing div if we look that creates this little bar up here that just looks pretty nifty and then underneath this div we can have a secondary div that has a class of flex Flex call a background of white a gap of four and a flex of one and this can have an image that has a source of uh a dynamic source so we use the curly braces this is going to be product feature. image URL uh I can and it can have an ALT equal to uh product image just like that uh and we can go ahead and close that image and so now the image shows up in our application next to each one looks like the order is not swapping so something is being a little bit mischievous with the order and so perhaps what we uh just quickly try doing is uh it's cuz I've got the two pluses I think is the problem um and I'm actually just going to try try pasting it back up on our original div just up here and instead set the order to two uh and that looks like it's worked for us so now we can just see we have like an alternating uh product description so here we have the first one uh then it swaps over to the other way around and then finally it swaps back on top of this uh div that has the information I might just add a padding top of uh eight and then on a small we'll just add a padding top of 10 and what that's going to do is just push it down so it looks like the uh this just sits slightly higher than the rest which is pretty cool and obviously if we come down to uh this screen size it looks pretty good the one thing I'm just going to do is make this a medium screen and above only effect because we don't really want swapping on a mobile layout but otherwise that looks uh super cool that looks very clean so we can kind of just scroll through all of them uh which is really nice and we've got all the images so with that done it's time to move on to the next section uh and that is going to be the reviews section so as always we're going to have our section wrapper open that up and in here we're going to have a div of class Flex Flex call Gap of 10 small gap of 14 medium gap of 24 a padding y of 20 a flex one item Center and a justify Center inside of here we're going to have another div that has a class of flex Flex call and a gap of two uh and up the top we can have our paragraph similar to the last one this is going to have a class of opacity 60 text base uh until the small screen then it's going to be text large and then on a medium screen we're going for a text extra large and a text Center and in here we can say Don't just take our word for it and then underneath that we can have uh the H3 this has a class of text 4 XL small text 5 extra large medium text 6 extra large a Max width of 1,000 pixels and MX of Auto a width of full and a font semi bold and a text Center and in here we can say see what uh then have the span the classic span with a class of text Indigo 400 and then we can just say others and then we can finish it off by saying have to say and I believe that should be exactly the same as what we did in uh this component just here it is indeed perfect so if we keep scrolling uh we see nothing thing in this because we have to bring in the component just in here reviews import that and you can really start to appreciate how tidy uh the main component is looking at the moment so here we have it don't just take out word for it see what others have to say now in this component the other thing I'm going to need in this reviews component is uh some actual reviews so I had Google bard generate a whole bunch of them and I'm just going to copy them in here I'm going to say reviews list is equal to uh and I would just go ahead and once again copy these straight from the GitHub so here's all the reviews they have uh name review and then some features the other thing we're just going to have to Define up the top at uh just up here is we're going to say let limb equal equal to True uh we'll see what that is for in a second but that's just a variable that we need to Define um or essentially some State I guess now coming back down inside of our uh list underneath the H3 and the div here we're going to create a new div this is going to have a class of flex Flex col until a medium screen then we're going to have a flex of row a gap of eight a width of fit and an MX of Auto and here we're going to have a div with a class of flex Flex coal we're going to match the gap of eight and we're going to have an each uh that just says each and then we're going to have a conditional statement so it's going to say check if limit is true if we are limiting then we're just going to say reviews list. slice between 0 and four so we're going to take the first four elements otherwise we're just going to take the whole list and we're just going to say uh as review item and inside of here we're just going to create a new new file it's going to be review card. spelt and the review card is going to have a little bit going on inside so we're going to have a script it's going to have uh export let and we're going to need to import the review item so we can just uh import export let the review item just here and this is going to have a div with a class of flex it's actually going to be dynamic so first we're just going to wrap it in the curly braces it's going to be Flex uh Flex Co a gap of two a wi full a Max width of 500 pixels custom amount so the um Square parentheses and then an MX of Auto and a position of relative now as for the part that we're going to add on which is the conditional ensuring that we have that little space at the end of our string this one's going to be slightly complicated so the first conditional is we're going to check if left exists uh so we're going to need to export let left and left just checks if it's on the left hand side of the two columns if that's true we're then going to check if the index remainder 2 is equal to one which means that it's odd and if that is true then we're going to add the class of headen until a medium screen then we're going to give it a display of flex an opacity of zero a pointer events none and a Max uh height of 40 pixels so it's a custom amount so we use the square parentheses uh and finally an overflow of headen if not we're going to have uh an empty string just there and then if not to the bigger condition we're then going to check if the uh index remainder 2 equals to zero if it does we're going to give it the class of headen medium flex opacity Z pointer events none a Max height of 40 pixels uh and an overflow of hidden and we'll see what this does more in a second and then we're just going to have otherwise nothing uh so that's a pretty complicated little class we're also going to just need to import uh export let the index value uh but that's going to be the class just there inside of this div we can have a new div this has a class of flex and a position of relative that's pretty easy and then we have another div inside of here this one has a dynamic class as well so we use the curly parentheses this one's going to have a position of absolute rounded full a background of white an aspect of Square uh it's going to be hidden until we get to a medium display then it's going to be a grid we're going to place items center it's going to have a height of four and a top of zero uh and then what we're going to add is a plus and then we're just going to check if the index remainder 2 is equal to Zer and if it is we can give it a right positioning of zero uh a negative margin rate of 8 a translate X of half and otherwise we can give it a lift of zero a minus m l of 8 and a translate X half but this one needs to be a negative translate X half so it goes in the other direction inside of here we can uh go ahead and add another div this is just going to have a class of rounded full a background of slight 950 an aspect of square a BG slate 950 and a height of two and this is going to create a small circle in the middle basically after that div uh but within the flex relative div we're going to have a another div and this is going to have a class of flex and items of Center and a gap of two and this one is just going to have an icon with a class of fa solid fa user and then we can go ahead and close that icon and after that we're going to have an H3 this one has a class of text large a small text on the small breakpoint a text of extra large and the medium a text of two extra large inside of here we can just render out the review item do name uh which is one of the parameters and then after these two divs we can have a second div this has a class of height of 1.5 pixels a BG of slight 950 a width of 1/4 a margin right of Auto a margin bottom of four and a margin top of two that one doesn't contain anything but after that we can have a class of another div with a class of flex item Center uh Flex wrap a gap of two a text extra small until we get to the small screen then it's going to be a text of small and a margin bottom of four and in here we're just going to use the each block to uh map over the review item do features is that what it's called review item. features let's just check yet is features perfect uh and we can just say keyword and inside of here we can have a div that has a class of padding one but a padding y of 0.5 a rounded medium we're going to give it a border border solid border Indigo 400 a background of indigo 50 and a text of indigo 400 and in here we can just have a paragraph that contains the keyword so if we save that nothing is still showing up we could actually go ahead and just uh import the review card uh and we can go ahead and paste or pass down the review item prop just like that and then that can be a self- closing tag if we just come back into the review card real quick we'll just finish that up underneath this one we just have a paragraph and this has the review item dot review which is going to be the actual review so that's this element done and now what we're going to do is inside of this thing here we're going to uh duplicate this so we've got two instances of them in the middle we're going to create a div that has a class of width Uh custom width of one pixel a background of slate 950 and a hidden until we get to a medium then it's going to have a display of flex uh and in this top one what we're going to do is we're just going to pass down left equals to true and we're also going to pass down the index into all of them so for both the these ones just here we're going to take the index and make sure that that gets passed down but only the first lot of review cards actually has the left equals true and that's going to create this effect so this uh one just here is the line in the middle uh the reason we do two lots is so that on a small screen we can have them one at a time and they both they all don't get displayed however on the big screen it just splits them into two columns uh we have the little benefits that they experience and then at the very bottom of this element we're going to have a button just here this is going to have an onclick event of uh it's going to set limb equal to not limb so it's just going to inverse that parameter and this is going to have a class equal to special button and inside of this button we're going to have a paragraph tag so there's our paragraph it's going to have an a conditional so we're going to check if limb is true if it is we're going to say show more otherwise we're going to show less just like that and so now at the bottom we get this little button that if we click show more it just shows more reviews and if we hit show it just removes them so that looks pretty nifty finally after the button we're going to have another div this is going to have a class of flex Flex Co and a gap of 10 uh at the top we're going to have a paragraph that has a class of MX auto text large small text extra large medium text 2 XL and a font of semi bold and in here we're just going to say trusted by 1349 swales and then underneath this we're going back to the header and we're just going to copy this uh well actually why don't we just create a component for it at this point stars doel where stars. is just going to have the uh review component that has all of the cool stuff so we can just go ahead and copy that into uh stars. that actually shouldn't be a component so I'm just going to delete that sorry it shouldn't be a folder it should be a file Stars dosf we're going to paste that in there and then we can render that inside of our hero section as well as at the bottom of our reviews just underneath the paragraph right here stars make sure that's imported up the top and now we have trusted by the swallers and the number of reviews down the bottom looking good uh now with that section done we move on to the next one the next one is frequently asked questions this one's pretty straightforward uh as always the first thing we do is come into our page. spelt and just render it out fa aqs and then what we can do is come into reviews for example and just copy uh this first stuff right here so just everything until the H3 pretty much and we can come into FAQs and just paste that in ensuring that we import the section wrapper and then we can just go ahead and close everything uh so just so that's going to import that and then we can just change the text so the text here is going to say for all your questions qualms and queries and then the big text is just going to replace all of this and it's just going to say frequently asked questions and then under the uh div right here we're just going to create another div this has a class of flex Flex call a gap of eight until we get to a small than a gap of 10 a medium a gap of 14 and a width of full and in here we're going to have another each block uh and this is just going to take the fax as an individual FAQ we're actually going to need the FAQs up here that's just going to be a list uh I'm going to go ahead and once again copy in the frequently asked questions these are just randomly generated by Google b as well you can copy them from the GitHub but it's just a question and an answer basically and inside of here what we can do is have a div this has a class of flex a flex call a gap of two text left uh a Max width of 800 pixels custom amount a width of full an AMX of Auto in a position of relative just underneath this div we're going to have another one this has a class of absolute a top of zero a lift of zero a width of a third a height of one pixel a background of slate 950 and a minus translate X of 4 we're going to duplicate this element except this one is going to uh have a height of 2/3 so we can go ahead and swap the width for a height change the one to a two and then just have a width of uh 1 pixel and a minus Translate Y four that's just going to create a neat little effect underneath this div we can have an H4 this can have a class of text large until small than a text extra large medium text 2 XL and a padding top of two and in here we can just take the FAQ do question and then under that we can uh have the a paragraph that has a class of padding left of two and this can just have FAQ doans the answer is actually just a ANS so that's going to change that uh and it looks like I'm missing a padding so inside of here we're just going to have a padding of four uh and a padding X of six and that's just going to give us this uh frequently asked questions display with this neat little Top Hand border effect and once again if we come onto a mobile device that's still pretty look that's still looking pretty nifty just down on the side so with that element done we don't have far to go the next one is going to be our conversion now this one's just going to have a custom section so it's going to have a class of padding y 14 until we get to a medium then it's going to have a padding y of 20 a flex Flex column a gap of 8 uh a background of hash 18 1 b34 uh close that square parenthesis cuz that's the custom amount a text of white text Center item Center and justify Center lots of centers and here we can have an H4 this is going to have a class of text extra large small text 2XL medium text 3XL and a font of Poppins this is going to say reach your Fitness then we'll have a span with a class of uh Poppins and font bold uh and this can just say goals and aspirations underneath that H4 we can have a secondary paragraph This also has a class of Poppins a text base until a small than a text uh large and a medium text extra large and this is just going to have a special star Unicode uh that you can get in the GitHub and then we're just going to say unlimited time on free plan and then we're just going to have another one of those Stars finally under there we're going to have the call to action so we'll just import that up the top uh and we're going to pass in a dark equals true parameter which if we come into our call to actions we have to export let dark we uh prepared to have this earlier and what we're going to do is we're just going to add a custom styling to this top button right here so we can just wrap special button in the curly parentheses and then add on a dark check if that's true if it is we have a background of # 18 1 b34 and otherwise we don't change anything so that's going to be the conversion now we just have to add that in here so we can add in conversion uh and obviously we have to save this component and that's just going to bring up this little conversion element right here where we've got our call to actions and then finally underneath that we can have our footer component this one's relatively straightforward and is going to get rendered out inside of the uh layout do felt which it already is and this one's just going to have a footer that's going to have a class of padding y 16 small padding y of 20 medium padding y of 24 a px of four until we get to a medium then we're going to have a px of 8 in here we'll have a div that has a class of Max with 1200 pixels custom amount Square braces you know the deal an MX of order a width of full display of grid grid calls one until we hit a small screen then we're going to go grid calls 2 on a medium we'll go grid calls 5 we'll have a gap of eight and a text size of base and here we're going to have another division this will have a class of flex Flex col a gap of four and on a medium screen we'll say col span 2 uh this is going to have an H1 with a class of font semi bold this is going to be the name once again so we can just go ahead and copy that from the header uh swally moolly just like we have here paste that bad boy in there and then underneath the that we're going to have a copyright symbol 2023 uh and then we're just going to say swally Molly as if it's the business name LTD uh All Rights Reserved now after that division we're going to have another one that's going to have a div of class Flex Flex call a gap of four uh up the top here we're going to have a paragraph with a class of font bold Poppins text base until a small then it's going to be a text large this one's going to say support and then underneath that we're going to have an anchor tag that has an hre uh a target of underscore blank uh and it's going to have a class of cursor pointer hover text Indigo 400 in a duration of 200 and in here we're just going to say contact us pretty straightforward and that's just going to have a link to whatever contact us section is appropriate for you uh with that one done we're just going to copy this entire div after that we're going to have another one this one's going to say research uh and then we'll just say read the science behind the training or whatever it is uh we'll have another one underneath that that's going to say follow us oh there's a spelling mistake just there research this one's going to say follow us uh and in here we say Instagram uh and just above that we could add in an icon this is going to have a class of fa Brands if a instagr and a padding right of two we can go ahead and close that that should bring up the Instagram link you just want to add in the Instagram link right there and then we can just duplicate this anchor tag a couple of times so you could have a YouTube uh you just want to swap out the brand icon we could have a Facebook uh and once again swap out the Facebook uh and lastly you could do a Twitter and now if we save that we uh get this neat little footer down the bottom which looks pretty cash money if I do say so myself it's got all our links uh read the science and it looks like I've spelled Indigo wrong on pretty much every single one of them uh because ideally if we hovered over it we would want it to change color to the Indigo so now if we hover over it we can see that it does in fact turn Indigo and if we jump down to the mobile device screen uh it works perfectly well too and looks nice and neat so that's cash money so we're almost there now there's just a few more things we have to change the first thing is uh in our section wrappers for a lot of them we haven't yet added the uh ID like we were supposed to so up here we have an IDE of project and reviews uh let's actually just go to the header so where we have our nav links reviews is going to take us to reviews and FAQs is going to take us to FAQs so on each of them we're just going to come up to the section wrapper and add in the ID equal to reviews uh copy that whole thing likewise in the faq's we can add that to the section wrapper faq's and what we would expect to do is when we hit reviews it slowly Scrolls us down to the reviews uh the product one is not working header product let's just check product project that's my issue so that Scrolls us down to the product which is pretty nifty our FAQs takes us down to the FAQs the next thing we just want to work on is the uh menu currently that does absolutely nothing which is not so hot flash uh but actually first we're going to come into the layout real quick and just do some pretty clever stuff in here so the first thing we're going to do is underneath the photo we're going to have a spelt uh tag that checks for the window and it's going to bind scroll y equal to a variable called Y and it's also going to bind outer height now we have to make sure that we uh self close this component just here and up inside of the script we can go and initialize y uh we can by default create a reactive statement that sets letter outer height equal to Zer and what we're going to do from within here is create a function that's just just uh reroute uh taking an href and we'll see what that does in a minute uh the other thing we're going to do is create a store now stor is for Global state it works absolutely brilliantly inside of our spel kit we're just going to create a new folder it's going to be store in here we're going to create a file called index.js and the way that you create a global store in spell kid is we're going to to import writable from the uh spelt store we're going to lowercase writable and then we're just going to say export const open model is equal to writable and we're going to initialize it as false so this is essentially our Global State literally so easy inside of our script we're going to import open model from do/ dot dot SL store just like so and now what we can do is uh just above the slot right here we can have a variable that says F uh and we check the reactive value of the store store state by using the dollar sign and then we just have open model we can close that and this is going to be our menu page that's just going to lay over our entire page should we need need it inside of here we're going to have a div that has a class of fixed a top of zero a left of zero a width screen height screen a border bottom a background of white a zed of 50 Flex a flex column a gap of eight a padding of five but a padding X of eight inside of that we're going to have a div that has a class of flex item Center justify uh between and that's going to have a gap of four a border bottom uh and a padding bottom of two this is going to have our classic um header logo so we're just going to copy that H1 and come back into the plus layout. P paste that in there and then we're going to have a button that has a class of outline none border none and in here we're just going to use the close icon so that's going to be an icon with a class of f a solid F ax Mark and a text too extra large uh So currently nothing happens because our model doesn't open if we come into the header element just here uh we can create a function that opens our model so we can import our open model from do/ store and now on this button right here we can say on click uh we can just create a function it gets the reactive value of the open model and it just sets it equal to true so what we would expect to see is when we click that it it basically opens our model uh looks like the close isn't currently working let's go and investigate that uh open modal and that's cuz we haven't assigned it so on the X Mark we just want to do the opposite on click it's going to set the reactive value of the open model equal to false so now we have a working menu system which is uh super convenient the other thing we want to do is just uh on a medium or large lar screen we want to set hidden on this element because uh if we have it open for example we want it to then close on the bigger screen so after the button and the div we're going to create a new div that has a class of flex a flex Co and a gap of four and here we're going to have a button with a class of Border nonone outline none a padding of two uh it's going to have a group a duration of 200 a cursor of pointer and a text of left uh this one is going to contain a paragraph that just says product and this one's going to have a class of duration 200 and when the group gets hovered we're going to give it a padding lift of two uh what we're going to do in here is add an on sign I mean sorry an on click and that's just going to be the uh what's the function we defined up here reroute it's going to pass in the href and we can just pass in the hre being product uh and now we can go ahead and duplicate this button maybe three times so the second one is reviews uh reviews and lastly we can have FAQs and FAQs underneath that we're just going to render out the call to action so just make sure that that's imported up the top and now we can kind of see this uh showing up just here the other thing we want to do is increase some of these font sizes and just give uh this element here a flex of one that should push these to the bottom and we're also going to wrap the call two actions inside of a div that has a class of flex Flex call uh items Center justify Center just so so that these elements are always centered here you can kind of just see that there well you can't on a medium screen but yeah they're just centered in the middle and then in each of these uh elements right here we can go ahead and give it a class of Poppins text 3XL and a font semi Bold and the other thing I'm actually going to do is come in here and just have an icon that has a class of if a solid if a shevron dasr and a text XL and a padding left of four uh and that can just be a self closing icon and so now we get a little menu uh that looks pretty decent open it up and if we uh close it it doesn't currently do anything and that's cuz this function doesn't do anything uh and in the function we're simply going to set the open model value to false and we're going to say window.location.href is equal to the hre that we receive uh so now if I click it it Scrolls us down to the appropriate section now the last thing we need to do is obviously this menu goes away when we scroll uh it looks nice on the first page however we've got a sneaky solution that looks even cooler for the rest of our application underneath this open motor right here we're going to have one more if block uh this is just going to say if Y is greater than outer height so outer height is a variable that we defined earlier uh just here and essentially how outer height is going to work is that's just going to say if we've scrolled more than the original page height so if we've left the header section behind then we're going to have a div that has a class of background white fixed top of zero left of zero a width of full Flex Flex coal a zed of 20 a padding X of four and we're going to give it a class called fade in and in here we're going to Rend out the header element now we quickly just have to create the class fade in it's uh pretty straightforward we just say fade in and this is going to have an animation uh called fade in it's going to be 300 milliseconds we'll give it an ease in and we'll say forwards so that it sticks around and in here we can just create a key frames event called fade in and that's just going to say from uh and here we're going to give it an opacity zero and we're going to say two and that's going to have an opacity of one and so now as we scroll down our page our thing goes away until we should be hitting the uh page I obviously haven't saved this there you go you see it show up so no header and then as we scroll it shows up and we always have our menu there to take us wherever we need to go we've got our fa FAQs we've got our contact Section down the bottom honestly it looks super Nifty super neat great for conversion we can see all the reviews we can show more looks really nice and tidy in the middle of our page and as we go on a bigger screen we can see that uh we split the reviews into two sides our nav links work up the top that's absolutely perfect that routes us back to the homepage and you should be able to make absolute bank with this layout and just like that we have our absolutely filthy web application and with that done it is finally dep time to deploy our application for that we're going to come over to netlify now you will need to log in and or create an account if you don't already have one now the other thing you'll just want to do is make sure that this code is uploaded to your GitHub to deploy it because we're going to deploy it through GitHub and we can do that by hitting add new site and we're going to import an existing project now you're going to want to hit deploy with GitHub that will open up a GitHub authorization window and then you'll be able to search through your repositories right here if you don't yet have one you can go ahead and configure the uh nfy app on GitHub and that will allow you to add that repository to have it deployed now that I have configured it so that it is visible I can go ahead and search for the gym landing page it should automatically detect what type of project it is and we can go ahead and hit deploy that's going to do its best attempt at deploying our project we can see that the deploy is in progress while that's deploying we can just come into the domain management right here and we can go ahead and edit the site name and this can be swy moly uh we could probably just make it one word and we can hit save on that and that's just going to mean that the URL we can share with everyone is swy molly. nafi. apppp if we come back we can see that it is fully deployed so I should be able to paste that in up here and just like that we can see that our uh project is undeniably live it looks absolutely brilliant and it's going to convert all the features and functionalities work perfectly and congratulations you now have an awesome learning page that you can use for absolutely anything and add to your portfolio and with that my friends that is the whole tutorial thank you guys so much for watching if you've enjoyed the video smash the like And subscribe buttons I appreciate that support and finally go make some changes to it customize it personalize it add your own flare change the product that's being advertised and share it in the Discord I would love to see what you guys come up with thank you so much for watching and I'll catch you guys in the next one peace learning to code if so be sure to check out the small James web development road map link is in the description down below or dive straight in with these videos