حاسبة وحدة حرارية بريطانية
<style> .manufacture-info { max-width: 1350px; width: 100%; margin: auto auto; display: block; background-color: #ffffff; font-size: 14px; position: relative; } .manufacture-info .full-block { width: 100%; margin: auto auto; text-align: center; } .manufacture-info .full-block img { max-width: 100%; margin-top: 20px; } .manufacture-info .half-block { display: inline-block; } .manufacture-info .half-block-left { margin-left: 1%; display: inline-block; } .manufacture-info .half-block-right { margin-right: 1%; float: right; display: inline-block; } .manufacture-info .box70 { width: 55%; } .manufacture-info .box30 { width: 38%; margin-right: 3% !important; } .manufacture-info .box50 { width: 45%; margin-right: 3% !important; } .manufacture-info .box33 { width: 30%; float: left; margin-left: 3% !important; margin-bottom: 40px; } .manufacture-info .box33 img { max-width: 80%; margin-bottom: 10px; } .manufacture-info .box33 h1 { font-size: 18px !important; line-height: 25px; } .manufacture-info .box33 ul { list-style: none; } .manufacture-info .box33 ul li { list-style: disc; margin-bottom: 10px; } .manufacture-info .half-block-left img, .manufacture-info .half-block-left img { max-width: 100%; } .padding { padding: 0px 0 40px 0; } .padding-top { padding: 40px 0 0 0; } .padding-bottom { padding: 0 0 40px 0; } .margin3 { margin-left: 3% !important; } .manufacture-info h1, .manufacture-info h1.medium { font-size: 15px; } .manufacture-info p { font-size: 14px; margin: 12px 0; } .manufacture-info p a, .manufacture-info p a:link { color: #a50034; text-decoration: underline; font-size: 15px; } a.nodec { font-size: 1.8rem; text-decoration: none !important; } .manufacture-info .center { text-align: center; } .manufacture-info .left { text-align: left; } .manufacture-info .right { text-align: right; } .manufacture-info h1.big { font-size: 22px; color: #a50034; margin-top: 0px; margin-bottom: 5px; } .manufacture-info h1.caps { text-transform: uppercase; font-size: 24px; margin-bottom: 30px; } .manufacture-info h1.small { font-size: 1.1rem; } .manufacture-info p.big { font-size: 22px; } .manufacture-info p.medium { font-size: 15px; } .manufacture-info p.small { font-size: 14px; color: #666; margin: 0px 0; } .manufacture-info h1.black { color: rgb(66, 66, 66); line-height: 26px; margin-bottom: 10px; } .brdr { border: 1px solid #e1e1e0; margin-top: 10px; padding-top: 20px; } @media screen and (max-device-width: 768px) { .manufacture-info .full-block { width: 97%; } .manufacture-info .half-block-left, .manufacture-info .half-block-right { width: 90% !important; float: none; display: block; text-align: left; margin: auto auto; } } .bosch-overlay { display: none; background-color: rgb(0, 0, 0, 0); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; } .bosch--main { background-color: #fff; border: 1px solid #e1e1e0; padding: 20px 20px; } .bosch--main-banner { max-width: 100%; } .brand-top--logo { background-color: #f2f2f2; padding: 15px 22px; border: 1px solid #e1e1e0; display: none; position: relative; } .brand-top--logo ul { list-style: none; margin: 0; padding: 0; } .brand-top--logo ul li { list-style: none; float: left; margin-right: 20px; line-height: 30px; } .brand-top--logo ul li a { color: #a50034; text-decoration: none; font-weight: bold; font-size: 14px; } .brand-top--logo img { float: right; max-height: 30px; } .bosch--header-text { margin-right: 270px; margin-left: 0px; padding-top: 0px; } .bosch--header-text a, .bosch--header-text a:link { color: #003c69; text-decoration: none; font-weight: 600; } .bosch--header-text h1 { font-size: 22px; font-weight: 600; margin-bottom: 10px; color: #313441; line-height: 25px; } .bosch--header { background-image: url(images/lg-landing-banner.jpg?w=1000); background-repeat: no-repeat; background-size: cover; border-radius: 15px; padding-bottom: 10px; background-position: right; } .bosch--categories a { color: #3a3a3a; font-size: 13px; font-weight: 600; } .bosch--categories { width: 50%; float: left; margin-top: 10px; } .bosch--categories-contents h2 { font-size: 20px; } .bosch--odd { margin-right: 5px; } .bosch--even { margin-left: 5px; } .bosch--categories-text { padding: 30px; width: 55%; float: left; font-size: 17px; } .bosch--categories-text p { font-size: 16px; } .bosch--categories-grid { background-color: #f2f2f2; background-repeat: no-repeat; background-position-x: right; background-position-y: bottom; min-height: 415px; } .bosch--categories-grid.dishwasher { background-image: url(https://redsea.com/media/wysiwyg/campaigns/brand-pages/dishwasher-bg.png); } .bosch--categories-grid.laundry { background-image: url(https://redsea.com/media/wysiwyg/campaigns/brand-pages/laundry-bg.png?3231); } .bosch--categories-grid.refrigeration { background-image: url(https://redsea.com/media/wysiwyg/campaigns/brand-pages/ref-bg.png); } .bosch--categories-grid.cooking { background-image: url(https://redsea.com/media/wysiwyg/campaigns/brand-pages/cooking-bg.png); } .bosch--categories-grid.cleaning { background-image: url(https://redsea.com/media/wysiwyg/campaigns/brand-pages/cleaning-bg.png); } .bosch--categories-grid.small-appliances { background-image: url(https://redsea.com/media/wysiwyg/campaigns/brand-pages/small-appliances-bg.png); } button.slick-prev.slick-arrow:after, button.slick-next.slick-arrow:after { content: ""; font-style: normal !important; font-weight: normal !important; font-variant: normal !important; text-transform: none !important; speak: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 15px; color: #000; } button.slick-prev.slick-arrow, button.slick-next.slick-arrow { display: inline-block; font-size: 0; border: 0; padding: 0; margin: 0; position: absolute; left: 10px; z-index: 2; background: transparent; margin-top: -5px; top: 50%; } button.slick-prev.slick-arrow { left: 10px; transform: rotate(180deg); } button.slick-next.slick-arrow { right: 10px; left: auto; } .slick-slide img { width: 100%; } .read-more, .read-more:hover { display: inline-block; margin: 15px 0; background: #a50034; color: #ffffff !important; font-weight: 700; border-radius: 0px; padding: 10px 15px; text-decoration: none !important; } .shop-now, .shop-now:hover { display: inline-block; margin: 15px 0; background: #a50034; color: #ffffff !important; font-weight: 700; border-radius: 5px; padding: 10px 15px; text-decoration: none !important; } .right-arrow { border: solid #fff; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .round-arrow { width: 20px; height: 20px; margin-left: 5px; background-color: #a50034; border-radius: 50%; display: inline-block; vertical-align: bottom; position: relative; } .round-arrow .right-arrow { border: solid #fff; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); position: absolute; left: 4px; top: 5px; } .bottom-box { padding: 3% 2%; margin: 3%; border-radius: 10px; text-align: center; box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.1), 0 0px 20px 0 rgba(0, 0, 0, 0.1) !important; } .bottom-box img { margin-bottom: 8px; max-width: 400px; display: initial; } .bosch-toggle-menu { display: none; } @media screen and (max-width: 1024px) { .bosch--header-text { margin-left: 405px; } } @media screen and (max-width: 991px) { .bosch--header-text { margin-left: 260px; } .bosch--header { background-position-x: -160px; } .bosch--header-text p:nth-child(2) { display: none; } .bosch--categories-grid { background-position: right -70px bottom 0; } .bosch--categories-text { width: 70%; } .bosch--main { padding: 0px; } .bosch--categories { margin-top: 2px; } .bosch--even { margin-left: 1px; } .bosch--odd { margin-right: 1px; } } @media screen and (max-width: 768px) { .redbox-carousel-slides .slick-list { padding: 0px !important; padding-top: 0px !important; } .bosch--categories-text { width: 100%; padding: 10px; } .bosch--categories-contents { padding: 20px; } .bosch--categories-text { padding: 20px; background-color: rgba(255, 255, 255, 0.85); min-height: 383px; } .bosch--categories-contents h2 { margin-top: 10px; } .bosch--header-text { margin-left: 150px; padding-bottom: 80px; } .bosch--header { background-size: cover; border-radius: 0; } .bosch--header-text { margin-left: 200px; } .bosch--header-text h1 { font-size: 24px; line-height: 32px; font-weight: normal; margin-bottom: 1.6rem; color: #a50034; } .brdr { margin-top: 0px; } .manufacture-info h1.caps { text-align: left; margin-left: 7%; margin-top: 20px; margin-bottom: 30px; } .padding { padding: 5px 0 5px 0; } .margin3 { margin: auto auto !important; } .bottom-box { padding: 7% 2%; } .manufacture-info h1.big { font-size: 24px; line-height: 30px; } .manufacture-info .box33 { width: 90% !important; margin: 0 2% 0 7% !important; } .manufacture-info .box33 h1, .manufacture-info .box50 h1 { font-size: 20px !important; } .manufacture-info .box50 img { padding-right: 4%; } .brand-top--logo ul { display: none; position: absolute; top: 34px; left: 12px; padding: 10px; background-color: #fff; box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.1), 0 0px 20px 0 rgba(0, 0, 0, 0.8) !important; border-radius: 0 8px 8px 8px; z-index: 11; } .brand-top--logo ul li { list-style: none; float: none; margin-right: 20px; line-height: 30px; border-bottom: dotted 1px #ccc; } .bosch-toggle-menu { left: 10px; top: 4px; max-width: 26px; position: absolute; display: block; } } @media screen and (max-width: 530px) { .bosch--categories { width: 100%; } } @media screen and (max-width: 480px) { .bosch--header-text { margin: 0; padding: 20px; background-color: rgba(255, 255, 255, 0.85); } .bosch--header { padding: 20px; } } .MuiInputBase-input { font: inherit; color: currentColor; width: 220px; border: 0; height: 1.1876em; margin: 0 0 14px; display: block; padding: 10px 10px; min-width: 0; background: none; box-sizing: content-box; animation-name: mui-auto-fill-cancel; letter-spacing: inherit; -webkit-tap-highlight-color: transparent; background-color: #f2f4f8; border-radius: 4px; outline: none; } .MuiInputBase-input:invalid { box-shadow: none; } .result-block{ display: none; } </style> <div class="manufacture-info"> <div class="bosch--main-banner"> <img src="https://cdn.shopify.com/s/files/1/0413/1202/6777/files/banner-AR.jpg?v=1697357287" /> </div> <div id="bosch-overlay" class="bosch-overlay"></div> <div class="brdr"> <div class="half-block calculator-block"> <div class="half-block-left right box30 padding margin3"> <h1 class="big">أبعاد</h1> <p class="small"> <div id="calculator-form"> <div style="margin: 10px 0 14px; color: #666;"><input type="radio" id="html" name="radio_dimensions" value="meter" checked> متر <input type="radio" id="css" name="radio_dimensions" value="inch"> بوصة</div> <input type="number" class="MuiInputBase-input" id="len" min="1" placeholder="طول الغرفة " required> <input type="number" class="MuiInputBase-input" id="wid" min="1" placeholder="عرض الغرفة " required> <input type="number" class="MuiInputBase-input" id="hei" min="1" placeholder="ارتفاع السقف" required> <input type="number" class="MuiInputBase-input" id="people" min="1" placeholder="عدد الأشخاص" required> <p style="font-size:12px; color:#666;"><b>شروط الاستخدام:</b> النتائج هو قيمة تقريبية بناءً على متوسط مقاسات الغرفة</p> <button type="submit" class="btn btn--primary btn-calc">احسب</button> </div> </p> </div> <div class="half-block-right center box70 padding-bottom"><img src="https://cdn.shopify.com/s/files/1/0413/1202/6777/files/banner2-AR.jpg?v=1697358333" alt=""></div> </div> <div class="full-block result-block"> <h1 class="big" id="btu-label">أنت بحاجة إلى مكيف بقوة <span id="btu-number"></span> وحدة حرارية</h1> <p style="padding-bottom:35px;"> <button type="submit" class="btn explore-prod">اكتشف المنتجات</button> <button type="submit" class="btn re-calc">إعادة الحساب </button> </p> </div> </div> </div>