Photoshop to HTML: The Agency portfolio conversion – Part 2

Moving on from where we left off, we’ll create the remaining site sections: CTA section, About us, Testimonials, Blog section, Contact area and Footer. We’ll also create the responsive media queries and our custom JavaScript.

7. CTA Section

This section has a nice background from OnextraPixel, a short paragraph and CTA button.

Step 1 – CTA section HTML

Since it’s a new section, we have to add some padding and a clearfix. We have to clear the items because we will float the CTA button to the left.

Step 2 – CTA section CSS

We already defined the general CSS styles, so our CSS is very simple:

The Agency CTA banner
The Agency CTA banner

8. About Us Section

This main section is divided in 2 small-subsections: the top about us part and our team subsection.
In the About us part we have an accordion with 3 panels and 4 skill bars. To get the code for this components go to Bootstrap site and check the provided examples: accordions and progress bar.

Step 1 – About us section HTML

Copy the examples and add your text content:

This might seem like an overly-complicated HTML, but this is just the copy & pasted code from the examples with some minor adjustments. The only real thing added is the active class added to the expanded accordion. We’ll use this class in our JavaScript to indicate the active state of the other accordion panels as well.

Step 2 – About Us Section CSS

To match the look of the site with the look of the designed template, we have to overwrite some Bootstrap styles. The CSS added is very simple and very short.
The biggest change that we have to make to our skill bars is to make them smaller and change the color. This is achieved with some minimal CSS styles.

Step 3 – Our team HTML

This section features some flat card inspired design.

This section’s HTML has similar structure and classes as the previous examples: column classes, text-center, list-inline are Bootstrap classes. The image is inside a figure element and the social icons are from FontAwesome.

Step 4 – Our team CSS

Our team-box creates the flat card inspired design. To achieve this we added some rules regarding color, margins and borders and some hover state rules. To create the top rounded corners for our image we used this CSS property: border-top-right-radius: 5px; and border-top-left-radius: 5px; for the left corner. The figure element has the position set to relative so that the team-name can be absolutely positioned over the image.

Finished About Us Section
Finished About Us Section

9. Testimonials Section

This sections uses another Bootstrap component: carousel. The code is based on the Bootstrap example.

The testimonials are placed in blockquote element with a class of fancy-quote for easy styling.

Step 2 – The Testimonials CSS

The CSS is very basic: we just have to set the background image and specify some margins and colors. To create the circle, we have to set the border radius to 50%.

Finished Testimonials section
Finished Testimonials section

10. Blog Section

In this section we’re showing our latest 3 articles from our blog. The design is similar to the team-box section.

Step 1 – Blog section HTML

Step 2 – Blog section CSS

The techniques used are similar with the ones used in Our Team subsection.

To the display the meta information over the image, we used absolute positioning and to keep the design consistent with our PSD document, we set the meta-date box width to 62 pixels and the height to 70 pixels. The meta-comments box has a height of 25px.

Our final Blog Section
Our final Blog Section

11. Contact section

This section consists of an unordered list that shows our Agency contact information and a contact form.

Step 1 – Contact section HTML

The icons used are from FontAwesome. The second list item, the one that displays our social media icons, contains an unordered list.

Our contact form spans 8 columns and since this is an example, it has a novalidate property. This means that if you submit the form, it will not validate.
Each form input is placed inside a paragraph and has a label.

Step 2 – ui.less

Until now we’ve placed our less code inside the main.less file, but to keep our project clean and maintainable we will define our form styles in the ui.less file.

The input element’s width is set 100% so that they will be the same width as the parent container.

Step 3 – Contact section CSS

The styling for the contact section is pretty basic: we define some margins, paddings and colors:

Contact us section
Contact us section

13. Google Map

Maps are a popular element in contact sections and allows the uses or potential client to easily locate you on the map.
To add a Google map, follow the instructions provided by Google here.

Step 1 – The HTML

The HTML code is very simple: just add the iframe code provided by Google. To easily style the map, I added the embed-map class.

Step 2 – The CSS

This css code is very basic. I specified the height, added a background color in case the map doesn’t load and width and height of 100%.

14. Footer section

The footer section is the last part of our site design.
We’ll display social icons and a short copyright information.

Step 1 – Footer HTML

Step 2 – Footer CSS

We will write the footer CSS in a new file named footer.less. Inside this file we’ll define some css rules regarding color:

The final result:

The Agency footer section
The Agency footer section

