Template:Main page/styles2.css: Difference between revisions
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
/* | /* Global Styles */ | ||
body { | body { | ||
font-family: Arial, sans-serif; | |||
color: # | 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: # | 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 */ |
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 */