Choose jour language!

---

|

main.css - HOME PAGE STYLE

​
body{
  
}
.header{
    
    width:100%;
    height:400px;
    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;
}

---

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.

---