Tour Page Styles

[00:00:00]
>> Right, so we are done with easy design and we are moving on to our medium design. So we are in Chapter 4, practical.css.education. And if you take a look at that website, you will see what we are going to be building for our medium design. And actually we're not gonna start with what is pictured here, we will start with the tour page.

[00:00:23]
And the tour page, if you scroll down about halfway down the page or so, you will find a picture of the tour page. It looks like this. So we have now added to the tours that we had before. Already had the tours. Obviously, we're adding now a button so that you can buy tickets.

[00:00:43]
I notice we have some buttons that are sold out, yeah. Other changes that you see there?
>> Gradient.
>> Background gradiant.
>> There's definitely a background gradient. By the way, I apologize for the stripy thing. The way I took a screenshot of this meant the gradient kept redrawing.

[00:01:03]
So that's why it looks that way. It should be smooth gradient from top to bottom. Any other changes that you see?
>> It has social media.
>> There's social media down here in the footer. So that's something that we're gonna need to build. And anything else that you see?

[00:01:18]
>> Font.
>> The fonts are different, yeah. So we have some additional fonts that are here in place. So that's the kinda stuff that we're gonna think about here for our tour page. So if you open up, you're starting CodePen. All right, And that starting CodePen, wow, I forgot to put it on there.

[00:01:46]
So to get to the starting CodePen, click on the CodePen Collection up here on the top. So put you into a table of contents. And on the second page, look for 4a, medium design tour page begin. That is where we're going to start from, okay? So 4a, medium design tour page begin.

[00:02:14]
I'll add the link for this. Okay, so once we've got that open, make sure you fork that to your account. And so you'll see here what we have. We are starting with basically the stuff that we had on our old site, okay? We've got some new wild and wonderful things here that are coming in.

[00:02:40]
I have given you a few things I was gonna talk about in a little bit more detail, just to sort of move the course along a little bit. So let's just look at the markup here and see what we've got. So at the beginning, we have a wrapper here and I put a note at the top.

[00:02:55]
Eventually, we need to add some top navigation, we will add that later. We have a wrapper around the whole thing. We have the header with the logojust like we had before, nothing to change there. We have our main focus of the site, that's our tour, we have our individual dates.

[00:03:12]
But now, in addition to that date information, we have an a and sometimes they have one class and sometimes they have two button-primary button-sold out. Make sense? Okay, and so that's goes down here through the main part of the page. Down here in the footer, I've got some SVGs down here that are for the social media, they are inside of a link that go to SoundCloud, Spotify, and Instagram.

[00:03:45]
Make sense? Okay, so always good to take a look at your HTML before you start so you understand what you're working with. All right, so let's start making some changes here to our CSS. So since we're working on the tour page, where we're gonna start is we can get rid of this layer here for reviews, which just doesn't apply to this particular page.

[00:04:11]
And to keep our CSS down, you can just get rid of the layer for reviews. The media queries that are here, we can get rid of those as well. We actually don't want it to do the designs that we had for the easy page, right, where it goes to this wild and wacky thing here.

[00:04:28]
So it doesn't work on this page. So let's get rid of that. So inside of our media query for the main width of 800 pixels, we can get rid of main, main h1, and aside. So basically, the only thing that we're keeping there in that media query is our wrapper with.

[00:04:46]
Likewise in the larger media query, get rid of main. So when you're done, it should look like this. You should have base, header banner tour. You should have the media query with just the wrappers in it, okay? I'll give you a second. Everybody good? Okay, so let's focus on these buttons here to start with.

[00:05:08]
So you'll see here, I have a button, it's a link currently. It says, Sold Out, okay? And this one says, Sold Out. And then down here, I have Buy Tickets. That one's actually underlined, everybody see that? Okay, let's look in the HTML at how those are looking. So I am up around line number 13.

[00:05:33]
So here, we have a paragraph, inside of that we have a link. It says, a class button-primary button-soldout. What is missing from that element?
>> A button.
>> Href.
>> There's an href missing, right? There's no actual href in there, there is nothing. When this button is clicked, it doesn't go anywhere.

[00:05:56]
How cool is that? This is the easiest way if you wanna have a button that ultimately when you mouse over it, nothing happens, it looks like that Sold Out button. This is the easiest way to code it. It goes nowhere, all right? Why didn't I use the button element here?

