diff --git a/src/Projects/AMP-Capital/AMP-Capital.zip b/src/Projects/AMP-Capital/AMP-Capital.zip
new file mode 100644
index 0000000000000000000000000000000000000000..42d153a74cc62f94a398a0752a98457f03b001a6
Binary files /dev/null and b/src/Projects/AMP-Capital/AMP-Capital.zip differ
diff --git a/src/Projects/LOL-Member-Services/src/assets/img/banner-slider-img.png b/src/Projects/LOL-Member-Services/src/assets/img/banner-slider-img.png
new file mode 100644
index 0000000000000000000000000000000000000000..71bf2dc56aed579a1d4d0a00f434c11a5731a5c9
Binary files /dev/null and b/src/Projects/LOL-Member-Services/src/assets/img/banner-slider-img.png differ
diff --git a/src/Projects/LOL-Member-Services/src/assets/img/event-img.png b/src/Projects/LOL-Member-Services/src/assets/img/event-img.png
new file mode 100644
index 0000000000000000000000000000000000000000..68ef51afdc7d83a61dbf814a8e6d58d5d9d6a1d6
Binary files /dev/null and b/src/Projects/LOL-Member-Services/src/assets/img/event-img.png differ
diff --git a/src/Projects/LOL-Member-Services/src/assets/img/example.jpg b/src/Projects/LOL-Member-Services/src/assets/img/example.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..d1be967fa907c31f02ff920503336530009e27d9
Binary files /dev/null and b/src/Projects/LOL-Member-Services/src/assets/img/example.jpg differ
diff --git a/src/Projects/LOL-Member-Services/src/assets/scss/_settings.scss b/src/Projects/LOL-Member-Services/src/assets/scss/_settings.scss
index 0e3f82699ec2f5f4dc50d124fd379503dd1b1824..aba8232cc32c3fa38626ea218bf05812a0dce4f2 100644
--- a/src/Projects/LOL-Member-Services/src/assets/scss/_settings.scss
+++ b/src/Projects/LOL-Member-Services/src/assets/scss/_settings.scss
@@ -289,11 +289,11 @@ $callout-link-tint: 30%;
$card-background: $white;
$card-font-color: $body-font-color;
$card-divider-background: $light-gray;
-$card-border: 1px solid $light-gray;
+$card-border: none;
$card-shadow: none;
$card-border-radius: $global-radius;
$card-padding: $global-padding;
-$card-margin-bottom: $global-margin;
+$card-margin-bottom: $global-margin + 0.5rem;
// 15. Close Button
// ----------------
$closebutton-position: right top;
diff --git a/src/Projects/LOL-Member-Services/src/assets/scss/app.scss b/src/Projects/LOL-Member-Services/src/assets/scss/app.scss
index 3a24a50cc89f1812a174605473fd1fadcef440cb..adfbb7ca49803ed83c27b96dcd2f018647d9e5bd 100644
--- a/src/Projects/LOL-Member-Services/src/assets/scss/app.scss
+++ b/src/Projects/LOL-Member-Services/src/assets/scss/app.scss
@@ -1,8 +1,8 @@
@charset 'utf-8';
-@import 'global/_variables';
-@import '_settings';
-@import 'foundation';
-@import 'motion-ui';
+@import "global/_variables";
+@import "_settings";
+@import "foundation";
+@import "motion-ui";
// Global styles
@include foundation-global-styles;
@include foundation-forms;
@@ -57,16 +57,18 @@
// Motion UI
@include motion-ui-transitions;
@include motion-ui-animations;
-@import 'global/_mixins';
-@import 'global/typography.scss';
-@import 'components/buttons.scss';
-@import 'global/_base';
-@import 'components/widgets.scss';
-@import 'components/cards.scss';
-@import 'components/header.scss';
-@import 'components/footer.scss';
-@import 'components/banner.scss';
-@import 'pages/advocacy.scss';
-@import 'pages/article-detail.scss';
-@import 'components/carousel.scss';
-@import 'components/basic-content.scss';
\ No newline at end of file
+@import "global/_mixins";
+@import "global/typography.scss";
+@import "components/buttons.scss";
+@import "global/_base";
+@import "components/widgets.scss";
+@import "components/cards.scss";
+@import "components/header.scss";
+@import "components/footer.scss";
+@import "components/banner.scss";
+@import "pages/advocacy.scss";
+@import "pages/article-detail.scss";
+@import "components/risk-management.scss";
+@import "components/carousel.scss";
+@import "components/basic-content.scss";
+@import "components/event-freeform-text.scss";
diff --git a/src/Projects/LOL-Member-Services/src/assets/scss/components/banner.scss b/src/Projects/LOL-Member-Services/src/assets/scss/components/banner.scss
index 78bab9d066e4b2934a7572e030cff335bfcaf6c3..c49bfdcfca21db07401ca4c8f4e6daa66a1c84cf 100644
--- a/src/Projects/LOL-Member-Services/src/assets/scss/components/banner.scss
+++ b/src/Projects/LOL-Member-Services/src/assets/scss/components/banner.scss
@@ -1,121 +1,149 @@
.banner-slider {
- .slider-image {
- img {
- height: 100%;
- object-fit: cover;
- width: auto;
- }
+ .slider-image {
+ img {
+ height: 100%;
+ object-fit: cover;
+ width: auto;
+ }
+ }
+ .slider-text {
+ padding: 2.5rem 2.25rem;
+ h6 {
+ font-size: 0.75rem;
+ }
+ h2 {
+ margin-bottom: 0.625rem;
+ font-size: 2.375rem;
+ }
+ .content-placeholder {
+ line-height: 1.375rem;
+ font-size: 1.125rem;
+ margin-bottom: 0.938rem;
+ }
+ .button-group {
+ margin-bottom: 0;
+ }
+ .share-link-btn {
+ background-color: $white;
+ color: $light-blue;
+ font-size: 0.625rem;
+ }
+ }
+ .orbit-bullets {
+ position: absolute;
+ top: rem-calc(18);
+ left: rem-calc(-35);
+ @include transform(90deg);
+ margin: 0;
+ background-color: $white;
+ display: flex;
+ justify-content: center;
+ padding: rem-calc(10);
+ button {
+ height: 0.563rem;
+ width: 0.563rem;
+ &.is-active {
+ background-color: $orange;
+ }
+ }
+ }
+}
+
+.banner-small {
+ padding-top: rem-calc(18);
+ min-height: 12.75rem;
+ width: 100%;
+ background-size: cover;
+ background-color: $white;
+ @include breakpoint(large up) {
+ min-height: rem-calc(380);
+ }
+ .breadcrumb-block {
+ background-color: $white;
+ display: inline-flex;
+ @include breakpoint(xlarge up) {
+ display: inline-block;
+ padding-right: 0;
}
- .slider-text {
- padding: 2.5rem 2.25rem;
- h6 {
- font-size: 0.75rem;
+ }
+ .breadcrumbs {
+ margin-bottom: 0;
+ @include breakpoint(medium down) {
+ display: flex;
+ white-space: nowrap;
+ overflow-x: auto;
+ }
+ li {
+ &::after {
+ display: none;
+ }
+ a {
+ position: relative;
+ display: block;
+ float: left;
+ font-size: rem-calc(12);
+ font-weight: $font-weight-500;
+ padding: 0.45rem 0.8rem;
+ text-transform: uppercase;
+ color: $orange;
+ font-family: $heading-font-family;
+ @include breakpoint(large up) {
+ padding: rem-calc(18) rem-calc(35) rem-calc(18) rem-calc(25);
+ font-size: rem-calc(14);
}
- h2 {
- margin-bottom: 0.625rem;
- font-size: 2.375rem;
+ &:hover {
+ text-decoration: none;
}
- .content-placeholder {
- line-height: 1.375rem;
- font-size: 1.125rem;
- margin-bottom: 0.938rem;
+ &::after {
+ @include breadcrumb-arrow($white);
+ right: rem-calc(1);
}
- .button-group {
- margin-bottom: 0;
+ &::before {
+ @include breadcrumb-arrow($beige);
+ right: 0;
}
- .share-link-btn {
- background-color: #fff;
- color: #8099B3;
- font-size: 0.625rem;
+ }
+ &:last-child {
+ a {
+ color: $black-alt;
+ &::after {
+ border: none;
+ }
+ &::before {
+ border: none;
+ }
}
+ }
}
- .orbit-bullets {
- position: absolute;
- top: rem-calc(18);
- left: rem-calc(-35);
- transform: rotate(90deg);
- margin: 0;
- background-color: #fff;
- display: flex;
- justify-content: center;
- padding: rem-calc(10);
- button {
- height: 0.563rem;
- width: 0.563rem;
- &.is-active {
- background-color: $orange;
- }
- }
+ }
+ .applications-title {
+ @include flex;
+ justify-content: space-between;
+ margin-bottom: 1.5rem;
+ padding: rem-calc(10) rem-calc(15);
+ @include breakpoint(medium up) {
+ margin-bottom: 1.9rem;
+ }
+ @include breakpoint(large up) {
+ margin-bottom: 1rem;
+ padding: 2rem;
}
+ }
+ .banner-overlap {
+ position: relative;
+ margin-bottom: rem-calc(-116);
+ }
+ .risk-content-title {
+ .risk-info {
+ font-weight: $font-weight-700;
+ color: $orange;
+ }
+ }
}
-
-.banner-small{
- padding-top: rem-calc(18);
- height: 12.75rem;
- width: 100%;
- background-size: cover;
- background-color: $white;
- @include breakpoint(large up){
- height: rem-calc(380);
- }
- .breadcrumb-block{
- background-color: $white;
- display: inline-flex;
- @include breakpoint(xlarge up){
- display: inline-block;
- padding-right: 0;
- }
- }
- .breadcrumbs{
- margin-bottom: 0;
- @include breakpoint(medium down){
- display: flex;
- white-space: nowrap;
- overflow-x: auto;
- }
- li{
- &::after{
- display: none;
- }
- a{
- position: relative;
- display: block;
- float: left;
- font-size: rem-calc(12);
- font-weight: $font-weight-500;
- padding: 0.45rem 0.8rem;
- text-transform: uppercase;
- color: $orange;
- font-family: $heading-font-family;
- @include breakpoint(large up){
- padding: rem-calc(18) rem-calc(35) rem-calc(18) rem-calc(25) ;
- font-size: rem-calc(14);
- }
- &:hover{
- text-decoration:none;
- }
- &::after{
- @include breadcrumb-arrow( $white);
- right: rem-calc(1);
- }
- &::before{
- @include breadcrumb-arrow( $beige);
- right: 0;
- }
- }
- &:last-child{
- a{
- color: $black-alt;
- &::after{
- border: none;
- }
- &::before{
- border: none;
- }
- }
- }
- }
- }
-
+//banner height
+.inner-page-banner {
+ min-height: 18.75rem;
+ @include breakpoint(large up) {
+ min-height: rem-calc(331);
+ }
}
-
diff --git a/src/Projects/LOL-Member-Services/src/assets/scss/components/cards.scss b/src/Projects/LOL-Member-Services/src/assets/scss/components/cards.scss
index 5fb51a5468e33706599ecd573ab65ffe33eeaa60..457efc0cd09dbea3842bc0f31efed3d1b3085a58 100644
--- a/src/Projects/LOL-Member-Services/src/assets/scss/components/cards.scss
+++ b/src/Projects/LOL-Member-Services/src/assets/scss/components/cards.scss
@@ -1,55 +1,64 @@
.card {
- border: none;
- margin-bottom: 1.5rem;
-
- .card-section{
- display: flex;
- flex-flow: column wrap;
- padding: rem-calc(25);
- h6 {
- font-size: 0.75rem;
- margin-bottom: 1rem;
- color: $dark-yellow;
- }
- .card-title {
- font-size: 1.75rem;
- font-weight: $font-weight-700;
- color: $black;
- font-family: $heading-font-family;
- display: block;
- }
- .sub-title {
- font-size: 0.875rem;
- font-weight: $font-weight-700;
- color: $dark-yellow;
- display: inline-flex;
- margin-bottom: 1rem;
- text-transform: uppercase;
- }
- p{
- font-size: rem-calc(14);
- color: $black-desc;
- }
- .p-text-normal{
- font-size: 0.875rem;
- @include breakpoint(large up){
- font-size: 1.125rem;
- }
- }
-
+ border: none;
+ // margin-bottom: 1.5rem;
+ .img-placeholder {
+ position: relative;
+ .card-image {
+ min-height: rem-calc(175);
}
+ .card-title {
+ position: absolute;
+ color: rgb(255, 255, 255);
+ left: 0;
+ top: 0;
+ height: 100%;
+ width: 100%;
+ padding: 1rem;
+ }
+ }
+
+ .card-section {
+ // display: flex;
+ // flex-flow: column wrap;
+ padding: rem-calc(25);
+ h6 {
+ // font-size: 0.75rem;
+ margin-bottom: 1rem;
+ // color: $dark-yellow;
+ }
+ .card-title {
+ font-size: 1.75rem;
+ font-weight: $font-weight-700;
+ color: $black;
+ font-family: $heading-font-family;
+ display: block;
+ }
+ p {
+ font-size: rem-calc(14);
+ color: $black-desc;
+ }
+ .p-text-normal {
+ font-size: 0.875rem;
+ @include breakpoint(large up) {
+ font-size: 1.125rem;
+ }
+ }
+ }
}
-.banner-overlap-cards{
- .card{
- &-section{
- .button{
- margin-top: auto;
- }
- .sub-title{
- font-size: 0.75rem;
- margin-bottom: rem-calc(40);
- }
- }
+.banner-overlap-cards {
+ .card {
+ &-section {
+ .sub-title {
+ margin-bottom: rem-calc(40);
+ }
}
-}
\ No newline at end of file
+ }
+}
+// approach-card
+.approach-card {
+ padding: 3rem;
+ @include breakpoint(large up) {
+ padding: 3rem 3.5rem;
+ }
+}
diff --git a/src/Projects/LOL-Member-Services/src/assets/scss/components/event-freeform-text.scss b/src/Projects/LOL-Member-Services/src/assets/scss/components/event-freeform-text.scss
new file mode 100644
index 0000000000000000000000000000000000000000..090583d7abbe3326bdb0dc49c597226f7811862b
--- /dev/null
+++ b/src/Projects/LOL-Member-Services/src/assets/scss/components/event-freeform-text.scss
@@ -0,0 +1,64 @@
+.tabs,
+.tabs-content {
+ border: none;
+ color: $black-desc;
+}
+.tabs {
+ background-color: $half-white;
+ @include flex;
+ justify-content: center;
+ &-title {
+ background-color: $light-white;
+ }
+}
+.accordion-item,
+.tabs-title {
+ a {
+ font-size: 1rem;
+ color: $orange2;
+ font-weight: $font-weight-600;
+ text-transform: capitalize;
+ @include breakpoint(large up) {
+ padding: 1.25rem 3rem;
+ }
+ }
+}
+.tabs-title {
+ a {
+ &:hover,
+ &:focus,
+ &[aria-selected="true"] {
+ background: $white;
+ color: $orange2;
+ }
+ }
+}
+.tabs-subtitle {
+ color: inherit;
+ font-weight: $font-weight-500;
+}
+.document-materials {
+ .card {
+ border-bottom: 1px solid $beige;
+ &-section {
+ .icon-placeholder {
+ font-size: 2.5rem;
+ padding-right: 10px;
+ }
+ }
+ }
+ .file-name {
+ font-size: rem-calc(14);
+ color: $grey-dark-format;
+ text-decoration: underline;
+ }
+}
+.map-placeholder {
+ @include breakpoint(large down) {
+ margin-bottom: 1rem;
+ }
+ .map {
+ height: 100%;
+ width: 100%;
+ }
+}
diff --git a/src/Projects/LOL-Member-Services/src/assets/scss/components/risk-management.scss b/src/Projects/LOL-Member-Services/src/assets/scss/components/risk-management.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f57fd665f1fbea5d6c8a845e119d91bc1e5a2dcb
--- /dev/null
+++ b/src/Projects/LOL-Member-Services/src/assets/scss/components/risk-management.scss
@@ -0,0 +1,13 @@
+.wholistic-approach {
+ position: relative;
+ &:before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ background-color: $half-white;
+ width: 100%;
+ height: calc(50% + 20px);
+ z-index: -1;
+ }
+}
diff --git a/src/Projects/LOL-Member-Services/src/assets/scss/global/_base.scss b/src/Projects/LOL-Member-Services/src/assets/scss/global/_base.scss
index 71c4295596bc13462b661d10afd1820b6a05efc4..0c95d603fecd8644ce2cb232aae45a2919e496fb 100644
--- a/src/Projects/LOL-Member-Services/src/assets/scss/global/_base.scss
+++ b/src/Projects/LOL-Member-Services/src/assets/scss/global/_base.scss
@@ -1,264 +1,334 @@
-// .banner-pad{
-// @include breakpoint(large up){
-// padding-bottom: rem-calc(150);
-// }
-// }
-.banner-pad .banner-overlap-cards{
- @include breakpoint(large up){
- margin-top:0;
+.banner-pad .banner-overlap-cards {
+ @include breakpoint(large up) {
+ margin-top: 0;
position: relative;
top: -8rem;
- }
-
- @include breakpoint(medium down){
- position: relative;
- z-index: 0;
- }
- &::after{
- content: '';
- background: $white;
- position: absolute;
- width: 100%;
- height: rem-calc(100);
- top: 0;
- left: 0;
- z-index: -1;
- }
+ }
+
+ @include breakpoint(medium down) {
+ position: relative;
+ z-index: 0;
+ }
+ &::after {
+ content: "";
+ background: $white;
+ position: absolute;
+ width: 100%;
+ height: rem-calc(100);
+ top: 0;
+ left: 0;
+ z-index: -1;
+ }
}
.sec-pad {
- padding-top: rem-calc(40);
- padding-bottom: rem-calc(40);
- @include breakpoint(large up) {
- padding-top: rem-calc(48);
- padding-bottom: rem-calc(48);
- }
+ padding-top: rem-calc(40);
+ padding-bottom: rem-calc(40);
+ @include breakpoint(large up) {
+ padding-top: rem-calc(48);
+ padding-bottom: rem-calc(48);
+ }
}
.sec-pad-top {
- padding-top: rem-calc(40);
- @include breakpoint(large up) {
- padding-top: rem-calc(48);
- }
+ padding-top: rem-calc(40);
+ @include breakpoint(large up) {
+ padding-top: rem-calc(48);
+ }
}
.sec-pad-bottom {
- padding-bottom: rem-calc(40);
- @include breakpoint(large up) {
- padding-bottom: rem-calc(48);
- }
+ padding-bottom: rem-calc(40);
+ @include breakpoint(large up) {
+ padding-bottom: rem-calc(48);
+ }
}
-.overlap-section{
- @include breakpoint(large up) {
+// widths
+.width-medium-85 {
+ @include breakpoint(medium up) {
+ width: 85%;
+ }
+}
+.overlap-section {
+ @include breakpoint(large up) {
margin-top: -8rem;
- }
+ }
}
-.vertical-center{
- display: flex !important;
- align-items: center;
+.vertical-center {
+ display: flex !important;
+ align-items: center;
}
//drop-shadow
-.card-drop-shadow{
- box-shadow: $card-drop-shadow;
+.card-drop-shadow {
+ box-shadow: $card-drop-shadow;
}
// colors
.text-black {
- color: $black;
+ color: $black;
}
.text-white {
- color: $white;
+ color: $white;
}
-.text-dark-blue{
- color: $light-blue;
+.text-dark-blue {
+ color: $light-blue;
}
//fonts
-.text-xs{
- font-size: rem-calc(12) !important;
+.text-xs {
+ font-size: rem-calc(12) !important;
}
-
//font-weights
-.font-weight-300{
- font-weight: $font-weight-300;
+.font-weight-300 {
+ font-weight: $font-weight-300;
}
-.font-weight-400{
- font-weight: $font-weight-400;
+.font-weight-400 {
+ font-weight: $font-weight-400;
}
-.font-weight-500{
- font-weight: $font-weight-500;
+.font-weight-500 {
+ font-weight: $font-weight-500;
}
-.font-weight-600{
- font-weight: $font-weight-600;
+.font-weight-600 {
+ font-weight: $font-weight-600;
}
-.font-weight-700{
- font-weight: $font-weight-700;
+.font-weight-700 {
+ font-weight: $font-weight-700;
}
-.font-weight-normal{
- font-weight: $font-weight-normal;
+.font-weight-normal {
+ font-weight: $font-weight-normal;
}
-
// white background
.white-bg {
- background-color: $white;
+ background-color: $white;
}
.banner-slider {
- box-shadow: $card-drop-shadow;
+ box-shadow: $card-drop-shadow;
}
-//half-white background
.half-white-bg {
- background-color: $half-white;
+ background-color: $half-white;
+}
+
+.dark-blue-bg {
+ background-color: $dark-blue;
+ color: $white;
+}
+.half-blue-bg {
+ background-color: $half-blue;
+ color: $white;
+}
+.dark-blue-bg,
+.half-blue-bg {
+ .sub-title-lg {
+ color: inherit;
+ }
}
// margin
.margin-left-auto {
- margin-left: auto;
+ margin-left: auto;
}
.margin-x-auto {
- margin-left: auto;
- margin-right: auto;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.margin-top-auto {
+ margin-top: auto;
+}
+
+.margin-bottom-xlarge {
+ margin-bottom: 1.5rem;
+ @include breakpoint(medium up) {
+ margin-bottom: 1.9rem;
+ }
+ @include breakpoint(large up) {
+ margin-bottom: 4rem;
+ }
+}
+
+// Gutter width
+.gutter-60 {
+ @include breakpoint(large up) {
+ margin-left: -2rem;
+ margin-right: -2rem;
+ & > .cell {
+ margin-left: 2rem;
+ margin-right: 2rem;
+ width: calc(100% - 4rem);
+ }
+ &.large-up-3 {
+ .cell {
+ width: calc(33.33333% - 4rem) !important;
+ }
+ }
+ &.large-up-2 {
+ .cell {
+ width: calc(50% - 4rem) !important;
+ }
+ }
+ }
}
// flex
.flex-flow-row-wrap {
- flex-flow: row wrap;
+ flex-flow: row wrap;
+}
+.flex-wrap {
+ flex-wrap: wrap;
}
// hide class
.show-for-xlarge {
- display: none;
- @include breakpoint(xlarge up) {
- display: block;
- }
+ display: none;
+ @include breakpoint(xlarge up) {
+ display: block;
+ }
}
@include breakpoint(xlarge up) {
- .hide-for-xlarge {
- display: none;
- }
+ .hide-for-xlarge {
+ display: none;
+ }
}
-@include breakpoint(medium down){
- p{
- margin-bottom: $global-margin;
- }
+
+@include breakpoint(medium down) {
+ p {
+ margin-bottom: $global-margin;
+ }
}
//banner content overlap
-.banner-overlap-low{
- margin-top: -8rem;
+.banner-overlap-low {
+ margin-top: -8rem;
}
-.banner-overlap-cards{
- @include breakpoint(large up){
+.banner-overlap-cards {
+ margin-top: -5rem;
+ @include breakpoint(large up) {
margin-top: -8rem;
- }
+ }
}
-.grid-container{
- width: 100%;
+//padding-x
+.padding-y-xxl {
+ padding-top: 7.25rem;
+ padding-bottom: 11rem;
+}
+.padding-top-xxl {
+ padding-top: 7.25rem;
+}
+
+// text
+.text-center-mobile {
+ @include breakpoint(medium down) {
+ text-align: center;
+ }
}
+.grid-container {
+ width: 100%;
+}
-//membership section
-.membership-section{
- .years-accordion{
- text-align: center;
- @include breakpoint(large up){
- position:absolute;
- left: rem-calc(-150);
- max-width: rem-calc(300);
- }
- .accordion-title {
- border: none;
- font-size: rem-calc(14);
- font-family: inherit;
- color: $grey-light;
- border-bottom: none;
- font-weight: $font-weight-700;
- &::before {
- display: none;
- }
- &:hover,
- &:focus,
- &:active {
- background: none;
- }
- }
- .accordion-content {
- border: none;
- padding: 0.5rem 1rem;
- color: $grey-dark;
- font-size: inherit;
- font-weight: $font-weight-700;
- cursor: pointer;
- }
+//membership section
+.membership-section {
+ .years-accordion {
+ text-align: center;
+ @include breakpoint(large up) {
+ position: absolute;
+ left: rem-calc(-150);
+ max-width: rem-calc(300);
+ }
+ .accordion-title {
+ border: none;
+ font-size: rem-calc(14);
+ font-family: inherit;
+ color: $grey-light;
+ border-bottom: none;
+ font-weight: $font-weight-700;
+ &::before {
+ display: none;
+ }
+ &:hover,
+ &:focus,
+ &:active {
+ background: none;
+ }
+ }
+ .accordion-content {
+ border: none;
+ padding: 0.5rem 1rem;
+ color: $grey-dark;
+ font-size: inherit;
+ font-weight: $font-weight-700;
+ cursor: pointer;
+ }
+ }
+ .membership-date {
+ .small-title-black {
+ font-size: rem-calc(22);
}
- .membership-date{
- .small-title-black{
- font-size: rem-calc(22);
- }
+ }
+ .membership-grid {
+ position: relative;
+ }
+ .member-dropdown {
+ @include breakpoint(medium down) {
+ text-align: center;
}
- .membership-grid{
- position: relative;
+ .member-label {
+ font-size: 0.75rem;
+ margin-bottom: rem-calc(10);
}
- .member-dropdown{
- @include breakpoint(medium down){
- text-align: center;
- }
- .member-label{
- font-size: 0.75rem;
- margin-bottom: rem-calc(10);
- }
- .dropdown-sec{
- position: relative;
- select{
- background: $half-white;
- border: none;
- }
- i{
- position: absolute;
- top:rem-calc(10);
- right:rem-calc(10) ;
- }
- }
-
- // .dropdown{
- // @include breakpoint(medium down){
- // justify-content: center;
- // margin-bottom: $global-margin;
- // }
- // .dropdown-item{
- // min-width: rem-calc(245);
- // background : $half-white;
- // color: $black;
- // .menu-item{
- // padding-top: rem-calc(20);
- // padding-bottom: rem-calc(16);
- // font-size: rem-calc(12);
- // color: $black;
- // &:after{
- // content: none;
- // }
- // i{
- // float: right;
- // font-size: rem-calc(14);
- // }
- // }
- // .menu{
- // min-width: rem-calc(245);
- // background: $white;
- // border-top: none;
- // .menu-list{
- // a{
- // color: $black !important;
- // font-size: rem-calc(14);
- // }
- // }
- // }
- // }
- // }
+ .dropdown-sec {
+ position: relative;
+ select {
+ background: $half-white;
+ border: none;
+ }
+ i {
+ position: absolute;
+ top: rem-calc(10);
+ right: rem-calc(10);
+ }
}
+
+ // .dropdown{
+ // @include breakpoint(medium down){
+ // justify-content: center;
+ // margin-bottom: $global-margin;
+ // }
+ // .dropdown-item{
+ // min-width: rem-calc(245);
+ // background : $half-white;
+ // color: $black;
+ // .menu-item{
+ // padding-top: rem-calc(20);
+ // padding-bottom: rem-calc(16);
+ // font-size: rem-calc(12);
+ // color: $black;
+ // &:after{
+ // content: none;
+ // }
+ // i{
+ // float: right;
+ // font-size: rem-calc(14);
+ // }
+ // }
+ // .menu{
+ // min-width: rem-calc(245);
+ // background: $white;
+ // border-top: none;
+ // .menu-list{
+ // a{
+ // color: $black !important;
+ // font-size: rem-calc(14);
+ // }
+ // }
+ // }
+ // }
+ // }
+ }
}
diff --git a/src/Projects/LOL-Member-Services/src/assets/scss/global/_mixins.scss b/src/Projects/LOL-Member-Services/src/assets/scss/global/_mixins.scss
index fa4c69b3b01e4cf3971184884ae100394fb6bea5..b6c2bc9a526bfeea73fb05b25502a5486a7d8e75 100644
--- a/src/Projects/LOL-Member-Services/src/assets/scss/global/_mixins.scss
+++ b/src/Projects/LOL-Member-Services/src/assets/scss/global/_mixins.scss
@@ -9,17 +9,16 @@
box-shadow: $box-shadow;
}
-@mixin inset-box-shadow($top, $left, $blur, $color, $inset:"") {
- -webkit-box-shadow:$top $left $blur $color #{$inset};
- -moz-box-shadow:$top $left $blur $color #{$inset};
- -ms-box-shadow:$top $left $blur $color #{$inset};
- -o-box-shadow:$top $left $blur $color #{$inset};
- box-shadow:$top $left $blur $color #{$inset};
+@mixin inset-box-shadow($top, $left, $blur, $color, $inset: "") {
+ -webkit-box-shadow: $top $left $blur $color #{$inset};
+ -moz-box-shadow: $top $left $blur $color #{$inset};
+ -ms-box-shadow: $top $left $blur $color #{$inset};
+ -o-box-shadow: $top $left $blur $color #{$inset};
+ box-shadow: $top $left $blur $color #{$inset};
}
-
@mixin transition($transition) {
- transition: $transition 0.25s;
+ transition: $transition 0.25s;
-webkit-transition: $transition 0.25s;
-moz-transition: $transition 0.25s;
-ms-transition: $transition 0.25s;
@@ -42,17 +41,15 @@
-o-transform: $transform;
}
-@mixin clipPath{
+@mixin clipPath {
-moz-clip-path: polygon(0 0, 100% 38px, 100% 100%, 0% 100%);
-ms-clip-path: polygon(0 0, 100% 38px, 100% 100%, 0% 100%);
-o-clip-path: polygon(0 0, 100% 38px, 100% 100%, 0% 100%);
- clip-path: url('#Layer_1');
+ clip-path: url("#Layer_1");
clip-path: polygon(0 0, 100% 38px, 100% 100%, 0% 100%);
-webkit-clip-path: polygon(0 0, 100% 38px, 100% 100%, 0% 100%);
-
}
-
@mixin column-count($count) {
column-count: $count;
-webkit-column-count: $count;
@@ -62,57 +59,67 @@
// black shadow
@mixin button-transition {
- -webkit-transition-duration: 0.25s;
- -moz-transition-duration: 0.25s;
- -o-transition-duration: 0.25s;
- transition-duration: 0.25s;
- -webkit-transition-timing-function: linear;
- -moz-transition-timing-function: linear;
- -o-transition-timing-function: linear;
- transition-timing-function: linear;
+ -webkit-transition-duration: 0.25s;
+ -moz-transition-duration: 0.25s;
+ -o-transition-duration: 0.25s;
+ transition-duration: 0.25s;
+ -webkit-transition-timing-function: linear;
+ -moz-transition-timing-function: linear;
+ -o-transition-timing-function: linear;
+ transition-timing-function: linear;
}
-@mixin gradient-black{
- background: linear-gradient(0deg, rgba($black,0.6) 50%, rgba($white,0) 100%);
+@mixin gradient-black {
+ background: linear-gradient(
+ 0deg,
+ rgba($black, 0.6) 50%,
+ rgba($white, 0) 100%
+ );
}
-
@mixin breadcrumb-arrow($border-left-color) {
z-index: 0;
- content: " ";
- display: block;
- width: 0;
+ content: " ";
+ display: block;
+ width: 0;
height: 0;
position: absolute;
- border-top: rem-calc(20) solid transparent;
+ border-top: rem-calc(20) solid transparent;
border-bottom: rem-calc(20) solid transparent;
border-left: rem-calc(10) solid $border-left-color;
top: 0;
- margin-top: 0;
- @include breakpoint(large up){
- border-top: rem-calc(30) solid transparent;
- border-bottom: rem-calc(30) solid transparent;
- border-left: rem-calc(10) solid $border-left-color;
- top: 0;
- margin-top: 0;
- }
-
+ margin-top: 0;
+ @include breakpoint(large up) {
+ border-top: rem-calc(30) solid transparent;
+ border-bottom: rem-calc(30) solid transparent;
+ border-left: rem-calc(10) solid $border-left-color;
+ top: 0;
+ margin-top: 0;
}
+}
//Titles
-@mixin main-title{
+@mixin main-title {
font-size: rem-calc(30);
line-height: rem-calc(40);
- @include breakpoint(large up){
+ @include breakpoint(large up) {
font-size: rem-calc(48);
line-height: rem-calc(60);
}
}
-@mixin sub-title{
+@mixin main-title-lg {
+ font-size: rem-calc(30);
+ line-height: rem-calc(40);
+ @include breakpoint(large up) {
+ font-size: rem-calc(51);
+ line-height: rem-calc(60);
+ }
+}
+@mixin sub-title {
font-size: rem-calc(38);
text-transform: capitalize;
}
-@mixin sub-title-lg{
+@mixin sub-title-lg {
font-size: rem-calc(28);
text-transform: capitalize;
}
@@ -121,10 +128,10 @@
line-height: rem-calc(25);
text-transform: capitalize;
}
-@mixin sub-title-sm{
+@mixin sub-title-sm {
font-size: rem-calc(14);
}
-@mixin sub-title-xs{
+@mixin sub-title-xs {
font-size: rem-calc(12);
}
@mixin small-title-black {
@@ -134,32 +141,29 @@
text-transform: capitalize;
}
-@mixin p-text-lg{
+@mixin p-text-lg {
font-size: rem-calc(20);
line-height: rem-calc(28);
- @include breakpoint(large up){
+ @include breakpoint(large up) {
font-size: rem-calc(28);
line-height: rem-calc(32);
}
}
-
@mixin placeholder {
&::-webkit-input-placeholder {
- @content
+ @content;
}
&:-moz-placeholder {
- @content
+ @content;
}
&::-moz-placeholder {
- @content
+ @content;
}
&:-ms-input-placeholder {
- @content
+ @content;
}
}
-
-
diff --git a/src/Projects/LOL-Member-Services/src/assets/scss/global/_typography.scss b/src/Projects/LOL-Member-Services/src/assets/scss/global/_typography.scss
index 13bc370ad50889ed1bf471799b38925ecc5209f5..d3e858143fec635ff40612243bccc78d4f573702 100644
--- a/src/Projects/LOL-Member-Services/src/assets/scss/global/_typography.scss
+++ b/src/Projects/LOL-Member-Services/src/assets/scss/global/_typography.scss
@@ -1,8 +1,8 @@
-body{
- font-size: 1rem;
- @include breakpoint(large up){
- font-size: 1.125rem;
- }
+body {
+ font-size: 1rem;
+ @include breakpoint(large up) {
+ font-size: 1.125rem;
+ }
}
h1,
h2,
@@ -10,81 +10,96 @@ h3,
h4,
h5,
h6 {
- font-family: $heading-font-family;
- font-weight: $font-weight-700;
- color: $dark-yellow;
- margin-bottom: rem-calc(15);
- @include breakpoint(large up){
- margin-bottom: $title-margin;
- }
+ font-family: $heading-font-family;
+ font-weight: $font-weight-700;
+ color: $dark-yellow;
+ margin-bottom: rem-calc(15);
+ @include breakpoint(large up) {
+ margin-bottom: $title-margin;
+ }
}
-p:last-child{
- @include breakpoint(large up){
- margin-bottom: 0;
- }
+p:last-child {
+ @include breakpoint(large up) {
+ margin-bottom: 0;
+ }
}
-h1{
- @include main-title;
+h1 {
+ @include main-title;
+ @include breakpoint(large up) {
+ font-size: rem-calc(51);
+ }
}
h2 {
- @include sub-title;
- @include breakpoint(medium down){
- font-size: 2rem;
- }
+ @include sub-title;
+ @include breakpoint(large up) {
+ font-size: rem-calc(48);
+ }
+ @include breakpoint(medium down) {
+ font-size: 2rem;
+ }
}
h3 {
- @include sub-title-lg;
+ font-size: 1.75rem;
+ font-weight: 700;
}
-h4{
- @include sub-title-md;
+.p-text-sm {
+ font-size: 0.875rem;
+ @include sub-title-lg;
}
-h5{
- @include sub-title-sm;
+h4 {
+ @include sub-title-md;
}
-h6{
- @include sub-title-xs;
+h5 {
+ @include sub-title-sm;
+}
+h6 {
+ @include sub-title-xs;
}
-
//class mixins
-.main-title{
- @include main-title;
+.main-title {
+ @include main-title;
+ text-transform: capitalize;
}
-.sub-title{
- @include sub-title;
+.main-title-lg {
+ @include main-title-lg;
+ text-transform: capitalize;
}
-.sub-title-lg{
- @include sub-title-lg;
+.sub-title {
+ @include sub-title;
}
-.sub-title-md{
- @include sub-title-md;
+.sub-title-lg {
+ @include sub-title-lg;
}
-.sub-title-sm{
- @include sub-title-sm;
+.sub-title-md {
+ @include sub-title-md;
}
-.sub-title-xs{
- @include sub-title-xs;
+.sub-title-sm {
+ @include sub-title-sm;
+}
+.sub-title-xs {
+ @include sub-title-xs;
}
-.p-text-lg{
- @include p-text-lg;
+.p-text-lg {
+ @include p-text-lg;
}
-.small-title-black{
- @include small-title-black;
+.small-title-black {
+ @include small-title-black;
}
-.p-text-sm{
- font-size: 0.875rem;
- color: $black-desc;
-}
-.p-text-normal{
- font-size: 0.875rem;
- @include breakpoint(large up){
- font-size: 1.125rem;
- }
- color: $black !important;
-}
\ No newline at end of file
+.p-text-sm {
+ font-size: 0.875rem;
+ color: $black-desc;
+}
+.p-text-normal {
+ font-size: 0.875rem;
+ @include breakpoint(large up) {
+ font-size: 1.125rem;
+ }
+ color: $black !important;
+}
diff --git a/src/Projects/LOL-Member-Services/src/assets/scss/global/_variables.scss b/src/Projects/LOL-Member-Services/src/assets/scss/global/_variables.scss
index 3c2fa504d5a3cbf652daf67e266a5f3b097a9507..f47f9cd1d65938722254fb45d0479c3ec3c3c69e 100644
--- a/src/Projects/LOL-Member-Services/src/assets/scss/global/_variables.scss
+++ b/src/Projects/LOL-Member-Services/src/assets/scss/global/_variables.scss
@@ -1,29 +1,32 @@
// $dark-yellow: #A56F32;
$bright-yellow: #f1c526;
-$dark-yellow: #A36E31;
+$dark-yellow: #a36e31;
$dark-blue: #333c55;
-$half-white: #F5F4F1;
+$half-white: #f5f4f1;
$card-drop-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.251);
// $card-drop-shadow:0 0 30px rgba(0 0 0 / 12%);
$btn-padding: 1.125rem 1.25rem;
-$beige: #E6E0CC;
+$beige: #e6e0cc;
$title-margin: 1.25rem;
-$orange:#A36E31;
-$black-alt: #0D111C;
-$black-desc : #020001;
-$light-blue: #8099B3;
+$orange: #a36e31;
+$half-blue: #415899;
+$black-alt: #0d111c;
+$black-desc: #020001;
+$light-blue: #8099b3;
+$grey: #d8d8d8;
+$light-white: rgba(255, 255, 255, 0.35);
+$white: #fff;
+$orange2: #a56f32;
+$footer-black: #020d2b;
$transparent: #0000;
-$grey : #D8D8D8;
-$peach : #E5DCC2;
-$footer-black : #020D2B;
-$grey-light: #CDCAC1;
-$grey-dark: #9D9D9D;
-
-
+$peach: #e5dcc2;
+$grey-light: #cdcac1;
+$grey-dark: #9d9d9d;
+$grey-dark-format: #969696;
//font-weight
$font-weight-300: 300;
$font-weight-400: 400;
$font-weight-500: 500;
$font-weight-600: 600;
$font-weight-700: 700;
-$font-weight-normal: normal;
\ No newline at end of file
+$font-weight-normal: normal;
diff --git a/src/Projects/LOL-Member-Services/src/assets/scss/global/global.scss b/src/Projects/LOL-Member-Services/src/assets/scss/global/global.scss
index 30550076b1a0787fe12c86f07535ea0ea18a749b..2b68a0071666c409e23cfe1d0fccffba607fe05b 100644
--- a/src/Projects/LOL-Member-Services/src/assets/scss/global/global.scss
+++ b/src/Projects/LOL-Member-Services/src/assets/scss/global/global.scss
@@ -1,7 +1,29 @@
.basic-content {
- margin-top: $global-sec-margin;
- text-align: center;
- padding: 1rem 4rem;
+ margin-top: $global-sec-margin;
+ padding: 1rem 4rem;
}
-
+//Accordion
+.years-accordion {
+ max-width: rem-calc(300);
+ margin-top: $global-sec-margin;
+ .accordion-title {
+ border: none;
+ font-size: rem-calc(14);
+ font-family: inherit;
+ color: $half-white;
+ border-bottom: none;
+ &::before {
+ display: none;
+ }
+ &:hover,
+ &:focus,
+ &:active {
+ color: $black;
+ }
+ }
+ .accordion-content {
+ border: none;
+ padding: 0.5rem 1rem;
+ }
+}
diff --git a/src/Projects/LOL-Member-Services/src/assets/scss/pages/advocacy.scss b/src/Projects/LOL-Member-Services/src/assets/scss/pages/advocacy.scss
index e3e5bcc578c89a658129510ad07075e69542edcf..682683e992d30a000a033e2f7e22e62efacd5d47 100644
--- a/src/Projects/LOL-Member-Services/src/assets/scss/pages/advocacy.scss
+++ b/src/Projects/LOL-Member-Services/src/assets/scss/pages/advocacy.scss
@@ -78,5 +78,22 @@
margin-bottom: 0;
}
}
+ // .video-post{
+ // position: relative;
+ // .video-thumbnail{
+ // height: 35.25rem;
+ // width: 100%;
+ // padding: 0;
+ // }
+ // .video-info{
+ // position: absolute;
+ // top: 50%;
+ // left: 50%;
+ // transform: translate(-50%,50%);
+ // .video-title{
+ // text-transform: uppercase;
+ // }
+ // }
+ // }
}
diff --git a/src/Projects/LOL-Member-Services/src/pages/applications.html b/src/Projects/LOL-Member-Services/src/pages/applications.html
new file mode 100644
index 0000000000000000000000000000000000000000..e221c93ac35768589cf0b0a42152f03b84f4cf7c
--- /dev/null
+++ b/src/Projects/LOL-Member-Services/src/pages/applications.html
@@ -0,0 +1,187 @@
+<div class="half-white-bg">
+ <section
+ class="banner-small inner-page-banner"
+ style="background-image: url(https://unsplash.it/500/300/)"
+ >
+ <div class="grid-container">
+ <div
+ class="applications-title flex-flow-row-wrap white-bg card-drop-shadow"
+ >
+ <h1 class="margin-bottom-0 main-title-lg">Applications</h1>
+ </div>
+ </div>
+ </section>
+ <section
+ class="grid-container card-wrapper banner-overlap-cards sec-pad-bottom"
+ data-equalizer
+ data-equalize-on="medium"
+ data-equalize-by-row="true"
+ >
+ <div
+ class="grid-x grid-margin-x gutter-60 small-up-1 medium-up-3 large-up-3"
+ >
+ <div class="cell">
+ <div
+ class="card margin-bottom-xlarge card-drop-shadow white-bg"
+ data-equalizer-watch
+ >
+ <div
+ class="card-section text-center grid-x flex-dir-column flex-wrap"
+ >
+ <img
+ src="https://storcpkenticomedia.blob.core.windows.net/media/lolinc/media/images/blog/lolinc-logo-2022.svg?ext=.svg"
+ alt="lolinc-logo"
+ class="margin-x-auto width-75 margin-bottom-1"
+ />
+ <p class="p-text-sm">Short intro text about this application</p>
+ <a href="#" class="button margin-top-auto">VIEW STATEMENTS</a>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div
+ class="card margin-bottom-xlarge card-drop-shadow white-bg"
+ data-equalizer-watch
+ >
+ <div
+ class="card-section text-center grid-x flex-dir-column flex-wrap"
+ >
+ <img
+ src="https://storcpkenticomedia.blob.core.windows.net/media/lolinc/media/images/blog/lolinc-logo-2022.svg?ext=.svg"
+ alt="lolinc-logo"
+ class="margin-x-auto width-75 margin-bottom-1"
+ />
+ <p class="p-text-sm">Short intro text about this application</p>
+ <a href="#" class="button margin-top-auto">VIEW STATEMENTS</a>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div
+ class="card margin-bottom-xlarge card-drop-shadow white-bg"
+ data-equalizer-watch
+ >
+ <div
+ class="card-section text-center grid-x flex-dir-column flex-wrap"
+ >
+ <img
+ src="https://storcpkenticomedia.blob.core.windows.net/media/lolinc/media/images/blog/lolinc-logo-2022.svg?ext=.svg"
+ alt="lolinc-logo"
+ class="margin-x-auto width-75 margin-bottom-1"
+ />
+ <p class="p-text-sm">Short intro text about this application</p>
+ <a href="#" class="button margin-top-auto">VIEW STATEMENTS</a>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div
+ class="card margin-bottom-xlarge card-drop-shadow white-bg"
+ data-equalizer-watch
+ >
+ <div
+ class="card-section text-center grid-x flex-dir-column flex-wrap"
+ >
+ <img
+ src="https://storcpkenticomedia.blob.core.windows.net/media/lolinc/media/images/blog/lolinc-logo-2022.svg?ext=.svg"
+ alt="lolinc-logo"
+ class="margin-x-auto width-75 margin-bottom-1"
+ />
+ <p class="p-text-sm">Short intro text about this application</p>
+ <a href="#" class="button margin-top-auto">VIEW STATEMENTS</a>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div
+ class="card margin-bottom-xlarge card-drop-shadow white-bg"
+ data-equalizer-watch
+ >
+ <div
+ class="card-section text-center grid-x flex-dir-column flex-wrap"
+ >
+ <img
+ src="https://storcpkenticomedia.blob.core.windows.net/media/lolinc/media/images/blog/lolinc-logo-2022.svg?ext=.svg"
+ alt="lolinc-logo"
+ class="margin-x-auto width-75 margin-bottom-1"
+ />
+ <p class="p-text-sm">Short intro text about this application</p>
+ <a href="#" class="button margin-top-auto">VIEW STATEMENTS</a>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div
+ class="card margin-bottom-xlarge card-drop-shadow white-bg"
+ data-equalizer-watch
+ >
+ <div
+ class="card-section text-center grid-x flex-dir-column flex-wrap"
+ >
+ <img
+ src="https://storcpkenticomedia.blob.core.windows.net/media/lolinc/media/images/blog/lolinc-logo-2022.svg?ext=.svg"
+ alt="lolinc-logo"
+ class="margin-x-auto width-75 margin-bottom-1"
+ />
+ <p class="p-text-sm">Short intro text about this application</p>
+ <a href="#" class="button margin-top-auto">VIEW STATEMENTS</a>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div
+ class="card margin-bottom-xlarge card-drop-shadow white-bg"
+ data-equalizer-watch
+ >
+ <div
+ class="card-section text-center grid-x flex-dir-column flex-wrap"
+ >
+ <img
+ src="https://storcpkenticomedia.blob.core.windows.net/media/lolinc/media/images/blog/lolinc-logo-2022.svg?ext=.svg"
+ alt="lolinc-logo"
+ class="margin-x-auto width-75 margin-bottom-1"
+ />
+ <p class="p-text-sm">Short intro text about this application</p>
+ <a href="#" class="button margin-top-auto">VIEW STATEMENTS</a>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div
+ class="card margin-bottom-xlarge card-drop-shadow white-bg"
+ data-equalizer-watch
+ >
+ <div
+ class="card-section text-center grid-x flex-dir-column flex-wrap"
+ >
+ <img
+ src="https://storcpkenticomedia.blob.core.windows.net/media/lolinc/media/images/blog/lolinc-logo-2022.svg?ext=.svg"
+ alt="lolinc-logo"
+ class="margin-x-auto width-75 margin-bottom-1"
+ />
+ <p class="p-text-sm">Short intro text about this application</p>
+ <a href="#" class="button margin-top-auto">VIEW STATEMENTS</a>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div
+ class="card margin-bottom-xlarge card-drop-shadow white-bg"
+ data-equalizer-watch
+ >
+ <div
+ class="card-section text-center grid-x flex-dir-column flex-wrap"
+ >
+ <img
+ src="https://storcpkenticomedia.blob.core.windows.net/media/lolinc/media/images/blog/lolinc-logo-2022.svg?ext=.svg"
+ alt="lolinc-logo"
+ class="margin-x-auto width-75 margin-bottom-1"
+ />
+ <p class="p-text-sm">Short intro text about this application</p>
+ <a href="#" class="button margin-top-auto">VIEW STATEMENTS</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+</div>
diff --git a/src/Projects/LOL-Member-Services/src/pages/event-freeform-text.html b/src/Projects/LOL-Member-Services/src/pages/event-freeform-text.html
new file mode 100644
index 0000000000000000000000000000000000000000..1ebe2858c40f1778f5f10a21b989a2ce10a56376
--- /dev/null
+++ b/src/Projects/LOL-Member-Services/src/pages/event-freeform-text.html
@@ -0,0 +1,314 @@
+<section
+ class="banner-small"
+ style="background-image: url(https://unsplash.it/500/300/)"
+>
+ <div class="grid-container">
+ <div class="breadcrumb-block margin-bottom-1">
+ <ul class="breadcrumbs">
+ <li><a href="#" class="text-uppercase">EVENTS</a></li>
+ <li><a href="#" class="text-uppercase">AUGUST</a></li>
+ <li class="unavailable">
+ <a href="#" class="text-uppercase">MONDAY THE 8TH</a>
+ </li>
+ </ul>
+ </div>
+ <div
+ class="applications-title flex-flow-row-wrap align-middle white-bg card-drop-shadow"
+ >
+ <h1 class="margin-bottom-0 main-title-lg">Annual Member Meeting</h1>
+ <a class="button margin-bottom-0">ADD TO YOUR OUTLOOK</a>
+ </div>
+ </div>
+</section>
+<div class="half-white-bg banner-pad">
+ <section class="banner-overlap-cards">
+ <div class="grid-container text-center">
+ <div
+ class="grid-x grid-margin-x gutter-60 small-up-1 medium-up-2 large-up-2 align-center"
+ data-equalizer
+ data-equalize-on="medium"
+ data-equalize-by-row="true"
+ >
+ <div class="cell">
+ <div class="card card-drop-shadow white-bg" data-equalizer-watch>
+ <div class="card-section text-center">
+ <h6 class="text-uppercase sub-title-sm">WHEN</h6>
+ <h3 class="card-title margin-bottom-0 text-uppercase">
+ AUGUST 8, 2022
+ </h3>
+ <p class="margin-bottom-0 text-uppercase">To</p>
+ <h3 class="card-title margin-bottom-0 text-uppercase">
+ AUGUST 9, 2022
+ </h3>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div class="card card-drop-shadow white-bg" data-equalizer-watch>
+ <div class="card-section text-center">
+ <h6 class="text-uppercase sub-title-sm">WHERE</h6>
+ <h3 class="card-title margin-bottom-0">Cottage Grove, MN</h3>
+ <p>Land O’ Lakes Head Quarters</p>
+ <a href="#" class="button width-50 margin-bottom-0 margin-x-auto"
+ >GET DIRECTIONS</a
+ >
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+</div>
+<section class="half-white-bg overlap-section">
+ <div class="grid-container sec-pad">
+ <h2 class="text-center main-title">A Year of Surprising Growth.</h2>
+ <div
+ class="grid-x grid-margin-x gutter-60 small-up-1 medium-up-2 large-up-2"
+ data-equalizer
+ data-equalize-on="medium"
+ data-equalize-by-row="true"
+ >
+ <div class="cell large-6 medium-6 small-12">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+ minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip ex ea commodo consequat.
+ </p>
+ </div>
+ <div class="cell large-6 medium-6 small-12">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+ minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip ex ea commodo consequat.
+ </p>
+ </div>
+ </div>
+ </div>
+</section>
+<section class="sec-pad-bottom">
+ <div class="half-white-bg">
+ <div class="grid-container">
+ <ul
+ class="tabs"
+ data-responsive-accordion-tabs="tabs small-accordion large-tabs"
+ data-allow-all-closed="true"
+ id="example-tabs"
+ >
+ <li class="tabs-title is-active">
+ <a href="#panel1" aria-selected="true" class="h6 margin-bottom-0"
+ >Event Schedule</a
+ >
+ </li>
+ <li class="tabs-title">
+ <a href="#panel2" class="h6 margin-bottom-0">Documents & Materials</a>
+ </li>
+ <li class="tabs-title">
+ <a href="#panel3" class="h6 margin-bottom-0">Location Details</a>
+ </li>
+ </ul>
+ <!-- medium-accordion large-tabs -->
+ </div>
+ </div>
+ <div class="grid-container">
+ <div class="tabs-content" data-tabs-content="example-tabs">
+ <div class="tabs-panel is-active" id="panel1">
+ <div class="sec-pad">
+ <h3 class="text-center margin-bottom-3 main-title">
+ Agenda For This Year’s Meeting
+ </h3>
+ <div class="margin-bottom-3">
+ <img src="assets/img/event-img.png" alt="Event Schedule Image" />
+ </div>
+ <h3 class="tabs-subtitle text-center sub-title-lg">
+ Events for August 8, 2022
+ </h3>
+ <p class="margin-bottom-1">
+ 8:00AM Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+ do eiusmod
+ </p>
+ <p class="margin-bottom-1">
+ 11:00AM Tempor incididunt ut labore et dolore magna aliqua.
+ </p>
+ <p class="margin-bottom-1">
+ 12PM-130PM Ut enim ad minim veniam, quis nostrud exercitation
+ ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum
+ dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+ </p>
+ <p class="margin-bottom-1">
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+ veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+ ea commodo consequat.
+ </p>
+ <h3 class="tabs-subtitle text-center sub-title-lg">
+ Events for August 9, 2022
+ </h3>
+ <p class="margin-bottom-1">
+ 8:00AM Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+ do eiusmod
+ </p>
+ <p class="margin-bottom-1">
+ 11:00AM Tempor incididunt ut labore et dolore magna aliqua.
+ </p>
+ <p class="margin-bottom-1">
+ 12PM-130PM Ut enim ad minim veniam, quis nostrud exercitation
+ ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum
+ dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+ </p>
+ <p class="margin-bottom-1">
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+ veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+ ea commodo consequat.
+ </p>
+ </div>
+ </div>
+ <div class="tabs-panel" id="panel2">
+ <div class="sec-pad">
+ <h3 class="text-center margin-bottom-2 main-title">
+ Documents & Materials
+ </h3>
+ <p class="text-center">
+ Assets that will be helpful during this event.
+ </p>
+ <div class="grid-x document-materials">
+ <div class="cell">
+ <div class="card margin-bottom-0">
+ <div class="card-section grid-x padding-1">
+ <div class="icon-placeholder">
+ <i
+ class="lol-inc-icon lol-inc-icon-file-pdf-box"
+ aria-hidden="true"
+ ></i>
+ </div>
+ <div class="file-details">
+ <h5
+ class="small-title-black margin-bottom-0 text-capitalize"
+ >
+ Keynote Presentation
+ </h5>
+ <a href="#" class="file-name">filename.pdf</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div class="card margin-bottom-0">
+ <div class="card-section grid-x padding-1">
+ <div class="icon-placeholder">
+ <i
+ class="lol-inc-icon lol-inc-icon-file-pdf-box"
+ aria-hidden="true"
+ ></i>
+ </div>
+ <div class="file-details">
+ <h5
+ class="small-title-black margin-bottom-0 text-capitalize"
+ >
+ Keynote Presentation
+ </h5>
+ <a href="#" class="file-name">filename.ppt</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div class="card margin-bottom-0">
+ <div class="card-section grid-x padding-1">
+ <div class="icon-placeholder">
+ <i
+ class="lol-inc-icon lol-inc-icon-file-pdf-box"
+ aria-hidden="true"
+ ></i>
+ </div>
+ <div class="file-details">
+ <h5
+ class="small-title-black margin-bottom-0 text-capitalize"
+ >
+ Exhibit Booth Image
+ </h5>
+ <a href="#" class="file-name">exhibit.jpg</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div class="card margin-bottom-0">
+ <div class="card-section grid-x padding-1">
+ <div class="icon-placeholder">
+ <i
+ class="lol-inc-icon lol-inc-icon-file-pdf-box"
+ aria-hidden="true"
+ ></i>
+ </div>
+ <div class="file-details">
+ <h5
+ class="small-title-black margin-bottom-0 text-capitalize"
+ >
+ Follow Along Document
+ </h5>
+ <a href="#" class="file-name">follow.docx</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div class="card margin-bottom-0">
+ <div class="card-section grid-x padding-1">
+ <div class="icon-placeholder">
+ <i
+ class="lol-inc-icon lol-inc-icon-file-pdf-box"
+ aria-hidden="true"
+ ></i>
+ </div>
+ <div class="file-details">
+ <h5
+ class="small-title-black margin-bottom-0 text-capitalize"
+ >
+ Calculations Spreadsheet
+ </h5>
+ <a href="#" class="file-name">revenue.xlsx</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="tabs-panel" id="panel3">
+ <div class="sec-pad location-details">
+ <h3 class="text-center margin-bottom-2 main-title">
+ Location Details
+ </h3>
+ <div class="grid-x grid-margin-x small-up-1 medium-up-2 large-up-2">
+ <div class="cell map-placeholder card-drop-shadow">
+ <iframe
+ class="map"
+ src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2819906.042854943!2d-97.96445319872267!3d46.3532259794897!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4d585b9a60780b9b%3A0x2a2c99b10fea20f!2sMinnesota%2C%20USA!5e0!3m2!1sen!2sin!4v1669005699604!5m2!1sen!2sin"
+ style="border: 0"
+ allowfullscreen=""
+ loading="lazy"
+ referrerpolicy="no-referrer-when-downgrade"
+ ></iframe>
+ </div>
+ <div class="cell">
+ <h3 class="tabs-subtitle margin-bottom-1">Address</h3>
+ <p>
+ 123 Main Street, Suite A113<br />
+ Cottage Grove, MN
+ </p>
+ <h3 class="tabs-subtitle margin-bottom-1">Phone</h3>
+ <p>(800) 444-9988</p>
+ <h3 class="tabs-subtitle margin-bottom-1">Instructions</h3>
+ <p>
+ When you enter in, go left, then right, then up and down the
+ elevator until you get dizzy and someone carries you to the
+ right room.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</section>
diff --git a/src/Projects/LOL-Member-Services/src/pages/index.html b/src/Projects/LOL-Member-Services/src/pages/index.html
index e6319ed3bbbf5ebf17fb9f4d24cd741a86cb5fcd..ac88ee2454be72179cc31db30922765a4c45ecaa 100644
--- a/src/Projects/LOL-Member-Services/src/pages/index.html
+++ b/src/Projects/LOL-Member-Services/src/pages/index.html
@@ -1,12 +1,9 @@
<body>
- <!-- <a href="advocacy.html">Advocacy</a><br>
+ <!-- <a href="advocacy.html">Advocacy</a><br>
<a href="article-detail.html">Article-detail</a>
-->
- {{> hero-carousel}}
- <div class="half-white-bg banner-pad">
- {{> cards}}
- {{> basic-content}}
- {{> cards-slider}}
- </div>
-
+ {{> hero-carousel}}
+ <div class="half-white-bg banner-pad">
+ {{> cards}} {{> basic-content}} {{> cards-slider}}
+ </div>
</body>
diff --git a/src/Projects/LOL-Member-Services/src/pages/risk-management.html b/src/Projects/LOL-Member-Services/src/pages/risk-management.html
new file mode 100644
index 0000000000000000000000000000000000000000..9ed1196a186eb34a74b51ac962ef26280cd3e240
--- /dev/null
+++ b/src/Projects/LOL-Member-Services/src/pages/risk-management.html
@@ -0,0 +1,440 @@
+<section
+ class="banner-small inner-page-banner"
+ style="background-image: url(https://unsplash.it/500/300/)"
+>
+ <div class="grid-container">
+ <div class="breadcrumb-block margin-bottom-1">
+ <ul class="breadcrumbs">
+ <li><a href="#" class="text-uppercase">FINANCIAL</a></li>
+ <li class="unavailable">
+ <a href="#" class="text-uppercase">RISK MANAGEMENT</a>
+ </li>
+ </ul>
+ </div>
+ <div class="risk-content-title banner-overlap card-drop-shadow">
+ <div class="risk-title text-center white-bg">
+ <div class="width-medium-85 margin-left-auto margin-x-auto padding-2">
+ <h1 class="margin-bottom-1 main-title-lg">Risk Management</h1>
+ <p class="risk-info h3 margin-bottom-0">
+ Fresh eyes with hundreds of combined years of experience to provide
+ actionable insights for your organization.
+ </p>
+ </div>
+ </div>
+ <div class="btn-placeholder padding-2 half-white-bg text-center">
+ <a class="button margin-bottom-0">CLICK HERE TO GET STARTED</a>
+ </div>
+ </div>
+ </div>
+</section>
+<section class="padding-top-xxl half-white-bg">
+ <div class="grid-container">
+ <div class="team-behind-the-scenes sec-pad">
+ <h2 class="text-center main-title">The Team Behind The Scenes</h2>
+ <div class="width-medium-85 margin-x-auto">
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+ minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+ labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+ </p>
+ <p>
+ Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+ enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+ ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit,
+ </p>
+ <p>
+ sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+ enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
+ ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet,
+ consectetur adipiscing elit, sed do qua. Ut enim ad minim veniam, quis
+ nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+ consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+ do eiusmod tempor incilabore et dolore magna aliqua. Ut enim ad minim
+ veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+ ea commodo consequat.
+ </p>
+ </div>
+ </div>
+ </div>
+</section>
+<section class="wholistic-approach">
+ <div class="grid-container">
+ <div class="card-wrapper">
+ <h3 class="text-center main-title">
+ A wholistic approach at mitigating risk:
+ </h3>
+ <div class="grid-x">
+ <div class="cell large-6 medium-6 small-12 approach-card dark-blue-bg">
+ <h3 class="margin-bottom-0 sub-title-lg">
+ A team of consultants capable of keepping an eye on your operation.
+ </h3>
+ </div>
+ <div class="cell large-6 medium-6 small-12 approach-card half-blue-bg">
+ <h3 class="margin-bottom-0 sub-title-lg">
+ Access to a suite of tools for financial planning, heard management,
+ and operations.
+ </h3>
+ </div>
+ </div>
+ </div>
+ </div>
+</section>
+<section class="sec-pad">
+ <div
+ class="grid-container"
+ data-equalizer
+ data-equalize-on="medium"
+ data-equalize-by-row="true"
+ >
+ <h3 class="text-center-mobile main-title">Offerings with this service:</h3>
+ <div
+ class="grid-x grid-margin-x gutter-60 small-up-1 medium-up-3 large-up-3"
+ >
+ <div class="cell">
+ <div
+ class="card-drop-shadow card margin-bottom-xlarge"
+ data-equalizer-watch
+ >
+ <div class="img-placeholder">
+ <img
+ src="https://tse4.mm.bing.net/th?id=OIP.RFdlEjTrl2p-Pym0fAPFTQHaEo&pid=Api&P=0"
+ alt="image of a planet called Pegasi B"
+ class="card-image"
+ />
+ <h3
+ class="card-title text-center text-capitalize grid-x align-middle align-center sub-title-lg"
+ >
+ Risk Margin Insights
+ </h3>
+ </div>
+ <div class="card-section">
+ <p class="subheader">
+ An insight platform designed to give you a clear visual of what
+ your risks are with the ability to give you actionable prevention
+ plans to address risks identified from your inputs.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div
+ class="card-drop-shadow card margin-bottom-xlarge"
+ data-equalizer-watch
+ >
+ <div class="img-placeholder">
+ <img
+ src="https://tse4.mm.bing.net/th?id=OIP.RFdlEjTrl2p-Pym0fAPFTQHaEo&pid=Api&P=0"
+ alt="image of a planet called Pegasi B"
+ class="card-image"
+ />
+ <h3
+ class="card-title text-center grid-x text-capitalize align-middle align-center sub-title-lg"
+ >
+ Cost Of Production Analysis
+ </h3>
+ </div>
+ <div class="card-section">
+ <p class="subheader">
+ An insight platform designed to give you a clear visual of what
+ your risks are with the ability to give you actionable prevention
+ plans to address risks identified from your inputs.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div
+ class="card-drop-shadow card margin-bottom-xlarge"
+ data-equalizer-watch
+ >
+ <div class="img-placeholder">
+ <img
+ src="https://tse4.mm.bing.net/th?id=OIP.RFdlEjTrl2p-Pym0fAPFTQHaEo&pid=Api&P=0"
+ alt="image of a planet called Pegasi B"
+ class="card-image"
+ />
+ <h3
+ class="card-title text-center grid-x text-capitalize align-middle align-center sub-title-lg"
+ >
+ Dairy Revenue Protection
+ </h3>
+ </div>
+ <div class="card-section">
+ <p class="subheader">
+ An insight platform designed to give you a clear visual of what
+ your risks are with the ability to give you actionable prevention
+ plans to address risks identified from your inputs.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div
+ class="card-drop-shadow card margin-bottom-xlarge"
+ data-equalizer-watch
+ >
+ <div class="img-placeholder">
+ <img
+ src="https://tse4.mm.bing.net/th?id=OIP.RFdlEjTrl2p-Pym0fAPFTQHaEo&pid=Api&P=0"
+ alt="image of a planet called Pegasi B"
+ class="card-image"
+ />
+ <h3
+ class="card-title text-center grid-x text-capitalize align-middle align-center sub-title-lg"
+ >
+ Forward Contracting
+ </h3>
+ </div>
+ <div class="card-section">
+ <p class="subheader">
+ An insight platform designed to give you a clear visual of what
+ your risks are with the ability to give you actionable prevention
+ plans to address risks identified from your inputs.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div
+ class="card-drop-shadow card margin-bottom-xlarge"
+ data-equalizer-watch
+ >
+ <div class="img-placeholder">
+ <img
+ src="https://tse4.mm.bing.net/th?id=OIP.RFdlEjTrl2p-Pym0fAPFTQHaEo&pid=Api&P=0"
+ alt="image of a planet called Pegasi B"
+ class="card-image"
+ />
+ <h3
+ class="card-title text-center grid-x text-capitalize align-middle align-center sub-title-lg"
+ >
+ Dairy Enterprise Services
+ </h3>
+ </div>
+
+ <div class="card-section">
+ <p class="subheader">
+ An insight platform designed to give you a clear visual of what
+ your risks are with the ability to give you actionable prevention
+ plans to address risks identified from your inputs.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div
+ class="card-drop-shadow card margin-bottom-xlarge"
+ data-equalizer-watch
+ >
+ <div class="img-placeholder">
+ <img
+ src="https://tse4.mm.bing.net/th?id=OIP.RFdlEjTrl2p-Pym0fAPFTQHaEo&pid=Api&P=0"
+ alt="image of a planet called Pegasi B"
+ class="card-image"
+ />
+ <h3
+ class="card-title text-center grid-x text-capitalize align-middle align-center sub-title-lg"
+ >
+ Return-Over-Feed Margin Protection
+ </h3>
+ </div>
+ <div class="card-section">
+ <p class="subheader">
+ An insight platform designed to give you a clear visual of what
+ your risks are with the ability to give you actionable prevention
+ plans to address risks identified from your inputs.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div
+ class="card-drop-shadow card margin-bottom-xlarge"
+ data-equalizer-watch
+ >
+ <div class="img-placeholder">
+ <img
+ src="https://tse4.mm.bing.net/th?id=OIP.RFdlEjTrl2p-Pym0fAPFTQHaEo&pid=Api&P=0"
+ alt="image of a planet called Pegasi B"
+ class="card-image"
+ />
+ <h3
+ class="card-title text-center grid-x text-capitalize align-middle align-center sub-title-lg"
+ >
+ Feed Cap Program
+ </h3>
+ </div>
+ <div class="card-section">
+ <p class="subheader">
+ An insight platform designed to give you a clear visual of what
+ your risks are with the ability to give you actionable prevention
+ plans to address risks identified from your inputs.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div
+ class="card-drop-shadow card margin-bottom-xlarge"
+ data-equalizer-watch
+ >
+ <div class="img-placeholder">
+ <img
+ src="https://tse4.mm.bing.net/th?id=OIP.RFdlEjTrl2p-Pym0fAPFTQHaEo&pid=Api&P=0"
+ alt="image of a planet called Pegasi B"
+ class="card-image"
+ />
+ <h3
+ class="card-title text-center grid-x text-capitalize align-middle align-center sub-title-lg"
+ >
+ Member Premium Program
+ </h3>
+ </div>
+ <div class="card-section">
+ <p class="subheader">
+ An insight platform designed to give you a clear visual of what
+ your risks are with the ability to give you actionable prevention
+ plans to address risks identified from your inputs.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div
+ class="card-drop-shadow card margin-bottom-xlarge"
+ data-equalizer-watch
+ >
+ <div class="img-placeholder">
+ <img
+ src="https://tse4.mm.bing.net/th?id=OIP.RFdlEjTrl2p-Pym0fAPFTQHaEo&pid=Api&P=0"
+ alt="image of a planet called Pegasi B"
+ class="card-image"
+ />
+ <h3
+ class="card-title text-center grid-x text-capitalize align-middle align-center sub-title-lg"
+ >
+ Milk, Feed And Macro Market Commodity Drivers
+ </h3>
+ </div>
+ <div class="card-section">
+ <p class="subheader">
+ An insight platform designed to give you a clear visual of what
+ your risks are with the ability to give you actionable prevention
+ plans to address risks identified from your inputs.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div
+ class="card-drop-shadow card margin-bottom-xlarge"
+ data-equalizer-watch
+ >
+ <div class="img-placeholder">
+ <img
+ src="https://tse4.mm.bing.net/th?id=OIP.RFdlEjTrl2p-Pym0fAPFTQHaEo&pid=Api&P=0"
+ alt="image of a planet called Pegasi B"
+ class="card-image"
+ />
+ <h3
+ class="card-title text-center grid-x text-capitalize align-middle align-center sub-title-lg"
+ >
+ Industry Trend Synopsis
+ </h3>
+ </div>
+ <div class="card-section">
+ <p class="subheader">
+ An insight platform designed to give you a clear visual of what
+ your risks are with the ability to give you actionable prevention
+ plans to address risks identified from your inputs.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div
+ class="card-drop-shadow card margin-bottom-xlarge"
+ data-equalizer-watch
+ >
+ <div class="img-placeholder">
+ <img
+ src="https://tse4.mm.bing.net/th?id=OIP.RFdlEjTrl2p-Pym0fAPFTQHaEo&pid=Api&P=0"
+ alt="image of a planet called Pegasi B"
+ class="card-image"
+ />
+ <h3
+ class="card-title text-center grid-x text-capitalize align-middle align-center sub-title-lg"
+ >
+ Federal Milk Marketing Order Pricing
+ </h3>
+ </div>
+ <div class="card-section">
+ <p class="subheader">
+ An insight platform designed to give you a clear visual of what
+ your risks are with the ability to give you actionable prevention
+ plans to address risks identified from your inputs.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div
+ class="card-drop-shadow card margin-bottom-xlarge"
+ data-equalizer-watch
+ >
+ <div class="img-placeholder">
+ <img
+ src="https://tse4.mm.bing.net/th?id=OIP.RFdlEjTrl2p-Pym0fAPFTQHaEo&pid=Api&P=0"
+ alt="image of a planet called Pegasi B"
+ class="card-image"
+ />
+ <h3
+ class="card-title text-center grid-x text-capitalize align-middle align-center sub-title-lg"
+ >
+ Milk Risk Management Education
+ </h3>
+ </div>
+ <div class="card-section">
+ <p class="subheader">
+ An insight platform designed to give you a clear visual of what
+ your risks are with the ability to give you actionable prevention
+ plans to address risks identified from your inputs.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div
+ class="card-drop-shadow card margin-bottom-xlarge"
+ data-equalizer-watch
+ >
+ <div class="img-placeholder">
+ <img
+ src="https://tse4.mm.bing.net/th?id=OIP.RFdlEjTrl2p-Pym0fAPFTQHaEo&pid=Api&P=0"
+ alt="image of a planet called Pegasi B"
+ class="card-image"
+ />
+ <h3
+ class="card-title text-center grid-x text-capitalize align-middle align-center sub-title-lg"
+ >
+ Enterprise Margin Management
+ </h3>
+ </div>
+ <div class="card-section">
+ <p class="subheader">
+ An insight platform designed to give you a clear visual of what
+ your risks are with the ability to give you actionable prevention
+ plans to address risks identified from your inputs.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</section>
diff --git a/src/Projects/LOL-Member-Services/src/partials/banner.html b/src/Projects/LOL-Member-Services/src/partials/banner.html
index d319ae615496827f44d6acf050e107969216644a..2953e71e31306a161b7c2c6de0409f14b02767e2 100644
--- a/src/Projects/LOL-Member-Services/src/partials/banner.html
+++ b/src/Projects/LOL-Member-Services/src/partials/banner.html
@@ -106,4 +106,34 @@
<button data-slide="3"><span class="show-for-sr">Fourth slide details.</span></button>
</nav>
</div>
+ <div class="grid-container">
+ <div class="grid-x grid-margin-x small-up-1 medium-up-2 large-up-3">
+ <div class="cell">
+ <div class="card half-white-bg" data-equalizer-watch>
+ <div class="card-section">
+ <h3>Leadership Development</h3>
+ <p>Visit our Leader Development website to learn more about our programs
+ and other ways to get engaged with Land O’Lakes.</p>
+ <div class="expanded width-75 margin-x-auto">
+ <a href="#" class="button">SEE PRODUCT OFFERING</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="cell">
+ <div class="callout">
+ <h6>MILK MARKET</h6>
+ <h4 class="lead">XXXXXXXX</h4>
+ <p class="subheader">Find Earth-like planets life outside the Solar System</p>
+ </div>
+ </div>
+ <div class="cell">
+ <div class="callout">
+ <h6>MILK MARKET</h6>
+ <p class="lead">Copernican Revolution caused an uproar</p>
+ <p class="subheader">Find Earth-like planets life outside the Solar System</p>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
\ No newline at end of file
diff --git a/src/Projects/LOL-Member-Services/src/partials/cards.html b/src/Projects/LOL-Member-Services/src/partials/cards.html
index f435835fa27af852f30ae2579f463fe2d43568f7..f55aad5bcf8ff8d8b5ce57e19b82b9fc2e5c892f 100644
--- a/src/Projects/LOL-Member-Services/src/partials/cards.html
+++ b/src/Projects/LOL-Member-Services/src/partials/cards.html
@@ -1,42 +1,50 @@
-
<section class="banner-overlap-cards">
<div class="grid-container text-center">
- <div class="grid-x grid-margin-x small-up-1 medium-up-2 large-up-3 align-center" data-equalizer data-equalize-on="medium" id="test-eq">
+ <div
+ class="grid-x grid-margin-x gutter-60 small-up-1 medium-up-2 large-up-3 align-center"
+ data-equalizer
+ data-equalize-on="medium"
+ id="test-eq"
+ >
<div class="cell">
<div class="card white-bg card-drop-shadow" data-equalizer-watch>
- <div class="card-section" >
- <h6 class="sub-title align-center">MILK INCOME STATUS</h6>
- <h3 class="card-title margin-bottom-0">$XX,XXXXX</h3>
- <h3 class="card-title margin-bottom-0">$XX,XXXXX</h3>
- <p class="margin-bottom-3">Advancement Check for April Check </p>
- <a href="#" class="button expanded">LAUNCH MARKET PLACE</a>
+ <div class="card-section grid-x flex-dir-column flex-wrap">
+ <h6 class="sub-title-sm align-center">MILK INCOME STATUS</h6>
+ <h3 class="card-title margin-bottom-0">$XX,XXXXX</h3>
+ <h3 class="card-title margin-bottom-0">$XX,XXXXX</h3>
+ <p class="margin-bottom-3">Advancement Check for April Check</p>
+ <a href="#" class="button expanded margin-top-auto"
+ >LAUNCH MARKET PLACE</a
+ >
</div>
</div>
</div>
-
+
<div class="cell">
<div class="card white-bg card-drop-shadow" data-equalizer-watch>
- <div class="card-section" >
- <h6 class="sub-title align-center">MARKETPLACE</h6>
+ <div class="card-section grid-x flex-dir-column flex-wrap">
+ <h6 class="sub-title-sm align-center">MARKETPLACE</h6>
<h3 class="card-title margin-bottom-0">$XX,XXX / $XX,XXX</h3>
- <p class="margin-bottom-3">Trending Base (From Previous Mo)</p>
- <a href="#" class="button expanded">LAUNCH MARKET PLACE</a>
+ <p class="margin-bottom-3">Trending Base (From Previous Mo)</p>
+ <a href="#" class="button expanded margin-top-auto"
+ >LAUNCH MARKET PLACE</a
+ >
</div>
</div>
</div>
-
+
<div class="cell">
<div class="card white-bg card-drop-shadow" data-equalizer-watch>
- <div class="card-section" >
- <h6 class="sub-title align-center">COMPANY PERFORMANCE</h6>
+ <div class="card-section grid-x flex-dir-column flex-wrap">
+ <h6 class="sub-title-sm align-center">COMPANY PERFORMANCE</h6>
<h3 class="card-title margin-bottom-0">$XX,XXX</h3>
- <p class="margin-bottom-3">Advancement Check for April</p>
- <a href="#" class="button expanded">LAUNCH MARKET PLACE</a>
+ <p class="margin-bottom-3">Advancement Check for April</p>
+ <a href="#" class="button expanded margin-top-auto"
+ >LAUNCH MARKET PLACE</a
+ >
</div>
</div>
</div>
-
-
</div>
</div>
-</section>
\ No newline at end of file
+</section>
diff --git a/src/Projects/LOL-Member-Services/src/assets/img/media/video.mp4 b/src/Projects/LOL-Member-Services/video.mp4
similarity index 100%
rename from src/Projects/LOL-Member-Services/src/assets/img/media/video.mp4
rename to src/Projects/LOL-Member-Services/video.mp4
diff --git a/src/Projects/LOL-Member-Services/dist.zip b/src/Projects/src.zip
similarity index 85%
rename from src/Projects/LOL-Member-Services/dist.zip
rename to src/Projects/src.zip
index c95dd0ce8b32b0fbcd7aea65fd8be5fb6204cbd4..f6e52546c1476393b4299f66c5276139e65acb56 100644
Binary files a/src/Projects/LOL-Member-Services/dist.zip and b/src/Projects/src.zip differ