2.4 Building a Simple Page

All right, let's put all this building blocks to the text and build a simple landing page with them. Now before we start, I would like to mention that I'm going to be using the ZURB stack to power this whole thing. So if you don't know how to do that or how to use it please check out the previous lesson where I show you how to install it and also give you a very quick tour. Now, to kick things off I created this structure.md file here which basically just outlines what the structure of my land page. So at the very top I want a sticky navbar with a logo and navigational links, and also a small call to action button. Now the important part here is the Magellan Navigation. And Magellan Navigation is a component from Foundation that basically allows you to skip between various sections in your page while highlighting the current menu item. After that I want a hero area that has a title, subtitle and also a large button. Then I have some tabs. Then I have a list of statistics. I have a small call to action, with just a title and a button. Then I have a feature list, followed by a testimonial slider. Finally the main call to action, which has title, subtitle, form and a button. And then a footer with some minimal information and social media buttons. Now for this page I'm going to be using Core Foundation components as well as some Building Blocks. So let's start from the beginning. And I'm actually gonna open this index.html. I'm gonna delete all the content so we start with a blank page. So, first things first, we have to create the sticky magellan navbar. Now the structure for this is pretty simple. We're gonna start with a div. We're gonna set data-sticky-container. Inside, we're gonna create a div with a class of top-bar and we're gonna add data-sticky, and data-margin-top = 0. This is also going to be a sticky menu, so this margin-top allows me to set, and offset from the top part. Next, I'm gonna a div with a class of top-bar-left and another one with a class of top-bar-right. This is standard markup for a Foundation menu bar. In here I'm going to have a ul with a class of menu and inside a list item with a class of menu-text. And in here I'm just going to say site Title. You can also use this to add an image as a logo. For now I'm just gonna settle for text. The top bar, again, I'm gonna set ul or a class of menu and with this I'm gonna say data-magellan. And this is required so that Foundation knows these are the main items that I wanted to use to jump between sections. And here I'm just gonna have a list with all my menu items. So we have tabs, statistics, features, testimonials and a simple button that says Buy Now. Notice that the first four anchor tags point to #tabs, #statistics, and so on. These are the IDs of the sections we're gonna create next. Let's take a look, and there we go. That's our top bar. Nice, well let's move on to what else do we have? Now the hero area. Now for the hero, I'm going to be using a building block. It's called Marketing Site Hero Section, it looks like this. So I'm gonna copy the code necessary for a Foundation CLI. I'm gonna paste that in and that's gonna install my component. So now what I can do is I can simply say hero and I'm gonna include marketing-site-hero, because that is the name of the partial that you see right here. So now we have a nice hero component. However we still need to style this a little bit and change its' markup. So, in here I'm gonna change the title. Instead of this paragraph, I'm going to use an h4 and the button. I want it to be large and I want it to say Buy Now. That's a bit better but we still need to add our background image. So, we're gonna open our building-blocks component that you see right here, I'm gonna set it's hero height to 100 VH which is Viewport Height. And for the background, I'm actually going to point to an image that I just copied in the img folder, that's called desk.png. So I'm gonna say ing/desk.jpg, sorry. I'm gonna position it top right no repeat. I'm gonna save this and this is how the hero looks like. Now I am going to delete some of these styles, for example, h1 I don't want a style for that button around. Also don't want a style for that and I don't want this style. So refresh there it is and maybe I want to add a little bit of a background to this hero content. So I'm just gonna say background-color, I'm going to set an rgba value of white, so 255 all the way, width, 0.5 opacity. So now this is what it looks like. And also I think I want everything to be aligned in the center. So I'm gonna use the text center helper class from Foundation to align everything nicely. Now I also noticed that when I scroll down this top navbar kinda shrinks and I don't want that. So I'm gonna go into my app.css and I'm gonna add my own styles here. So I'm simply going to say custom and I'm gonna target top-bar and I'll say width set to 100%, okay. And that's going to be at 100% all the time. Nice, now let's move on, what is next? We made a hero, now we need a section with Tabs. Let's say tabs, and we'll start with section, id is gonna be equal to tabs, and also in order for this to work with Magellan I'm gonna say data, magellan-target = tabs. Now inside the section I'm gonna write the following, I added a row and a column with a value of 10. I also centered the column and centered the text inside and then I added two tabs. And again this is just place holder text, you can add real content later. So that's the section with tabs. Now since I'm here we'll actually add a little bit of space between those two sections. And I'm gonna fo that with some simple VRs. Yeah, that's better. Now what's next? Let's see tabs, we did this, let's add some statistics. For the statistics we're gonna add more spacers here. I'm gonna start again with the section of id of statistics, and again data-magellan-target="statistics". And inside, we're gonna start with a row and inside that row, I'm gonna say columns. Again, small-10. I'm gonna center them and also I'm gonna center the text. And inside, I'm gonna say an h2 maybe, plus an h5. How about some stats? And just some filler text there as well. Let's do a spacer here as well. And under that I'm going to be using a building block that's called Stats List. And that looks something like this. So again copy the code from Foundation. Going to paste it in, install it and all I have to do now is include it like this, stats-list. And now that's being shown right here. So, let's see, if I click the tabs it's gonna take me to tabs. If I hit statistics it will take me once the page is much taller but what I'm not seeing is a change right here in style. So I think I forgot to add the correct style here. And that should be menu active. Let's set the font weight to bold, right? And that should take care of it. Okay, so there we go tabs and then immediately statistics. There seems to be a little bit of a problem here, maybe a small bug, I'm not sure. All right, let's move on, that's beyond the point actually. Let's see about the small call to action with title and button. That's gonna look something like this. Again using 10 columns and using the call out element. This is a core component. Making it large, giving it a primary color, and inside a title and a button. And the result is this. Also, let's add some spacing between these two sections. Great, now let's move on to the features I believe, let's see small, yeah, okay so we have a feature list. For the feature list I'm actually gonna use a component, a building block that's called Marketing Site 3-Up features section. It looks like this. Again, copy the code, paste that in here, and then let's go to our index. Again, add some spacers. I'm gonna say Features, section with an ID of features. I'm gonna say data-magellan-target = "features" and inside seems like you need to include marketing-site-three-up. Okay, let's take a look. Now these don't look like what we saw here. And that's because they are using flexbox or rather they are using the flexbox grid available in Foundations. So by default, if we go into app.css, you'll see that foundation uses the regular grid. But if we want to use a flex grid, all we have to do is uncomment this, the SaaS or the CSS files will be recompiled with those new styles, and now we have a working grid. Now you could go ahead and add, for example, icons here or images and customize them even further. In my case, it's not really necessary. All I'm gonna do is open it up. And I'm simply going to delete this headline, because I don't want it there. All right, let's move on. What else is next? We have a testimonial slider. For this I am also going to use a building block and it's actually called a testimonial slider. And this is a community made slider, it looks like this. Very simple exactly what I need, so I'm going to copy the code here, paste it into my editor to install it. And then all I have to do is get some spacing between these two. I'm gonna say Testimonials, and I'm gonna have a section with an ID of testimonials. Again, I'm gonna set a data-magellan-target"testimonials" and I'm simply going to include testimonial slider. Okay and it says the partial testimonials. Sorry, a bit of a typo there. And now I have a testimonial slider. Okay, what else do we have? We have the main call to action now. That has title, subtitle, a forum, and a large CTA button. For this, I'm going to be using yet another building block, and it's called Form With Icons. Copy that as well, paste that in here, just repeat, and call this the main CTA. We're gonna start with a div class'row', and inside columns, let's say small-6.small-centered, and also text-center. And simply include them like this, form.icon segway that's called. Okay, I'm gonna do just a little bit of a modification to this one. As you can see, it loads font awesome here on the top. I'm gonna change the title and I'm going to delete this password group. And for the button, I'm gonna use a large button and the button should say Buy Now. So now this is my main call to action. Finally, let's about the footer and the footer, as I was saying in my description here, should offer minimal information and social media buttons. And a footer that I picked is called social media footer. So again let's pop in all of that. Simply gonna say footer and I'm going to load social footer. Now coming back here. Now we can see the footer. And again we can customize this any way you want, we can add our own content of course. But this landing page is now complete and you can actually see that [LAUGH] when we used this building block, font awesome was already loaded so these icons shows that as well. So that's a very simple learning page and you saw just how easy it was to build it using foundation and the building blocks. Now of course we had a lot of help from the amazing ZURB stack which did all the compiling and all the downloading and it added all the dependencies for us. But all in all this is an amazing package. As I was saying earlier in this course you can create your own building blocks. There are some detailed instructions on the ZURB website and you can also find a link in the lesson notes. With that said, I'd like to thank you very much for watching this short course. I'm and until next time, take care.