Project
DETAILS

A clean and responsive landing page developed using Webflow, focused on accurate design implementation and clear visual structure.

Client /

Webflow Course Project – Flowmate Website Build

{"blocks":{"dppwo7m5":{"visibility":true,"collapse":false,"name":"collection","title":"Collection","properties":{"tag":"div","dynamicContent":{"type":"dp2c3mkk","collectionType":"droip_cm_gallery","items":3,"current_page":1,"pagination":false,"pagination_type":"","filters":[],"sorting":[],"offset":0,"inherit":true,"gallery":"dp2c3mkk"}},"styleIds":[],"className":"","source":"droip","children":["dpkkpij8","dpytcsh9","dp2kq387"],"id":"dppwo7m5","parentId":"dpb3jk8a","stylePanels":{"typography":true,"composition":true,"size":true,"background":true,"stroke":true,"shadow":true,"effects":true,"position":true,"transform":true,"interaction":true,"animation":true},"template_mounted":true},"dpkkpij8":{"visibility":true,"collapse":false,"name":"items","title":"Items","properties":{"attributes":[]},"styleIds":["artixan_dpuur4ca"],"className":"","source":"droip","children":["dpkj2ckx"],"id":"dpkkpij8","parentId":"dppwo7m5","stylePanels":{"typography":true,"composition":true,"size":true,"background":true,"stroke":true,"shadow":true,"effects":true,"position":true,"transform":true,"interaction":true,"animation":true},"template_mounted":true},"dpkj2ckx":{"styleIds":["artixan_dphfjve9"],"visibility":true,"collapse":false,"name":"item","title":"Item","properties":{"tag":"div","attributes":[]},"className":"","source":"droip","children":["dpkv8qzs"],"id":"dpkj2ckx","parentId":"dpkkpij8","template_mounted":true},"dpkv8qzs":{"visibility":true,"collapse":false,"name":"image","title":"Image","properties":{"tag":"img","noEndTag":true,"type":"href","load":"lazy","hiDPIStatus":false,"width":{"value":"auto","unit":""},"height":{"value":"auto","unit":""},"attributes":{"src":"","alt":"","href":"","target":""},"dynamicContent":{"type":"gallery","value":"dp2c3mkk","contentInfo":{"post_id":"54","field_id":"dp2c3mkk"}}},"styleIds":["artixan_droip_image","artixan_dp6rupln","artixan_dpbbsuas"],"className":"","source":"droip","id":"dpkv8qzs","parentId":"dpkj2ckx","stylePanels":{"typography":true,"composition":true,"size":true,"background":true,"stroke":true,"shadow":true,"effects":true,"position":true,"transform":true,"interaction":true,"animation":true}},"dpytcsh9":{"visibility":true,"collapse":false,"name":"pagination","title":"Pagination","properties":{"tag":"div","componentType":"pagination","attributes":{"data-droip-pagination":"pagination"}},"styleIds":["artixan_droip_pagination"],"className":"","source":"droip","children":["dpjzk2eo"],"id":"dpytcsh9","parentId":"dppwo7m5","stylePanels":{"typography":true,"composition":true,"size":true,"background":true,"stroke":true,"shadow":true,"effects":true,"position":true,"transform":true,"interaction":true,"animation":true},"template_mounted":true},"dpjzk2eo":{"styleIds":["artixan_droip_pagination_item"],"visibility":true,"collapse":false,"name":"pagination-item","title":"Pagination Item","properties":{"tag":"div","componentType":"pagination","attributes":{"data-droip-pagination":"pagination-item"}},"className":"","source":"droip","children":["dpxn4l0d"],"id":"dpjzk2eo","parentId":"dpytcsh9","template_mounted":true},"dpxn4l0d":{"styleIds":["artixan_droip_pagination_number"],"visibility":true,"collapse":false,"name":"pagination-number","title":"Pagination Number","properties":{"tag":"span","componentType":"pagination","attributes":{"data-droip-pagination":"pagination-number"}},"className":"","source":"droip","children":[],"id":"dpxn4l0d","parentId":"dpjzk2eo"},"dp2kq387":{"visibility":true,"collapse":false,"name":"empty","title":"Empty","properties":{"attributes":[]},"styleIds":[],"className":"","source":"droip","children":[],"id":"dp2kq387","parentId":"dppwo7m5","stylePanels":{"typography":true,"composition":true,"size":true,"background":true,"stroke":true,"shadow":true,"effects":true,"position":true,"transform":true,"interaction":true,"animation":true}}},"styles":{"artixan_dpuur4ca":{"id":"artixan_dpuur4ca","type":"class","name":"artixan_dp33sabh","variant":{"md":"object-fit:cover;display:flex;flex-direction:column;row-gap:24px;","mobileLandscape":"row-gap:16px;"}},"artixan_dphfjve9":{"id":"artixan_dphfjve9","type":"class","name":"artixan_dprmv513","variant":{"md":"object-fit:cover;"}},"artixan_droip_image":{"id":"artixan_droip_image","type":"class","name":["artixan_droip-image"],"variant":{"md":"max-width: 100%;"},"isGlobal":true},"artixan_dp6rupln":{"id":"artixan_dp6rupln","type":"class","name":"artixan_dp6l8nvl","variant":{"md":""}},"artixan_dpbbsuas":{"id":"artixan_dpbbsuas","type":"class","name":["artixan_droip-image","artixan_dp6l8nvl"],"isComboClass":true,"variant":{"md":"width:100%;object-fit:cover;height:auto;min-width:auto;"}},"artixan_droip_pagination":{"id":"artixan_droip_pagination","type":"class","name":"artixan_droip-pagination","variant":{"md":"display:flex;justify-content:center;gap:8px;"},"isGlobal":true},"artixan_droip_pagination_item":{"id":"artixan_droip_pagination_item","type":"class","name":"artixan_droip-pagination-item","variant":{"md":"display:flex;justify-content:center;align-items-center;font-size:16px; padding:4px 12px;border: 1px solid #c7c9cb;cursor:pointer;border-radius:5px;"},"isGlobal":true},"artixan_droip_pagination_number":{"id":"artixan_droip_pagination_number","type":"class","name":"artixan_droip-pagination-number","variant":{"md":""},"isGlobal":true}}}

