My name's Kyle and this is Web Dev simplified.

We make the Web easy to understand and accessible for everyone so you can realize your dream of becoming a better Web developer.

This is going to be a special two part series where I work with poor T x C.

In order to create this card Machin game that you see here, let me demonstrate quick.

So first you click to start and you'll hear some background music.

Start playing, and then you can click on any of these cards and another one foot back over.

If you get an incorrect match and ascended, you find an actual match.

They'll just play a little animation here, and you can continue to go until you find all the matches and get a victory screen.

Or until you don't find enough matches before the time runs out and you'll get it game over screen and then you can start the game over from that.

So in my video, I'm going to be creating all the styles for this page.

We're going to lay everything out, create all the different card animations and the card images that you see here and then import taxes video, which is going to be the second part.

You're going to create all of the different interactivity.

So in order to make the timer countdown, the flips count up.

Make the cards put when you click on him.

All that fun stuff is going to be done in his video, which is all going to Java script.

Elated.

So let's get started into this right now To get started.

I have a product open and visual studio code with an empty HTML page that links our style sheet folder containing all the different assets will pay for this project are cursed response images and audio and then, lastly, in empty style shoots CSS Page that we can use in order to style are different elements.

So to get started, let's create tht ammo for the text that is going to be at the top for a page here.

The first thing that we want to do is you want to include in H one, which is going to include a title of our page mixed mixture match.

We're just gonna give it a class of page title so that we can select it in our CSS later, and we'll put in here the text mix or a match.

Next.

We want to include a container for actual game, so we'll get him here.

Creative.

Give it a class of gain container, and this will contain all of our game information, such as our time and our member of flips, as well as all the cards for our game.

Then, inside of that, we'll have another dude.

This one will contain our game information, so we'll give it to the class of game information container.

Actually, it's called Game Info Container, and this is what's containing our time and our number of flips.

And in here we'll have a gives so we'll have a live here.

This will contain our actual time.

Give it a class of game info, and in here we'll put our actual time as well as inside of this band with an I d of time remaining, we'll flip the actual time value of 100 witches are starting time.

The reason that we're wrapping this inside of a span here is so that later important axes video.

He can select this value and change it inside of the job script without having to rewrite this time section.

Now we can copy this pasted down and do the same thing for flips.

So we'll say, Foot's here and we'll change your i d from time remaining to be flows.

Lastly, default that values zero.

And now, if we open this up using live server, we could see what we have.

So far as you see, we have our title as well, with the time remaining as well as our counter flips.

So now let's go into our style sheet and style these different elements here, the first thing we want to do if you see over here we have custom funds for both of these, so we're going to want to include these different farms.

To do that, we use the font face property and then we'll give our found a name using font family.

In our case, the first part that we're going to want to use, we're going to call it creepy.

This is going to be the fun, but it's going to be for a title of our age.

We're going to give that phone a source.

So in our case, this source is going to come from our assets you're our assets.

Buller.

It's going to be from the Fonz folder inside of that, and it's called creepy right there.

And then we need to tell the format of this.

In our case, the format is what sense is a walking pile.

I will just do this again.

So go here.

Copy this source pasted down and the same thing for a second file, which is a walk to file, that we have support for both types of files, depending on which browser supports which type.

And then that's all we need to do for this pond face.

So it's copy this one more time because we have our second fund, which is called lunacy.

We could just copied that down here since we have a lunacy dot off and I want to see that off to, as you can see inside of this ponds Fuller here and now we have both of those phones important in our page, and we can start using them.

The last thing that I want to do before we get started styling.

It's changed our site to use the box sizing of Border Box, which will make sizing our elements based on a certain with much easier to do next, we can tackle the actual background color that you see here on our site.

As you can see, it's not quite a solid color, and it actually changes colors, which dark on the outside and lighter on the inside of the screen.

So to do that, we're going to select our body element, and we're going to give it zero margin so that our background will expand to the very end of our page.

We'll also get a background here, and we're going to use was called a radio ingredient, a radio greedy int.

The simplest form of it takes two values.

The first value is the color at the very center of the screen, and the second color is the color on the very outside of the element.

So in our case, we're going to use this Orange is color for the very inside of our screen, and then we're going to use this brownish orange color on the outside of our screen.

If we say that and look at our view over here, you see that we now have this different background.

Being applied to our elements of yoga is it's repeating all over a page based on the height of this section of our cage.

In order to fix this, what we want is we want our page to be the full height of the screen.

To do this, we'll select HTML here.

We'll set the minimum height here to be 100 you guys.

And now this means that our HTML will stretch to be at least the full size of this cream, no matter what.

So there we go.

Now we have the background done.

Now let's work on creating the actual fonts and colors for different titles here.

So let's first select our main title, which is Paige title and inside of here.

We're going to give it very orangish color for our Halloween theme.

So we get this color right here.

We want to give it the fun family of that creepy farm that we created, and then we also want to give it a backup fund.

