CSS styles

CSS code:

1. Universal Selector (*):

• margin: 0px: Resets all element margins to zero to eliminate default spacing.
• padding: 0px: Resets all element padding to zero to ensure consistent spacing.
• box-sizing: border-box: Includes padding and border in the element’s total width and height, simplifying layout calculations.
• font-family: 'Roboto', sans-serif;: Sets the font to 'Roboto' or a generic sans-serif font, providing a clean and modern typography.
• ´Comment`: Resets margin and padding for all elements, ensuring consistent spacing across the page. Sets the box-sizing property to border-box, which includes padding and border in the element’s total width and height.

2. HTML and Body (html, body):

• height: 100%: Ensures both html and body elements take up the full height of the viewport.
• background-color: black: Sets a black background color for the entire page, creating a dark theme.
• ´Comment`: Sets the height of both the HTML and body elements to 100% of the viewport height. Applies a black background color to the entire page.

3. Anchor (a):

• text-decoration: none;: Removes the default underline from hyperlinks.
• color: white;: Sets the color of text within links to white for better visibility against the black background.
• Comment: Removes underlines from links and sets their color to white, making them stand out against the black background.

4. Navigation Section (.nav_2_p):

• Comment: Centers the text vertically and horizontally within its container. Positions it relative to allow for positioning adjustments.

5. General Division (.div_sp_1_ger_1):

• Comment: Defines the position and size of a specific division, with a grey border and relative positioning.

6. Menu Container (.div_geral_1_menu):

• Comment: Styles the top menu bar with a black background and sets its height to 10% of the viewport height.

7. Title Container (.div_title_geral):

• Comment: Styles the title section with a black background and sets its height to 30% of the viewport height.

8. Title Image (.img_title):

• Comment: Sets the dimensions and positioning of an image within the title section.

9. Panel Container (.div_geral_2_painel):

• Comment: Defines the style for a panel section with a black background and a height of 10% of the viewport height.

10. Side Panel (.div_sp_1_ger_2):

• Comment: Styles a side panel with a grey background, border, and rounded corners. Floats it to the left.

11. Opposite Side Panel (.div_sp_2_ger_2):

• Comment: Styles another side panel with similar properties to the previous one but floats it to the right.

12. Navigation Text (.nav_1_p):

• Comment: Sets the color, padding, and positioning of text within the navigation section.

13. Hover and Active States (.div_sp_1_ger_2:hover, .div_sp_1_ger_2:active, .div_sp_2_ger_2:hover, .div_sp_2_ger_2:active):

• Comment: Changes the background color of side panels when hovered over or activated to enhance interactivity.

14. Panel Image (.img_painel_1):

• Comment: Sets the dimensions and positioning of an image within a panel section.

15. Panel Backgrounds (.painel-imgs, .painel-imgs1, .painel-imgs2, etc.):

• Comment: Defines the background colors and dimensions for various panel sections, including image panels and card sections.

16. Card Container (.painel-cards-1, .painel-cards-2, .painel-cards-3):

• Comment: Styles the card containers with a specific background color and height, grouping multiple cards together.

17. Card (.card):

• Comment: Defines the size, positioning, and background color of individual cards within the card containers.

18. Card Content (.card-div_geral-1, .card-div_geral-2, .card-div_geral-3):

• Comment: Styles the divisions within each card, including sections for icons, text, and additional content. Each division has specific dimensions and background colors.

19. Card Hover and Active States (.card-div_geral-1_sp1, .card-div_geral-1_sp2):

• Comment: Defines the styles for different sections within the card, adjusting sizes and colors.

20. Recent Section (.painel-nav-1-recente):

• Comment: Styles the section for recent content with a background color and image.

21. Responsive Design (@media screen and (max-width: 600px)):

• Comment: Contains CSS rules that apply to screens narrower than 600px, adjusting layout and sizing for mobile devices. Changes include resizing panels, adjusting card sizes, and modifying layout float directions.