We want users to be able to reach out to our photographer, especially if they're looking to hire him! Let's add a "Contact Me" section with links to make it easy for them. Or perhaps they really like our work and want to follow our photographer on social media? Let's make that easy, too!
Beneath the previous section, create a div with an id of contact. Use the appropriate Bootstrap container class to make this section use up the full width of the viewport.
First, let's add a subheading,
<h2>, to label this section. Put text in the subheading, "Contact Me."
Secondly, add a paragraph tag containing the text: "I'm available for freelance—from events like weddings to documenting your next adventure, let's chat!"
Now add a link with the special mailto schema, that begins an e-mail to a fictional e-mail address such as firstname.lastname@example.org.
Finally, we'll add some social media links. Still within the "Contact" section, add one more
<div> with an id of social. Within this div, nest three additional links. The first link should link to "http://www.twitter.com." The second link should link to "http://www.instagram.com," the this link should link to "http://www.medium.com."
You can certainly swap out your own social media links, but for right now we'll use these to move forward with something polished.
Nested under each of these links, add an image. To do this, download the the zip file of icons to your computer. Once downloaded, unzip the file, and copy and paste the icons into portfolio/img/icons/ directory.
We used the following images:
When you add them to the application, note the full path just like we did with the photo gallery images.
Once you have the icons set, give them each a height of 20px *and width of *20px. Again we'll use the dimensions as placeholders until we style our site. You can reload the page to see the icons in the browser.