ok
Direktori : /home2/selectio/public_html/wedding-info/ |
Current File : //home2/selectio/public_html/wedding-info/category.php |
<?php include 'header.php';?> <style> a, a:visited{ color: #fff; } .as-btn{ background-color: #ff0000; } .couple-img-container{ height: 550px; } .couple-img-container:after{ box-shadow: inset 0 0 0 16px rgb(209 148 65), 0 1px 2px rgb(0 0 0 / 19%); border-radius: 10px; } @media (min-width: 1200px){ .venkat{ width: 390px; margin-left: 0px; margin-top: 16px; border: 10px solid #d19441; background: #945900; } } @media (max-width: 480px){ .venkat{ width: 78%; margin-left: 11%; margin-top: 30%; } } @media (min-width: 1200px){ .venkat1{ width: 57%; margin-left: 4%; margin-top: 23%; } } @media (max-width: 480px){ .venkat1{ width: 35%; margin-left: 29%; margin-top: 77%; } } @media (min-width: 1200px){ .venkat2{ margin-left: 56%; margin-top: 169%; } } @media (max-width: 480px){ .venkat2{ width: 35%; margin-left: 95%; margin-top: 129%; } } @media (min-width: 1200px){ .venkat3{ width: 50%; margin-left: 500%; margin-top: 163%; } } @media (max-width: 480px){ .venkat3{ width: 50%; margin-left: 100%; margin-top: 42%; } } @media (min-width: 1200px){ .venkat4{ width: 50%; margin-left: 365%; margin-top: 380%; transform: rotate(170deg); } } @media (max-width: 480px){ .venkat4{ width: 50%; margin-left: 265%; margin-top: 325%; transform: rotate(170deg); } } @media (min-width: 1200px){ .venkat5{ width: 80%; margin-left: 237%; margin-top: 5%; border-bottom: 5px solid #d19441; border-radius: 4px; border-left: 5px solid #d19441; border-right: 5px solid #d19441; border-top: 5px solid #d19441; background: #c98ba3; } } @media (max-width: 480px){ .venkat5{ width: 80%; margin-left: 430%; margin-top: 122%; } } @media (min-width: 1200px){ .venkat6{ width: 50%; margin-left: 861%; margin-top: 67%; transform: rotate(57deg); } } @media (max-width: 480px){ .venkat6{ width: 50%; margin-left: 265%; margin-top: 325%; transform: rotate(170deg); } } @media (min-width: 1200px){ .venkat7{ width: 50%; margin-left: 585%; margin-top: 139%; } } @media (min-width: 1200px){ .venkat8{ width: 17%; margin-left: 470%; margin-top: 35%; } } @media (min-width: 1200px){ .venkat9{ width: 17%; margin-left: 360%; margin-top: 30% } } @media (min-width: 1200px){ .venkat10{ width: 17%; margin-left: 572%; margin-top: 251%; } } @media (min-width: 1200px){ .venkat11{ width: 90%; margin-left: 525%; margin-top: 5%; transform: rotate(90deg); } } @media (max-width: 480px){ .venkat11{ width: 57%; margin-left: 280%; margin-top: 9%; transform: rotate(90deg); } } @media (min-width: 1200px){ .venkat12{ width: 50%; margin-left: 614%; margin-top: 73%; } } @media (max-width: 480px){ .venkat12{ width: 50%; margin-left: 100%; margin-top: 42%; } } @media (min-width: 1200px){ .venkat13{ width: 25%; margin-left: 175%; margin-top: 45%; } } @media (max-width: 480px){ .venkat13{ width: 50%; margin-left: 100%; margin-top: 42%; } } </style> <style> .scrollable-content { height: 100px; width: 450px; overflow: scroll; overflow-x: hidden; } .scrollable-content label { display: block; margin-bottom: 5px; font-weight: bold; text-overflow: clip; text-overflow: ellipsis; white-space: nowrap; } </style> <section id="couple" class="wrapper--couple" style="background: linear-gradient(63deg, rgba(255,59,161,1) 0%, rgba(254,222,163,1) 30%, rgba(255,194,152,1) 47%, rgba(120,195,236,1) 61%, rgba(109,27,222,1) 79%, rgba(254,51,92,1) 91%);"> <div class="container"> <div class="row"> <div class="col-md-12" style="margin-top: -21%;"> <div class="couple-venkat"> <div class="couple-img-container" style="background: #ffe2e2;"> <img src="images/new/background/background.png" alt="" class="img-responsive"> </div> <div class="petals-scene" style="box-shadow: 12px 15px 10px 0px #00000087;"> <ul id="petals-scene" class="scene"> <!--- Left image section star --> <li class="layer"> <a id="menu-toggle" href="#" class="menu-toggle" style="width: 6%;margin-right: 3px;margin-top: 3px;background: none;"> <img src="images/new/background/background1.png" alt="petal img 8" style="position: relative;"> <img src="images/icon/bar.png" alt="petal img 8" style="position: absolute;width: 41%;margin-left: -68%;margin-top: 30%;"> </a> </li> <a href="index.php"> <img src="images/icon/demo.png" alt="petal img 8" style="position: absolute;margin-left: 93%;margin-top: 82px;width: 5%;"> </a> <li class="layer"><img src="images/new/background/category_frame.png" alt="petal img 1" class="venkat"></li> <li class="layer"><img src="images/gif/SKT-logo.gif" alt="petal img 1" class="venkat1"></li> <li class="layer"> <div class="venkat2"> <h6 href="index.php" style="color: black;font-family: auto;font-size: 23px;"> <span>www.weddinfo.com</span> </h6> </div> </li> <li class="layer"><img src="images/new/heart/heart.png" alt="petal img 1" class="venkat3"></li> <li class="layer"><img src="images/new/heart/heart1.png" alt="petal img 1" class="venkat4"></li> <li class="layer"> <h6 style="margin-left: 286%;margin-top: 7%;font-size: 26px;font-family: auto;display: inline-flex;width: 214px;background: #fe9fba;border-bottom: 6px solid #d19441;border-radius: 12px;border-left: 6px solid #d19441;border-right: 5px solid #d19441;border-top: 2px solid #d19441;border-top-right-radius: 2px;border-top-left-radius: 2px;box-shadow: 6px 2px 8px 2px #00000087;"> <span style="margin-left: 24%;">Categories</span> </h6> </li> <div class="widget widget_search layer" style="margin-left: 69%;margin-top: -20px;background: none;"> <form class="search-form" style="line-height: 0px;"> <input type="text" placeholder="Search Category Name" style="box-shadow: 6px 2px 8px 2px #00000087;height: 29px;width: 220px;border: 3px solid #d19441;border-radius: 4px;font-family: initial;font-size: 14px;font-weight: bolder;padding-left: 18px;"> <button type="submit" style="margin-top: -4%;margin-right: -5%;"> <i class="far fa-search"></i> </button> </form> </div> <li class="layer"><img src="images/new/heart/heart1.png" alt="petal img 1" class="venkat6"></li> <li class="layer"><img src="images/new/bubble/round.png" alt="petal img 1" class="venkat7"></li> <li class="layer"><img src="images/new/bubble/round.png" alt="petal img 1" class="venkat8"></li> <li class="layer"><img src="images/new/bubble/round.png" alt="petal img 1" class="venkat9"></li> <li class="layer"><img src="images/new/bubble/round.png" alt="petal img 1" class="venkat10"></li> <li class="layer"><img src="images/new/bubble/bubble.png" alt="petal img 1" class="venkat11"></li> <li class="layer"><img src="images/new/heart/heart.png" alt="petal img 1" class="venkat12"></li> <li class="layer"><img src="images/new/bubble/bubble1.png" alt="petal img 1" class="venkat13"></li> <!--- Left image section end --> <div class="container body-content"> <div class="ng-scope"> <div class="row layer" style="margin-left: 34%;margin-top: 10%;"> <div class="col-lg-12"> <div class="scrollable-content" style="width: 100%;height: 419px;"> <div class="col-md-4 col-sm-6" style="margin-top: 3%;"> <div class="service-grid"> <div class=""> <a href="buyer-product.php"> <img src="images/new/icon/image.png" alt="Icon" style="border-radius: 20px;height: 180px;"> </a> <div class="accomd-desc" style="background: none;height: 0px;margin-top: -40%;"> <a href="buyer-product.php" class="as-btn style3" style="margin-top: 142%;margin-left: -44%;border-radius: 29px;background: #d19441;width: 188%;height: 0px;line-height: 0px;">Invitation</a> </div> </div> </div> <div class="service-divider"></div> </div> <div class="col-md-4 col-sm-6" style="margin-top: 3%;"> <div class="service-grid"> <div class=""> <a href="buyer-product.php"> <img src="images/new/icon/image.png" alt="Icon" style="border-radius: 20px;height: 180px;"> </a> <div class="accomd-desc" style="background: none;height: 0px;margin-top: -40%;"> <a href="buyer-product.php" class="as-btn style3" style="margin-top: 142%;margin-left: -44%;border-radius: 29px;background: #d19441;width: 188%;height: 0px;line-height: 0px;">Invitation</a> </div> </div> </div> <div class="service-divider"></div> </div> <div class="col-md-4 col-sm-6" style="margin-top: 3%;"> <div class="service-grid"> <div class=""> <a href="buyer-product.php"> <img src="images/new/icon/image.png" alt="Icon" style="border-radius: 20px;height: 180px;"> </a> <div class="accomd-desc" style="background: none;height: 0px;margin-top: -40%;"> <a href="buyer-product.php" class="as-btn style3" style="margin-top: 142%;margin-left: -44%;border-radius: 29px;background: #d19441;width: 188%;height: 0px;line-height: 0px;">Invitation</a> </div> </div> </div> <div class="service-divider"></div> </div> <div class="col-md-4 col-sm-6" style="margin-top: 3%;"> <div class="service-grid"> <div class=""> <a href="buyer-product.php"> <img src="images/new/icon/image.png" alt="Icon" style="border-radius: 20px;height: 180px;"> </a> <div class="accomd-desc" style="background: none;height: 0px;margin-top: -40%;"> <a href="buyer-product.php" class="as-btn style3" style="margin-top: 142%;margin-left: -44%;border-radius: 29px;background: #d19441;width: 188%;height: 0px;line-height: 0px;">Invitation</a> </div> </div> </div> <div class="service-divider"></div> </div> <div class="col-md-4 col-sm-6" style="margin-top: 3%;"> <div class="service-grid"> <div class=""> <a href="buyer-product.php"> <img src="images/new/icon/image.png" alt="Icon" style="border-radius: 20px;height: 180px;"> </a> <div class="accomd-desc" style="background: none;height: 0px;margin-top: -40%;"> <a href="buyer-product.php" class="as-btn style3" style="margin-top: 142%;margin-left: -44%;border-radius: 29px;background: #d19441;width: 188%;height: 0px;line-height: 0px;">Invitation</a> </div> </div> </div> <div class="service-divider"></div> </div> <div class="col-md-4 col-sm-6" style="margin-top: 3%;"> <div class="service-grid"> <div class=""> <a href="buyer-product.php"> <img src="images/new/icon/image.png" alt="Icon" style="border-radius: 20px;height: 180px;"> </a> <div class="accomd-desc" style="background: none;height: 0px;margin-top: -40%;"> <a href="buyer-product.php" class="as-btn style3" style="margin-top: 142%;margin-left: -44%;border-radius: 29px;background: #d19441;width: 188%;height: 0px;line-height: 0px;">Invitation</a> </div> </div> </div> <div class="service-divider"></div> </div> <div class="col-md-4 col-sm-6" style="margin-top: 3%;"> <div class="service-grid"> <div class=""> <a href="buyer-product.php"> <img src="images/new/icon/image.png" alt="Icon" style="border-radius: 20px;height: 180px;"> </a> <div class="accomd-desc" style="background: none;height: 0px;margin-top: -40%;"> <a href="buyer-product.php" class="as-btn style3" style="margin-top: 142%;margin-left: -44%;border-radius: 29px;background: #d19441;width: 188%;height: 0px;line-height: 0px;">Invitation</a> </div> </div> </div> <div class="service-divider"></div> </div> <div class="col-md-4 col-sm-6" style="margin-top: 3%;"> <div class="service-grid"> <div class=""> <a href="buyer-product.php"> <img src="images/new/icon/image.png" alt="Icon" style="border-radius: 20px;height: 180px;"> </a> <div class="accomd-desc" style="background: none;height: 0px;margin-top: -40%;"> <a href="buyer-product.php" class="as-btn style3" style="margin-top: 142%;margin-left: -44%;border-radius: 29px;background: #d19441;width: 188%;height: 0px;line-height: 0px;">Invitation</a> </div> </div> </div> <div class="service-divider"></div> </div> </div> </div> </div> </div> </div> </ul> </div> </div> </div> <!--<div class="col-md-5 col-sm-6"> <div class="couple"> <div class="couple-img-container"><img src="assets/img/bride.jpg" alt="" class="img-responsive"></div> <div class="couple__info"> <div class="couple__info__text"> <h2 class="couple-name">jane Doe</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, quidem? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, quidem? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, quidem?</p> </div> <div class="couple__info__social"><a href="#" class="social-btn"><i class="fa fa-twitter"></i></a> <a href="#" class="social-btn"><i class="fa fa-facebook"></i></a> <a href="#" class="social-btn"><i class="fa fa-google-plus"></i></a></div> </div> </div> </div>--> </div> <!-- row--> </div> <!--container--> </section> <!----- Pop up Section Start -------> <div class="modal" id="shop_popup" tabindex="-1"> <div class="modal-dialog" style="margin-top: 20%;"> <div class="modal-content" style="background: linear-gradient(#c62828, #9198e5);height: 225px;border: 5px solid black;margin-top: 30%;border-radius: 20px;"> <!--<div class="modal-header" style="margin-top: -149px;"> <img src="images/background/event_flower.png" alt="venkat"> </div>--> <div class="modal-body"> <button type="button" class="btn btn-secondary" id="shop_close" data-bs-dismiss="modal" style="margin-top: -41%;margin-left: 86%;background: none;"> <img src="images/icon/close.png" alt="petal img 8" class="mCS_img_loaded"> </button> <div class="row" style="margin-top: -22%;"> <div class="form-group col-sm-4" style="margin-top: -1%;margin-left: 8%;"> <img src="images/gif/buyer1.png" alt="venkat" style="height: 60%;"> <button type="button" class="btn btn-secondary" id="shop_close" data-bs-dismiss="modal" style="margin-top: -55%;background: #c62828;font-family: emoji;">Buyer Login</button> </div> <div class="form-group col-sm-2" style="margin-top: 9%;"> <img src="images/gif/b2b.png" alt="venkat"> </div> <div class="form-group col-sm-4"> <img src="images/gif/seller1.png" alt="venkat" style="height: 60%;"> <button type="button" class="btn btn-secondary" id="shop_close" data-bs-dismiss="modal" style="width: 83%;margin-top: -65%;background: #c62828;font-family: emoji;">Seller Login</button> </div> </div> </div> </div> </div> </div> <!----- Pop up Section End -------> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <script> $("#shop_now").click(function(){ $("#shop_popup").show(); }); $("#shop_close").click(function(){ $("#shop_popup").hide(); }); </script> <!--<script> $(document).ready(function() { $("#shop_now").click(function() { var p = $("#couple").css("background-color", "yellow"); p.hide(0).show(1500); }); }); </script>--> <?php include 'footer.php';?>