15. JavaScript

Now it’s time to add some JavaScript to filter the portfolio and add additional functionality to our site.

Step 1 – initialising the JavaScript

To intialize our JavaScript we have to add the following code in our custom.js file:

As you can see, I created 4 functions for our site: fixedNavbar() will make our white header fixed on top, hiding the blue contact information header. activeAccordion() adds the active css class to the active accordion and removes it when it’s no longer need it.
smoothScroll() creates a smooth scrolling effect when the user click a menu link and shuffle.init is the function responsible with portfolio filtering.

Step 2 – Making the navigation header sticky

Add this code in the custom.js:

When the user scrolls more than 48 pixels (2 baselines – the height of the blue header), we add the navbar-fixed-top to the nav and we add some padding to the body to compensate for the sticky header height.

Step 3 – Active accordion style

When the user clicks on accordion panel we have to offer feedback by adding the active class. We can very easily do this with JavaScript:

Step 4 – Smooth scroll

To create a smooth scrolling effect, I used a snippet from the awesome CSS-tricks site.
When the user clicks on a link from the navigation menu, we’ll append the section id to our web address and then smoothly scroll to content in 900 milliseconds.

Step 5 – Filtering the portfolio

To filter our portfolio we’ll use the same techniques that we covered in our article Filterable portfolio with Shuffle.JS and Bootstrap 3.

We have to identify the target items: the grid, the filter menu and the item size.

The setupFilters function allows us to filter the portfolio by identifying the active filter menu item. Listen() function adds a short delay between our filtered items, ensuring that our script runs properly.

The final shuffle.init() function:

16. Media Queries

The final piece of the puzzle is adding some media queries to make our website look good on smaller resolutions. To know at what width you design “breaks”, you can resize your browser or Right Click and select Inspect Element and then choose Device mode if you’re on Chrome or Responsive Design Mode if you’re on Firefox.
We’ll add our CSS code in a new file called media-query.less and we’ll import it in our styles.less: @import 'media-query.less';.

Step 1 – 1200px width

When we resize our site to 1200 pixels, we can see that our design breaks: our navigation menu it’s pushed under the logo, our team’s name is displayed on 2 lines and our testimonial text is to narrow.
To easily fix this, we have to create a media query that targets this resolution and fixes these issues:

The navbar CSS code seems the most complex and that’s because we have to overwrite a lot of Bootstrap CSS styles: we have to remove the float properties of our elements and then we have to style our menu items color and background to match our site’s look and feel. To style those elements, I designed in the browser by inspecting elements and directly modifying values in the CSS rules editor.
To fix our team name issues, I’ve set the padding to half a margin: 12px. For our testimonials section, I’ve increased the width to 70%.

The Agency header at 1200px
The Agency header at 1200px
The navigation menu at 1200px
The navigation menu at 1200px

Step 2 – 990px width

At 990px width some new issues arise: the text in our CTA banner secion is to big and our team name padding size is to small.

Step 3 – 767px width

At this screen resolution, we can very easily see that the margin between our elements in the Services and About us Sections is too small. In our contact area seems like a good idea to center our content and display the contact information inline.

Step 4 – 680px width

Our CTA section’s items are too big for this resolution. In our media query we simply have to decrease the font size and paddings:

Step 5 – 630px width

Our blue top header seems now overcrowded, so I decided to remove the email and phone information and only display the social icons in the center.
The Hero section text and buttons are too big, so we have to decrease their size and we can now center the content of our CTA section.

Step 6 – 500px width

To improve our Hero section appearance I modified the line height and button’s padding.

Step 7 – 450px width

At this small resolution, I want to display our blue The Agency heading part on its own line. To do this, we have to add a display: block property.
The padding between our links in the portfolio menu is to big, so I removed the padding completely and we fixed some issues with our team name.

Step 8 – Really small screen resolution

At 398px the hero buttons and portfolio filter buttons are shown on their own line and we have to add some margin-top to add some spacing between them.

At 300px I decided to remove our agency name and only display the logo:

Conclusion

We finished this massive series and we built a clean and modern design agency portfolio template.

I hope you found this tutorial useful and learned some new techniques along the way. If you have any questions or suggestions to improve the code, feel free to leave a comment in the comment section bellow.

Tags: , , , ,

Gabriel Neagu

Gabriel Neagu

I'm a developer from Bucharest, Romania passionate about design and clean code. In my free time I enjoy playing guitar.

Follow Gabriel:

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *