Apply Style to Which Elements?

• Feedback Form

Detailed Description

• Apply color to it. Change the alignment of the input forms to avoid wasting so much white space. Apply a different font to it the text in form. Adjust the margin from the left of elements and the form, as well as from the top. Adjust the border to make it more expressive.

Context/Reason for Style Change

-The current form takes up too much white space, so moving things around might reduce the amount of white space used.

Possible Implementation

Move the entire form into its own selector (probably a div) to apply the font and color changes. Put half of the forms in one selector, the rest in another and change the layout of these containers to be right next to another. Adjust the margins of these containers, and then playing with the margins of the inside elements.

Which Elements Require Factoring?

• Multimedia elements, agenda section, last meeting points, this meeting points

Context/Reason

• These elements are currently not assigned to any CSS selectors, so it will be difficult to assign styling to them. Specifically changing the layout and where they appear will be difficult.

Detailed Description

Possible Implementation

• Each "section" can be contained in its own div so that these elements can be organized into different types of displays. Each div can then have its own unique way of being styled.

Apply Style to Which Elements?

• Main title, session number, and date

Detailed Description

• Align the header for all meeting notes at the very top of the page, in a row. The title should be on the left, and the session and date info should be aligned to the right. There should be some margins in between it and the edges of the page.

Context/Reason for Style Change

The header is taking up too much space, but leaving a lot of it empty. Limit the amount of space so that the webpage looks a little less cluttered.

Possible Implementation

Use the flex display built in CSS to set this up. Then use the margin property to adjust the margins on each size.

this is a test issue

Apply Style to Which Elements?

• All paragraphs that display content underneath headings.

Detailed Description

• Increase the padding to the left for each paragraph so that content is properly indented and stored under the corresponding heading.

Context/Reason for Style Change

• Currently nothing is indented, so it is had to distinguish sections and their content. Adding some padding will make it easier to read through.

Possible Implementation

Apply Style to Which Elements?

• Nav bar
• All elements that are text

Detailed Description

• Move the links to the right as much as possible
• The nav bar should also follow as the user scrolls down so that it is always accessible.
• Apply a global font for all elements to default to

Context/Reason for Style Change

• Whenever there is a navbar, it looks most natural when it's all the way to the right.

Possible Implementation

• Use basic CSS properties
• Use the sticky CSS property to get the navbar to always be there.

Apply Style to Which Elements?

• All headings that are present in the HTML page.

Detailed Description

• The current headings font is default and isn't super expressive. Apply a different font style for them and maybe even change the color of it.

Context/Reason for Style Change

• For it to be more expressive and less boring.

Possible Implementation

• Give all of the headings a selector, and then use the font-family and color properties in a .css stylesheet to apply it to all headings.

Apply Style to Which Elements?

• HTML page video introduction, as well as the screenshot of the basic html page.

Detailed Description

• Video element just needs its width and height adjusted. The screenshot of the basic html page should be positioned next to the content under "This Meeting". The list of the agenda should not be broken by the screenshot.

Context/Reason for Style Change

• The break in the list of things to do for this meeting by the image is distracting, so moving it aside will result in better readability.

Possible Implementation

• Create a div that contains the list and image so that it's in one container. Change the layout of the container to be a grid. Align the image to the right, and leave the list as it is.