Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.4 About and Contact Sections

We're almost done with our site design. In this lesson, we'll add About and Contact sections to the home page. Along the way, you'll get to see some really useful elements and containers.

3.4 About and Contact Sections

Hello everyone. I am Reggie Dawson. Welcome to the Semantic UI Framework and JavaScript Projects course with Tuts+. In this video, we will finish up the one page template by adding the final two sections. Now bear in mind, this project is in no way elegant, and just serves as an example of what you can do with Semantic UI. The advantage of this project is that it is easy to set up and create. The disadvantage is that anything beyond this one page project could get out of control fast. One way to counteract that is by using modules which is what we will do when we incorporate other by browsing later videos. First, let's go back to our custom.css file. Here we have added styles for the About and Contacts sections. The About section will use a gradient as its background, while the Contacts section will use a solid color. Otherwise these styles are the same as the other ones we have added for previous sections. Let's go back to our index.html file. Again I'm going to close up the portfolio section so that it's out of our way. The first thing we will do is add a grid for the About section, nothing different from what we have been doing so far. Then we add our four wide column that holds our header that says About. Then we will add a row. Inside this row we add a four wide column with the statistic. A statistic is a class from Semantic that allows you to emphasize a value. We add the statistic as a value and then the label was what will appear beneath the value. Then we add two more four wide columns with some statistics about the agency this project is for. Now since we only added 12 columns to the row we would need to add another row. If not the content we're about to add now will be added in line with the statistics. Then finally we add the row that will hold the About Us information. Now I've added a four wide column with the fluid image. The fluid image class will allow the image to take up the width of the container. Then we add a ribbon label to the image. Adding the label this way will cause it to wrap around the image. Notice that we don't add the image source to the fluid image div and instead add it after the label. Now since the image took up four columns we add a 12 column container to hold the remaining content. Now again, I will fold this content up so it's out of our way. Then finally we need to add another grid for the contact form. Now this is more of the same that we've done throughout this whole project. Just a header that lets the end users know which section this is. Then after that, we add a text input for the name. We then follow that up with an input for the user's email. Then after that we add the text area to hold any messages that the user enters. And then finally we add a button to submit the contact form. Now this isn't going to have any functions wired up to the button and just serves as a mock up. Now after that, our project is finished. Now there is much more we can do with this project, but right now it does what we need. It allows the visitor to easily understand what the company does and what services that they offer. Go ahead and save your file then preview. Now after that, our project is finished. Ultimately however, this was just an example to show what we can do with this framework and some plain JavaScript. In this example, the most we did with JavaScript was alter some list styles to compile to CSS. In the next video we will get started building something in Semantic alongside of React.

Back to the top