Choose jour language!

---

|

main.css - HOME PAGE STYLE

​
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5; /* Light background color for the page */
}

.header{
    
    width:100%;
    min-height: 400px; /* Allows header to expand if needed */
    background-image: url("../images/pozadina.png");
     background-size: contain;
    
}
.footer{
    
    width:100%;
    height:300px;
    background:#aaaaff;   
    color:#fff;
}
.content{
    width:100%;
    height: auto;
    background:#ffffff;
    
}

.logo_examples img{
    width:32%;
    height:28vw;
    background-size: contain;
    padding:4vw;
}
.logo_example{
    padding-top:20px;
    text-align:center;
}

.ribbon{
    background: #dd0022;
    background-image: linear-gradient(to right, #dd0022 , #ffaaaa);
    opacity:0.9;
    color: white;
    font-family:"Roboto Tachoma";
    font-size:1.5vw;
    width:100%;
    height:15vw;
    text-align:center;
}
.field{
    width:30%;
    height:100%;   
    
}
.links{
    text-align:center;
}
.links a{
    margin:15px;
    color:#fff;
    font-size:1.2vw;
    font-weight:bold;
}
nav.icon{
    width:32px;
    height:32px;
}

:root {
    --base-padding: 1rem; /* Base padding value */
}
.logo_example {
    padding-top: var(--base-padding);
    text-align: center;
}

.links a:focus {
    outline: 2px dashed #fff; /* Visible focus outline */
}



@media (max-width: 768px) {
    .logo_examples img {
        width: 100%; /* Full width on smaller screens */
        height: auto; /* Maintain aspect ratio */
    }
    .field {
        width: 100%; /* Full width for fields */
    }
    .ribbon {
        font-size: 3vw; /* Larger text for better readability */
    }
}

---

Explanation of css

This CSS code defines styles for various elements on the homepage of a website. Here’s a detailed explanation of each segment of the code:

1. body:
   
   • Currently, the body of the page (body) has no defined styles. Styles for the body usually include basic attributes such as fonts, margins, and background colors, but these are omitted here.
2. .header:
   
   • The element with the class header occupies the full width of the page (width:100%) and has a height of 400 pixels.
   • The background of the header is an image (background-image: url("../images/pozadina.png")), set to fully adjust in size (background-size: contain), maintaining the image's proportions.
3. .footer:
   
   • The footer also occupies the full width of the page and has a height of 300 pixels.
   • The background of the footer is a solid color (background:#aaaaff), a light blue shade, while the text is white (color:#fff).
4. .content:
   
   • The content is the main section of the page, with a width of 100% and an automatic height, meaning the height adjusts based on the content.
   • The background of the content is white (background:#ffffff).
5. .logo_examples img:
   
   • Styles for images within .logo_examples include a width of 32% and a height set using the vw (view width) unit, which is 28% of the screen width.
   • The images have background-size: contain, meaning the images will fit within the frame without distortion.
   • There is also padding of 4% of the screen width (padding:4vw), which provides spacing around the images.
6. .logo_example:
   
   • This style applies 20 pixels of padding at the top (padding-top:20px) and centers the content (text-align:center).
7. .ribbon:
   
   • The ribbon is a styled band with a gradient background that stretches from dark red (#dd0022) to a lighter pink shade (#ffaaaa).
   • The ribbon has 90% transparency (opacity:0.9), white text (color: white), and uses the "Roboto Tachoma" font with a size of 1.5% of the screen width (font-size:1.5vw).
   • The width is 100%, and the height is 15% of the screen width (height:15vw), while the text is centered (text-align:center).
8. .field:
   
   • The field element occupies 30% of the page width (width:30%) and has a height that covers the entire height of its parent element (height:100%).
9. .links:
   
   • This style centers all links (text-align:center).
10. .links a:
    
    • The links within .links have a margin of 15 pixels (margin:15px), are white in color (color:#fff), with a font size of 1.2% of the screen width (font-size:1.2vw), and bold text (font-weight:bold).
11. nav.icon:
    
    • Icons within the nav element have a fixed size of 32x32 pixels.

This CSS code provides basic styles for essential elements of a webpage, including the header, footer, content, logos, and navigation, using responsive units like vw to ensure that elements adjust to different screen sizes.

Additional CSS Explanation

1. Background Size Containment:
   
   • The property background-size: contain ensures that the background image scales to fit the element without losing its aspect ratio. This is particularly useful for maintaining visual consistency, especially on varying screen sizes.
2. Using Viewport Width (vw) Units:
   
   • The use of vw (viewport width) units allows elements to adjust dynamically based on the width of the browser window. This responsiveness enhances user experience across different devices, ensuring that elements remain proportionate.
3. CSS Variables:
   
   • Defining CSS variables, such as --base-padding, helps in maintaining a consistent design. By using variables, you can easily make global changes to your styles, promoting better organization and readability of your CSS code.
4. Media Queries:
   
   • Media queries, like @media (max-width: 768px), allow you to apply specific styles depending on the screen size. This adaptability ensures that your website remains user-friendly on mobile devices by optimizing layouts and font sizes for better readability.
5. Accessibility Considerations:
   
   • Adding focus styles, such as outline: 2px dashed #fff;, enhances accessibility for users with visual impairments. This makes navigation easier by clearly indicating which link is currently selected, improving the overall user experience.
6. Design Flexibility:
   
   • The use of min-height in the header allows for flexibility in accommodating varying amounts of content. This ensures that the header remains visually appealing even if the content within it expands.
7. Connecting Classes and HTML Elements:
   
   • Each CSS class is intentionally linked to specific HTML elements. By understanding how classes apply to the HTML structure, developers can see how styles influence content presentation, making it easier to troubleshoot and modify styles as needed.

---