Template:Main page/styles2.css: Difference between revisions

From WikiAnimal
No edit summary
No edit summary
Line 1: Line 1:
/* Custom CSS for nature-inspired color scheme */
/* Global Styles */
body {
body {
     background-color: #f5f5dc; /* Beige background */
     font-family: Arial, sans-serif;
     color: #006400; /* Dark green text */
    color: #333; /* Black text */
     background-color: #f2f2f2; /* Light gray background */
    margin: 0;
    padding: 0;
}
}


/* Styling for header */
.container {
#header {
    width: 100%;
     background-color: #556b2f; /* Olive green header */
     max-width: 1200px; /* Adjust as needed */
     color: white; /* White text */
     margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}
}


/* Styling for content area */
header, footer {
#content {
    width: 100%;
     background-color: #f0fff0; /* Honeydew content background */
     background-color: #4CAF50; /* Nature color */
     padding: 20px; /* Add padding for readability */
     color: #fff; /* White text */
    padding: 20px;
    box-sizing: border-box;
}
}


/* Styling for footer */
.col {
#footer {
    width: calc(50% - 20px); /* 2 equal sized columns with 20px gutter */
     background-color: #8fbc8f; /* Dark sea green footer */
    float: left;
     color: white; /* White text */
    margin-right: 20px;
     margin-bottom: 20px;
     box-sizing: border-box;
}
}
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}
/* Media Query for Responsiveness */
@media only screen and (max-width: 768px) {
    .col {
        width: 100%; /* Columns stack on top of each other on small screens */
        margin-right: 0;
    }
}
/* Wikitext Markup */
.header-content, .footer-content, .col-content {
    padding: 20px;
}
/* You can add additional styling for specific elements as needed */

Revision as of 20:50, 4 April 2024

/* Global Styles */
body {
    font-family: Arial, sans-serif;
    color: #333; /* Black text */
    background-color: #f2f2f2; /* Light gray background */
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    max-width: 1200px; /* Adjust as needed */
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

header, footer {
    width: 100%;
    background-color: #4CAF50; /* Nature color */
    color: #fff; /* White text */
    padding: 20px;
    box-sizing: border-box;
}

.col {
    width: calc(50% - 20px); /* 2 equal sized columns with 20px gutter */
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Media Query for Responsiveness */
@media only screen and (max-width: 768px) {
    .col {
        width: 100%; /* Columns stack on top of each other on small screens */
        margin-right: 0;
    }
}

/* Wikitext Markup */
.header-content, .footer-content, .col-content {
    padding: 20px;
}

/* You can add additional styling for specific elements as needed */