관리-도구
편집 파일: new3.php
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .container2 { position: relative; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; } } .container2 img { width: 100%; height: auto; transition: 0.70s; -webkit-transition: 0.70s; -moz-transition: 0.70s; -ms-transition: 0.70s; -o-transition: 0.70s; width: 250px; height: 150px; display: block; margin-right: auto; margin-left: auto; } /* .container2 img:hover { transition: 0.70s; -webkit-transition: 0.70s; -moz-transition: 0.70s; -ms-transition: 0.70s; -o-transition: 0.70s; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } */ .container2 .btn1 { position: absolute; top: 81%; left: 28%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: #feb20d; color: white; font-size: 16px; /* padding: 12px 24px; */ /* border: none; */ height: 150px; cursor: pointer; border-radius: 5px; text-align: center; outline: none; width: 125px; height: 125px; border-radius: 50%; } .container2 .btn1:hover { background-color: white; color: black; outline: none; } .container2 .btn11 { position: absolute; top: 40%; left: 14%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: #feb20d; color: white; font-size: 16px; /* padding: 12px 24px; */ /* border: none; */ height: 150px; cursor: pointer; border-radius: 5px; text-align: center; outline: none; width: 125px; height: 125px; border-radius: 50%; } .container2 .btn11:hover { background-color: white; color: black; outline: none; } .container2 .btn12 { position: absolute; top: 17%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: #feb20d; color: white; font-size: 16px; /* padding: 12px 24px; */ /* border: none; */ height: 150px; cursor: pointer; border-radius: 5px; text-align: center; outline: none; width: 125px; height: 125px; border-radius: 50%; } .container2 .btn12:hover { background-color: white; color: black; outline: none; } .container2 .btn13 { position: absolute; top: 40%; left: 84%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: #feb20d; color: white; font-size: 16px; /* padding: 12px 24px; */ /* border: none; */ height: 150px; cursor: pointer; border-radius: 5px; text-align: center; outline: none; width: 125px; height: 125px; border-radius: 50%; } .container2 .btn13:hover { outline: none; background-color: white; color: black; } .container2 .btn14 { position: absolute; top: 81%; left: 72%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: #feb20d; color: white; font-size: 16px; /* padding: 12px 24px; */ /* border: none; */ height: 150px; cursor: pointer; border-radius: 5px; text-align: center; outline: none; width: 125px; height: 125px; border-radius: 50%; } .container2 .btn14:hover { outline: none; background-color: white; color: black; } .container2 .btn15 { position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: white; color: black; font-size: 16px; /* padding: 12px 24px; */ /* border: none; */ height: 150px; cursor: pointer; border-radius: 5px; text-align: center; outline: none; width: 125px; height: 125px; border-radius: 50%; } .container2 .btn15:hover { outline: none; background-color: black; color:white; } .container1 { position: relative; width: 100%; max-width: 420px; margin-left: auto; margin-right: auto; } } .container1 img { width: 100%; height: auto; transition: 0.70s; -webkit-transition: 0.70s; -moz-transition: 0.70s; -ms-transition: 0.70s; -o-transition: 0.70s; width: 250px; height: 150px; display: block; margin-right: auto; margin-left: auto; } /* .container1 img:hover { transition: 0.70s; -webkit-transition: 0.70s; -moz-transition: 0.70s; -ms-transition: 0.70s; -o-transition: 0.70s; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } */ .container1 .btn1 { position: absolute; top: 81%; left: 28%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: #feb20d; color: white; font-size: 16px; /* padding: 12px 24px; */ /* border: none; */ height: 150px; cursor: pointer; border-radius: 5px; text-align: center; outline: none; width: 125px; height: 125px; border-radius: 50%; } .container1 .btn1:hover { background-color: white; color: black; outline: none; } .container1 .btn11 { position: absolute; top: 40%; left: 14%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: #feb20d; color: white; font-size: 16px; /* padding: 12px 24px; */ /* border: none; */ height: 150px; cursor: pointer; border-radius: 5px; text-align: center; outline: none; width: 125px; height: 125px; border-radius: 50%; } .container1 .btn11:hover { background-color: white; color: black; outline: none; } .container1 .btn12 { position: absolute; top: 17%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: #feb20d; color: white; font-size: 16px; /* padding: 12px 24px; */ /* border: none; */ height: 150px; cursor: pointer; border-radius: 5px; text-align: center; outline: none; width: 125px; height: 125px; border-radius: 50%; } .container1 .btn12:hover { background-color: white; color: black; outline: none; } .container1 .btn13 { position: absolute; top: 40%; left: 84%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: #feb20d; color: white; font-size: 16px; /* padding: 12px 24px; */ /* border: none; */ height: 150px; cursor: pointer; border-radius: 5px; text-align: center; outline: none; width: 125px; height: 125px; border-radius: 50%; } .container1 .btn13:hover { outline: none; background-color: white; color: black; } .container1 .btn14 { position: absolute; top: 81%; left: 72%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: #feb20d; color: white; font-size: 16px; /* padding: 12px 24px; */ /* border: none; */ height: 150px; cursor: pointer; border-radius: 5px; text-align: center; outline: none; width: 125px; height: 125px; border-radius: 50%; } .container1 .btn14:hover { outline: none; background-color: white; color: black; } .container1 .btn15 { position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: white; color: black; font-size: 16px; /* padding: 12px 24px; */ /* border: none; */ height: 150px; cursor: pointer; border-radius: 5px; text-align: center; outline: none; width: 125px; height: 125px; border-radius: 50%; } .container1 .btn15:hover { outline: none; background-color: black; color:white; } </style> </head> <body> <div class="col-md-3" id="st" > <div class="card-features"style="height:230px; display:none" > <h3 class="bold">Step 1 </h3> <p class="light thin">We help our customer to selects product, fabric and fixtures of their choice from our wide range of collections. </p> </div> </div> <style> .container2 {display: none;} /* Smartphone Portrait and Landscape */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px){ .container2 {display: block;} .container1 {display: none;} } </style> <div class="container2" > <img src="assets/images/demo.png" alt="Snow" style="width:100%"> <button class="btn12" id="demo1" onmouseover="myFunction1();" onmouseout="normal()" onclick="myFunction11()" > <img src="assets/images/select.png" width="40px" height="40px" alt="Image"></button> <button class="btn13" id="demo2" onmouseover="myFunction2();" onmouseout="normal()" onclick="myFunction21()" ><img src="assets/images/tape-measure.png" width="40px" height="40px" alt="Image"></button> <button class="btn14" id="demo3" onmouseover="myFunction3();" onmouseout="normal()" onclick="myFunction31()" ><img src="assets/images/hand-shake.png" width="40px" height="40px" alt="Image"></button> <button class="btn1" id="demo4" onmouseover="myFunction4();" onmouseout="normal()" onclick="myFunction41()" ><img src="assets/images/curtain.png" width="40px" height="40px" alt="Image"></button> <button class="btn11" id="demo" onmouseover="myFunction5(); " onmouseout="normal()" onclick="myFunction51()" ><img src="assets/images/feedback.png" width="40px" height="40px" alt="Image"></button> <button class="btn15" id="demo5" >Our Project Management Methodology</button> </div> <div class="container1"> <img src="assets/images/demo.png" alt="Snow" style="width:100%"> <button class="btn12" id="demo1" onmouseover="myFunction1();" onmouseout="normal()" onclick="myFunction1()" > <img src="assets/images/select.png" width="40px" height="40px" alt="Image"></button> <button class="btn13" id="demo2" onmouseover="myFunction2();" onmouseout="normal()" onclick="myFunction2()" ><img src="assets/images/tape-measure.png" width="40px" height="40px" alt="Image"></button> <button class="btn14" id="demo3" onmouseover="myFunction3();" onmouseout="normal()" onclick="myFunction3()" ><img src="assets/images/hand-shake.png" width="40px" height="40px" alt="Image"></button> <button class="btn1" id="demo4" onmouseover="myFunction4();" onmouseout="normal()" onclick="myFunction4()" ><img src="assets/images/curtain.png" width="40px" height="40px" alt="Image"></button> <button class="btn11" id="demo" onmouseover="myFunction5(); " onmouseout="normal()" onclick="myFunction5()" ><img src="assets/images/feedback.png" width="40px" height="40px" alt="Image"></button> <button class="btn15" id="demo5" >Our Project Management Methodology</button> </div> <div class="col-md-3" id="st" > <div class="card-features"style="height:230px; display:none" id="st1" > <h3 class="bold">Step 1 </h3> <p class="light thin">We help our customer to selects product, fabric and fixtures of their choice from our wide range of collections. </p> </div> <div class="card-features" style="height:230px; display:none" id="st9" > <h3 class="bold">Step 2 </h3> <p class="light thin">We go and take site measurements at customers convenience and share the best quote for their requirements. </p> </div> <div class="card-features" style="height:230px; display:none" id="st3"> <h3 class="bold">Step 3 </h3> <p class="light thin"> We offer Payment Gateway, UPI, NEFT, POS options for customer, to make the payment and confirm the order. </p> </div> <div class="card-features" style="height:230px; display:none" id="st4" > <h3 class="bold">Step 4 </h3> <p class="light thin">Our experts make the product, check quality and fix it at customer site with outmost care and perfection.</p> </div> <div class="card-features" style="height:230px; display:none" id="st5"> <h3 class="bold">Step 5 </h3> <p class="light thin">We value every feedback. We request customer to share their experience with us and focus on continual improvements. </p> </div> </div> <script> function myFunction1() { document.getElementById('st1').style.display="block"; //$('html, body').animate({ scrollTop: $('#st1').offset().top -200 }, 'slow'); document.getElementById('st9').style.display="none"; document.getElementById('st3').style.display="none"; document.getElementById('st4').style.display="none"; document.getElementById('st5').style.display="none"; } function normal() { document.getElementById('st1').style.display="none"; document.getElementById('st9').style.display="none"; document.getElementById('st3').style.display="none"; document.getElementById('st4').style.display="none"; document.getElementById('st5').style.display="none"; } function myFunction2() { document.getElementById('st1').style.display="none"; document.getElementById('st9').style.display="block"; //$('html, body').animate({ scrollTop: $('#st2').offset().top -200 }, 'slow'); document.getElementById('st3').style.display="none"; document.getElementById('st4').style.display="none"; document.getElementById('st5').style.display="none"; } function myFunction3() { document.getElementById('st1').style.display="none"; document.getElementById('st9').style.display="none"; document.getElementById('st3').style.display="block"; //$('html, body').animate({ scrollTop: $('#st3').offset().top -200 }, 'slow'); document.getElementById('st4').style.display="none"; document.getElementById('st5').style.display="none"; } function myFunction4() { document.getElementById('st1').style.display="none"; document.getElementById('st9').style.display="none"; document.getElementById('st3').style.display="none"; document.getElementById('st4').style.display="block"; //$('html, body').animate({ scrollTop: $('#st4').offset().top -200 }, 'slow'); document.getElementById('st5').style.display="none"; } function myFunction5() { document.getElementById('st1').style.display="none"; document.getElementById('st9').style.display="none"; document.getElementById('st3').style.display="none"; document.getElementById('st4').style.display="none"; document.getElementById('st5').style.display="block"; //$('html, body').animate({ scrollTop: $('#st5').offset().top -200 }, 'slow'); } function myFunction11() { document.getElementById('st1').style.display="block"; $('html, body').animate({ scrollTop: $('#st1').offset().top -200 }, 'slow'); document.getElementById('st9').style.display="none"; document.getElementById('st3').style.display="none"; document.getElementById('st4').style.display="none"; document.getElementById('st5').style.display="none"; } function myFunction21() { document.getElementById('st1').style.display="none"; document.getElementById('st9').style.display="block"; $('html, body').animate({ scrollTop: $('#st9').offset().top -200 }, 'slow'); document.getElementById('st3').style.display="none"; document.getElementById('st4').style.display="none"; document.getElementById('st5').style.display="none"; } function myFunction31() { document.getElementById('st1').style.display="none"; document.getElementById('st9').style.display="none"; document.getElementById('st3').style.display="block"; $('html, body').animate({ scrollTop: $('#st3').offset().top -200 }, 'slow'); document.getElementById('st4').style.display="none"; document.getElementById('st5').style.display="none"; } function myFunction41() { document.getElementById('st1').style.display="none"; document.getElementById('st9').style.display="none"; document.getElementById('st3').style.display="none"; document.getElementById('st4').style.display="block"; $('html, body').animate({ scrollTop: $('#st4').offset().top -200 }, 'slow'); document.getElementById('st5').style.display="none"; } function myFunction51() { document.getElementById('st1').style.display="none"; document.getElementById('st9').style.display="none"; document.getElementById('st3').style.display="none"; document.getElementById('st4').style.display="none"; document.getElementById('st5').style.display="block"; $('html, body').animate({ scrollTop: $('#st5').offset().top -200 }, 'slow'); } </script> </body> </html>