Instructions
Convert this Image to a working ionic app.
Code
home.page.html
home.page.scss
variables.scss
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
JOHN H. DRY CLEANING SERVICES
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true" class="price-list">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Price List</ion-title>
</ion-toolbar>
</ion-header>
<div class="hero">
<h2>JOHN H. DRY CLEANING SERVICES</h2>
<p class="address">Nagano street, Mambangnan — San Leonardo Nueva Ecija</p>
<p class="desc">Established in 1942, near the Gapan Bridge, John h. Puruntong dry cleaning services is a Contract of
the Samahan Magsasaka and a completely owned subsidiary of San Isidro cleaning services. It is one of the largest
commercial laundry firms in the Philippines.</p>
</div>
<ion-grid class="lists">
<ion-row>
<ion-col size-sm="6" size="12">
<section class="card">
<h3>Outerwear</h3>
<ion-grid class="table">
<ion-row class="table-row header">
<ion-col>Item</ion-col>
<ion-col class="price">Unit Price</ion-col>
</ion-row>
<ion-row class="table-row">
<ion-col>Waist Coat / Vest</ion-col>
<ion-col class="price">680</ion-col>
</ion-row>
<ion-row class="table-row">
<ion-col>Jacket</ion-col>
<ion-col class="price">850</ion-col>
</ion-row>
<ion-row class="table-row">
<ion-col>Sport Coat / Jumper Coat / Wind Jacket</ion-col>
<ion-col class="price">750</ion-col>
</ion-row>
</ion-grid>
</section>
</ion-col>
<ion-col size-sm="6" size="12">
<section class="card">
<h3>Household</h3>
<ion-grid class="table">
<ion-row class="table-row header">
<ion-col>Item</ion-col>
<ion-col class="price">Unit Price</ion-col>
</ion-row>
<ion-row class="table-row">
<ion-col>Lace Curtain - per sq. ft.</ion-col>
<ion-col class="price">305</ion-col>
</ion-row>
<ion-row class="table-row">
<ion-col>Curtain - per sq. ft.</ion-col>
<ion-col class="price">408</ion-col>
</ion-row>
<ion-row class="table-row">
<ion-col>Curtain with Lining - per sq. ft.</ion-col>
<ion-col class="price">575</ion-col>
</ion-row>
</ion-grid>
</section>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12">
<section class="card">
<h3>Trousers / Dresses</h3>
<ion-grid class="table">
<ion-row class="table-row header">
<ion-col>Item</ion-col>
<ion-col class="price">Unit Price</ion-col>
</ion-row>
<ion-row class="table-row">
<ion-col>Trousers (short)</ion-col>
<ion-col class="price">485</ion-col>
</ion-row>
<ion-row class="table-row">
<ion-col>Trousers (long)</ion-col>
<ion-col class="price">593</ion-col>
</ion-row>
<ion-row class="table-row">
<ion-col>Culottes</ion-col>
<ion-col class="price">452</ion-col>
</ion-row>
</ion-grid>
</section>
</ion-col>
</ion-row>
</ion-grid>
<footer class="contact">
<p>Owned and manage by <strong>John H. Puruntong</strong></p>
<p>Contact number <a href="tel:0968-2341213">0968-2341213</a></p>
<p class="website">https://www.facebook.com/JPuruntong</p>
</footer>
</ion-content>#container {
display: none;
}
:host {
display: block;
}
.price-list {
--background: #fafbfc;
padding: 0;
color: #2c3e50;
min-height: 100vh;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.hero {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
text-align: center;
padding: 40px 20px;
margin-bottom: 32px;
border-bottom: 3px solid #3498db;
position: relative;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #3498db 0%, #2e86c1 100%);
}
.hero h2 {
margin: 0 0 16px;
font-size: 1.8rem;
font-weight: 600;
letter-spacing: -0.02em;
color: #2c3e50;
line-height: 1.3;
}
.hero .address {
margin: 0 0 20px;
font-weight: 500;
color: #3498db;
font-size: 1rem;
}
.hero .desc {
font-size: 0.95rem;
color: #495057;
margin: 0 auto;
max-width: 700px;
line-height: 1.6;
font-weight: 400;
}
.lists {
margin: 0 16px 32px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.card {
background: #ffffff;
border-radius: 12px;
padding: 24px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
margin: 16px 8px;
border: 1px solid #e9ecef;
transition: all 0.2s ease;
}
.card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
transform: translateY(-1px);
}
.card h3 {
margin: 0 0 20px;
font-size: 1.25rem;
font-weight: 600;
color: #3498db;
letter-spacing: -0.01em;
position: relative;
padding-bottom: 8px;
}
.card h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background: #3498db;
border-radius: 1px;
}
.table .table-row {
padding: 12px 0;
border-bottom: 1px solid #f1f3f4;
transition: background-color 0.15s ease;
}
.table .table-row:last-child {
border-bottom: none;
}
.table .table-row:hover {
background-color: #f8f9fa;
}
.table .table-row.header {
font-weight: 600;
border-bottom: 2px solid #3498db;
color: #3498db;
background-color: rgba(52, 152, 219, 0.05);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.table .table-row.header:hover {
background-color: rgba(52, 152, 219, 0.05);
}
.table ion-col {
padding: 8px 12px;
display: flex;
align-items: center;
font-size: 0.95rem;
}
.table .price {
text-align: right;
min-width: 100px;
color: #2c3e50;
justify-content: flex-end;
font-weight: 500;
font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}
.table .price::before {
content: '₱';
margin-right: 2px;
font-weight: 400;
}
footer.contact {
background: #ffffff;
border-top: 1px solid #e9ecef;
text-align: center;
margin: 32px 0 0;
padding: 32px 20px;
color: #495057;
}
footer.contact p {
margin: 8px 0;
line-height: 1.5;
}
footer.contact strong {
color: #2c3e50;
font-weight: 600;
}
footer.contact a {
color: #3498db;
text-decoration: none;
font-weight: 500;
}
footer.contact a:hover {
text-decoration: underline;
color: #2e86c1;
}
footer.contact .website {
margin-top: 12px;
color: #3498db;
font-weight: 500;
}
@media (max-width: 768px) {
.hero {
padding: 32px 16px;
}
.hero h2 {
font-size: 1.5rem;
}
.lists {
margin: 0 8px 24px;
}
.card {
margin: 12px 4px;
padding: 20px 16px;
}
.table .price {
min-width: 80px;
font-size: 0.9rem;
}
.hero .desc {
padding: 0 8px;
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.table ion-col {
padding: 6px 8px;
font-size: 0.9rem;
}
.card h3 {
font-size: 1.1rem;
}
}// For information on how to create your own theme, please see:
// http://ionicframework.com/docs/theming/
/** Ionic CSS Variables **/
:root {
/** Primary color - elegant blue **/
--ion-color-primary: #3498db;
--ion-color-primary-rgb: 52, 152, 219;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255, 255, 255;
--ion-color-primary-shade: #2e86c1;
--ion-color-primary-tint: #48a5df;
/** Secondary - clean gray **/
--ion-color-secondary: #6c757d;
--ion-color-secondary-rgb: 108, 117, 125;
--ion-color-secondary-contrast: #ffffff;
--ion-color-secondary-contrast-rgb: 255, 255, 255;
--ion-color-secondary-shade: #5f686e;
--ion-color-secondary-tint: #7b848a;
/** Tertiary - light accent **/
--ion-color-tertiary: #f8f9fa;
--ion-color-tertiary-rgb: 248, 249, 250;
--ion-color-tertiary-contrast: #2c3e50;
--ion-color-tertiary-contrast-rgb: 44, 62, 80;
--ion-color-tertiary-shade: #dadce0;
--ion-color-tertiary-tint: #f9fafb;
/** Success - minimal green **/
--ion-color-success: #28a745;
--ion-color-success-rgb: 40, 167, 69;
--ion-color-success-contrast: #ffffff;
--ion-color-success-contrast-rgb: 255, 255, 255;
--ion-color-success-shade: #23923d;
--ion-color-success-tint: #3eb358;
/** Warning - minimal orange **/
--ion-color-warning: #ffc107;
--ion-color-warning-rgb: 255, 193, 7;
--ion-color-warning-contrast: #000000;
--ion-color-warning-contrast-rgb: 0, 0, 0;
--ion-color-warning-shade: #e0a800;
--ion-color-warning-tint: #ffca28;
/** Danger - minimal red **/
--ion-color-danger: #dc3545;
--ion-color-danger-rgb: 220, 53, 69;
--ion-color-danger-contrast: #ffffff;
--ion-color-danger-contrast-rgb: 255, 255, 255;
--ion-color-danger-shade: #c02b3c;
--ion-color-danger-tint: #e04858;
/** Medium - neutral gray **/
--ion-color-medium: #6c757d;
--ion-color-medium-rgb: 108, 117, 125;
--ion-color-medium-contrast: #ffffff;
--ion-color-medium-contrast-rgb: 255, 255, 255;
--ion-color-medium-shade: #5f686e;
--ion-color-medium-tint: #7b848a;
/** Light - very light gray **/
--ion-color-light: #f8f9fa;
--ion-color-light-rgb: 248, 249, 250;
--ion-color-light-contrast: #2c3e50;
--ion-color-light-contrast-rgb: 44, 62, 80;
--ion-color-light-shade: #dadce0;
--ion-color-light-tint: #f9fafb;
}