{"blocks":{"dpsd7qcm":{"visibility":true,"collapse":false,"name":"collection","title":"Collection","properties":{"tag":"div","dynamicContent":{"type":"dpqo08ut","collectionType":"droip_cm_gallery","items":6,"current_page":1,"pagination":false,"pagination_type":"","filters":[],"sorting":[],"offset":0,"inherit":true,"gallery":"dpqo08ut"}},"styleIds":[],"className":"","source":"droip","children":["dpqgofks","dp7z5hac","dpunl4vj"],"id":"dpsd7qcm","parentId":"dpcr1zto","stylePanels":{"typography":true,"composition":true,"size":true,"background":true,"stroke":true,"shadow":true,"effects":true,"position":true,"transform":true,"interaction":true,"animation":true},"template_mounted":true},"dpqgofks":{"visibility":true,"collapse":false,"name":"items","title":"Items","properties":{"attributes":[]},"styleIds":["artixan_dpp5lh9n"],"className":"","source":"droip","children":["dp029dav"],"id":"dpqgofks","parentId":"dpsd7qcm","stylePanels":{"typography":true,"composition":true,"size":true,"background":true,"stroke":true,"shadow":true,"effects":true,"position":true,"transform":true,"interaction":true,"animation":true},"template_mounted":true},"dp029dav":{"styleIds":[],"visibility":true,"collapse":false,"name":"item","title":"Item","properties":{"tag":"div","attributes":[]},"className":"","source":"droip","children":["dp72rlvs"],"id":"dp029dav","parentId":"dpqgofks","template_mounted":true},"dp72rlvs":{"visibility":true,"collapse":false,"name":"image","title":"Image","properties":{"tag":"img","noEndTag":true,"type":"href","load":"lazy","hiDPIStatus":false,"width":{"value":"auto","unit":""},"height":{"value":"auto","unit":""},"attributes":{"src":"https:\/\/artixan.droip.io\/wp-content\/uploads\/2025\/09\/rat-games-grid-1.jpg","alt":"rat-games-grid-1","href":"","target":""},"wp_attachment_id":125,"dynamicContent":{"type":"gallery","value":"dpqo08ut","contentInfo":{"post_id":"54","field_id":"dpqo08ut"}}},"styleIds":["artixan_droip_image"],"className":"","source":"droip","id":"dp72rlvs","parentId":"dp029dav","stylePanels":{"typography":true,"composition":true,"size":true,"background":true,"stroke":true,"shadow":true,"effects":true,"position":true,"transform":true,"interaction":true,"animation":true}},"dp7z5hac":{"visibility":true,"collapse":false,"name":"pagination","title":"Pagination","properties":{"tag":"div","componentType":"pagination","attributes":{"data-droip-pagination":"pagination"}},"styleIds":["artixan_droip_pagination"],"className":"","source":"droip","children":["dpeqpozf"],"id":"dp7z5hac","parentId":"dpsd7qcm","stylePanels":{"typography":true,"composition":true,"size":true,"background":true,"stroke":true,"shadow":true,"effects":true,"position":true,"transform":true,"interaction":true,"animation":true},"template_mounted":true},"dpeqpozf":{"styleIds":["artixan_droip_pagination_item"],"visibility":true,"collapse":false,"name":"pagination-item","title":"Pagination Item","properties":{"tag":"div","componentType":"pagination","attributes":{"data-droip-pagination":"pagination-item"}},"className":"","source":"droip","children":["dpxp5gak"],"id":"dpeqpozf","parentId":"dp7z5hac","template_mounted":true},"dpxp5gak":{"styleIds":["artixan_droip_pagination_number"],"visibility":true,"collapse":false,"name":"pagination-number","title":"Pagination Number","properties":{"tag":"span","componentType":"pagination","attributes":{"data-droip-pagination":"pagination-number"}},"className":"","source":"droip","children":[],"id":"dpxp5gak","parentId":"dpeqpozf"},"dpunl4vj":{"visibility":true,"collapse":false,"name":"empty","title":"Empty","properties":{"attributes":[]},"styleIds":[],"className":"","source":"droip","children":[],"id":"dpunl4vj","parentId":"dpsd7qcm","stylePanels":{"typography":true,"composition":true,"size":true,"background":true,"stroke":true,"shadow":true,"effects":true,"position":true,"transform":true,"interaction":true,"animation":true}}},"styles":{"artixan_dpp5lh9n":{"id":"artixan_dpp5lh9n","type":"class","name":"artixan_dpldbt0x","variant":{"md":"display:grid;column-gap:24px;row-gap:24px;grid-template-columns:1fr 1fr 1fr;grid-template-rows:minmax(75px, 1fr);grid-template-areas:\". . .\";","tablet":"grid-template-columns:1fr 1fr;grid-template-areas:\". .\";","mobileLandscape":"grid-template-columns:1fr;grid-template-areas:\".\";row-gap:16px;column-gap:16px;"}},"artixan_droip_image":{"id":"artixan_droip_image","type":"class","name":["artixan_droip-image"],"variant":{"md":"max-width: 100%;"},"isGlobal":true},"artixan_droip_pagination":{"id":"artixan_droip_pagination","type":"class","name":"artixan_droip-pagination","variant":{"md":"display:flex;justify-content:center;gap:8px;"},"isGlobal":true},"artixan_droip_pagination_item":{"id":"artixan_droip_pagination_item","type":"class","name":"artixan_droip-pagination-item","variant":{"md":"display:flex;justify-content:center;align-items-center;font-size:16px; padding:4px 12px;border: 1px solid #c7c9cb;cursor:pointer;border-radius:5px;"},"isGlobal":true},"artixan_droip_pagination_number":{"id":"artixan_droip_pagination_number","type":"class","name":"artixan_droip-pagination-number","variant":{"md":""},"isGlobal":true}}}

rat-games-grid-1

rat-games-grid-1

rat-games-grid-1

rat-games-grid-1

rat-games-grid-1

This project focuses on Webflow development, where I translated a Figma design into a clean and responsive landing page. The design file was created by my mentor, Fadlydesign, while I handled the Webflow build, layout structure, and responsive implementation across devices.