Get Shit Done Kit

Build a responsive site with the Get Shit Done Kit

Today we will show you how to build a fully responsive webpage using our Get Shit Done Kit, which you can get for free here. Once you download and unzip it, please open the template.html file in your favourite HTML editor. If you don’t have any, check our list of best free text editors. Once you open it you will see the code below:

Navigation Bar (navbar)

Now, just after the <body> tag, we will add the code below:

That will create a beautiful static navigation bar on top of the page. In order to adjust it, change your site name, adjust hyperlinks (replace “#” with the addresses of your social media profiles/emails). Except for the fact that this navbar is simply beautiful, it has another important advantage. It is responsive. When a  visitor uses a laptop or a tablet with high resolution, the navbar will be displayed as below:

navbar

 

While the users browsing your webpage on mobile will see this:

 

navbarmobile

Footer

Once we have the beautiful navigation panel on top of the site, we will create the footer. In order to do that, paste the code below just before the closing </body> tag:

Once you will do that, you will see the new panel with highlited call to action on the bottom of your website:

footer2

Content

Once we have our responsive navbar and footer done, it’s time to fill our site with content. We will place 2 bootstrap elements in it. The first will be Jumbotron, which we you can use to describe your product, place your call to action like a “Buy” button or newsletter subscription form etc. Below, we will place 3 panels which can be used  to present features of your product or describe services you offer.

Jumbotron

Currently inside our container we have commented the button. Since we do not want to use it let’s remove the entire content inside the container starting with “<!–” and ending on “–>” which is the HTML comment tag and place the code from below instead:

Since we want to use a background, you download THIS file, and save it into the “img” folder with the name “header.jpg”.

Panels

Once we are done with our Jumbotron, lets create 3 panels. In order to do that we will use separate containers so place below the code above our footer code:

And voila! Your first responsive page built with Get Shit Done KIT is ready an looks awesome:

d

 

And it is really responsive:

r

 

 

Below you can find the entire code:

 

 

10 thoughts on “Build a responsive site with the Get Shit Done Kit

  1. Hi…
    thanks for sharing your valuable insight with us. This is really very important for me.
    I like the example you shared with us. glad to receive something new. I appreciate your approach sharing it with users. please keep sharing such blog with us.

  2. It’s an honor for us to help you and support you till you satisfy with our facilities. We are always serves our best to our clients. We provide our services 24×7 to you. We are the top leading website designing and Development Company in Shahdara. We have the best and experience team in our web design company. We provide you all the services such as SEO, SMO. PPC etc. We are happy to help you and provide you our support after the project completion .if you want best business website for your business ten you can contact with us.

Leave a Reply

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