simon/luxury-detailing-maine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

finally got ceramic page boxes nice

Browse Source
This commit is contained in:
sotrali
2025-12-01 20:58:12 -05:00
parent ffbc843d12
commit a2b20fa1b1
1 changed files with 53 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ceramic-coating.html
+39 -33
View File
@@ -18,8 +18,15 @@
margin: 1rem; margin: 1rem;
} }
.info-flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 2rem;
max-width: 80%;
}
.info-box { .info-box {
background: background:
@@ -29,7 +36,7 @@
max-width: 80%; max-width: 80%;
width: 80%; width: 80%;
padding: 2rem 4rem;; padding: 2rem 4rem;
border-radius: 4rem; border-radius: 4rem;
height: min-content; height: min-content;
@@ -45,15 +52,16 @@
color: white; color: white;
/** TODO: figure out how to style these guys better */ /** TODO: figure out how to style these guys better */
} }
.info-flex {
display: flex; #packages {
flex-direction: row; max-width: 60%;
align-items: center; }
gap: 2rem; #wheel-wash {
max-width: 80%; max-width: 35%;
} }
#allIncludeList {
.checkMarkList {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
@@ -61,14 +69,14 @@
max-width: 100%; max-width: 100%;
} }
#allIncludeList li { .checkMarkList li {
text-wrap: nowrap; text-wrap: nowrap;
list-style-position: inside; list-style-position: inside;
padding: 0rem; padding: 0rem;
margin: .5rem .5rem; margin: .5rem .5rem;
} }
#allIncludeList li::marker { .checkMarkList li::marker {
content: "✓ "; content: "✓ ";
} }
@@ -84,8 +92,13 @@
} }
/** MOBILE */ /** MOBILE */
@media screen and (max-width: 850px) { @media screen and (max-width: 1100px) {
#packages {
max-width: 100%;
}
#wheel-wash {
max-width: 100%;
}
.info-flex { .info-flex {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -126,11 +139,12 @@
<main id="main-content"> <main id="main-content">
<section class="info-box" style="margin-bottom: 2rem;"> <div class="info-flex">
<section class="info-box" style="min-width: 100%; margin-bottom: 2rem;">
<h1><em>All</em> Ceramic Coatings Include</h1> <h1><em>All</em> Ceramic Coatings Include</h1>
<hr /> <hr />
<p>some headline details can go in here, then:</p> <p>some headline details can go in here, then:</p>
<ul id="allIncludeList"> <ul class="checkMarkList">
<li>3-5 years of protection</li> <li>3-5 years of protection</li>
<li>Hand wash</li> <li>Hand wash</li>
<li>other detail</li> <li>other detail</li>
@@ -138,33 +152,25 @@
</ul> </ul>
</section> </section>
<div class="info-flex"> <section id="packages" class="info-box">
<section style="flex-basis: max-content; flex-grow: 1;" class="info-box"> <h1>Choose Your Coating <em>Package</em></h1>
<h1>Choose your <em>Package</em></h1>
<hr /> <hr />
<div style="width: 75%;"> <div>
<ol> <h2>Elite</h2>
<li> <ul class="checkMarkList">
<h2>Elite Ceramic Coating:</h2>
<ul>
<li>elite detail one</li> <li>elite detail one</li>
<li>elite detail two</li> <li>elite detail two</li>
</ul> </ul>
</li> <h2>Complete</h2>
<ul class="checkMarkList">
<li>
<h2>Complete Ceramic Coating:</h2>
<ul>
<li>complete detail one</li> <li>complete detail one</li>
<li>complete detail two</li> <li>complete detail two</li>
</ul> </ul>
</li>
</ol>
</div> </div>
</section> </section>
<section style="flex-basis: min-content; flex-grow: 1;" class="info-box"> <section id="wheel-wash" class="info-box">
<h1>Wheel Wash <em>Add-on</em></h1> <h1>Wheel Wash<br /><em>Add-on</em></h1>
<hr /> <hr />
<ul> <ul>
<li>wheel wash information 1</li> <li>wheel wash information 1</li>