Drag and resize html widgets inside a 16:9 size div **Front-End**

Create with html css and js Widgets that can be Draggable and Resizable and also you can add html5 and css inside of them. The widgets can NOT pass the boundaries of a div (this div simulates the full screen of a navigator). The widgets can overlap (z-index) Create two html pages to add widgets, one is the configuration page where I would like to add Draggable and Resizable widgets one by one. The other page will show all the created widgets. Functionalities of the Pages SETTINGS PAGE: -Left side: 16:9 Div with a border that simulates a screen with a widget for live view/preview -Right side: configuration buttons and modals **Test to know if you are reading closely: Start your proposal with “12345”, write that in the beginning** *Create a widget with a button, the widget(rectangle) will be shown inside the boundaries of the 9:16 div, so the user can drag and resize the rectangle, the code must generate a method that alerts the new coordinates of the rectangle inside the div. *Configure the content of the widget adding an image(url text), three paragraphs and the z-index *Delete a created widget. *Preview all created widgets inside the 16:9 box SHOW PAGE: The user will see all the created widgets in a full-screen navigator page IMPORTANT: I will receive all the documentation and source code. End your proposal with writing “56789”