[00:06:13]
Why did I use a instead of button? Anyone have any comment on that? Do we have any idea why I would ever do such a thing?
>> Cuz it's a link that goes to an external website.
>> It is a link. It actually doesn't matter if it goes to an external website.

[00:06:32]
This is a link. Obviously, it probably would go to an external website, right, where you go buy your tickets. It's not a button. What are buttons used for? The actual HTML button, what is that used for?
>> Interpage, or sorry, same page interaction, or form submission.
>> Form submission, yes, that's one thing.

[00:06:53]
Anything that has to do with JavaScript, okay? So some kind of functionality is happening, basically anything that's not a link. So if you wanna have a button, it looks like a button, but it's going somewhere else, you code it like a link, and then you style it to look like a button.

[00:07:12]
Make sense? A link is a link, people. A link is a link. We will die on this hill, all right? So that's what's going on for those sold out ones. They have a class, but they have no href, that's gonna help us make a Sold Out button. But notice that we still have a hover state, look at that.

[00:07:34]
That's because links have hover states. So somehow we're gonna have to disable that, yeah. Down here, we have a hover state too, but that when we actually want, because I mean ultimately that would go somewhere, right? Okay, and those are just the button primary by itself. So let's go through and set up some styling for these then.

[00:08:00]
And so, Here's what I'm gonna do. Currently, we have a layer that's called header-banner-tour. Let's turn off the part of that. Let's rename that layer to just header and banner, okay? And then down here, we have date and club. Date and club, remember, apply to this tour section.

[00:08:25]
So I'm going to end my layer here on line 136. So that'll just be header and banner, those styles. And then for date and club, we'll set up a new layer, layer tour. And there's the date in the club inside of that. Some other changes we're gonna need to make.

[00:09:03]
If we go to our base styling here, right now on our body, we have a text-align center; that's set. In this medium design, we don't need that. So you can get rid of the text-align center on the body. And in our variables up here, we have a font variable here for sans-serif.

[00:09:27]
We will have two more variables. I've already set up this CodePen to link to the Google fonts, we don't have to go through that whole process again. So you'll just trust me that it was done correctly. We're gonna have a serif font, and I'm gonna call this Cormorant Garamond, serif;.

[00:09:50]
And I'm gonna add what's called cursive and that one is Pacifico, cursive;. So those are the three fonts that we're working with so we can configure those variables. And then, of course, if you were working in real life, you would add your Google font links to those fonts and in CodePen.

[00:10:13]
You would put it in the right place in CodePen. I've already done that for you. One of the other nice things that we have is we have a lovely gradient background to this page, instead of having the solid teal color that we have now. And there are lots of websites if you Google for CSS gradient.

[00:10:35]
I believe one is css-gradient.io where you can just go and create these gradients, so I had done that for you. And, Hopefully, this is relatively straightforward to type in. But anyway, if it's not, you can always go to the ending CodePen and copy it. All right, this is our gradient.

[00:10:59]
It's gonna be the name of our variable, cuz it is. It's gonna be a linear gradient. And into that, we're gonna say 180deg, var(--black). So it's gonna go from black starting at 0%, and it will go to var, oops, there's a comma, 0%, var(--teal). It's gonna go to teal at 100%.

[00:11:28]
This is a pretty straightforward gradient. So normally, it would go from teal to black, where the 180 switches it around, so black's on the top, teal's on the bottom. And so that it will set up the gradient, its here on the page. So just cuz you have a variable doesn't mean it applies, right?

[00:11:51]
Where do I apply this?
>> Body.
>> Body.
>> On the body element, exactly. So instead of background color of our teal, we can change that to var (--gradient), see if that works. And it doesn't work, why doesn't it work? First rule of CSS, don't freak out. What's wrong?

[00:12:19]
Says background color, doesn't it? This isn't a color, we just say background Okay, so gradients are different than colors, don't freak. [LAUGH] Nice? Okay, much better, pops off the page a little bit better than that teal by itself. All right, sweet, and you can see it stretches all the way down the page, isn't that nice?

[00:12:55]
>> I think you need quote around Pacifico on cursive.
>> Yeah, thank you, Pacifico. Okay,