Photo of Irfan Tayyab

Design to Code

I took some designs from the internet (raster images with .jpg or .png format) and realized them using HTML/CSS to exhibit and polish my skills further. Every webpage design was selected to test my capability in different aspects of development.


The only technologies I have used "so far" in the development of these webpages are HTML and Vanilla CSS without any frameworks or libraries.


React, Redux and MERN Projects are not uploaded yet. Although I have them locally on my device.

Travel webpage preview

1. Travel Agency

This webpage is of a travel agency. The webpage has the following features

  • Responsive with little use of media queries
  • Google Fonts
  • CSS grid to lay out the webpage content
  • Gradients to fade the background images into background colors
  • Hover effects
Visit the webpage
Portfolio webpage preview

2. Personal Portfolio

This webpage is of a personal portfolio. The webpage has the following features

  • Responsive with little use of media queries
  • CSS animations (Press tab right after you visit the webpage to skip to different sections of the webpage with animations)
  • Google Fonts
  • CSS grid and flexbox to lay out the webpage content
  • Hover effects
Visit the webpage
AIPAY webpage preview

3. AIPAY

This webpage is of a payment system providers. The webpage has the following features

  • Responsive with little use of media queries
  • Google Fonts
  • CSS grid and flexbox to lay out the webpage content
  • SVG curves as section breaks
Visit the webpage
FastnD webpage preview

4. FastnD

This webpage is of a restaurant/delivery services. The webpage has the following features

  • Responsive with little use of media queries
  • Google Fonts
  • CSS grid and flexbox to lay out the webpage content
  • SVG clip paths to serve as small background effects
  • SVG blobs as side graphics
  • Small circles as beautifying graphics all over the webpage
  • Menu toggling
Visit the webpage

Are these not enough? 🤨Thank you!