I used to wonder how important it was to have individual pages versus a single scroll site. After learning how the DOM worked, I realized that pages are better for search engine indexing.
A functional contact page usually has:
- A form where visitors can message you
- An email address
- Your social media handles
- Your business location (or at least your country)
- Necessary information including hours of operation
- Any other form of contact
This contact page is simple and responsive for mobile. Check out the code below.
HTML:
CSS:
Check it out on CodePen:
I love learning and connecting. If you have any tips to share, please comment below or reach out on Twitter
If you haven't checked out the previous parts of "Building a Blog", check out parts 1, 2, and 3:
![njericooper image](https://res.cloudinary.com/practicaldev/image/fetch/s--oEBNuSrO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--B-Z_qt_a--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/146740/4594f8c8-9c70-4b62-9053-0b7797fd3459.jpg)
CSS Flexbox Nav Bar - Building a Blog, Part 1
Njeri Cooper ・ May 16 '19 ・ 2 min read
![njericooper image](https://res.cloudinary.com/practicaldev/image/fetch/s--oEBNuSrO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--B-Z_qt_a--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/146740/4594f8c8-9c70-4b62-9053-0b7797fd3459.jpg)
CSS Flexbox Hero Image with Parallax Scroll - Building a Blog, Part 2
Njeri Cooper ・ May 23 '19 ・ 2 min read
![njericooper image](https://res.cloudinary.com/practicaldev/image/fetch/s--oEBNuSrO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://res.cloudinary.com/practicaldev/image/fetch/s--B-Z_qt_a--/c_fill%2Cf_auto%2Cfl_progressive%2Ch_150%2Cq_auto%2Cw_150/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/146740/4594f8c8-9c70-4b62-9053-0b7797fd3459.jpg)
CSS Flexbox Javascript Image Slider - Building a Blog, Part 3
Njeri Cooper ・ May 30 '19 ・ 3 min read
![]()
20:33 PM - 07 Jun 2019
Top comments (0)