- Read Tutorial
- Watch Guide Video
- Complete the Exercise
We're also going to learn how we can integrate some really neat animations, as you can see right here, if I click on "your name", do you see how that name label drops down, and if I click out of it, it goes away. We also add a really neat little drop shadow here. It's light, it's not too over the top.
I've seen some shadows that really just are way, way too strong, and they don't look good. But here it's just a nice subtle one. You see Google doing a lot of these kinds of effects. If I click away, then it goes back just to a straight line.
Now we're going to walk through how an HTML form looks by default and it looks very different than this. So we're going to see how to build out this cool animation and how to add the drop shadow, all kinds of cool things like that.
We have two different text fields, then we also have this message field which is a text area field that allows users to type paragraphs in, so we're going to work on that. We'll work on how we can add a button that will have a hover effect when you click on it.
This is also something I've seen Google do a lot of where they add these little click features so it gives some depth as the user is clicking on it, which is, I think, a pretty cool feature.
Then here on the left-hand side, we're going to build out a little grid here that'll have the address, the phone, and then the hours. So we definitely have our work cut out for us, but this is going to be really fun.
This is one of my favorite parts of the whole site.
In this guide, we're simply going to add the HTML. Then each one of these features is a little bit advanced, so we're going to take it nice and slow to make sure that you understand exactly what is going on.
Let's switch over into the code, and for our contact page, let's just get rid of all of the content and then we're going to copy everything from the About Us page. So if I paste this in, paste that in, remove the first line and we can say, "Contact Us".
contact.html
<head> <meta charset="utf-8" /> <title>Contact</title> <meta name="viewport" content="width=device-width, initial-scale=1">
Now, we wanna have our icons and our fonts, and then we also are going to wanna have our common styles, our nav, our footer. We want the skewed header. We do want the page container in this case. We do not need the square grid.
I don't know about helpers, but my rule of thumb is to not include something until I know for a fact that I'm going to use it.
contact.html
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Ubuntu+Condensed" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <link rel="stylesheet" href="styles/common.css"> <link rel="stylesheet" href="styles/nav.css"> <link rel="stylesheet" href="styles/footer.css"> <link rel="stylesheet" href="styles/skewed-header.css"> <link rel="stylesheet" href="styles/page-container.css"> </head>
That is everything we need there. Now, in the skewed header, we're going to use another background image. So if you want, I will include a link to it in the show notes, and it's going to be the contact image. So we'll save this into our backgrounds so we have contact. So now we'll be able to use that.
Let's change the image tag, as well as the title.
contact.html
<body> <div class="skewed-header"> <div class="header-bg" style="background-image: url('images/backgrounds/contact.jpg');"></div> <div class="skewed-header-wrapper"> <div class="skewed-header-content"> <div class="heading-wrapper"> <h1>Contact</h1> </div>
Everything in the nav is going to remain the same. Now, here in the page container with this, we're going to keep the page container class because I just wanna have that big wrapper.
But we're going to get rid of everything else inside of it, and then we'll keep the spacer and if we're keeping the spacer, that means we are going to need our helpers. So let's bring that in.
contact.html
<link rel="stylesheet" href="styles/common.css"> <link rel="stylesheet" href="styles/nav.css"> <link rel="stylesheet" href="styles/footer.css"> <link rel="stylesheet" href="styles/skewed-header.css"> <link rel="stylesheet" href="styles/page-container.css"> <link rel="stylesheet" href="styles/helpers.css">
The reason why I do not like to include items that I'm not going to use is that every time that we include one of these elements, one of these files, there is a small load that comes in from the server with its request.
With each one of these files, the website has to say, "Okay, I need the page container. I need the common CSS file. I need all of these things." The more files that you import the slower your page is going to load.
Now, with files as small as ours, it's not an issue, but it is a best practice that you want to just kinda get in the habit of is only including the items that you genuinely need.
We're going to have page container, I'm going to put a little h1 in here just so we can see it.
contact.html
<div class="page-container"> <h1>I'm in the page container</h1> </div> <div class="spacer60"></div>
Hit save, and then we also want to get rid of all of our squares, so let's get that. We'll take it down to the footer.
contact.html
<div class="spacer60"></div> <div class="footer">
Hit save. Now if you go back, we should have our contact page, at least a placeholder for it.
And yes, we have the correct image up here with the correct skew. We have our page container and it's centered, and contact. So everything looks like it is working properly, so let's come back and now let's start adding the content.
Now, we know that we're going to have a grid. So let's take a look at the final version.
It's going to be a little bit different than what we've used before because we're going to have this little sidebar item and it's going to be pretty small and maybe taking up something like 20% or so of the whole space.
Then our form is going to take up all of the rest of the space. So this is going to be a little bit different than we've implemented before, which is good.
You can get used to working with the two column layout like this. So we know we're going to have a logo, address, we're going to have icons, we're going to have phone number. Then the hours and then this form element. Let's start adding those.
I'm first going to create a contact grid wrapper class, and everything is going to go inside of here.
contact.html
<div class="page-container"> <div class="contact-grid-wrapper"> <div class="company-metadata-sidebar-wrapper"> <div class="logo"> <img src="" alt=""> </div> </div> </div> </div>
Now, some of the names are a little bit verbose but I kind of like that because it's very descriptive. I can take a look at this code and I'm instantly going to know exactly what it's for.
One of the nice benefits in having a few of your classes have long names is that you can use shorter, easier to follow names inside of it.
Since all of the styles we're going to be applying are only going to be for, say for this logo class, they're only going to be called for the logo classes inside of the company metadata sidebar wrapper.
That's one reason why I like to follow that kind of pattern. This image tag is going to be for a logo. I do not believe that I've pulled this one down yet.
We have a logos directory, but we only have the white logo. We need to bring in the darker one, the one with the blue and the gold. So let's go and find that. Once again I'll keep this in the show notes as well. This one I believe is this decamp-fantastic-fries-logo-dark.png.
Save that in our logos folder, now all we need to do to import that one.
contact.html
<div class="page-container"> <div class="contact-grid-wrapper"> <div class="company-metadata-sidebar-wrapper"> <div class="logo"> <img src="images/logos/decamp-fantastic-fries-logo-dark.png" alt="Logo"> </div> </div> </div> </div>
That is our logo class. Now let's create another one.
contact.html
<div class="page-container"> <div class="contact-grid-wrapper"> <div class="company-metadata-sidebar-wrapper"> <div class="logo"> <img src="images/logos/decamp-fantastic-fries-logo-dark.png" alt="Logo"> </div> <div class="company-details-wrapper"> </div> </div> </div> </div>
Now, in the company-details-wrapper, this is where we'll put in the address, the phone number and then the hours. Each one of these is also going to have an icon. So let's grab the map icon from Font Awesome.
Then while we're at it, let's just grab the phone and then the clock for the hours.
Here's the phone.
And now the clock.
Here's the code.
contact.html
<div class="company-details-wrapper"> <i class="fas fa-map-marker-alt"></i> <i class="fas fa-phone-volume"></i> <i class="far fa-clock"></i> </div>
We have all of the icons that we're going to need and we'll just save them right here. As we clone this we'll remove the ones that we don't need.
We have our icon and now I'm just going to add a div here and it's just going to be an empty div. Inside of this, this is where we're going to put the address.
contact.html
<div class="company-details-wrapper"> <i class="fas fa-map-marker-alt"></i> <div> 123 Any St<br>Scottsdale, Arizona </div> <i class="fas fa-phone-volume"></i> <i class="far fa-clock"></i> </div>
So we'll go with the good ol' 1, 2, 3 any street. We're going to use a break tag, so this goes on two lines, and then well put this in Scottsdale, Arizona, 85251 just like that. That's all we need to do right there.
This is going to be our first company details wrapper, and then let me just grab these so that we're not copying them with each one. Now let's go and let's clone this for each of the other elements.
contact.html
<i class="fas fa-phone-volume"></i> <i class="far fa-clock"></i> <div class="company-details-wrapper"> <i class="fas fa-map-marker-alt"></i> <div> 123 Any St<br>Scottsdale, Arizona </div> </div>
So we'll make one and two. So now we have three total, the very first one is for the address. Now let's get one for the phone and then one for the hours.
contact.html
<div class="company-details-wrapper"> <i class="fas fa-map-marker-alt"></i> <div> 123 Any St<br>Scottsdale, Arizona </div> </div> <div class="company-details-wrapper"> <i class="fas fa-phone-volume"></i> <div> 555 555 5555 </div> </div> <div class="company-details-wrapper"> <i class="far fa-clock"></i> <div> 10 AM - MIDNIGHT </div> </div>
That is all of the metadata that we're going to have on that sidebar. So now that we have that, we are ready to build out the structure for our form. So right here, this is the sidebar wrapper. I wanna make sure that I'm going outside of that.
Now we're going to create another div here, and this is going to be a div that I'm going to give a class of form to. Then I'm going inside of here to create a few divs. So I'm going to create three divs for those elements. Remember, we have a name, an email, and a message.
contact.html
<div class="form"> <div class="form-group"> Name </div> <div class="form-group"> Email </div> <div class="form-group"> Message </div> </div>
Then, after that let's add a button. So this is going to be the div that is going to manage the button. So I'll call this centered button wrapper.
contact.html
<div class="form"> <div class="form-group"> Name </div> <div class="form-group"> Email </div> <div class="form-group"> Message </div> <div class="centered-btn-wrapper"> </div> </div>
The reason why I'm going with this name is because if you have a centered button or you create styles for a centered button, there's a good chance you're going to need to add that in multiple parts of the application, maybe even in spots that you don't have a form, you may just need a button that you want centered.
I'm going to go with a little bit more a generic name. We'll also go with a more generic selector. So inside of there, in this case, I will just put the button.
contact.html
<div class="form"> <div class="form-group"> Name </div> <div class="form-group"> Email </div> <div class="form-group"> Message </div> <div class="centered-btn-wrapper"> <button type="submit">Send</button> </div> </div>
This is a built-in HTML element here called button. We'll add a class later. That should be all we need to implement from a content perspective.
Let's switch back and see if our HTML is done. Hit refresh, and yes we have our logo. We have our sidebar, we have the first beginnings of our name, email, message form, and then our button.
It looks like we have all of the HTML for the most part that we're going to need. In the next guide, let's start building out our grid so that we can have the sidebar all lined up here on the left-hand side, and then we can segment out the section we want to be dedicated to the form.
