Inkjection
A website for tattoo design shop
Abel Aby John
Arka Gosh
Project Brief
Design a website then apply our learning of how to code a website using the front-end technologies.
Inkjection
Inkjection is made up tattoo shop located in Pune, Inkjection is a popular tattoo shop with award winning tattoo artist
My role
Complete front-end coding of this website
Technologies used
![html.png](https://static.wixstatic.com/media/008bd5_b7902f3916f24a52bc1f1bf2eb8123e5~mv2.png/v1/crop/x_68,y_68,w_4886,h_4886/fill/w_215,h_215,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/html.png)
HTML
![css.png](https://static.wixstatic.com/media/008bd5_cc81ed81f98043f7ac9a7080f3b70471~mv2.png/v1/fill/w_215,h_215,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/css.png)
CSS
![bootstrap-logo-shadow.png](https://static.wixstatic.com/media/008bd5_9fb7f3c4c8c6427e9f6f60be753f3b15~mv2.png/v1/crop/x_35,y_0,w_330,h_330/fill/w_215,h_215,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/bootstrap-logo-shadow.png)
Bootstrap 5
![js.png](https://static.wixstatic.com/media/008bd5_9a0045bc0cca4a1d863038037a1bb5dc~mv2.png/v1/fill/w_215,h_215,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/js.png)
Java Script
My experience
Even though I was from non- coding background, I had some idea of HTML.
-
Learning CSS was fun, when I came to know how to change the whole look and feel of the website with CSS, it was fun implementing the knowledge.
-
Bootstrap felt like a template for front-end coders and I had fun using it as well, but in the start I faced few issues where I couldn't understand the screen sizes given in bootstrap which I took a while for understanding.
-
I had the hardest time understanding and using JavaScript, which I am still not so clear about.
Coding Process
-
Coding the base using HTML.
-
Decorating the website using CSS.
-
Re-writing the code using bootstrap to enable responsiveness in the website.
-
Added some JavaScript to make the website more interactive.
Mockup Video
Reload if it doesn't show up
Code
The following are the screenshots of some codes:
![Screenshot (10).png](https://static.wixstatic.com/media/008bd5_6fa74cafb4ea44848680bf464c6c15d5~mv2.png/v1/fill/w_600,h_338,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/Screenshot%20(10).png)
![Screenshot (10).png](https://static.wixstatic.com/media/008bd5_6fa74cafb4ea44848680bf464c6c15d5~mv2.png/v1/fill/w_974,h_548,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Screenshot%20(10).png)
![Screenshot (11).png](https://static.wixstatic.com/media/008bd5_0473ae47d23f4164a000cfab160e2b51~mv2.png/v1/fill/w_974,h_548,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/Screenshot%20(11).png)
Code download
The following link has a zip file containing the code for the website:
Containing few HTML, CSS and JS files
Download link for code - Click here
Run the code through the live server of VS code