Hello, dear users of the PinkPen website. I hope you have a good time in your second home. In this content, we put a simple HTML template for you to download. We also teach you how to edit and customize this template for yourself. I hope you enjoy this article. To use this template, you must be at least fluent in Html. If you do not know, do not worry, we have prepared a simple and free course for you that you can access from this link. This template is designed using 3 codes HTML, CSS, and JavaScript.

Description of HTML PinkPen template

This template is designed with three codes: HTML, JavaScript, and CSS. But do not worry, to edit and customize it, all you need is mastering HTML. And of course, if you do not know, I will explain what to do in the continuation of this post, so do not worry. You can use this template for corporate websites, personal websites, and any type of single-page website. But do not forget that this template is not suitable for commercial use and is only for learning HTML. Because it is very simple and without features and does not have a professional look, but it is suitable for the first site you design :).

At the top of the site is the site name. You must enter your site name here. Below that is a link to other pages on the site, such as About Us, Contact Us, Portfolio. If you do not like this pagination, you can easily change it. After that, there is a photo as a site header. You need to choose a photo that suits your company or person. And below it, you can put your desired content and at the bottom of the page, we put the copyright of the Html template designer. You can see its demo in the image below.

pinkpen html demo

PinkPen template file

After downloading the file, extract the zip file. This folder contains an index file and 3 other folders. To edit your website and HTML code, you need to edit and customize the index.html file code. You also need to open the same file with one of the browsers to view the output of your website. The next folder is the img folder. All images used on the website are in this folder. If you want to edit the HTML template images or add a new photo, you must refer to this file. The CSS folder contains the CSS files. If you want to edit the website style, you can use this folder. You can edit the background color, text color, text size, titles, etc. in these files. The last folder is related to JavaScript files.

pinkpen html file

customize pinkpen template

Well, now it’s time to start customizing the PinkPen template. The first part we edit is the title of the website. The text you see at the top of the browser. All you have to do is go to the sixth line in the index.html file. You can put any text you want between the <title> tag and save it in this section. The photo below will help you a lot.

pinkpen html title

The next part we want to edit is heading one. As we said before, we only use the index file for editing. Go to line 24 of this program and put any content you want between the <h1> tags. By default, the value is pinkpen, but you can change it to your liking.

pinkpen html h1

Edit page names in the PinkPen template

The HTML Pink Pen template has 4 pages that we are going to edit their names. The first page is the main page, which is actually your home page, and you should put the content of your first page on this page. The next page is about us. On this page, you write the information about yourself or your company. For example, where did you start and what is your education and where do you like to go. The next page is the page where you can place your or your company’s portfolio. The last page of the HTML PinkPen template is Contact Us. In this section, write the address of yourself or your company. Enter contact number, social network ideas, fax, etc. At the bottom of the page, there is a form to send you an email and message.

You do not have to work hard to edit the names of these pages. Go to the 27th line of this program and edit the <li> tags and put your favorite name on the pages. You can also search the page names in the code and edit that name.

pinkpen page names

change header image in the PinkPen template

Well, the next step is to change the site header image. If the site is a company, you can put a picture of your company. If your site is personal, it is recommended to post your own photo. To add a photo to the site header, you must first place that file in the img folder. To add a photo to the site header, you must first place that file in the img folder. Then go to the 36th line of the program and edit the <img> tag and replace the name of the new photo with the name of the previous photo.

pinkpen header

Edit the main content of the pages

On the main page, we have a second heading and a paragraph. To edit the heading, go to line 37 and edit the <h2> tag. To edit a paragraph, go to the next line, line 28, and edit the <p> tag. If you want to add tags (photos, paragraphs, headings, etc.) just add below these. You must go to line 43 to edit the About Us page. Edit or delete or add any tag you want. To edit our portfolio, just go to line 53. To edit, you need to be proficient in Html code. The last page of the HTML Pink Pen template is Contact us, which you can edit on the 59th line.

Well, the PinkPen template editing tutorial is over. I hope you found it useful. If you have a comment or question, be sure to ask in the comments so I can answer you. Oops, I forgot to put the link to download the template for you 🙂 Okay, I’ll put it down for you.



I am a computer engineering student, I have been working in SEO and WordPress for almost 8 years and I also have programming skills.

Leave a Reply


Copyright © 2019 pinkpen.net