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.

Photo of Irfan Tayyab
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!