|
|
| 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>
| |
