{"html":"

\n \n

Demo 1

\n It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.\n

\n \n

","css":".section_our_solution .row {\n align-items: center;\n}\n\n.our_solution_category {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n}\n\n.our_solution_category .solution_cards_box {\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n\n.solution_cards_box .solution_card {\n flex: 0 50%;\n background: #fff;\n box-shadow: 0 2px 4px 0 rgba(136, 144, 195, 0.2),\n 0 5px 15px 0 rgba(37, 44, 97, 0.15);\n border-radius: 15px;\n margin: 8px;\n padding: 10px 15px;\n position: relative;\n z-index: 1;\n overflow: hidden;\n min-height: 265px;\n transition: 0.7s;\n}\n\n.solution_cards_box .solution_card:hover {\n background: #309df0;\n color: #fff;\n transform: scale(1.1);\n z-index: 9;\n}\n\n.solution_cards_box .solution_card:hover::before {\n background: rgb(85 108 214 / 10%);\n}\n\n.solution_cards_box .solution_card:hover .solu_title h3,\n.solution_cards_box .solution_card:hover .solu_description p {\n color: #fff;\n}\n\n.solution_cards_box .solution_card:before {\n content: \"\";\n position: absolute;\n background: rgb(85 108 214 / 5%);\n width: 170px;\n height: 400px;\n z-index: -1;\n transform: rotate(42deg);\n right: -56px;\n top: -23px;\n border-radius: 35px;\n}\n\n.solution_cards_box .solution_card:hover .solu_description button {\n background: #fff !important;\n color: #309df0;\n}\n\n.solution_card .so_top_icon {\n}\n\n.solution_card .solu_title div {\n color: #212121;\n font-size: 1.3rem;\n margin-top: 13px;\n margin-bottom: 13px;\n}\n\n.solution_card .solu_description p {\n font-size: 15px;\n margin-bottom: 15px;\n}\n\n.solution_card .solu_description button {\n border: 0;\n border-radius: 15px;\n background: linear-gradient(\n 140deg,\n #42c3ca 0%,\n #42c3ca 50%,\n #42c3cac7 75%\n ) !important;\n color: #fff;\n font-weight: 500;\n font-size: 1rem;\n padding: 5px 16px;\n}\n\n.our_solution_content div {\n text-transform: capitalize;\n margin-bottom: 1rem;\n font-size: 2.5rem;\n}\n\n.our_solution_content p {\n}\n\n.hover_color_bubble {\n position: absolute;\n background: rgb(54 81 207 / 15%);\n width: 100rem;\n height: 100rem;\n left: 0;\n right: 0;\n z-index: -1;\n top: 16rem;\n border-radius: 50%;\n transform: rotate(-36deg);\n left: -18rem;\n transition: 0.7s;\n}\n\n.solution_cards_box .solution_card:hover .hover_color_bubble {\n top: 0rem;\n}\n\n.solution_cards_box .solution_card .so_top_icon {\n width: 60px;\n height: 60px;\n border-radius: 50%;\n background: #fff;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.solution_cards_box .solution_card .so_top_icon img {\n width: 40px;\n height: 50px;\n object-fit: contain;\n}\n\n/*start media query*/\n@media screen and (min-width: 320px) {\n .sol_card_top_3 {\n position: relative;\n top: 0;\n }\n\n .our_solution_category {\n width: 100%;\n margin: 0 auto;\n }\n\n .our_solution_category .solution_cards_box {\n flex: auto;\n }\n}\n\n@media only screen and (min-width: 768px) {\n .our_solution_category .solution_cards_box {\n flex: 1;\n }\n}\n\n@media only screen and (min-width: 1024px) {\n .sol_card_top_3 {\n position: relative;\n top: -3rem;\n }\n\n .our_solution_category {\n width: 80%;\n margin: 0 auto;\n }\n}"}

little-catfish-39

👁 实时预览

📝 源代码