"WEBVTTKind: captionsLanguage: enLearn how to create a custom blog with HTML and CSS in this full course from Julio codes.  What is going on everybody? My name is Julio in in today's lesson, you will build a responsive  website from scratch. Before I give you an overview of the project, I want to thank  recode combat org for Lendy media platform and allow me to share my knowledge with you today.  Now let's take a look at the project that you will build. First, let's go over the header.  The header section holds the navigation and all of its items. Here we have the theme toggle button.  This button will transition the color scheme into the light theme. We will use JavaScript to store  the theme selection within local storage. This means that your theme selection will  remain active even if you close the page or the browser. Then we have the Search button.  When clicked, a pop up will be activated in the search bar it will show you have two options for  closing the pop up, you can either click on the Close icon or hit the Escape key on your keyboard.  Moving on, we have a sign in and sign up button. These buttons  do not lead anywhere. But if you wanted to build upon this project,  you could create pages with these buttons. Also, we have a cool hover effect on the signup button  where some of you this might look familiar. In fact, the entire dark theme might look  familiar. And this is because I use code pen AIOs its color scheme for inspiration.  Then we have the main section. This section will be a grid that is split into two sides. Here we  will have nested grids as well. On the left, we will utilize grid to position the items in a way  that will allow us to create a really nice looking layout. Then on the right side, we have a sidebar.  If we come down here we have the quick read section, we will utilize a JavaScript library  called Swiper. To create a responsive carousel Swiper has many functionalities. However, we will  only be taking a look at responsive breakpoints, and how to make the arrows in pagination work.  Then we have the older posts section. This section is composed of six cards, though,  you could show as many as you wanted. So is the bottom you have the See More button. And  this button would allow you to either show more posts or navigate to a specific page.  The next section is for the popular tags. This section is composed of six cards. Ideally,  when clicking any of the cards, it would take you to a page where you would see  posts specifically for this category. Then we move down to the newsletter section. Here  we have a call to action, prompting users to subscribe to the newsletter if they wanted to.  Then the last section will be a modern looking footer. I also wanted to show you the second page,  the blog posts page because aside from the landing page, it would only make sense that  we also build a blog post page to access this page. Let's go back up to the first section.  Then we can click either of these three main cards. Although the page for the post is basic,  you have a lot of room here for making this page more complex if you want it to  let's go ahead and take a look at the responsive view.  Let's start with the navigation. Then let's scroll down and take a look at the rest of  the layout and how it changes and yet just with the width of the viewport.  Lastly, I wanted to point out that I have a YouTube channel of my own.  If you enjoy this type of content, be sure to give me a follow. Without any further ado, let's begin.  Let's quickly go over the files that you're going to be getting.  So if you go to the link listed in the description of this video,  you're going to be able to download the completed files as well as the starter files. I decided to  include the completed files just in case we run into issues. And this way you can just compare the  code. Now I'll just close this and then go inside of the starter files. So if you plan on following  along, make sure that you pause the video and grab the assets and once you're ready, let's begin.  Let's begin by going over what we have here within the index html So this is just the basic  html5 template. Here, we link to the fav icon, which is this little icon that we have here.  Then down here, we link to the remix icons, which is the icons that we are going to be using.  Then we link to the Swiper. J. S CSS file. And then we link to work on CSS.  Inside of the body here, we just have several comments for each individual section. And then  we do the same thing down here, instead of linking to the CSS, we just link to the JavaScript files.  So the first thing that we're going to do here is go inside of the header. Actually, let me open up  this project with live server first, just so that we can see the changes as they happen.  I'm also going to keep the completed project here opened, just so that we can use it as a reference.  So first, let's tackle the header. And inside of the header, we just have the navigation and all  of its items. So we're going to use the header element, then we will apply a class of header  as well as an ID of header, the ID, I'm only going to be using it so that I can select this element,  as well as other elements through JavaScript, you can do this with the class and even the tag name.  However, I opted out to use the IDS instead for this purpose. Instead of the header, I'm going  to use the nav element, I'm going to apply the class of nav bar, as well as a class of container.  The container class will limit how wide a particular element is going to stretch to inside  of the nav, I'm going to have a logo, so I'll use an anchor tag, I will point this back to the index  html. And then inside of it, I'm going to have an h2 that will have the class of logo and the  name of the website. Then I'm going to have a div with a class of menu, as well as the ID of menu.  Inside of this div, I'm going to have a UL with a class of list. And then inside of it, an LI  with a class of list item. And then inside of the list item, an anchor tag with the class of List  link. So now that we have the base for the list items, all I have to do is just copy this  and paste it down below as many times as we need. So we're just going to set up a few for  now and then we'll add the rest later. Also, the main reason why I'm wrapping this list inside of  this menu is because it's going to make the reset when we transition from mobile to larger screens  a lot simpler. So for the first one, we also want to add an additional class of current,  since it will be highlighted in this will be home. Then we have categories.  Then we have reviews, news, membership,  contact. And then here we have the Sign In link. And we need one more or sign up.  I also want to add an additional class here, this class will be screen LG hidden.  And I'm going to apply this class to the sign up button as well. So the main reason is because  these are the links that will show up within the mobile navigation that you see right here.  So these are normal links. And then when we get to the larger screens, we hide them from here,  and then we show the fancy ones instead. So let's go back here, make this smaller. And I'm probably  going to give myself some more space. So I'm going to close this sidebar here by using Ctrl V,  just like so. Now something else that I want to do is I want to now exit this menu div,  and underneath, I'm going to add the rest of the buttons that we have here.  So to do so let's find the closing tag for this menu div. And underneath, we are going to have  another div. This one will have the class of list as well, because I want to share some of  the styles without having to override the existing styles for this link for this list, I should say.  So that's why I'm also going to give this the class of list right and in here we are just  going to have a lot of buttons. So we're going to start by using the button element. And we  will apply the class of btn a class of place items center and then an ID of theme toggle between In  and inside of here, we will have two icons. So the first icon will have the class of awry  Sun line, then I'm going to add a secondary class just so that I can manipulate this element  by using this secondary class. So I'm going to call this sun icon.  Then we're going to duplicate this down below, and we are going to edit it. So for this one,  we can say Moon icon. And then we can change sun to moon as well. And if we go back to the  original project here, you'll see that the button is now visible, and we have the two icons that we  want. Later on, we are going to hide one of these icons so that only one is visible at a time.  So now that we have the base for the buttons, what I'll do is go ahead and copy this. Again,  let's just be a little bit lazy here. And then I'm going to modify this element to fit our need. And  for this one, we will have the search icon. So this can remain the same. The only difference  here is that we're going to get rid of this ID. So instead of this ID, we're going to use search  icon, just like so. Or we could even do search icon btn, it doesn't really matter.  Then in here, we can go ahead and get rid of one of the icons, since we only need one. And then we  can go ahead and change the class. So this one is going to be Ri search line, just like so.  And now we get the other button. So we need  one more here. And this button is going to let me actually copy it again.  Then I'm going to paste it below here. And here, we're going to have to make some changes as well.  So for this particular button, I'm also going to add a class here of screen,  LG hidden, because I don't want to see this particular button on larger screens.  Since the menu is going to be fully visible. I'm also going to add a class here of menu Hoggle.  icon. And then for the ID, we can just go ahead and change this as well to menu toggle icon.  We will also have two icons in here. One is going to be for the hamburger menu,  and the other one is going to be for the x. So here, we can just go ahead and modify the classes.  This one for the hamburger menu, we'll have the class of arrived menu and then three line.  And that's already going to show up there, then we need an additional class called Open Menu icon.  Then what we can do is copy this and replace the one below it and then make changes here. So we can  change this one to close. And then we can get rid of three and make it so that it says close line.  And then here we can change open to close, just like so. Finally, we need the other two buttons.  So that would be the ones we have here that we are going to show within the larger screens.  And to do that we are going to be using enter tags. Instead,  the anchor tag is going to have a class of List link. Again, because I want to share  the same styles that the list links have. Then I'm going to have an additional class of screen  as some hidden and this is going to do the opposite, which is just going to hide  this particular item on smaller screens. And then here we can say sign in  and then copy this underneath. And here we want to add an additional class  of btn and then sign up BTN. And we'll also add a class here of fancy border just like so.  And inside of here, we are going to copy the text, then remove it and then place a span inside of it  followed by the text. And this is going to be pretty much it for the navigation.  So the next step would be to go inside of the CSS file so that we can make this look a lot  better. So let's go inside of the assets, CSS and then main dot css Here, it's going to be the same  deal. We have several comments for each individual section. And then I'm importing the Google Font of  Poppins that we're going to be using. So let's go ahead and initialize some custom properties  inside of the root pseudo class. And this just means that any variable that I initialize in  here is going to be available for use within the CSS file. So think of it as global scoping. As far  as the naming convention, you want to start with two hyphens, and then the name of the variable. So  I'm going to call this one light color, just like so. And then we simply store the value  of the color that we want. We will have another one, this one will be the light color, Alt,  and then they will have the following hex of a FB, six C, D, then we will have another one down here.  And this one is going to be for the primary background color.  And it's going to have the following revalue. So this one is going to be 1314,  and then 17. And that's pretty much how it goes. But let me just demo quickly. Something like  for example, if you wanted to store a font, in this situation, let's say that this is the font  family variable that I want to create. And then I just simply do the same thing that I normally  would and store the value of Poppins. And that's pretty much all there is to it. Now, I don't want  to bore you by having you watch me type every single one of them. So I'm just going to speed  up the process. And then I'm going to include all the imports, as well as the custom properties  within the starter files, just to make it easier for you to follow along. So I'll be right back.  Alright, so now that the custom properties are set, let's go ahead and apply some base styles.  In here, what I like to do is that I start by using the universal selector,  then I go ahead and I apply a margin of zero, a padding of zero, and then the box sizing,  I set it to border box. And this just makes it so that the math when sizing  your elements is going to be a lot simpler, since everything such as borders, and paddings  is going to be calculated on the inside of the element as opposed to the outside of it.  Then I'm going to select the HTML document. And I'm going to set a font size of 10 pixels.  And the reason why I do this is because I prefer using REM units, as you can see from here,  and this is just going to be a lot better for responsive design. And by making it 10 pixels  is just going to make the math a lot simpler. So for example, if I wanted to do 16 pixels,  it's as simple as just doing 1.6 Ram. So that's what I mean. That being said, I also want to do  B font size in percentages, instead, the recent being because it's going to scale a lot better  when we use these zoom that we have here within the browser. So 10 pixels in percentages is going  to be 62.5%. So I'm just going to comment this one out and keep it as a reference. Now we are  going to select the body. And in here, what I want to do is apply the font family plus them property.  So to apply a custom property, all you have to do is just use var, and then inside of  the parentheses, what you want to do is pass in the name of the variable that you created. So  in this situation, we will use font family, because that's the name of the variable,  then, as far as the font size, we will do the same thing. And you don't actually have  to type in var every time at least if you're using Visual Studio code. So in this case,  all you have to do is just type in the name of the variable itself. So for example,  I can type in font and you see that we already get some suggestions. I'm going to be using  the SM font size here. So if I just hit enter or select it, you see that it already does it for us.  Then as far as the color, this one is going to be the light color out  and then the background color is going to be the primary background color.  Then here I'm going to set a letter spacing of one pixel followed by a transition  which is going to be on the background color. And it will be over point 25 seconds.  I also want to transition the color over point 25 seconds as well. And this decision is only  there for when we toggle between the themes so that we get done really nice animation.  Then I'm going to select all of the anchor tags. And I'm going to get rid of the text decoration  by saying none, then I'm going to set the color to be inherited from its parent. I'm going to  select all of my images. And I'm going to give them a max width of 100%. This is going to make  it so that the images will not overflow their parent container, and then a display of block.  I'm going to select all of my URLs. And I'm just going to do a list style of none. I'm going to  select my inputs, as well as my buttons. And the font here is going to be inherited. So if we hover  over and this should be button, not buttons. So if we hover over the the property here, it just  tells us that it's a shorthand for font style, font variant font weight, font size, and so on.  Then, what I want to do here is apply a color that is going to be inherited from its parent as well,  then the border will be set to none, then the background color is going to be transparent.  And I'm also going to get rid of the outline here.  Finally, I'm going to select all of my tags. And in here, I just want to set a font size,  which is going to be MD. So font size, MD, just excel. And now we can go ahead and add  the colors for the light theme. So what we're basically just going to do is invert some of the  variables that we have right here. And that's going to take care of everything else for us.  So here, what I want to do is select the body and say that one, the body has the light theme class.  I want the following styles to have the following values.  And we are going to start with the light color. And in fact, it's going to be a  lot easier if I just copy it. So we need primary secondary. So let me just grab all these for now.  And we'll paste them here. Then we also need the hover light color  and we will need the transparent dark and transparent light colors.  So now we can go ahead and change the values.  So this one here is going to have the following which is 3d. And then for the light color, alt,  this one is going to be switched to a transparent color. So this is going to be RGBA.  And then we want a black color. So we do 000. And then for the alpha or transparency,  we do point six. For the primary background color, we're going to be switching this to white.  And then for the secondary background color, this is going to be a lighter shade of gray.  So this one will be f1 f1 f1. Then for the hovered light color, what we want to do here is just set  this to white, as well. And for the transparent dark color, we want to set this one to a solid,  so we will use the color of the secondary background color that we have right here.  Just like so. Finally, the last one will stay the same,  except that we are going to make the transparency a lot more. So we'll just do point one there.  Let's now set up the reusable classes. And we will start by using the class of container.  And as I mentioned, this is going to limit how wide a certain element is going to stretch do so  I'm going to make this 160 REM. Then when we have enough space, I also want to center this container  in the middle. So I'm going to be using a margin top and bottom of zero and auto left and right.  And then I'm going to create some spacing on the sides by giving it a padding C row top and bottom  and 1.5 left and right. I'm going to target the place items center column  And in here, I'm going to be using Flexbox. This is going to be inline flex,  then I want to align items to the center and justify content, the center as well.  And there's still a few more things in here that we will target. But we won't do  that till later on. So for now, let's just stick to the classes that we have defined.  So in this case, I'm going to select the screen at some hidden, and this is going to have a display  set to None, simply because we are starting mobile first. And by default,  we don't want to see anything with this class. So now let's go ahead and work on the header.  Let's select the header element. And then here we are going to apply a background color,  which is going to be the secondary background color, then the position is going to be fixed.  What we want to do next is give it a starting top position of zero.  And we will do the same for the left, then we will give this a width of 100%.  Because since we made it fixed in our last its width. And then finally, we will give it a sea  index of a high value just so that we make sure that it stays on top of all the content.  Now I'm going to target the nav bar in here, I'm going to set the display to be a flex,  I want to align my items to the center. And then I want to justify my content to space between.  And that's going to give us some separation here between the items  just like you can see there. So let me just bring this back. And I also want to add some spacing on  the top and bottom. So for that, I'm going to be using padding, and we can do a padding block  of 1.5. Rem as well. Then I'm going to select the logo. And the logo is going to have the font size  of font size MD and the color is going to be white, so we will use the light color.  I will now select the menu. And I'm going to give this a position of absolute.  The starting top position, I want to position it under the header. So this is going to be 8.5. REM.  But the right, I'm going to do the same spacing that I had with the container just  so that it lines up. And then I'm going to do a width of 23 Run. Then a padding all around  and a background color, which is going to be the secondary background color.  And here we want to set the opacity to zero. However, opacity only hides the element from you.  If I hover over it, you can see that everything's still clickable, which means it's still there.  So what we want to do next is transform scale. And we set that to zero, and it's going to shrink it  all the way down. So it's no longer clickable. And obviously, we want to still see the menu  since we're working on it. This is going to be for JavaScript purposes later on when we  hide it and show it. So for the time being, let's go ahead and comment that out.  Then we want a transition here, which is going to be for the same purpose of showing and hiding the  menu on the opacity over point 25 seconds ease and now I'm going to select the list  and the list is going to have a display of flex. Then I want to align my items to the center as  well. And I want to set some spacing, so I'll use the gap here as well. And even though it's  not looking quite right, the solution to fix this is by applying a flex direction of column.  However, I don't want to do this here, because remember that we have multiple lists.  So if I applied it to this list, then it means that it's going to apply it to every single  element that has the same class. And that's not what we want. So let's go ahead and remove this.  And instead, I'll specifically apply it to the element that I want to  in this case, it's going to be the list that is a direct child of the menu element.  Just like so. And if we go back to the HTML document, here you can see that this list is a  direct child of this menu element. So what I want to do next is select the list link that is current  So for this, we just make sure that we chain the two classes together.  And here, what we want to do is change the color. So the color here is going to be the light color.  So now what's different, well, slightly different from the rest of them.  Next, I'm going to remove the clothes menu icon, which is going to be the x.  So let's select the clothes menu icon and give this a display of none.  Now I'm going to select all the VT ns. And what I want to do here is set the cursor  to be a foreigner so that when we hover over the buttons, we get the appearance  that it's clickable. I know when to set some hover effects. So I'm going to select the list link.  On hover, and the following styles are going to be applied. So this is just going to be a change  of color, which is going to be transitioning to the light color, custom property that we have.  So if we go ahead and try that out, you can see that it works.  However, we still want to apply this same effect to  the buttons. And we want to apply it to the span instead of the buttons as well.  So we'll do btn hover, and then the span inside of it.  And one more thing that I want to do now is hide the moon icon, because by default,  we are going to be within the dark theme. So we only want to see the sun icon.  And we'll just set the display property here to none.  Now I'm going to select the life theme, and then the sign icon.  In this is going to have a display of none.  And this just means that when the body has the light theme class, then the sun icon,  we no longer want to see it, the one that we do want to see is going to be the moon icon.  So we're going to grab this, and we'll repeat it for the light theme. And then the moon  icon. And the only difference here is that we change this one to block so that we show it.  Now, you're not going to be seeing that in play right now. But you will  later once we get into the JavaScript portion, which is going to be shortly. But before that,  let's set up the styles that we are going to trigger once we get to the JavaScript portion.  So that's going to be down here. And the first thing that I want to do is add a box shadow to  this header once we start scrolling. So let's target the header. And then we'll say that  when the header is activated, or when it has the class of activated, we want to apply a box shadow,  which is going to have the value of zero for the X offset, one pixel for the Y offset, and  then point five REM for the blur and spread. And then it's going to have a transparent light color.  Now we're going to do something similar here for the menu. So let's just copy that.  And let's change header to menu.  So this is going to be slightly different now because we are going to have one pixel here for  the X offset as well. And then we'll just change this to one and the rest can remain the same.  So remember that I said that first we hide this and then we show it on click. So this  is where it comes into play. So Let's uncomment that out now. And then we are going to copy it  and we'll paste it down here. Then we just change the zero to ones  just like so. Then we also want to be able to switch the icons. So the next thing that I'm  going to do is select the menu toggle icon. And we are going to say that when it's activated.  Let's remove the menu class from here because we don't need it.  So when it's activated, we want to target the Open Menu icon.  And then here we want to set the display to none Then we'll do the same thing with the exe.  So let's change, open to close. And then this one will be blocked, because we do want to show it.  So let's go ahead and open up the JavaScript file. And in here, what I'm going to do is  define a function that is going to allow us to select elements very easily. And this is going  to work similar to how jQuery does it. By the way, shout out to John from coding addict, this is the  method that he uses, it's actually pretty useful. So we'll start by declaring a function expression.  And I'm going to call it select element. And then in here, we can have a parameter of selector.  You can call this whatever you want. And it will be an arrow function.  And what we want to do in here is define another variable,  this one I'm going to call element, and then I'm going to store the value of whatever we pass in,  into this element variable. So document, query selector. And now we pass in the selector,  then what we want to do is add in some validation, so we'll say if element,  meaning whether it's true or false. In this case, if it's true, we want to return the element.  If not, what we can do is throw an error.  So we'll say throw new error, and then we'll use the backticks. And in here, we can have a custom  error message. So I'm going to type in something went wrong. Make sure that the selector  this is going to make sure that it tells you which selector it is that is  wrong or typed in correctly, based on what we passed in. So make sure that the selector exists,  or is typed correctly.  Just like so. So now we can go ahead and test that out. So we'll call the select element function.  And we are going to pass in an element that we know what is valid,  so in this case, DNF bar. Let's also console log that. So let's go ahead and open up the console.  And see if we get the element that we want. And we do so here we have the nav element. Now let's  see what happens if we add in an element that doesn't exist. So let's say footer.  And now you see that we get the error, something went wrong, make sure that footer exists, or it's  typed correctly. So now that we know that this is working, we can get rid of this console log.  And we can move on. So now we can go ahead and add the styles  that are going to trigger on scroll to the header. So for this, I'm going to have another function.  I will call this one scroll header. And then what I'll do is have another arrow function here.  And I'm going to define a variable called  nav bar element. And then I'm going to call the select element function and pass in the header ID.  And I shouldn't call this one knife bar element, I should have called that header element. Then,  underneath, what I want to do is have an if statement to check if the scroll has past a  certain point. And if it does, then we want to do something in this case, add a class.  And if not, we want to remove that class. So we'll say if then we will use the this keyword  since this function is going to be attached to the window object, scroll y. And then we want to check  if it's greater or equal to 15. If it is, we want to add a class. And if not,  we want to remove that class. So we'll say header element class list and then add  activated. So let's go ahead and grab that. Paste it underneath and remove and in add remove and  then we'll scroll to the end here. And we're going to add a demo element. So I'm going to say search.  And then within the CSS I'm going to select it and give it a really high height. So sorry  and the height is going to be 2000 Ram. And now we get the scroll bars. And we can  suss that out. So obviously, it's not working because we still haven't called the function.  So for that, we are going to attach an event listener to the window object,  which is going to be of scroll. And then we just simply pass in this scroll header function.  And now if you go ahead and test that out, you can see that it shows up, it's really subtle,  so you can't see it all that much. Let me actually demonstrate by by adding a background color here  of red. So now once we scroll past that 15, you see that we get the background  color of red. And if we go back to the start, it goes to the normal color. So this is working. So  let's now go ahead and get rid of this as well as this since we no longer need it.  And then we can move along and keep working on the rest. So the next thing that I want  to do now is open and close the menu. So we're going to do that down here.  We're going to start by defining a variable, which is going to be called menu Hoggle. icon. And then  here, we just call the select element function again. And we pass in the ID of menu toggle icon.  Then what we want to do is create another function, which I'm going to call toggle menu.  And this will be another arrow function.  And in here, what I want to do is just toggle some classes. So mobile, well first, let me define  a variable so that we can store the menu element inside of it. I'm going to call  this one mobile menu. And then we call the select element function once more, pass in  the ID of menu. And now we can do something with it. So mobile menu classlist toggle.  And then what we can do in here is say that we want to toggle activated.  And then what we want to do is just toggle the classlist on the menu toggle icon  which is going to be the same one.  Now we're going to call the function then add event listener.  This one is going to be a click event. And we go ahead and pass  on the menu toggle function that we created. At  actually, it's the other way around, toggle menu. So now if we test that out,  it should be in working order. There we go. And notice how the icons are being switched as well.  Since we're already here, let's go ahead and add the functionality to switch between the themes.  So let's start by defining a variable called body element.  And then we can just store the body element itself, we don't have to call the function here,  we can just simply do body, I mean document dot body. And that's going to work the same way.  I need to also create one for the theme toggle BTN.  And then I'm going to call the function here and store the theme toggle  BTN. And here. Then I'm going to add an event listener to this theme toggle btn variable  and what we want to do in here is toggle the class the the life theme class  on the body. So you're going to use the body element classlist toggle and then light theme.  And this should work now. So if we click it, you see that the theme changes and the icons  as well. But if I refresh the page, notice how it disappears. And that's because now we  have to add it into local storage. So that the theme selection saved. So how do we do that?  Well, as I mentioned, after we click this button, the body is going to have the class list of  lysine toggled. So what we have to do now is add some if statements.  So here we are going to say that if the body element class list contains the class of lysine.  So again, it's saying if the body currently has the class of lysine, then we want to do something.  And that's something is that we want to set this theme within local storage.  So we'll select the local storage interface, and then we'll call the set item method.  And here, we just basically have a key value pair. And in this situation, the first value  that we pass in, this is going to be the key name. So let me just call this current theme.  And then, for the name of the value itself, we can just call this theme active.  And then for the else condition, we just want to remove this item from local storage if the  class is not present. So we're going to call this piece down here. And as opposed to seeing  that item, we just say, remove item. And then we just need the current theme here. But that's not  going to be enough yet. So let's test it out. If I refresh it, you see that it's still gone.  So what we have to do now is get the item that is currently stored within local storage. So  for that, let me define another variable up here. In this one, I'm going to call it current theme.  And then what we want to do now is get that item from local storage. So we say local storage.  And then we use the get item method to get  the current theme that we have stored within local storage. So here, we just pass in the name of the  key that we have here. And what I put this over here, so here we just say current  theme. Now, again, that alone is not enough to do anything.  So we have to add in another if statement. And we're going to be doing this outside.  So here, what we are going to do is say that if there is a current theme within local storage,  so we can just say current theme. So if there's a Korean theme present,  we want to make sure that the body has that life in class.  So again, we will just say body element, and then plus list. Add light theme.  So let's go ahead and test that out. Well, as you can see, it's already in local storage,  so it just changed automatically after Visual Studio, refresh the browser with live server.  So as you can see, the theme selection is still there. Same thing will happen if we  refreshed on the dark theme. So let's quickly over again what we did. So we defined a variable  here to store the body element, then we did the same thing for the theme toggle BTN.  Then here, we just basically get the current item that we stored within local storage.  Then in this if statement, we check if there's the current item, so a current  theme and the situation. And if there is the body element, we'll get the class of life theme,  which is going to trigger the life theme styles. Here within the event listener, when this  btn is clicked, what will happen is that the body element is going to have the life theme  added or removed, depending on if you double click it or not. And again, we check if the body element  has that class and if it does, it's going to be set within local storage. And if it's not,  it's going to be removed. So that's basically everything we did there. The next step is going  to be going inside of the index html so that we can work on the search portion of this project.  So we'll continue here by having a div with the class of search form.  container as well as the class of container and the ID of search form container.  Just Excel. Then inside we are going to have a div with the class of form container in there  and inside of here, we will have the form itself. So the form is going to have the class of form.  The action can be left empty for now, since this form is not functional,  and then instead of the form, we will have an input that will have the class of form input.  This input is going to be of type text, and it will have a placeholder that will say,  What are you looking for.  Underneath, we are going to have a button with a class of btn and the class of form BTN.  And this button is going to be of type submit. Then, as far as the inside,  I'm going to be placing here a icon. And this icon is going to have the class of Ri, and then search  line. Just Excel. So for the time being, we can't see it, but that's because it's under this.  Then underneath of the form, we are going to have the text that is going to be for the or press  Escape to close. So that would be this right here. And this bin is going to have the class  of form note. And then we can just say or press Escape to close.  So now outside of this form container, enter, we are going to have another button. This button  is going to have the class of BTN. Form, close btn the class of place Evidence Center and then the ID  of form, close BTN. Just Excel. And then we'll just put in the X icon. So we'll do ri, close  line, just excel. So now we can see some of it underneath. And this is going to be it for the  form. What we are going to do next is go inside of the main dot css so that we can style it.  And we are going to begin by selecting the search form container.  This is going to have a width of 100%. The height is going to be  100 of the BH and I'm also going to set a max width here of 100%.  Then the background color is going to be the primary background color.  Let me get rid of the spacing there. And now the position is going to be fixed  up starting position will be zero, left will be zero as well see index is going to be a really,  really high value because I want this to be at the top of everything,  then display will be set to flex, then the opacity here is going to be set to  zero, the Transform Scale is going to be a set to zero. And then we want to transition  the opacity and it's going to be over point five seconds. Now the same concept as before.  Let's comment this out for now because we still need to see what we're doing with this form.  And then we can continue underneath. So now I'm going to select the warm container, Enter.  And this is going to have a margin of auto and that's just going to center it in the middle  just like so then this will have a display of flex, flex direction will be column.  And then I'll add a gap we're spacing and then I want to text align to the center.  Now I'm going to select the form itself. In this will just have a display of flex as well.  And then I want to justify my content to the center to place it in the middle.  Then I'm going to select the inputs, the form input  as well as the form btn because these styles, they will have it in common.  Here I'm going to give this a display of inline block, just so that it respects  the padding and margins on top. Then I'm going to give this a border of two pixels  solid and then it's going to be the secondary background color. So now it's taking Sheet,  then I want to make them a little bit larger. So I'm going to give it a padding all around.  And then the color. Well, I'm already inheriting the color here, so I don't have to do anything.  The next thing that I'm going to do is select the form input by itself.  And I want to add the following styles. So the first one is going to be able to write  which is going to be if none, then what I want to do is give it a width  of 100%, then the background color is going to be the primary background color.  Because as it is, it's going to be transparent. And in this situation,  I guess we could do without having a background color here, since the parent already has it. So we  can just get rid of this actually. Now, let's like the form btn, this is going to have a margin left,  which is going to be negative point five REM, and that's just going to push it a  little bit to the left, then as far as the border left, we can get rid of it.  Then for the background color here, we can just set the secondary background color.  And we can do a width of a ramp just like so. Now as far as the form note,  we can do a font size of extra small.  And then I want to basically align it all the way to the left. So for that I can just do align self  and then flex and then I'm going to select the form close BTN.  In here, I'm going to give it a position of absolute top is going to be 1.5 gram,  the right is going to be 1.5 GB RAM as well, then the border is going to be two pixels  solid. And then we can just do the secondary background color here as well.  Then, as far as the width, we can do for RAM, the height is going to be for RAM as well.  And then what we can do is give this a display of flex. Although Nevermind, I think we already  took care of that with the place items, center classes. So we don't need this.  Because I was just going to do a line items center and justify content center.  But since that class has already done that for us, we don't need it.  So now we can go ahead and make this functional meaning by removing and showing this form whenever  we click on the Search icon. And to do so let's set up the styles for the forum. So what we are  going to do here is say search form container. And then when it has the class of activated,  we want to set the opacity back to one and the Transform Scale  back to one as well. So remember, we commented this out, Let's uncomment it out again.  And now we get the default behavior. So when we go and set up the JavaScript portion for this,  when we click this button, the form should show up.  So let's go ahead and do that right now. Let's scroll all the way down here. And what we are  going to do is set up some variables. So the first one is going to be for the form open btn  and then we call the select element function and we pass in the ID of search icon.  Then we're going to duplicate this a couple more times below. This one is going to be  for the form close btn and the last one is going to be for the search form container.  Now all we have to do is just switch up the variables form say search form container stator.  And for this one, we can just switch open to close.  Then underneath of here, what I'm going to do  is have an event listener that I'm going to be attaching to the form open BTN.  And this event listener is going to be of click, then here, we can just have an arrow function.  And since we only have one line, we don't really need to use the curly braces here. So we can just  straight up say, search form container, class list, and then add in, what we can do here is  say that we want to add the class of activated.  So if we go ahead and test that out, now it should work.  So it pops up. If we click it still there, because we still have to add the other event listener.  So for that, it's going to be very simple, we're just going to duplicate the other one down below,  then switch, close, open, I should say, switch open to close. And then as opposed to adding,  we remove. So now if I click, it should open. And if I click this button, it should be gone.  So the last thing we have to do here is make this functional by removing the class when we  hit the Escape key. And to do that, what we can do is add an event listener on the window object.  So we can say window, add event listener, and this event listener is going to be of key up.  And then we can just have an arrow function here.  And since it's only one parameter, we can just forget about the parentheses here,  and just do the parameter itself. And in this case, I'm just going to call this one event.  And I'm missing the parentheses here for the event listener. And then here, what we want  to do is set up an if statement. And this if statement is going to check whether the key of  Escape has been pressed. So for that, we can say event, that key. And then if it's equal to escape,  then we want to do something. In this case, what we want to do is search form container classlist.  Remove, I guess we could have just copied it from here, but it's too late already activated.  So let's go ahead and test that out. So if we click it, it will open.  If we hit the Escape key, it's now closed. So that's pretty much all there is to this  portion of the JavaScript. The last thing that we are going to be doing here is for Swiper J S,  but we're not there yet. So we're not going to worry about it for now. The thing that we do have  to do now is go back inside of the index html so that we can work on the featured articles section.  So let's select the section element. And then we can apply a class of featured  articles as well as a class of Section Header offset.  Inside of here, we will have a div with the class of featured articles container.  And then another class of container  can get this right, and a third class of the grid. So the de grid class is going to turn any element  into a grid container. And it's also going to be another one of our reusable classes.  Then inside of here, I'm going to have a nested grid.  So this one is going to have the class of featured content as well as the grid.  So in here, I want to have a div. This div is going to have the class of headline banner.  And inside of it I'm going to have the headline itself.  So this is going to be an h3 that has the class of headline and the class of fancy border.  Inside of it, we will have a span and the span is going to have the class of place items center  and then for the text it will be breaking news.  Underneath we are going to have another span this one with the class of headline Description.  And then we can say Apple announces a new partnership.  Underneath of the headline banner, we are going to have all of the cards. So for this,  we will use an anchor tag, this anchor tag is going to have a class of Article,  then it will have the class of featured article and then an additional class a featured article.  One, then we can just link to the post page, and then we can move on. So, inside of here,  I'm going to have an image, this image is going to have the class of Article image.  And the image that I want to use is going to be inside the assets folder,  images folder, the featured folder, and then featured one. Under the image,  I'm going to have a span and the span is going to have the class of Article category.  And for the text here, we can just use anything.  So underneath of the span, I'm going to have another wrapper div,  and this one is going to have the class of Article data container.  Inside of it, I'm going to have another div, this one is going to be for the article data.  And I'll have three spans in here. So what I want to do is add some text in here.  And then for the middle one, we can add a class of Article data  spacer and then the last one will be the estimated retime. Finally, underneath, we are going to have  an h3 and this h3 is going to have the class of title as well as the class of Article Title  SBR the future  and that's going to be the base where every single card that we have.  So let's go ahead and copy this one. And we can paste it underneath  three more times. Well two more times since we only have three of them.  And now we can just go ahead and change the data. So for this one, we can change the image  to number two, as well as the featured article to number two. And then the last one will be three.  Just like so. So now I'm debating whether I should go inside of the CSS and make this  portion look better. Or if I should add in the rest, which is going to be the sidebar.  So for now, I'm guessing that I can just go ahead and just do the CSS for this portion. And then I  can come back once I do that. So let's go inside of the CSS now. And let's make this look better.  So let's go all the way back up to the reusable classes. And what I'm going to do here  is find the reusable classes comment and I'm going to add in the D word class.  Then I'm also going to add a class for the sections which we still haven't used.  And I'm going to add padding top and bottom here. So I'm just going to use the padding block  instead. I was going to do this later but might as well just do it now and get it out of the way.  So now here, what we want to do is select the featured articles.  And I'm going to give this a padding block  of two REM then I'm going to select the section header offset.  And this is going to have a margin top of 7.4 ramp and that's going to push  the content down underneath of the header. The next thing that I want to do is select  the featured articles container as well as the Featured Content since they both share same gap.  Underneath, I'm going to select the headline banner  in this will have a background color of secondary background color display will be flex  align items will be center. And then to create some separation between the two texts,  I'm going to also give this a gap. And then the font size is going to be extra small.  Now I'm going to select the headline by itself. And this is going to have a color  which is going to be the light color. Then I'm going to give this a font size of one REM  texture textures form of uppercase, and then text align is going to be center,  then I'm going to give it some padding of point four rem and the height of 100%.  I'm now going to select the headline span.  And this is going to have the height that is inherited.  And I'm giving this a position of relative as well as the overflow of hidden.  Then underneath, I'm going to select the fancy border once more. And I'm going to  create a pseudo element. So we have to add in the content, which is going to be an empty string.  If we don't add this, then the element is not going to show up.  Then the position of absolute up starting position zero, same thing for the left, and then the width  is going to be double. So I'm going to do 200% Just so that this element is twice as large,  then the height is going to be 100% then the background is going to be the gradient color.  Then the background size will be 50% 100%. So now we get a nicer layout here for the  background colors, then I'm going to give this a C index which is going to be five.  And then underneath, I'm going to select the fancy border span. And this is going to have  a position of relative because I want to add is the index of 10 so that it sends the text  to the top of the background. Then this is going to get a display of inline block.  Actually, I'm going to do display, inline flex. And then I'm going to set a padding,  which is going to be point six, top and bottom 1.5 Left and Right. Finally,  I'm going to give this a background color, which is going to be the secondary background color.  No don't mind too much that it looks squished up there. The reason why it looks like that  is because I'm zooming in 150% I made the smaller you see that it looks just fine.  So the next thing that I'm going to do now is select the article  title. Actually, before I select the article title, let me actually style the  article itself. So the article here is going to have the position or relative.  Since I'm going to have some elements that will have position absolute inside of it.  Then I'm going to set a min height. So this is the minimum height that each item is going to have.  And for that we will use the variable of item in height and D. Then I'm going to  select the article image. And this we'll have a position of absolute.  Then I'm going to give this a width of 100%.  The height of 100% as well. And then we can do object fit of cover just so that the image  is going to scale a lot better within its box. Then I'm going to do a transition on the transform  over point 25 seconds. And this is going to be for the hover effect where the image is zoomed in  when we hover over it this not this isn't going to take effect now but it will later down the line.  So the next thing that I want to target is the article category  and this will help The position of absolute top is going to be one ram.  Right, one ram as well, then padding all around will also be one ram,  one size, one ram. And then the background color is going to be the primary background color.  Next, I'm going to set the color of light. And I'm going to also set a text transform uppercase,  followed by C index of 10. The next thing that I'm going to style is the article data container.  And this will have a position of absolute as well, because we are  going to be positioning it to the bottom, and then the bottom is going to be set to zero,  left zero as well. padding is going to be to ram top and bottom  1.5 Ram left and right. The background color is going to be the transparent background color.  And this should be dark color, not the light one. And then you see index here as well of 10 just  so that it stays on top of the other content. Now since we have the position of absolute here, it's  only taking up as much space as it needs. So let's make sure that we also give this a width of 100%.  Just Excel, we also want to add a hover effect here. So let's add a transition  so that the hover is animated. And this will be on the background color.  And it will be over point five seconds. Just Excel. So the next thing that I'm going to  do is add the hover effects themselves. So I'm going to select the article. And  I'll say that when the article is hovered, I want to target the article data container.  So the background color here is now going to be the hover background color for the dark color.  And then the color itself is going to be hover light color.  So if we go ahead and try that out, you'll see that we now get the  solid background color here. Now, let's target the article data.  And what we want to do here is give this a display of flex.  And then we want to align items to the center. Then we will apply a gap for separation.  And then we are going to apply a font size which is going to be extra small.  Finally, I'm going to add a margin bottom for additional separation between this text and the  title. And it's going to be one REM just excel. Now we are going to generate the article spacer  and this will have a width of point by REM eight of point five REM as well.  Then the background color is going to be the light color alt.  And finally, what we want to do is rotate it by 45 degrees. So transform, rotate  45 degrees. And that's now going to look more like a little diamond. And the next thing that I want  to target now is going to be well as you can see the hover effect is not applying to this element.  So what we have to do is come back here then we can get rid of this.  We can switch this over to well I get rid of the curly brace there for no reason.  But now we switch dark to light and we switch this to the spacer class. And now if you hover over it,  it should work and it does. So let's go back down and let's now style the title.  The title is going to have the color of light color  and now you see the difference between this text and the title when it's not being hovered.  And one last thing is going to be the article title itself  and this is just going to have a font size of MD  Just like so. So next we are going to work on the sidebar. But before we actually do  anything with the CSS, what we have to do is jump back inside of the index html,  so that we can write the markup for it. So let me make a comment here. Sidebar. And under here,  we are going to start by having a div with the class of sidebar as well as the grid.  And then inside of it, we will have an h three, this h three is going to have the class of title  and featured content title trending news  and should only be trending then here we are going to have the card itself. For this we  will use an anchor tag again with the class of trending news box. So we can use a placeholder  there. And then inside of it, we will have a div with a class of trending news image box  inside of here, we will have a span that has the class of trending number,  we will have an additional class of place items center and then this is going to be 01  Then we will have the image that will have a class of particle image.  We can go inside of the assets folder, images folder,  and then trending. And it's going to be the first image underneath of the trending news image box,  we are going to have another div and this div is going to have a class of trending news data.  And we already have the base for this article data since we are going to repeat it. So let's  just copy that. And we can paste it in here. Then underneath we are going to have an h3 and  this h3 is going to have the class of title as well as the class of Article.  Title. We already had this as well. So I guess we could have copied it but  kind of late now. Then we can just do sample article, title, just excel. And again, this  is the base for each individual card that we are going to have. So we can just copy the anchor tag.  And then we can just paste it underneath as many times as we need. So in this case, we had five  and that should be the last one. So now we can just go ahead and change the images or three,  and two, because we already have one and number one. Let's also go ahead and change the text  and this is going to be number four,  and finally, number five, so that's going to be it for each individual card that we are going  to have inside of the sidebar. So it's going to be the same deal. Now what we have to do  is go inside of the CSS so that we can style it. So let's go ahead and select the sidebar.  This will have a background color, which is going to be the secondary background color  padding all around of 2.5 REM. Then underneath, I'm going to select the training news box.  This will have a display of flex flex direction column and then the gap for separation.  And underneath I'm also going to add some padding top and bottom so I'm going to do  padding block of two REM then finally I'm going to add a border which is going to be one pixel solid  and then it's going to be the transparent light color.  And now I'm going to select the trending news box which is the last one so trending news box,  last of type and what we are going to do is that we are going to To get rid of this border bottom,  so border bottom, none. And I know you can't see it right now. But that's because  we haven't added the position of relative to this  image box that we have here. But we're going to be taking care of that right now. So trending  news image box. Now you'll see that the moment I give it the position or relative, it's going  to fix itself. And that's because this image right here, if you remember correctly, this particular  class, we added the position of absolute. So it just needed the class of relative so that  this image would be positioned absolute relative to this div. So if we go back in here, I'm going  to give this a width of 100%, then I'm going to give it a height. And this height is going to be  the item in height at some. And now I'm going to go ahead and select the featured content title.  In this will have a font size of MD.  It will also have a text align of center, and then a padding all around of one REM.  Next, I'm going to select the trending number. This will have a position of absolute  then the top negative one REM left is going to be negative one REM as well.  It's the index of 15, then a width of three REM  height is going to be three REM as well. The background color is going to be the secondary  background color. And then the color itself is going to be the light color.  What I want to do next is give it a border radius of 50% to make it round.  Just like so. And the last thing that I'm going to do here is select the trending news  data article title.  article title, and this is going to have a font size of SM. I'm also going to add a  hover effect here. So trending news box on hover, I want to target the article title.  And then the color here is going to be the light  color. Well, first, we have to specify that I'd say color before we actually use the variable.  So light color. And it's going to be the alt just like so. So now you see that if we hover over it,  we get the effect that we want. So let's compare with the original.  As you can see, this one is still slightly smaller. So let me double check that.  Well, the reason is because this one is a 150%. The original that I have here for the demo is  that 150% And then the original project is at 100%. So if we make it the same size,  you see that now they both look pretty similar. And except for the text right here, because I'm  just doing the same one that I had before from copying and pasting. Again, text doesn't really  matter that can easily be changed. So now the next part is going to be working on the quick read  section. So back inside of the index html, what we are going to do here is layout the markup.  So first, let's begin by having a section element that will have the class of quick read.  And it will also have the class of section. Inside of it. I'm going to have the class of container.  And then in here I'm going to have an h2 with a class of title and then a class of section title.  I'm also going to apply a data attribute here. So I'm going to call this one data name.  And what I'm going to inside of here is the name of this elements,  which is going to be the quick read. And then inside of here, I'm going to have the same thing.  And that's because we have over here the  the title set up this way, where we have a faded one that is going to be slightly larger in the  back. And for that, we're just going to be using this data element within the pseudo element.  So maybe I should just bring this over back, one line, just excel.  And now we can lay out the markup for the Swiper. So in order to start this,  we are going to have a div that will have the class of Swiper.  And these are all the Swiper classes. So this is basically the the structure for a Swiper carousel,  then I'm going to have a div that will have the class of Swiper wrapper.  Instead of here, I'm going to have each individual card. So this one is going to  have the class of Article, because we still want to share those styles of the article.  And then it needs the Swiper class of Swiper. Slide then inside of here, well, we can just  use a placeholder there. And inside of the anchor tag, we are going to have an image, this image is  going to have the class of Article image. Then we can go inside of the assets folder, images folder.  And then we can go inside of the quick read folder. And we can grab the first  image. Then underneath of this image, we need another article data container.  And in fact, what we can just do  is going get it from the first one that we had here. So article data container.  So now we can just speed up the process and paste it over here, let me just make sure that  everything is correct. So we have the Oracle data container. Then inside of it, we have the article  data, the spacer, and then the title itself. So that's going to be our first slide. Let me  just create some separation there. So that's more readable. So let's go ahead and add another one.  Another one, another one, another one, and then another one. So now what we have to  do is just go ahead and add the images. So for the first one, we already have the image  covered with a second one, we have number two, then we have number three,  number four, number five, and number six.  And that's pretty much going to be the structure for the slides, what we are going to do now is add  the navigation buttons, which is going to be the right and left arrows, as well as the pagination  controls. So we actually have to add those underneath of this div, which is going to be  this Swiper wrapper. And this will have the class of Swiper button breathing. So again  and this we'll have the class of Swiper.  Button for you. And we also want to add an additional class here of Swiper controls.  Now the Swiper controls class is my own class that I will be using to style the arrows.  Then we can just go ahead and duplicate this down below. And then we can change this one to next.  The last thing that we have to add as the pagination,  as you can see the icons are already showing up here. So for the pagination, we have to add a  div that will have the class of Swiper pagination just like so. So that's going to be it for this  particular section. Now the next step is going to be going inside of the CSS and we are going  to make this look slightly better and Then we are going to tackle the JavaScript portion.  So down here, we are going to select the section title.  And this is going to have the position of relative, it's going to have the font size,  or font size M D, then a margin bottom, which is going to be six, REM.  And now I'm going to create these pseudo elements for it. So section and title.  Before, actually, I'll just use the after, well, let's just keep before since it's actually behind  it. So as far as the content here, what we can do is use the attribute and then  data name, just excel. So the font size here is going to be the font size large.  And then we can text transform to uppercase.  The opacity here is going to be point one, so that it's faded, and position is going to be absolute.  And then it will be positioned 1.4 1.5 Ram, I should say, from the top, and then from the left  by to ramp. So if we scroll a little bit up, we should be able to see that right here now.  Then, I'm going to target the article, and then the swipe or slide.  So we have to do it this way, being more specific in order to actually override some of the styles  that the Swiper CSS file has. So here, the height is going to be 40 Ram, just excel. So  the next thing that I'm going to do is add some additional styles here for the Swiper wrapper.  And the height is going to be auto, then the Swiper controls.  What I want to do here is give it a width of 3.5. Rem, I will do the same thing for the height.  And then the background color is going to be the secondary background color.  Then what I'll do is select the Swiper controls once more.  And then what I want to do is select the after pseudo element that Swiper actually creates.  So the font size here is going to be 1.6. Rem, and that's going to make the controls smaller, or the  arrows I should say. And then for the color, we are going to make it white as opposed to blue.  So we're going to use the light color. And you probably noticed that the pagination bullet points  are not showing up. And that's because for them to show up, we have to first initialize Swiper.  So let's go back inside of the main dot j s, and the first thing we have to do  here is define a constant variable, which we are going to call Swiper. And then we have  to create a new instance of Swiper. Then in here, we can just select the div that we have  with the class of Swiper. And then we can pass in some options.  So the way it works is by having key value pairs, so to show a certain amount of slides per view,  in this situation, by default, we have one. So I'm going to set that here slides per view,  then we set that to the number that we want,  then the next value is going to be for the spacing that I want between each slide. So  the default spacing that I want is going to be 20. So for this we use space between  then here we are going to make the arrows functional. So we have to set the navigation here  and we have to specify the values. So in this situation for the next el property.  What we want to set is the Swiper class for a particular button. So this one is  going to be for the next element. So here we set the Swiper next, actually button next  Then we do the same thing for the Previous button. So this one, we can change to Prevx. And then we  have to change this one from next to Prevx, as well. And let's not forget to add a comma here,  and one here as well. Well, this is the last one, so we don't need it there.  We do need it here, though. So the next thing that I want to add and make functional is going to be  the pagination. So for that, we say pagination, and then we just set that to the element that  we have for the pagination. So that's going to be the div that has the class of Swiper, pagination.  And in here, we just say E L. And then we select the div with the class of Swiper. Education. And  just like so now, the pagination is showing up. And this should work already. As you can see,  we can also drag it. So the next thing that I want to add here is going to be the responsive  breakpoints. So for this, we can just specify that we want to set breakpoints.  And then here, we can set various different numbers. So my breakpoints are going to be 700.  And in here, what I want to do is just show a certain amount  of slides per view. So let me just copy this.  Paste it in here. And I want to show two, then for the next breakpoint, let me just paste this one  down below. This breakpoint is going to be 1200. And then I just want to show all three slides.  So if I go ahead and make this bigger now, you'll notice that it works just fine.  Now we get two, and then we get three. So that's working exactly how we want it  to work. So one more thing that I have to do is style, the bullet points here for the pagination.  So let me just minimize this. Put this here to line it up. And now since we are done with the  whole Swiper JS thing, what we can do is go back inside of the CSS, and then here we can set the  styles for the bullet points. So I'm going to start here by selecting the Swiper pagination.  And I'm going to give this a margin bottom.  Well, not a margin bottom, but the bottom position of point five, REM. And we also have to specify  this as important to override it from the Swiper. CSS file. Next, I'm going to select the Swiper,  pagination and then bullet. So this is not an element that we define. It's actually coming  from the Swiper. JS CSS file. And I just noticed that I misspelled bullet here should be like this.  And here, we just change the background color to the light color.  And now everything is working exactly how we want it to work.  So the next step is going to be going back inside of the index html so that we can work on the older  Post section. So let's scroll down and go inside of this comment. So this section is going to be  pretty straightforward. Since we are going to be reusing some of the elements that we already  created before. The only difference is that we are going to have some slight modifications.  So let's begin by using the section element. And then let's apply the class of older posts  as well as the class of section. And inside of here, we are going to have a div with the class  of container. And then followed by the h2 that has the class of title as well as the class of section  title. Then here we can say older posts. And let's not forget the data attribute. So data name  older posts. So let's scroll down. It now shows up here.  And here we are going to have another container this one is going to have the class  boulder pose, grid wrapper, as well as the class have the grid and then here this is where we are  going to have each individual card. So again, we will use an anchor tag with the class of article  as well as a class of D grid, since we also want to make this particular card, a grid container,  then we can use a placeholder here. And then inside of it, we are going to have a  div that has the class older posts, article, image wrapper, I know that was a long one,  then instead of there, we are going to have an image that has the class of Article image.  And then the image that we want is going to be inside of the assets folder,  images folder, older pose, and then it's going to be the first image  underneath, we are going to have the same article data container that we had before. So let's  actually grab that instead. From here, and the only difference here is that we are going to have  a p tag that has the class of article description  just like so. And then we can just generate some dummy text. Let me make that smaller.  Got it about here. And now that we have the basic structure, we can just go ahead,  copy this anchor tag and paste it down below five times. Just like so. And now the only  thing we have to do is just change the images. So this one should be six, this 1543 And two.  So now that we have all the cards here, with each individual image,  the last thing that we are going to do here is add in DC more buttons. So underneath of here,  we are going to have a div that has the class of Seymour  container. Then inside, we will have an anchor tag that has the class of btn  Seymour btn in place items center, then this can just be a placeholder and then  see more followed by the icon, which is going to be the arrow right. So Ri arrow, right S line.  And now we are done with this section. So let's quickly go inside of the main dot CSS. And let's  make it look better. So let's go ahead and select the older post grid wrapper. And let's apply  a gap. Then we'll select the older Post article image wrapper, as well as the older Post  article. Then let's apply a min height, which is going to be the item and height of SM.  Now I'll select them individually. So all the Post  article, and I will set a background color which is going to be the secondary background color,  you're not going to see a show through and that's because the article data container already has  a background color, but we're going to reset that later. So now I'll select the older Post  article image wrapper, and I'm going to set the position here to be a relative, then we are  going to apply the reset to the older post read wrapper, and then the article data container.  So here we just reset the position to static from absolute. And then here the background color is  going to be transparent. So now the secondary background color should be showing through. And  that's because we missed that up here. We should have selected the article data container instead.  So now it works. underneath of that, I'm going to apply some margin bottom to the article  title that is inside the article. The older post greater wrapper I should say. So article title.  And this will have the margin bottom of SM  and then down here I'm going to do the same thing but it's going to be for the Seymour container.  And what I'll do now is scroll all the way to the bottom.  And then I'm going to give this a margin top instead, which is going to be the margin MD  and that's going to give us some additional separation  Next, I'm going to select the Seymour BTN.  And this is going to have a text transform uppercase,  then I'm going to select the See More button on hover. And I don't think I do need one though yet,  because I already have it applied globally. So let's just leave that out. So what I do want  to set Wait, yes, so what I do want to set is the animation when we hover over it that the arrow is  going to move a little bit to the right. So to do that, what I have to do is say, see more. And then  the icon, and I want to set a transition here, which is going to be undie transform.  Over point 25 seconds. And now I can say that when the Seymour btn  is hovered, I want to target the icon inside of it. And then I want to transform, Translate  X over point five rent. So let's test that out. And as you can see, there it works.  So that's going to be it for this particular section. The next one is going to be the popular  tags. So let's go back inside of the index html. And let's find the popular tags comment.  So let's go ahead and add the section element, and then add the class of popular tags.  As well as a class of section. Then inside of it, we will have a div with the class of container.  And then we will have the same title that we have been  reusing. So let's just be a little bit lazy here and copy this portion as well as this one.  Then we'll scroll back to the bottom. And then we'll paste it in.  And let's close this one off, just like so. So for this one, we are going to change the class.  And this class is going to be popular tag or popular tags, I should say container,  and then the D grid class can stay there. Now as far as this one, we have to rename the data  attribute to popular tags. And then we'll do the same thing. Well, let's remove the hyphen here  and capitalize the P and then we can just copy this and paste it in here. So that should work.  Then inside of this container that we have here, what we are going to do is add an anchor tag with  the class of article. And then inside of it. Well, we can use a placeholder here and then inside of  it, we can use a span that has the class of tag name. And then here we can just say travel. Then  underneath, we are going to have an image. This image is going to have the class of Article image.  And the image is going to be inside of the assets folder, images folder,  and then tags and then this one is going to be the travel image.  So that's going to be the basic structure for every single card that we are going to have  inside of the popular tags. So let's go ahead and copy this and paste it down below five more times.  Just like so. Well, we need six so we need one more. So now we can go ahead and just  change the text inside of it as well as the images. So the second one is going to be food  let me actually capitalize here. So food  do the same here. And then this one is going to be the food  tag. And I'm not sure if that's what I named it so let's find out so yet that's going to be the one  then the third one is going to be technology. Here we'll do the same.  Then we'll do the same for the fourth one, which is health  then the fifth one is going to be nature  And finally, we have bitness.  So all of our images are now there. Let's go ahead and go inside of the CSS file now so that  we can make this look better. So in here, what we will do is target the popular tags container.  We are going to apply a gap for separation,  then we are going to target the popular text container article.  And what we're going to do here is give this a min height as well. And this one is going to be a sum.  Then I'm going to select the tag name in this will have a position of absolute. Then I'm going  to also add a see index here of 10. So that now the item is going to show up on top of the image.  And then I'm also going to place it in the middle by using top 50%. Left  50% And then transform translate negative 50% And then negative  50%. Now I'm going to add a background color, which is going to be the transparent,  dark color. And that's pretty much all we need for that. Actually, one more thing that we do  need here is a padding. So the padding is going to be one REM top and bottom to REM left and right.  Then, what we are going to do is select the popular tags container, the article inside of it  and we're going to add a hover effect so that when we hover over it, the tag name is going to change  colors. So popular tags container article on hover, and then tag name. So here, we want to  change the color to the light color. And if we test that out, you can see that it works.  Next, I want to add a hover effect to the image. So again, I'm going to copy this,  paste it down below. And now I'm going to change this to be the article image.  And should be article image. Just like so. And then what I do want to change here is the  Transform Scale. And what I want to do is kill it by 1.05. So if we go ahead and hover over it now,  you can see that it grows. But there's an issue here because it's overflowing.  So we have to go back to this article right here and give it an overflow of hidden.  Now if we go ahead and take a look at the hover effect, and notice how much nicer it looks.  The next section is going to be the newsletter section. And this one is going to be the  easiest one since we will be reusing a lot of the styles that we already had for this search form.  So let's begin by using the section element with the class of newsletter,  as well as a class of section. In here we will have a div that has the class of container  and then the h2 with the class of title as well as section title.  This will be newsletter. And let's also add the data name. So we can just go ahead and copy this  and paste it in here. Scroll down and now the section title is showing up.  So underneath of here we are going to use a div that has the class of form container, inner form,  container inner and then in here we are going to have an h six that has the class of title  as well as the class of newsletter title. And then we can just say subscribe to news flash.  Then underneath we are going to have a p tag that has the class of newsletter description  and then we can just generate some dummy text.  Let's make this a lot smaller like so. And then we are going to have the form itself.  Then we can just repeat what we had before. So input that has the class of form input  type of text. And then for the placeholder, we can just use  subscribe. Or let me just check if that's what I had before. And actually, we had enter your email.  So that's what you're going to do enter your email address.  Then we had the button. So that's going to be a button that has the class of BTN. And form BTN.  type will be of submit.  And then we can just use an icon inside of here, RI mail, and then send line.  Just Excel. And again, notice how we already have the styles because we're just reusing this  from the previous form. And that's going to be it for this one, let me just create some  additional spacing here for separation, just so that the text is more readable.  So let's go ahead and go inside of the CSS so that we can style the title as well as the text  that we have here. And let's find the comment. And we're going to start by selecting the newsletter.  And I'm going to give it a padding top actually not a padding top by padding bottom of six REM.  Then I'm going to select the newsletter title.  And this is going to have the font size which is going to be LG.  Then I'm going to select the newsletter Description.  In This will have a margin bottom  should be margin model. And this is going to be three rem and that's going to give us some  more separation between the text in the form. And that's pretty much it for this section. The next  section is going to be the footer. So let's go back inside of the index html. And let's begin.  So we're almost there. The only thing we have left after this obviously is going to be the CSS for  the footer, and then the blog posts page as well as the CSS for that page. And then we can finally  move on to the media queries so that we can make the website responsive and finish the project.  So for the footer, we are going to be using the footer element.  And we will apply the class of footer as well as the class of section. And then we  will have a div that has the class of footer container as well as the class of container.  And then we will have the class of D grid. Since this one is going to be a grid container as well.  Then in here, I'm going to have a div. This div is going to have the class of company data.  And then here we are going to have all the data that you see here. So it's going to have the logo,  a brief description, social media icons, and then the copyright notice.  So to begin with that, what we have to do is just add in the logo.  Since we already have the logo here, let's just go ahead and scroll all the way back to the top  in this just grabbed this then we can go back inside of the footer and paste it down here.  Then we are going to have a p tag that has the class of company description.  And then here again, we can just use some dummy text. So let me just copy what I have here.  Paste it in here. And then we can just go ahead and add in the social media icons. So for that,  I'm going to have a UL that has the class of list and the class of social media.  Then we will have an ally that has the class of list item.  Then we will have the anchor tag list link. And finally,  inside of here we will have each individual icon so the first One is going to be for Instagram, Ri,  Instagram, and then the line. So let's go ahead and take a look at that. Now we see the icon,  then we can just go ahead and copy this down below as many times as you need.  And now all we have to do is just change the classes. So for this one, we can do Facebook  Circle Line. And then the third one is going to be for Twitter.  And the last one is going to be for Pinterest.  And now we have all the icons that we need. So the last thing that we need here is going to be the  copyright notice. So this is just going to be a span that has the class of copyright.  Notice, and then we just use ampersand copy 2021 We're actually in 2022 by now.  And this should be a semicolon. And now that's just going to generate the little copyright icon.  So next, we can just do newsflash. All rights reserved.  Then the next thing that I want to do is have another div. And this is going to be for  the content that we have here. So we want to group them together.  And we're Wi Fi. So outside of this company data div,  we want to have another div. And this div is not going to have any classes. This is only for  the purpose. Since we are using grid here on the main container, we want to group them together,  just so that the titles here are also together and not like all spread around this container. So  what we have to do next is inside of here, we will have an h six that is going to have  a class of title, as well as the class of footer, title. And then we can just have  any name depending on whatever for the items you want. This one, I called it categories.  Then underneath, I have another URL. There has the class of list, as well as the class of footer  list. And the second class of footer list is just so that I can override some of the styles  that the list has without having to impact every single list. Then again, Li list item,  anchor tag list link. And then for the text, we can do anything. In this example, I'll just do the  same text everywhere else. So I'm actually just going to do a sample item. And now we can just  copy it down below as many times as we need. So in this situation I'm doing about, let me just do  six. So now that we have the base for every single item, it's as simple as just copying this one.  And now I'm going to paste it underneath two more times. So we have a total of three of them.  Just like so. And just to make it a little different. Let me change the titles. So here  I can say company. And then for this one, what did I actually call it can't remember. So here we have  company useful links and that's going to be it for the markup or the footer. So let's go head  back inside of the main dot CSS. And let's style this up. So the first thing that I'm going to do  is select the footer. The footer is going to have a background color  which is going to be the secondary background color. And then the footer container.  In this will have a gap  then as far as the company data, we want to do a display of flex here  then A flex direction of column to bring back down. Flex direction.  And the next thing that I want to do in here is  change the order by moving this data all the way to the bottom.  So we can do order of one. And that's going to move it down. And I know where you're thinking,  why is it going to the second place if the order is set to one and not just stay up here? Well,  that's because it starts with zero and not one. So technically, number zero would be the first one.  Then I'm going to select the company description.  And this we'll have a margin block.  And I'm going to do the margin SM.  Then the max width here that I'm going to set is going to be  75%. Just to limit how wide it's going to stretch to  the next thing that I'm going to select is going to be the social media.  And here I'm going to set a margin bottom in this one is going to be the margin MD.  Now I'm going to select the copyright notice.  And I'm going to turn the Opacity down just to make it slightly lighter.  Now I'm going to select the footer list. Now I'm going to select the footer list.  And this will have a flex direction of column. Then I'm going to align items, flex start  just like so. And then I'm going to select the folder title.  And what I'm going to do here is change the font size. To me, maybe it'll do font size MD  text transform. Transform is going to be of uppercase  and then a margin bottom or additional separation of margin asset. And that's  looking pretty good. Well, we have an issue here. So that's going to be within the markup.  Let's go ahead and find it. So useful links. It must have happened when I changed the text here.  So that was the issue right there. Now everything looks pretty good.  So the next thing that I'm going to do now is style the scroll bar.  Let me make a comment here, scroll bar style Stiles.  And what I want to do here is let the scroll bar  so for that we actually have to use a prefix WebKit scroll bar  and I'm going to change the width to one ram. Then what I'll do is select the scroll bar track  and then here I'm going to change the background color to f1 f1 f1.  Then I'm going to select the scroll bar thumb  and this will have a different color so background and then 34254.  Then I'm going to select the scroll bar thumb when it's being hovered and add another color to it.  So in fact, we can just copy this, paste that down here. And now we can just add over to it.  And the color that I'm going to add here is going to be slightly darker. So two, e three, zero,  and then three, B and as you can see if we hover over it here, it shows up. Maybe I could do 1.5  To make it slightly bigger. That's actually fine. So I guess we can just keep that.  Although in the demo, it's smaller. Well, it's not a big deal. So I guess we can just keep it at  one. And now we can go ahead and work on the blog post page. So let's open up the sidebar Ctrl B,  and then open up the post dot HTML. So as you can see here, I'm already including the header markup,  as well as the search, and then the footer, because this is content that every single  page is going to have in common. So we have to include it. So if we navigate to the page,  here, you see the header, as well as the footer, and then everything else  still works the same. So the focus here is going to be in between this blog post comment,  and the footer comment. This is where all the blog posts markup is going to go. So let me close this  and everything else that we don't need.  And what we are going to do here is start by having a section that has the class of blog post,  as well as a class of section, header offset. And if you remember, this class is going to move  a particular section that is next to the header down enough so that it's not sitting underneath.  So then what we are going to do here is have another div and this div is going  to have the class of blog post container. And let's also apply the container class.  And underneath of this, we are going to have another div  and this div is going to have the class of blog post data.  So this is going to be the container for all the data that we have right here. And then we can just  repeat what we have used to before, which is the one before that, let's add in an h3 that has the  class of title, as well as the class of blog post title. And then we can just repeat the title here.  And under here, what we are going to do  is say that we want a div and this div is going to have a class of Article data.  And then we will have three spans as we did before, the middle one is going to have the class  of spacer. I can't even remember what I call this. So let me just quickly double check.  So we had let's quickly find ID and one of the article series or data.  So article data spacer, that's what we call it. So let's use it here. And then here, we can just add.  And then this is going to be the estimated read time.  So that's going to be the base for that. So still, within this blog post data, we need to  also have an image. And this image is going to be underneath of this article data div. So for that,  we will use an image and this image is going to be found inside of the assets folder,  images folder. And then featured featured one. So let's see how that looks. It looks good so far.  And let me just make sure that I have this one correct as well.  So let's go all the way back to the top header. Section Header offset.  And there we go. Now it's under. So let me close the sidebar now. And we can continue.  So this one is going to be for this one. Let's go underneath. And in here we want to have an  inner container because we want to limit this even further when we're on larger screens.  So we will have a class of container here applied to a div  and inside of this div we are going to have a p tag, some dummy text  and then we can just read pita underneath. Let me just add some separation here so that  the text is more readable, then we are going to have a blockquote,  which is going to be this. And for this, we can just use the blockquote element.  And let's apply a class of quote.  In here, I'm going to have a p tag. And then I'm going to have a span,  this ban is going to have an icon inside of it, which is going to be for the quotation marks.  So this icon is going to have a class of Ri double quotes  L. So let's take a look at that. And now we see the icon showing up here.  Then, after this span closing tag, we are going to add some additional text. In effect,  we don't really want a lot. So what I'll do is just copy a portion of this,  let's say about here, and then pasted in here. And then we can just repeat the same thing  with the span, so that we get the closing quotation mark. So the only difference here is  that we have to change the icon here so that it's facing the left. In this one, we can just change  it from L to R, or write, just like so. And then we just repeat the same p tag that we have here,  underneath. And now we can go ahead and add the card itself. So this card is going to be inside  in order div is going to be inside in order div is going to be inside an outer div.  And we are going to call this one author. And then we will make it a grid container.  In here, we are going to have a div and this div is going to have the class of author image box.  Inside of it, we will have an image. And this image is going to have the class of  Article image. And we can find it inside of the assets folder, images folder. And then  it's going to be the author that jpg. So let's scroll down here. Now we can see the image.  And then we can go underneath of this author image box div. And now we will have another  div that has the class author about and then here, we will just have a description of the  author including the name and so on. So it will be an h3 that has the class of author name.  Then we can use John Doe here, then we will have a p tag. This p tag is going to have some dummy  text as well. Let me make this smaller. And under the p tag, we will have the social media icons.  And in fact, something that we can do is just borrow it from here. Since it will be basically  the same thing. And then we can just paste it here. Let me see how many did we have we had  Instagram, Facebook and Twitter. So I guess we don't need the last one.  And yeah, that's pretty much everything that we need for the markup as far as the blog post.  So now let's go inside of the CSS file and styled up this page. So we will begin here  by selecting the blog post. And I'm going to give this a padding bottom  of five run. Then I'm going to select the block post data and I'm going to give this a display  of flex. Then box direction column. And then I want to align items to the center.  I'm going to do the same thing for the text align And then I'm going to apply a padding block  of 2.5 round. And then I'm going to select the blog post title.  And here, what I want to do is add responsive typography. So I'm going to set the font size,  and then I'm going to use clamp. So here, what I'll do is specify a minimum font size,  then in here, I want to set a font size that is going to adjust based on the viewport width. So  in this situation, I'm going to do five B W. And then this right here is going to be the maximum  size. So for example, if we go ahead and test that out,  let me just make sure that I grabbed the right handle.  And even then I still wasn't able to grab it, notice how this the size of the font  is growing. And once it gets to that six RAM, it just stops growing all together.  So that's the way that you can set responsive typography.  Underneath, what I'm going to do is select the blog post data.  And then I'm selecting the article data that's inside of it. And this will have a margin bottom  margin bottom, which is going to be 2.5. Rem, then I'm going to select the blog post data image  the width here is going to be 100%. The height is going to be the item min height as some and then  object fit cover. We also want to set an object position here.  And it will be center 10% Just like so then I'm going to select the blog posts container.  And then the container that is inside of it. So this would be  this container that we have here inside of this blog post container.  In here, I'm going to set a max width, this max width is going to be  90 REM. So that's as large as it will get, then I'm going to get rid of the padding that we have  by default on the container class. And then this will be a display of flex, display,  flex. And then here we want to change the flex direction back to column.  And then we are going to apply a gap which is going to be the gap variable that we have.  And that's just going to basically add some spacing between all of our items,  as you can see here. So the next thing that I want to do is style up the quote  the quote is going to have a background color, which is going to be the secondary  background color. And it will also it will also have a padding all around of 2.5 REM.  Then underneath, I'm going to select the quote paragraph  and I'm going to set the font style to italic.  Then I'm going to select the quote span. And this will have a font size of five rent.  So that's going to make the quotes here larger. And I should be selecting the span I just like  so. Although that's actually pretty large. Let me make it smaller. Let's do something like half it's  actually too small. So let's do 3.5 And that's better. So now I'm going to select the author  element, or the element with the class of author and I'm going to apply a margin top of five  rem and then a gap which is going to be the gap variable that we already have  then we can go ahead and add a background color,  which is going to be the secondary background color.  Let me just scroll down so that we can see what's going on. And what we can't  see much of it right now because of the large image. So let's switch that out  author image box. And all we have to do here is just give it a position of vertiv.  So if we scroll up, now, we still can't see it.  But we're going to be fixing that shortly. Now the height is going to be item min height as some,  just like so. Then I'm going to select the author about in this we'll have a padding  all around of 1.5 REM, then display will be a flex and flex direction here  will be column. And then in here, I'm going to apply a gap of one REM  for separation between the content that we have here. Now I'll select the author name.  And this will have a color, which is going to be the light color followed by font weight  of 400. The next thing that I'm going to select is going to be the author paragraph.  In this will have a max width of 50 RAM and a margin bottom of one run.  Finally, we are going to select the author, social media  so author about and then the social media element that is inside of it.  Just scroll down a little bit more. And here, what we want to do is set the margin top  to auto. And what this will do is that when we have a lot more room towards the bottom,  this social media container is going to move as far as I can to the bottom without touching this.  And then I'm also going to get rid of the margin bottom that we have here by setting it to zero.  So now comes the fun part. This is where we make the website responsive.  So under the media queries, we will do iMedia and then screen and we do min width  followed by the breakpoint that I'm going to be using which is going to be 700 pixels.  Then here, what I want to do is target the trending news box.  And let's go back to the main page so that we can see what's going on. I'm also going to go  ahead and make this smaller back to 100%. Just so that it's easier to show the breakpoints.  So this is going to be for the trending news box which is this one right here.  And what I'm going to do here is change the flex direction to row.  Then what I'll do here is add a line items to the center.  And we still can't see it because we're not at the 700 breakpoint.  But there we are. Then I'm going to select the trending news image box in this will get a width  of 50%. So now things are going to fit better. Now I'm going to select the trending news data  in the margin here is going to be set to auto. So now this will move towards the middle.  text align here will be center as well. Then I'm going to select the newsletter description.  So let me scroll back down to the newsletter right here. So news letter description  and the max width here is going to be set to 40 Rum. And then with the form container, inner  I'm going to set an align items here of center, just like so. Then  for the popular tags, while the popular tags actually come before this, let me just move up  with the popular tags container, as well as the footer container.  What I'll do here is just change the layout. So now we're going to have sets side by side. So  what I'll do is say grid template columns, I want to use the repeat function. And then I want to  specify how many times I want this repeated. So I want to two times and it's going to be one  fraction each. So now you can see that they're both side by side. Then, or the company data.  Which is this right here, I'm going to change the order back to the first one, so zero,  and that's going to place it over here instead. Then if we go back to the block Posts page, here,  I'm going to select the author. And I'm going to set a grid template columns here. So the first  side is going to be 25. Rem, that's decide for the image. And then the other one is going to be one  fraction, so as much space as it can. And that's going to give us a better layout. And notice how  the margin auto down here is coming into play by pushing it all the way to the to the bottom.  So let's now work on the second breakpoint. Let me just grab this, paste it underneath.  And then I can just go ahead and close this. So the second breakpoint is going to be  for tablets. So I'm going to change this one to 768.  And when it comes to choosing your breakpoints, all you have to do is just go on to a responsive  view. So let me just make this bigger. So for example, you go on the responsive view. And then  all you have to do is just use the handle to stretch the viewport here and just kind  of figure out where the layout breaks. And then that's going to allow you to choose a  breakpoint where you can correct that issue that you're currently having with the layout breaking.  So let me quickly close that. And let's go back to working on the second breakpoint.  So let's go back to the main page. And this is going to be for the featured  content. So featured content. And here, I want to set a grid template columns.  So I want this to be repeated four times, and then one fraction each.  Then what I want to do is specify some grid, template rows and row template rows.  Here, I want to say that the first one is going to be five RAM. So that's going to be  for this banner. Then the other ones, I'm going to repeat them four times one fraction each as well.  Don't worry still looks messed up. But it's going to make a lot more sense  soon. So let me just make this bigger. So that I have a chance to open up the  responsive view here. And then if we go here and take a look at the grid. And what we can do now is  basically position the elements where we want them to go. So as far as the headline banner,  what I'll do here is set a grid column. And then I want to say start  at one, so that's going to be the first line and stretch all the way across here to negative six.  So for this, we can just do negative one. And now notice how the layout is correcting itself.  And this let me just remove this so that it's more visible. Now the banner is stretching all across.  Then what I'll do is stretch it further down. So I'm going to set a grid row.  And then I'm going to tell it start actually not a grid row. I'm going to be doing that on the other  ones. Not this one. What I want to set here is a font size which is going to be the font size  So now I'm going to select the featured article. And this one is going to have a grid column,  it will start at three, and then stretch all the way to the end, just like so.  Then for the grid row, I'm going to say start a line number two, and finished a number four.  Then I'm going to select the featured article number one, this is me selecting them individually  should be number one. And then here, I'm going to set a grid column  telling it to start at one end finish at three, like so.  Let me copy this, paste it underneath. And now I'm going to change this to number two.  And for number two, well actually, for number two, we don't need it. Because number two,  it's already sharing the styles that we just applied to every single featured article here.  However, the one that we do need is number three. And this one is going to start at number one,  and then stretch all across to the end. Just like we did here with the banner,  then what I want to do is tell it to start on the grid row at four, and finish at six. Just like  so. And notice how we went from a boring layout to this really nice looking layout that we have now.  So we can close this for now. And the next thing that I want to do is target the older posts.  So here, older posts, and then the article inside of it.  And here I can say grid template columns, the first 125 rem and the rest one fr  so now we get a similar card as to what we had for the blog post. With the author card that we have  done underneath, I'm going to select the older Post article image wrapper. And the height is  going to be set to auto. The next thing that I'm going to do is target the blog post data image  in here, what I want to do is change the height from SM, to MD  just like so. And let's not forget to close this so that it works. And now you see that it does.  And that's going to be it for this breakpoint. Now we move on to the third breakpoint. So again,  as we did before, let me just copy this one. So we don't we don't have to type it again  is the down here. And all we have to do now is change the breakpoints. So here we do, and 24  and then here we are going to reset the menu. So I'm going to change the position to initial  then the width to initial as well. Padding, initial background color  transparent and then the opacity initial. And then we will do the same thing for the transform.  So the next thing that I'm going to do is target the list that is a direct child  of the menu element. And here the flex direction will be changed back to row.  So now we have to hide these two buttons for the sign in and sign up  since we are in the desktop screens now. And to do that, all we have to do is say green, LG hidden.  And now we can say display none and it's gone.  So now what we have to do is show the other two buttons that we had on the side. So if I make this  smaller here, these two buttons To do that, we just select the opposite class that we had for  this, which was screen at some hidden. And then we do a display of block, like so. So the only thing  we have to do here is style display and to make it look like the fancy buttons that we had before.  And to do so first, I'm going to select the sign up BTN. And this will now get a padding all around  of point, or REM. And now the background is going to show up, we still have to animate this button  on hover. So for that, we are going to be creating a keyframe animation. So we will do add keyframe  and then the name. Here, I'm going to call this animate border. And then we usually  have a starting position, and then an ending position. So you can say, from like zero,  than anything in between to 100%, or any amount, to be honest. But here, I'm just going to do  two, which is basically going to be the ending position. Because you can have from basically  saying start here, and then two. And here. So to what I want to animate here is the transform,  Translate X, then negative 50%. And that's pretty much it. So all we have to do now is just add  this animation on hover. So here, I'm going to select the btn that has the class a fancy border.  And I'm going to say that on hover, I want to target there'll be four pseudo element. And then  here I set the animation property, then followed by the name of the keyframe animation, which is  going to be animate border, I'll say, over point 75 seconds, the animation is going to be linear,  and it will be infinite. So if we go ahead and test that out, well, it's not working.  Let's see if we can find the issue. So here select any btn that has the class  of fancy border on hover. And then we target the before pseudo element and apply the animation.  So let me just go ahead and try this by itself. Oh, by the way, the reason why I do the  btn is because I want the effect to only Well, it's working there.  But yeah, I was saying that I only want this effect to apply to this button. And not this right  here. Because if you remember correctly, this also has the fancy border class. So that tells me that  the issue comes from the BTN. So let's go back inside of the index to HTML, make this larger.  And if we scroll down here, find the button. Well here we can see that I have BTT as opposed to BTN.  So I'm assuming I have the same mistake here as well. And yes, we do. So let's correct that.  And now we can just go ahead and close all of this since we are only going to be working within the  CSS file now. So let's make this smaller. And now if we go ahead and test that out,  this doesn't work, which is exactly what we want. But this should not work  and it does. So moving on. The next thing that I want to select is the featured articles container.  In here, what I want to do is apply a grid template columns, one fraction  and then 40 rim which is going to be for the side. So now they're going to be side by side here.  Then what I want to do is select the trending news image box  and this is going to get a width of 10 REM a height of 10 REM as well.  And then what I want to do is select the popular text container  right here. And what I want to do in there is set another The grid template columns, repeat  three times one fraction each. Then for the next one, this is going to be for the footer  container. So I guess we can just copy this, paste it down below. And this one, we can just  change the name to butter container. And this one is going to be repeated five times instead.  Just like so, now we have to correct us because obviously it doesn't look right at all. So since  we are now spanning five, what I can do here is target the company data, company data.  And what I can say is that the grid column, I want it to spin by two, because we have four items.  So let me just comment that out. No. So let me just comment that out for now. So here we have  four items. But now we are basically saying that we want this repeated five times.  So we don't have enough room to fill every single one. So it just stays like that. So what we  do here is just ban this one by two. So now it makes up for the space that we have here empty.  And it just looks a lot better. As you can see. Now I'm going to select the company description  in this is going to have a max width of 85%. So it's just going to stretch out a little bit more.  Now for the copyright notice. Here, I'm going to give this a margin top,  a bottle, and it's going to push the text all the way to the bottom.  Finally, I'm going to select the blog post data image. So let's go back to the blog post page  to blog post data, and then the image inside of it. And the height here is going to be 40 Run  like so. Now we can go ahead and move over to the next breakpoint.  And this breakpoint is going to be at 1200 pixels.  And what I want to do here is very simple, I just want to modify the older post grid wrapper,  which is this one right here. Since now we have plenty of room, what we can do is say older posts.  Grid wrapper, grid template columns. And then I want to repeat this two times one fraction each.  So if we go ahead and make this bigger you'll see that now we get the layout that we want.  Then what I want to do is add another breakpoint. And this one is going to be  at 15 1300 pixels. And then I only want to focus here on the  featured article. And what I'm going to do here, so featured article  is set the grid template column to start at three and stretch all the way to the end. Obviously,  we're not going to see any changes there because we are not in a large enough view.  But if you made it bigger, now you can see it well you can't see it because it'd be a messed up,  we have to correct it. And to do so what we have to do is select featured article number one, and  then I can say here grid column one, end at three. And then for the grid row, we can say start at two  and as you can see here, now this portion is a lot larger and stretches all the way towards  the bottom. Now let's just make sure that everything still works. So looks good so far.  This as well change the theme. Local Storage still works. And while there's an issue here, as you can  see, it's not changing to the appropriate color because if we went back to the original project,  this should be blending in with the same color as the navigation for the head. and everything  else we have here. So let's go ahead and go back inside of Visual Studio code.  And since this is related to the light theme, all we have to do is just come here.  And while this is the issue right here, this should be the light color instead.  So light, and this one should be dark.  So let's go ahead and take a look at that. And it works. But we still don't have the right color.  As you can see. And that's because this one should be the same as this one.  So now we should work. Well, it's still broken, because once the switches to the black color,  the title should be white. So let's take a look at the hover effect for the article.  Which should be somewhere around here.  Oh, that's because I did not add it in. So article. On hover, we want to target the  article title. And what we want to do here is just change the color to be the transparent.  Was it the light color? No, actually, it was the hover  light color. So let's go ahead and test that out. And as you can see, now everything works  perfectly and everything else still looks good. So let's check out the responsiveness.  So right here, this is the mobile view, the navigation still works.  This as well. If we scroll down, everything still looks good. Let me check out the Swiper.  And let's now adjust the viewport width and everything's still  scaling properly. And yeah, it looks like we are done. So if you guys enjoyed this video tutorial,  make sure to show me some love. And if you have any questions, leave them in the  comments down below and hopefully I can clarify any doubts that you might have.  Feel free to also check out the completed files just in case you run into issues as I mentioned  at the beginning, so that you can fix them a lot faster and not have to wait for a response.  Other than that, I'll catch you guys in the next one.\n"