You know how to work with the Webpack dev server. So, let's move on to adding styles to our page. First, go through the index.html file to understand the basic structure of the page.
The body of the page is divided into two sections:
- Navbar
- Container
The container is further divided into three sections:
- First, create-room-area, which contains the input fields needed to create a new room with a room name.
- Second, info-area, which contains the information regarding the room (room name and room URL). It also has two buttons that are going to be used to copy the room URL (currently hidden using the .hidden Bootstrap style class).
- Finally, video-area, which is used to display the videos of all the participants.
First, add the following code in src/css/styles.css file to prevent the container section from overlapping with the navigation bar:
body ...