CSS styles

The CSS code provided is a comprehensive stylesheet designed to style a webpage with a modern, dark theme. It uses a combination of universal styles, specific class rules, and responsive design techniques to ensure a cohesive and visually appealing layout across different devices. The stylesheet includes rules for general elements, such as setting margins and padding to zero, as well as more specific styles for navigation, panels, and cards.

It emphasizes:

• Consistent Design: By setting default styles for margins, padding, and font, the CSS ensures a uniform appearance.
• Dark Theme: Background colors are predominantly black and shades of grey, with contrasting text and borders for readability.
• Responsive Layout: Media queries adjust the layout for smaller screens, ensuring the design remains functional and visually appealing on mobile devices.

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):

• text-align: center;: Centers text horizontally within the navigation section.
• top: 37%;: Positions the navigation section 37% from the top of its containing element.
• vertical-align: middle;: Aligns text vertically in the middle of the section.
• position: relative;: Allows for positioning adjustments relative to its normal position.
• ´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):

• left: 47%;: Positions the division 47% from the left edge of its containing element.
• width: 8%;: Sets the width of the division to 8% of its containing element’s width.
• height: 100%;: Ensures the division takes up the full height of its containing element.
• border: 1px solid grey;: Adds a 1-pixel solid grey border around the division.
• position: relative;: Positions the division relative to its normal flow, allowing for further positioning adjustments.
• ´Comment`: Defines the position and size of a specific division, with a grey border and relative positioning.

6. Menu Container (.div_geral_1_menu):

• background-color: black;: Sets a black background color for the menu container.
• width: 100%;: Ensures the menu container spans the full width of its containing element.
• height: 10%;: Sets the height of the menu container to 10% of the viewport height.
• ´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):

• background-color: black;: Sets a black background color for the title container.
• width: 100%;: Ensures the title container spans the full width of its containing element.
• height: 30%;: Sets the height of the title container to 30% of the viewport height.
• ´Comment`: Styles the title section with a black background and sets its height to 30% of the viewport height.

8. Title Image (.img_title):

• width: 33%;: Sets the width of the title image to 33% of its containing element’s width.
• height: 80%;: Sets the height of the title image to 80% of its containing element’s height.
• top: 10%;: Positions the image 10% from the top of its containing element.
• left: 33%;: Positions the image 33% from the left of its containing element.
• position: relative;: Allows for positioning adjustments relative to its normal flow.
• ´Comment`: Sets the dimensions and positioning of an image within the title section.

9. Panel Container (.div_geral_2_painel):

• background-color: black;: Sets a black background color for the panel container.
• width: 100%;: Ensures the panel container spans the full width of its containing element.
• height: 10%;: Sets the height of the panel container to 10% of the viewport height.
• ´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):

• background-color: grey;: Sets a grey background color for the side panel.
• width: 6.7%;: Sets the width of the side panel to 6.7% of its containing element’s width.
• height: 97.5%;: Sets the height of the side panel to 97.5% of its containing element’s height.
• float: left;: Floats the side panel to the left, allowing other content to wrap around it.
• border: 2px solid #ccc;: Adds a 2-pixel solid light grey border around the side panel.
• border-radius: 17%;: Rounds the corners of the side panel with a 17% radius.
• ´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):

• background-color: grey;: Sets a grey background color for the opposite side panel.
• width: 9%;: Sets the width of the opposite side panel to 9% of its containing element’s width.
• height: 97.5%;: Sets the height of the opposite side panel to 97.5% of its containing element’s height.
• float: right;: Floats the opposite side panel to the right, allowing other content to wrap around it.
• border: 2px solid #ccc;: Adds a 2-pixel solid light grey border around the opposite side panel.
• border-radius: 17%;: Rounds the corners of the opposite side panel with a 17% radius.
• ´Comment`: Styles another side panel with similar properties to the previous one but floats it to the right.

12. Navigation Text (.nav_1_p):

• color: white;: Sets the text color to white for better contrast against the black background.
• padding: 15px;: Adds 15 pixels of padding around the text for spacing.
• left: 7%;: Positions the navigation text 7% from the left edge of its containing element.
• top: 8%;: Positions the navigation text 8% from the top of its containing element.
• position: relative;: Allows for positioning adjustments relative to its normal flow.
• ´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):

• background-color: black;: Changes the background color to black when the side panels are hovered over or activated, enhancing interactivity.
• ´Comment`: Changes the background color of side panels when hovered over or activated to enhance interactivity.

14. Panel Image (.img_painel_1):

• width: 4%;: Sets the width of the panel image to 4% of its containing element’s width.
• height: 90%;: Sets the height of the panel image to 90% of its containing element’s height.
• float: left;: Floats the panel image to the left, allowing other content to wrap around it.
• top: 2%;: Positions the image 2% from the top of its containing element.
• position: relative;: Allows for positioning adjustments relative to its normal flow.
• ´Comment`: Sets the dimensions and positioning of an image within a panel section.

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

• background-color: #339933;, background-color: #669933;, background-color: #99cc66;: Sets various background colors for different panel sections, creating a visual hierarchy.
• width: 33%;, width: 100%;:: Defines the width of the panel sections relative to their containing element.
• height: 60%;, height: 50%;, height: 100%;: Sets the height of the panel sections to different percentages of their containing element’s height.
• ´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):

• background-color: #004d00;: Sets a dark green background color for the card containers.
• width: 100%;: Ensures the card containers span the full width of their containing element.
• height: 30%;: Sets the height of the card containers to 30% of the viewport height.
• ´Comment`: Styles the card containers with a specific background color and height, grouping multiple cards together.

17. Card (.card):

• width: 12%;: Sets the width of each card to 12% of its containing element’s width.
• height: 310%;: Sets the height of each card to 310% of its containing element’s height.
• top: 10%;: Positions the card 10% from the top of its containing element.
• float: left;: Floats the card to the left, allowing other content to wrap around it.
• margin-left: 0.5%;: Adds 0.5% margin on the left side of the card for spacing.
• position: relative;: Allows for positioning adjustments relative to its normal flow.
• border-radius: 20px;: Rounds the corners of the card with a 20-pixel radius.
• ´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):

• width: 100%;: Ensures each card’s content spans the full width of the card.
• height: 90%;: Sets the height of each card’s content to 90% of the card’s height.
• background-color: #006600;: Sets a dark green background color for each card’s content.
• ´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):

• height: 60%;, height: 70%;: Adjusts the height of specific sections within the card when hovered or activated, affecting their appearance.
• ´Comment`: Defines the styles for different sections within the card, adjusting sizes and colors.

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

• background-color: #ffcc00;: Sets a yellow background color for the recent section.
• height: 25%;: Defines the height of the recent section as 25% of its containing element’s height.
• background-image: url("path/to/image.jpg");: Sets a background image for the recent section, adding visual interest.
• ´Comment`: Styles the section for recent content with a background color and image.

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

• float: none;: Removes floating for elements to ensure a vertical layout on small screens.
• width: 100%;: Sets the width of elements to 100% for better use of space on small screens.
• height: auto;: Adjusts the height of elements to automatically fit their content.
• ´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.