Expanding Flex Cards Blogger Widgets

M.Muzammil

27 Apr, 2020

body {
   font-family: "Roboto", sans-serif;
   padding-top:90px;
}
.heading {
   text-align: center;
   font-size: 3em;
   line-height: 0.1em;
}
.tagline a.mark {
   padding: 2px 5px;
   color: #fff;
   background: #5d9cec;
   text-decoration: none;
   border-radius: 5px;
}
.expanding-flex-cards .options {
   -webkit-box-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   align-items: center;
   overflow: hidden;
   display: -webkit-box;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   flex-direction: row;
   -webkit-box-align: stretch;
   align-items: stretch;
   overflow: hidden;
   min-width: 600px;
   max-width: 1200;
   width: calc(100%);
   height: 400px;
}
@media screen and (max-width: 718px) {
   .expanding-flex-cards .options {
      min-width: 520px;
   }
   .expanding-flex-cards .options .option:nth-child(5) {
      display: none;
   }
}
@media screen and (max-width: 638px) {
   .expanding-flex-cards .options {
      min-width: 440px;
   }
   .expanding-flex-cards .options .option:nth-child(4) {
      display: none;
   }
}
@media screen and (max-width: 558px) {
   .expanding-flex-cards .options {
      min-width: 360px;
   }
   .expanding-flex-cards .options .option:nth-child(3) {
      display: none;
   }
}
@media screen and (max-width: 478px) {
   .expanding-flex-cards .options {
      min-width: 280px;
   }
   .expanding-flex-cards .options .option:nth-child(2) {
      display: none;
   }
}
.expanding-flex-cards .options .option {
   position: relative;
   overflow: hidden;
   min-width: 60px;
   margin: 10px;
   background: var(--optionBackground, var(--defaultBackground, #e6e9ed));
   background-size: cover;
   background-position: center;
   cursor: pointer;
   -webkit-transition: 0.5s ease-in-out;
   transition: 0.5s ease-in-out;
}
.expanding-flex-cards .options .option:nth-child(1) {
   --defaultBackground: #ed5565;
}
.expanding-flex-cards .options .option:nth-child(2) {
   --defaultBackground: #fc6e51;
}
.expanding-flex-cards .options .option:nth-child(3) {
   --defaultBackground: #ffce54;
}
.expanding-flex-cards .options .option:nth-child(4) {
   --defaultBackground: #2ecc71;
}
.expanding-flex-cards .options .option:nth-child(5) {
   --defaultBackground: #5d9cec;
}
.expanding-flex-cards .options .option:nth-child(6) {
   --defaultBackground: #ac92ec;
}
.expanding-flex-cards .options .option.active {
   -webkit-box-flex: 10000;
   flex-grow: 10000;
   -webkit-transform: scale(1);
   transform: scale(1);
   max-width: 100%;
   margin: 0px;
   border-radius: 40px;
   background-size: cover;
}
.expanding-flex-cards .options .option.active .shadow {
   box-shadow: inset 30px -120px 120px -120px rgba(0, 0, 0, 1),
      inset 30px -120px 120px -120px rgba(0, 0, 0, 1);
}
.expanding-flex-cards .options .option.active .label {
   bottom: 20px;
   left: 20px;
}
.expanding-flex-cards .options .option.active .label .info > div {
   left: 0px;
   opacity: 1;
}
.expanding-flex-cards .options .option:not(.active) {
   -webkit-box-flex: 1;
   flex-grow: 1;
   border-radius: 30px;
}
.expanding-flex-cards .options .option:not(.active) .shadow {
   bottom: -40px;
   box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
}
.expanding-flex-cards .options .option:not(.active) .label {
   bottom: 10px;
   left: 10px;
}
.expanding-flex-cards .options .option:not(.active) .label .info > div {
   left: 20px;
   opacity: 0;
}
.expanding-flex-cards .options .option .shadow {
   position: absolute;
   bottom: 0px;
   left: 0px;
   right: 0px;
   height: 500px;
   -webkit-transition: 0.5s ease-in-out;
   transition: 0.5s ease-in-out;
}
.expanding-flex-cards .options .option .label {
   display: -webkit-box;
   display: flex;
   position: absolute;
   right: 0px;
   height: 40px;
   -webkit-transition: 0.5s ease-in-out;
   transition: 0.5s ease-in-out;
}
.expanding-flex-cards .options .option .label .icon {
   display: -webkit-box;
   display: flex;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   flex-direction: row;
   -webkit-box-pack: center;
   justify-content: center;
   -webkit-box-align: center;
   align-items: center;
   min-width: 40px;
   max-width: 40px;
   height: 40px;
   border-radius: 100%;
   background-color: white;
   color: var(--defaultBackground);
}
.expanding-flex-cards .options .option .label .info {
   display: -webkit-box;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   flex-direction: column;
   -webkit-box-pack: center;
   justify-content: center;
   margin-left: 10px;
   color: white;
   white-space: pre;
   text-transform: capitalize;
}
.expanding-flex-cards .options .option .label .info > div {
   position: relative;
   -webkit-transition: 0.5s ease-in-out, opacity 0.5s ease-out;
   transition: 0.5s ease-in-out, opacity 0.5s ease-out;
}
.expanding-flex-cards .options .option .label .info .main {
   font-weight: bold;
   font-size: 1.2rem;
}
.expanding-flex-cards .options .option .label .info .sub {
   -webkit-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.widget-loader {
   height: 0;
   width: 0;
   padding: 15px;
   border: 6px solid #000;
   margin: 10px auto;
   border-right-color: #fff;
   border-radius: 22px;
   -webkit-animation: rotate 1s infinite linear;
   position: absolute;
   left: 50%;
   top: 50%;
}
@keyframes rotate {
   0% {
      -webkit-transform: rotate(0);
      -moz-transform: rotate(0);
      -ms-transform: rotate(0);
      -o-transform: rotate(0);
      transform: rotate(0);
   }
   100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}

M.Muzammil

I am Muzammil, a Self-taught Web Designer & Developer. I haven't yet completed my college degree. Started learning programming at the age of 12 and still learning. I love to work in Javascript and make eye-catchy designs. Free for your calls :)

Expanding Flex Cards Blogger Widgets

M.Muzammil

Popular Posts

Categories

Hashtag

Blog Archive

M.Muzammil

Popular Posts

Responsive Cookie Bar

Password Strength Meter

Floating Draggable Menu Like Messenger

Stylish hero footer section

Beautiful Toast Notifications

Categories

Hashtag

Blog Archive