Namaskaram!
--
+
-
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+ -
+
+
+
-
+
+
+
-
+
+
+
-
+
+
-
@@ -14,24 +38,26 @@
-
diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss
index e69de29..9ac1774 100644
--- a/src/app/home/home.page.scss
+++ b/src/app/home/home.page.scss
@@ -0,0 +1,215 @@
+// light 300; semi-regular 400; regular 500; semi-bold 600; bold 700;
+
+$standard-vertical-spacing-between-sections: 1.5rem;
+$stories-height: 6rem;
+$card-radius: 1rem;
+
+@mixin removeScrollbar {
+ &::-webkit-scrollbar {
+ width: 0px;
+ height: 0px;
+ }
+}
+
+ion-content {
+ --background: var(--brand-cream-shade1);
+}
+
+h5 {
+ font-weight: 600;
+ font-size: 1.6rem;
+ margin: 0 0 $standard-vertical-spacing-between-sections 0;
+}
+
+.stories {
+ list-style: none;
+ width: calc(100% + 2rem);
+ overflow-x: auto;
+ overflow-y: hidden;
+ height: $stories-height;
+ white-space: nowrap;
+ margin: $standard-vertical-spacing-between-sections 0;
+ @include removeScrollbar;
+
+ li {
+ display: inline-block;
+ margin: 0rem 0.5rem;
+ height: 100%;
+
+ img {
+ border: 0.2rem solid var(--brand-red);
+ width: $stories-height;
+ height: $stories-height;
+ border-radius: 50%;
+ overflow: hidden;
+ object-fit: cover;
+ display: block;
+ object-position: center;
+ }
+ }
+}
+
+.card {
+ border-radius: $card-radius;
+ overflow: hidden;
+ background-color: white;
+ margin: $standard-vertical-spacing-between-sections 0;
+
+ h5, p {
+ margin-bottom: 1rem;
+ }
+
+ p {
+ font-size: 1.2rem;
+ }
+
+ button {
+ padding: 0.7rem;
+ width: auto;
+ border-radius: 3rem;
+ font-size: 1.2rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 600;
+
+ ion-icon {
+ margin-right: 0.3rem;
+ font-size: 2.4rem;
+ }
+ }
+}
+
+.action-card {
+ padding: $standard-vertical-spacing-between-sections;
+ display: grid;
+ grid-template-columns: 0.6fr 0.4fr;
+ background-image: url('../../assets/sample-images/pattern.png');
+ background-repeat: repeat;
+ background-size: 70%;
+ box-shadow: 0px 0px 1rem var(--brand-orange-shade2);
+ align-items: center;
+
+ button {
+ color: white;
+ background-color: var(--brand-orange-shade1);
+ }
+
+ figure {
+ display: block;
+
+ img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ }
+ }
+}
+
+.image-action-card {
+ box-shadow: 0px 0px 1rem var(--brand-red);
+ background-color: var(--brand-red);
+
+ figure {
+ height: 20rem;
+ display: block;
+
+ img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: top;
+ border-radius: $card-radius;
+ }
+ }
+
+ .action-items {
+ padding: 0.5rem;
+ }
+
+ button {
+ margin: 0 auto;
+ background-color: var(--brand-red);
+ color: white;
+ }
+}
+
+header {
+ display: grid;
+ grid-template-columns: 0.7fr 0.3fr;
+}
+
+.card-collections {
+ header {
+ h5 {
+ margin: 0;
+ }
+ a {
+ text-align: right;
+ font-size: 1.2rem;
+ background-color: transparent;
+ color: var(--brand-orange-shade1);
+ font-weight: 600;
+ }
+ }
+}
+
+.horizontal-card-list {
+ list-style: none;
+ width: calc(100% + 2rem);
+ overflow-x: auto;
+ overflow-y: hidden;
+ white-space: nowrap;
+ padding: $standard-vertical-spacing-between-sections;
+ margin: $standard-vertical-spacing-between-sections 0;
+ margin-left: -$standard-vertical-spacing-between-sections;
+ @include removeScrollbar;
+
+ li {
+ display: inline-block;
+ margin-right: 2rem;
+ position: relative;
+
+ &::before {
+ content: '';
+ width: 90%;
+ height: 100%;
+ left: 5%;
+ position: absolute;
+ top: -1rem;
+ background-color: var(--brand-red);
+ opacity: 0.1;
+ border-radius: $card-radius;
+ }
+
+ &::after {
+ content: '';
+ width: 100%;
+ height: 100%;
+ left: 0;
+ position: absolute;
+ top: 0rem;
+ background-color: var(--brand-red);
+ opacity: 0.2;
+ border-radius: $card-radius;
+ z-index: 1;
+ }
+ }
+
+ figure {
+ position: relative;
+ z-index: 0;
+ width: 15rem;
+ height: 20rem;
+
+ img {
+ border-radius: $card-radius;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/global.scss b/src/global.scss
index 791a630..9898e09 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -24,3 +24,37 @@
@import "@ionic/angular/css/text-alignment.css";
@import "@ionic/angular/css/text-transformation.css";
@import "@ionic/angular/css/flex-utils.css";
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+figure,
+img,
+button,
+span,
+a {
+ font-family: 'Open Sans', sans-serif;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ font-weight: 500;
+ color: var(--brand-black);
+}
+
+ion-content {
+ --padding-top: 2rem;
+ --padding-start: 2rem;
+ --padding-end: 2rem;
+ --padding-bottom: 2rem;
+}
+
+:root {
+ font-size: 62.5%;
+}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 3b0aae1..08ac03d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,26 +1,33 @@
+
+
+ Ionic App - - -Ionic App +- + + + + - - - - + - - - - - - - - - - + + + + + + + + + + diff --git a/src/theme/variables.scss b/src/theme/variables.scss index 487f76d..049b6da 100644 --- a/src/theme/variables.scss +++ b/src/theme/variables.scss @@ -74,6 +74,14 @@ --ion-color-light-contrast-rgb: 0, 0, 0; --ion-color-light-shade: #d7d8da; --ion-color-light-tint: #f5f6f9; + + // Custom Colors + --brand-black: #1F1F1F; + --brand-red: #9f1905; + --brand-orange-shade1: #dc5b1c; + --brand-orange-shade2: #fa9900; + --brand-cream-shade1: #fde6c8; + --brand-cream-shade2: #fce09f; } // @media (prefers-color-scheme: dark) {
-
+
Explore Temple
Discover The Essence of a Journey of Spiritual Awakening.
+
-
+
-
Trending Collections
- + See All-
+