D7net
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home
/
dateitor
/
public_html
/
resources
/
assets
/
scss
/
Filename :
blog.scss
back
Copy
//dynamic colors $primary22: var(--primary-color, #b8ff69) !default; $green-100: var(--green-100, #224754) !default; $green: var(--green, #0f2f3a) !default; $black: var(--black, #2d2624) !default; $gray-100: var(--gray-100, #9facb0) !default; $white: var(--white, #ffffff) !default; .vcard-one-main-section { .blog-title { font-size: 28px; font-weight: 600; color: #313BAC; @media (max-width: 575px) { margin-top: 40px !important; } } .img-bx { padding: 20px; box-shadow: -6px -2px 16px rgb(255 255 255 / 80%), 6px 5px 12px rgb(158 158 158 / 40%); border-radius: 10px; img { width: 100%; height: 300px; object-fit: contain; } } .details { p { font-size: 18px; color: #B8B8B8; } } } .vcard-one-bg { background-color: #fff !important; } .vcard-two-bg { background-color: #fff !important; } .vcard-three-bg { background-color: #141E30 !important; } .vcard-four-bg { background-color: #fff !important; } .vcard-five-bg { background: linear-gradient(270deg, #C9F1FF 0%, #DBD9E9 100%) !important; } .vcard-six-bg { background: linear-gradient(270deg, #8C9EFF 100%, #3D5AFE 100%) !important; } .vcard-seven-bg { background: #ECF0F3 !important; } .vcard-eight-bg { background: #00081c !important; } .vcard-nine-bg { background-color: #fff !important; } .vcard-ten-bg { background-color: #2d2833 !important; } .vcard-thirteen-bg { background-color: #f6f6f7 !important; } .vcard-fourteen-bg { background-image: url(../../../public/assets/img/vcard14/bg-img.png); } .vcard-twelve-bg { background-color: #191d23 !important; } .vcard-fifteen-bg { background-color: #f1f1f1 !important; } .vcard-seventeen-bg { background-color: #f3fbff !important; } .vcard-twenty-bg { background-color: #181b20 !important; } .vcard-twentyone-bg{ background-color: #f3fbff !important; } .vcard-twentyfour-bg{ background-color: #ffffff !important; } .vcard-thirtyone-bg{ background-color: #ffffff !important; } .vcard-thirtytwo-bg{ background-color: #878979 !important; } .vcard-thirtyfour-bg{ background-color: #F3F1ED !important; } .vcard-thirtythree-bg{ background-color: #000000 !important; } .vcard-thirtyfive-bg{ background-color:#17151a !important; } .vcard-twentyseven-bg{ background-color: #f6f6f6 !important; } .vcard-twentyfive-bg{ background-color: #f3fbff !important; } .vcard-twentytwo-bg{ background-color: $green !important; } .vcard-twentysix-bg{ background-color:#1f1f21 !important; } .vcard-twentyeight-bg{ background-color:#ffffff !important; } .vcard-thirty-bg{ background-color:#161616 !important; } .vcard-twentynine-bg{ background-color:#25054e !important; } .vcard-twentythree-bg{ background-color: #ffffff !important; } .vcard-sixteen-bg{ background-color: #f1f1f1 !important; } .vcard-eighteen-bg{ background-color: #ffffff !important; } .vcard-one-img-bx { background-color: #fff; } .vcard-two-img-bx { background-color: #fff; } .vcard-three-img-bx { background-color: #dcdcdc; } .vcard-four-img-bx { background-color: #DEEFE3; } .vcard-five-img-bx { background-color: #fff; } .vcard-six-img-bx { background-color: #FE80AB; } .vcard-seven-img-bx { background: #ECF0F3; box-shadow: inset -10px -10px 20px #ffffff, inset 10px 10px 20px #d1d9e6 !important; padding: 20px !important; border-radius: 10px !important; } .vcard-eight-img-bx { background-color: rgba(65, 98, 144, 0.4) !important; box-shadow: 0 0 8px 2px #737373 !important; } .vcard-nine-img-bx { background-color: #fff; } .vcard-ten-img-bx { background-color: #3d3943 !important; box-shadow: 0 0 8px 2px #737373 !important; } .vcard-twelve-img-bx { background-color: #191d23 !important; box-shadow: 0 0 4px 2px #737373 !important; } .vcard-fourteen-img-bx { background-color: #022222; box-shadow: 0 0 8px 2px #022222 !important; } .vcard-seventeen-img-bx { background-color: #f3fbff; } .vcard-sixteen-img-bx { background-color: #fff; } .vcard-twentyone-img-bx { background-color: #ffffff; } .vcard-twentyfour-img-bx { background-color: #ffffff; } .vcard-twentyfive-img-bx { background-color: #ffffff; } .vcard-twentytwo-img-bx { background-color: $green; } .vcard-twentysix-img-bx { background-color: #181b20; } .vcard-twentyeight-img-bx { background-color: #ffffff; } .vcard-thirty-img-bx { background-color: #161616; } .vcard-twentynine-img-bx { background-color: #3b1f60; } .vcard-twentythree-img-bx { background-color: #ffffff; } .vcard-thirtyone-img-bx { background-color: #ffffff; } .vcard-thirtytwo-img-bx { background-color: #51553a !important; } .vcard-thirtyfour-img-bx { background-color: #ded9ce !important; } .vcard-thirtythree-img-bx { background-color: #ffffff; } .vcard-thirtyfive-img-bx { background-color: #ffffff; } .vcard-twentyseven-img-bx { background-color: #f6f6f6 !important; } .vcard-twenty-img-bx { background-color: #181b20; box-shadow: 0 0 6px 2px #9b9fa6 !important; } .vcard-nineteen-img-bx { background-color: #fff; } .vcard-twentyone-img-bx { background-color: #ffffff; } .vcard-twenty-img-bx { background-color: #181b20; box-shadow: 0 0 6px 2px #9b9fa6 !important; } .vcard-thirteen-img-bx { background-color: #fff; } .vcard-fifteen-img-bx { background-color: #fff; } .vcard-one-title { color: #313BAC !important; } .vcard-two-title { color: #3A4151 !important; } .vcard-three-title { color: #fff !important; } .vcard-four-title { color: #134E5E !important; } .vcard-five-title { color: #2D1863 !important; } .vcard-six-title { color: #ffff !important; } .vcard-seven-title { color: #2E4D5C !important; } .vcard-eight-title { color: #fff !important; } .vcard-nine-title { font-weight: 600; font-size: 24px !important; color: #fff !important; background: linear-gradient(90deg, #B24592 0%, #F15F79 100%); border-radius: 0 0 50px 0; width: fit-content; padding: 16px 30px; margin-left: -16px; } .vcard-ten-title { color: #cfd0d1 !important; } .vcard-fourteen-title { color: #ffffff !important; } .vcard-sixteen-title{ color: #1f1f1f !important; } .vcard-twentyone-title{ color: #6554ce !important; } .vcard-twentyfour-title{ color: #072541 !important; } .vcard-twentyfive-title{ color: #ffa31a !important; } .vcard-twentytwo-title{ color: $primary22 !important; } .vcard-twentysix-title{ color: #ffd700 !important; } .vcard-twentyeight-title{ color: #0da7fd !important; } .vcard-thirty-title{ color: #ffc000 !important; } .vcard-twentynine-title{ color: #fa3769 !important; } .vcard-twentythree-title{ color: #f96921 !important; } .vcard-thirtyone-title{ color: #d94b2b !important; } .vcard-thirtytwo-title{ color: #ffffff !important; } .vcard-thirtyfour-title{ color: #060606 !important; } .vcard-thirtythree-title{ background: linear-gradient(275deg, #158fff, #01fcff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .vcard-thirtyfive-title{ color: #c8b0db !important ; } .vcard-twentyseven-title{ color: #ff782c !important; } .vcard-twenty-title{ color: #c9a664 !important; } .vcard-eighteen-title{ color: #49adfe !important; } .vcard-nineteen-title{ color: #753422 !important; } .vcard-twentyone-title{ color: #6554ce !important; } .vcard-twenty-title{ color: #c9a664 !important; } .vcard-twelve-title { color: #ffffff !important; } .vcard-fifteen-title { color: #043636 !important; } .vcard-thirteen-title { color: #1c344f !important; } .vcard-seventeen-title { color: #1c344f !important; } .vcard-one-back { padding: 10px 20px; background: #313BAC; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: white; &:hover { color: white !important; } } .vcard-two-back { padding: 10px 18px; background: #FB5253; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; transform: translateY(0); width: fit-content; color: white; &:hover { color: white !important; } } .vcard-three-back { padding: 10px 20px; background: #4CA1F2; box-shadow: inset 6px 6px 12px #3172b1, inset -6px -6px 12px #51acff; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: white; &:hover { color: white !important; } } .vcard-four-back { padding: 10px 20px; background: linear-gradient(126.11deg, #134E5E 0%, #71B280 100%); border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: white; &:hover { color: white !important; } } .vcard-five-back { padding: 10px 20px; background: #6F34FE; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: white; &:hover { color: white !important; } } .vcard-six-back { padding: 10px 20px; background: white; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: #FE80AB; box-shadow: 0 0 8px 2px #e3e3e3; &:hover { color: #FE80AB !important; } } .vcard-seven-back { padding: 10px 20px; background: #ECF0F3; box-shadow: 10px 10px 30px #d1d9e6, -10px -10px 30px #ffffff !important; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: black; &:hover { color: black !important; } } .vcard-eight-back { padding: 10px 20px; background: #203556; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: white; &:hover { color: white !important; } } .vcard-nine-back { padding: 10px 20px; background: linear-gradient(90deg, #B24592 0%, #F15F79 100%); box-shadow: -6px -2px 16px rgb(255 255 255 / 80%), 6px 5px 20px rgb(158 158 158 / 40%); border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: white; margin-left: 5px; &:hover { color: white !important; } } .vcard-ten-back { padding: 10px 20px; background: #3d3943; box-shadow: 5px 5px 0px #18151b, -5px -5px 0px #3a3541; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: #02daa7; &:hover { color: #02daa7 !important; } } .vcard-thirteen-back { padding: 10px 20px; background: #1b344f; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: #ffffff; &:hover { color: #ffffff !important; } } .vcard-fourteen-back { padding: 10px 20px; background: linear-gradient(to right, #f6a932, #ff5a0e) !important; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: #043636; &:hover { color: #043636 !important; } } .vcard-twelve-back { padding: 10px 20px; background: #80b480; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: #191d23; &:hover { color: #191d23 !important; } } .vcard-fifteen-back { padding: 10px 20px; background: linear-gradient(to right, #d68328, #ffc994, #d68328); border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: #043636; &:hover { color: #043636 !important; } } .vcard-seventeen-back { padding: 10px 20px; background-color: #1c344f; color: white; &:hover { color: white !important; } } .vcard-sixteen-back { padding: 10px 20px; background-color: #1f1f1f; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: #f3fbff; &:hover { color: #f3fbff !important; color: #ffffff; } &:hover { color: #ffffff !important; } } .vcard-twentyone-back { padding: 10px 20px; background-color: #6554ce; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: #f3fbff; &:hover { color: #f3fbff !important; } } .vcard-twentyfour-back{ padding: 10px 20px; background-color: #072541; border: none; outline: none; border-radius: 5px; width: fit-content; color: #ffffff !important; } .vcard-twentyfive-back { padding: 10px 20px; background-color: #ffa31a; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: #f3fbff; &:hover { color: #f3fbff !important; } } .vcard-twentytwo-back { padding: 10px 20px; background-color: $primary22; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color:$black; &:hover { color:$black !important; } } .vcard-twentysix-back { padding: 10px 20px; background-color: #ffd700; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color:#000000; &:hover { color:#000000 !important; } } .vcard-twentyeight-back { padding: 10px 20px; background-color: #0da7fd !important; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color:#ffffff !important; } .vcard-thirty-back { padding: 10px 20px; background-color: #ffc000 !important; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color:gray !important; } .vcard-twentynine-back { padding: 10px 20px; background-color: #fa3769 !important; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color:#ffffff !important; } .vcard-twentyseven-back { padding: 10px 20px; background-color: #ff782c; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: #ffefe7; &:hover { color: #ffefe7 !important; } } .vcard-twentythree-back { padding: 10px 20px; background-color: #f96921; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: #ffefe7; &:hover { color: #ffefe7 !important; } } .vcard-thirtyone-back{ padding: 10px 20px; background-color: #d94b2b; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: #ffffff; &:hover { color: #ffffff !important; } } .vcard-thirtytwo-back{ padding: 10px 20px; background-color: #fbd77a !important; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: #000000; &:hover { color: #ffffff !important; } } .vcard-thirtyfour-back{ padding: 10px 20px; background-color: #060606 !important; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: #ffffff; &:hover { color: #ffffff !important; } } .vcard-thirtythree-back{ padding: 10px 20px; background: linear-gradient(to left, #158fff, #01fcff); border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: #ffffff; &:hover { color: #ffffff !important; } } .vcard-thirtyfive-back{ padding: 10px 20px; background: #c8b0db; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: #17151a ; &:hover { color: #17151a !important; } } .vcard-twenty-back { padding: 10px 20px; background: #c9a664; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: #ffffff; &:hover { color: #ffffff !important; } }.vcard-eighteen-back { padding: 10px 20px; background-color: #49adfe; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: #ffffff; &:hover { color: #ffffff !important; } } .vcard-nineteen-back { padding: 10px 20px; background-color: #753422; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: #ffffff; &:hover { color: #ffffff !important; } } .vcard-twentyone-back { padding: 10px 20px; background-color: #6554ce; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: #f3fbff; &:hover { color: #f3fbff !important; } } .vcard-twenty-back { padding: 10px 20px; background: #c9a664; border: none; outline: none; border-radius: 5px; transition: all 0.3s ease; width: fit-content; color: #ffffff; &:hover { color: #ffffff !important; } } .blog-hover-btn { @media (max-width: 575px) { display: none; } ; } .blog-hover-btn-mobile { display: none; @media (max-width: 575px) { display: inline-block; position: absolute; top: 20px; right: 15px; } ; } .container { @media (max-width: 575px) { padding-right: var(--bs-gutter-x, -0.25rem); padding-left: var(--bs-gutter-x, -0.25rem); } } .dynamic-btn-1 { border-radius: 4px !important; color: $green; background-color: $primary22; border: 1px solid $primary22; height: 40px; &:hover, &:focus, &.active { color: $primary22 !important; background-color: $green; border: 1px solid $primary22; } i { font-size: 1rem; } &:hover { color: $primary22 !important; } } .dynamic-btn-2 { color: $green; background-color: $primary22; border: 1px solid $primary22; height: 40px; padding: 9px 35px !important; border-radius: 0px !important; &:hover, &:focus, &.active { color: $primary22 !important; background-color: $green; border: 1px solid $primary22; } i { font-size: 1rem; } &:hover { color: $primary22 !important; } } .dynamic-btn-3 { border-radius: 20px; box-shadow: transparent 0 0 0 3px, rgba(18, 18, 18, 0.1) 0 6px 20px; padding: 0.5rem 3.2rem; display: inline-block; height: 40px; color: $black !important; background-color: $primary22 !important; } .dynamic-btn-4 { padding: 0.5rem 3.2rem; display: inline-block; height: 40px; color: $green !important; background-color: $primary22 !important; border-radius: 0px !important; &:hover { box-shadow: 0px 0px 12px 4px $white !important; border: none !important; } } .dynamic-btn-5 { box-shadow: transparent 0 0 0 3px, rgba(18, 18, 18, 0.1) 0 6px 20px; padding: 0.5rem 3.2rem; display: inline-block; height: 45px; color: $primary22 !important; border: thick double $primary22 !important; border-radius: 20px !important; background-color: $green !important; } .dynamic-btn-6{ box-shadow: transparent 0 0 0 3px, rgba(18, 18, 18, 0.1) 0 6px 20px; padding: 0.5rem 3.2rem; display: inline-block; height: 40px; border: 4px solid $primary22 !important; border-style: dotted !important; background-color: $green !important; color: $primary22 !important; } .dynamic-btn-7{ box-shadow: transparent 0 0 0 3px, rgba(18, 18, 18, 0.1) 0 6px 20px; padding: 0.5rem 3.2rem; display: inline-block; height: 40px; border: thick double $primary22 !important; color: $primary22 !important; background-color: $green !important; } .dynamic-btn-8{ box-shadow: transparent 0 0 0 3px, rgba(18, 18, 18, 0.1) 0 6px 20px; padding: 0.5rem 3.2rem; display: inline-block; height: 40px; border: 4px solid $primary22 !important; color: $green !important; transition: transform 0.5s ease !important; background-color: $primary22 !important; &:hover { transform: translateY(-5px) !important; } } .dynamic-btn-9 { box-shadow: transparent 0 0 0 3px, rgba(18, 18, 18, 0.1) 0 6px 20px; padding: 0.5rem 3.2rem; display: inline-block; border-radius: 30px 0 30px 0 !important; height: 40px; background-color: $primary22 !important; transition: transform 0.5s ease !important; color: $green !important; border-radius: 30px 0 30px 0 !important; } .dynamic-btn-10{ border: 2px solid $primary22; height: 40px !important; padding: 0.5rem 3.2rem; display: inline-block; -webkit-transition: ease-out 0.5s; -moz-transition: ease-out 0.5s; transition: ease-out 0.5s; color: $primary22 !important; background-color: $green !important; border-radius: 0px !important; &:hover{ box-shadow: inset 400px 0 0 0 $primary22; color: $green !important; } }