Sandbox: Difference between revisions
From ikev.in/w
(Created page with "<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My MediaWiki Front Page</title> <style> →Style rules for feature boxes: .feature-box { display: flex; flex-direction: column; align-items: center; padding: 20px; margin: 20px; background-color: #f0f0f0; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .feature-box h2 { margin: 0;...") |
No edit summary |
||
Line 1: | Line 1: | ||
{| class="feature-box-container" | |||
|- | |||
! class="feature-box" | |||
| '''Feature 1''' | |||
|- | |||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, neque a lacinia bibendum, ex nulla commodo velit, ut molestie magna orci eget augue. | |||
|- | |||
! class="feature-box" | |||
| '''Feature 2''' | |||
|- | |||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, neque a lacinia bibendum, ex nulla commodo velit, ut molestie magna orci eget augue. | |||
|} | |||
<style> | |||
/* Style rules for feature boxes */ | |||
.feature-box-container { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
} | |||
.feature-box { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
padding: 20px; | |||
margin: 20px; | |||
background-color: #f0f0f0; | |||
border-radius: 10px; | |||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |||
text-align: center; | |||
width: 100%; | |||
} | |||
@media only screen and (min-width: 768px) { | |||
/* Desktop styles */ | |||
.feature-box-container { | |||
flex-direction: row; | |||
align-items: stretch; | |||
max-width: 800px; | |||
margin: 0 auto; | |||
} | |||
.feature-box:first-child { | |||
margin-right: 20px; | |||
} | |||
.feature-box:last-child { | |||
margin-left: 20px; | |||
} | |||
.feature-box h2 { | |||
font-size: 32px; | |||
} | |||
.feature-box p { | |||
font-size: 18px; | |||
} | |||
} | |||
</style> |
Revision as of 23:36, 19 April 2023
class="feature-box" | Feature 1 |
---|---|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, neque a lacinia bibendum, ex nulla commodo velit, ut molestie magna orci eget augue. | |
class="feature-box" | Feature 2 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, neque a lacinia bibendum, ex nulla commodo velit, ut molestie magna orci eget augue. |
<style> /* Style rules for feature boxes */ .feature-box-container {
display: flex; flex-direction: column; align-items: center;
}
.feature-box {
display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; margin: 20px; background-color: #f0f0f0; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); text-align: center; width: 100%;
}
@media only screen and (min-width: 768px) {
/* Desktop styles */ .feature-box-container { flex-direction: row; align-items: stretch; max-width: 800px; margin: 0 auto; }
.feature-box:first-child { margin-right: 20px; }
.feature-box:last-child { margin-left: 20px; }
.feature-box h2 { font-size: 32px; }
.feature-box p { font-size: 18px; }
} </style>