For if this creepy fun is not able to look, soldiers used to serve as our default fallback fund.

Next, we want to just change the font, wait to not be bold because H ones by default, they're bolted we want to align this text in the center of our screen.

And then lastly, we just want to increase the fun size by quite a bit.

So we'll get a fun size of 60 m If we save that and go back over here, you'll see that our title is now exactly how we want it to be.

The next thing we need to work on is creating the different styles for our game info here city that will select our game info class.

We'll give it a car here, which is going to be a slightly whiter version of that Halloween, the orange color that we created up here and will increase the farm sized to be 40 m.

If you say that you now see that we have this place looking style here in order to apply our fun, we just need to do the same exact thing where we use our fun family.

And instead of using creepy, we use that lunacy farms that we created earlier.

And if you say that, you know, see what we get that funky looking farm for our color here, which is exactly what our farm looks like over here That's all the style and we need to do in order to get our funds toe look as we want them to.

The next thing we want to work on is creating the actual cards and laying out the different elements instead of your page to be in this four by four grid.

To prepare for that, let's jump back into our index that html and start adding the different cards that we want to our container.

So inside of our game container here, Bush was added, Do with the class of card, and we're gonna wanna add 16 of these dibs in our page, since we have 16 different carbs.

So let's do that so quick.

There we go.

We got 16 different cards inside of our container and inside of our styles that CSS temporarily Lester's create a style for a card where we give the background color of black.

We're going to give it a fight here of 175 pixels and a Witte of 125 pixels.

Now, if we save that look back, you see that we just have a block of text right now, which is fine because there's no spacing around our elements and order to create a grid like few here we want to do is we want to select our game container that we created earlier that wraps all these different elements.

And we want to use what's called CSS Grid in order to display this.

Yeah, we just had a display of great honor aged in order to create a Gridley up.

And then we needed to supply the columns we want for our grid.

So we'll say grid template columns, and we want to have repeat of four times.

And we just want auto size.

So we want four columns that will automatically size themselves to be whatever the size of the elements inside of them are.

So if we saved that, you see that we now have four different columns, and in order to see the different elements, let's add a little bit of a gap between our elements.

What?

Adding great crab gap here 10 pixels and this essentially what at 10 fixes the spacing around all of our different elements.

And as you can see, we now have our cards just like we want laid out in our grid.

We'll see that our grid is not quite laid out where Texas on the top and our cards are on the bottom to get around this.

What?

Select that game in foot container that we made earlier.

Which wraps are different game in four elements in order to tell our info container to take up the entire first row.

What we want to do is set the grid columns, and we want to say that it should go from column number one to calm them.

Negative one, which is the very last column.

It's a little span the entirety of this column.

If we say that you now say that this road takes up the entire first crow and nothing else was allowed on there now to get our text tow line up side by side, we could just set the display here Flex.

We can use justify content space between inert or get our elements to be spaced out as far away as possible.

And now you can see we have a nice four by four grid with all of our different cards inside of it.

The last thing that we want to do is actually style our group container here to space out of omens.

Little nicer.

What's that?

A nice margin.

50 pixels on all sides.

And then we're going to want to justify all of our content to the center, which will just send her a line are great inside of the screen.

Now, if we say that you see that our grid is nice and center, all of our elements are perfectly spaced up, and our great is starting to look a lot like our Paige over here.

The next thing we want to do is work on style in the actual cards themselves, so that they're not just black rectangles.

In order to do that, let's take a look at the different elements that make up our card.

As you can see, we have these four different cobweb images in the corners as well as a spider image in the very center of our screen.

So let's go to our index html page here and start.

Darling, what are card should look like?

We know that our card is going to have two different faces, so inside of our card element here was created it.

We're going to give it a class of card back, and this is going to be where we style the actual elements for the backside of our card, which you see here will also give it a class of card face.

Since we may want to share some styles between the front and back of our car, then we want to create another Dave, and this is going to be for the front of our card.

So we'll get a class here.

You're going to be a car in front as well as that card face class that we created love.

And this will be for all the stuff on the front of our car, as you can see when we full bar card over has the same four cobwebs.

But it also has another icon inside of it and its scale slightly differently when you hover over it.

So now, inside of our card back, What we want to do is we want to add the actual cobweb images inside of here.

So they do that.

We use an image tag.

We're going to give it a class of Kabul, says it's going to be a cobweb and another class of cobweb talk left.

Since we want this to be our top left Coplin.

Next, we're going to give it a source to image, which is our assets images.

And it's Cobb loved A P and G.

And there we go.

Now we could just close out that image tag.

We can copy this image tag four different times ever go, and we want to use tough left top, right.

We want to use bottom left and bottom, right, And this We will have a cobbler in all four different corners of our screen.

And then lastly, we need one more image.

Take care.

But instead of using a cobweb, we're going to use the spider.

So this is going to have a class of spider instead of cobweb.