I am struggling to create magento 2 custom one page checkout like in the screenshots i attached i simple design the page with html and css, but i really dont know how do i implement functionality on it.Here is the design please help me how can i achieve this. Thanks
You should edit CSS of the existing checkout. You can't implement functionality in a written template.
First of all, I advise you to install One Step Checkout extension from a famous vendor (Amasty, AheadWorks, Mageplaza etc). Because by default Magento 2 doesn't allow to display all steps on one page. After that, all you need is editing CSS styles.
I hope it will help.