Mari Carmen نشر 12 ديسمبر 2020 أرسل تقرير مشاركة نشر 12 ديسمبر 2020 ممكن مساعده لأنشاء صفحه تحتوي معلومات عن فندق jQuery.docx اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمد الملواني نشر 12 ديسمبر 2020 أرسل تقرير مشاركة نشر 12 ديسمبر 2020 تستطيعين استخدام هذا النموذج لانشاء الصفحة الخاصه بك <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Mari Carmen Hotel</title> <!-- GOOGLE FONTS --> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700" rel="stylesheet"> <!-- FLATICON --> <link href="http://themeradiant-aurelia.surge.sh/assets/plugins/flaticon/font/flaticon.css" rel="stylesheet"> <!-- ANIMATE CSS --> <link href="http://themeradiant-aurelia.surge.sh/assets/css/animate.css" rel="stylesheet"> <!-- VEGAS CSS --> <link href="http://themeradiant-aurelia.surge.sh/assets/plugins/vegas/vegas.min.css" rel="stylesheet"> <!-- OWL CAROUSEL --> <link href="http://themeradiant-aurelia.surge.sh/assets/plugins/owl/owl.carousel.min.css" rel="stylesheet"> <link href="http://themeradiant-aurelia.surge.sh/assets/plugins/owl/owl.theme.default.min.css" rel="stylesheet"> <!-- BOOTSTRAP DATEPICKER --> <link href="http://themeradiant-aurelia.surge.sh/assets/css/bootstrap-datepicker.min.css" rel="stylesheet"> <!-- BOOTSTRAP --> <link href="http://themeradiant-aurelia.surge.sh/assets/css/bootstrap.min.css" rel="stylesheet"> <!-- TEMPLATE STYLE --> <link href="http://themeradiant-aurelia.surge.sh/assets/css/style.css" rel="stylesheet"> </head> <body> <div id="page-loader"> <div class="spinner"> <div class="bounce1"></div> <div class="bounce2"></div> <div class="bounce3"></div> </div> </div> <!-- SITE WRAPPER --> <div class="site-wrapper"> <div class="site-header"> <div class="container"> <!-- TOP HEADER --> <div id="top-header" class="row hidden-xs hidden-sm hidden-md"> </div> <!-- END OF TOP HEADER --> <!-- MAIN HEADER --> <div id="main-header" class="row"> <div class="col-md-4 col-xs-9"> <a href="#" class="site-title underline"> Mari Carmen <span class="colored normal">Hotel</span></a> </div> <div class="col-md-8 col-xs-12 text-right hidden-xs hidden-sm"> <ul id="main-nav"> <li><a href="#home" class="smooth-scroll animated-underline">Home</a></li> <li><a href="#rooms" class="smooth-scroll animated-underline">Rooms</a></li> <li><a href="#dining" class="smooth-scroll animated-underline">Dining</a></li> <li><a href="#hs" class="smooth-scroll animated-underline">History</a></li> <li><a href="#about" class="smooth-scroll animated-underline">About</a></li> <li><a href="#contact-us" class="smooth-scroll animated-underline">Contact Us</a></li> </ul> </div> <div class="col-xs-3 hidden-md hidden-lg"> <a href="#" id="mobile-menu-btn" class="pull-right"><i class="flaticon-bars"></i></a> <div id="mobile-menu"> <a href="#" id="close-mobile-menu-btn"><i class="flaticon-cross-out"></i> Close</a> <ul> <li><a href="#home" class="smooth-scroll">Home</a></li> <li><a href="#rooms" class="smooth-scroll">Rooms</a></li> <li><a href="#dining" class="smooth-scroll">Dining</a></li> <li><a href="#hs" class="smooth-scroll">History</a></li> <li><a href="#about" class="smooth-scroll">About</a></li> <li><a href="#contact-us" class="smooth-scroll">Contact Us</a></li> </ul> </div> <div id="mobile-menu-overlay"></div> </div> </div> <!-- END OF MAIN HEADER --> </div> </div> <!-- END OF SITE HEADER --> <!-- HOME --> <section id="home" class="hero"> <div class="hero-inner container text-center"> <div class="row"> <div class="col-xs-12"> <h1 class="title invisible">Responsive <span class="colored light">hotel Template</span></h1> <p class="description invisible">Discover a hotel that defines a new dimension of luxury</p> <a href="#rooms" id="hero-book-now" class="button ghost round large invisible smooth-scroll">Learn More</a> </div> </div> </div> <div class="dark-overlay"></div> </section> <!-- END OF HOME --> <!-- ROOMS --> <section id="rooms" class="white-space-5 light-bg"> <div class="container"> <div class="row waypoint" data-animate="slideInLeft" data-offset="70"> <div class="col-xs-12 col-md-6 col-md-offset-3 white-space-2 text-center"> <h6 class="light grey uppercase letter-spacing">Stay with us, and feel like home.</h6> <h2 class="light dark-grey underline uppercase">Accomodations</h2> </div> </div> <div class="row waypoint" data-offset="70"> <div class="col-xs-12"> <ul class="filter-rooms text-center"> <li data-filter="1" class="filter-room-btn active">All</li> <li data-filter="2" class="filter-room-btn">Twin</li> <li data-filter="3" class="filter-room-btn">Double</li> <li data-filter="4" class="filter-room-btn">Deluxe</li> <li data-filter="5" class="filter-room-btn">Suite</li> </ul> <div class="filtr-container row text-center"> <div class="filtr-item col-md-3 col-sm-6" data-category="1, 4"> <div class="white-space-2 room-box"> <div class="room-image"> <a href="#" data-toggle="modal" data-target="#room-details-modal"><i class="flaticon-search"></i></a> <img class="img-responsive" src="http://themeradiant-aurelia.surge.sh/assets/images/rooms/deluxe.jpg" alt="room-image"> </div> <h4 class="room-type">Deluxe A</h4> <p class="light">Enim similique excepturi odit facere temporibus aliquid reiciendis asperiores voluptatum repudiandae labore itaque quae laboriosam.</p> <button class="button dark large" data-toggle="modal" data-target="#room-details-modal">View Details</button> </div> </div> <div class="filtr-item col-md-3 col-sm-6" data-category="1, 4"> <div class="white-space-2 room-box"> <div class="room-image"> <a href="#" data-toggle="modal" data-target="#room-details-modal"><i class="flaticon-search"></i></a> <img class="img-responsive" src="http://themeradiant-aurelia.surge.sh/assets/images/rooms/deluxe2.jpg" alt="room-image"> </div> <h4 class="room-type">Deluxe B</h4> <p class="light">Enim similique excepturi odit facere temporibus aliquid reiciendis asperiores voluptatum repudiandae labore itaque quae laboriosam.</p> <button class="button dark large" data-toggle="modal" data-target="#room-details-modal">View Details</button> </div> </div> <div class="filtr-item col-md-3 col-sm-6" data-category="1, 2"> <div class="white-space-2 room-box"> <div class="room-image"> <a href="#" data-toggle="modal" data-target="#room-details-modal"><i class="flaticon-search"></i></a> <img class="img-responsive" src="http://themeradiant-aurelia.surge.sh/assets/images/rooms/twin.jpg" alt="room-image"> </div> <h4 class="room-type">Twin</h4> <p class="light">Enim similique excepturi odit facere temporibus aliquid reiciendis asperiores voluptatum repudiandae labore itaque quae laboriosam.</p> <button class="button dark large" data-toggle="modal" data-target="#room-details-modal">View Details</button> </div> </div> <div class="filtr-item col-md-3 col-sm-6" data-category="1, 3"> <div class="white-space-2 room-box"> <div class="room-image"> <a href="#" data-toggle="modal" data-target="#room-details-modal"><i class="flaticon-search"></i></a> <img class="img-responsive" src="http://themeradiant-aurelia.surge.sh/assets/images/rooms/double.jpg" alt="room-image"> </div> <h4 class="room-type">Double A</h4> <p class="light">Enim similique excepturi odit facere temporibus aliquid reiciendis asperiores voluptatum repudiandae labore itaque quae laboriosam.</p> <button class="button dark large" data-toggle="modal" data-target="#room-details-modal">View Details</button> </div> </div> <div class="filtr-item col-md-3 col-sm-6" data-category="1, 3"> <div class="white-space-2 room-box"> <div class="room-image"> <a href="#" data-toggle="modal" data-target="#room-details-modal"><i class="flaticon-search"></i></a> <img class="img-responsive" src="http://themeradiant-aurelia.surge.sh/assets/images/rooms/double2.jpg" alt="room-image"> </div> <h4 class="room-type">Double B</h4> <p class="light">Enim similique excepturi odit facere temporibus aliquid reiciendis asperiores voluptatum repudiandae labore itaque quae laboriosam.</p> <button class="button dark large" data-toggle="modal" data-target="#room-details-modal">View Details</button> </div> </div> <div class="filtr-item col-md-3 col-sm-6" data-category="1, 3"> <div class="white-space-2 room-box"> <div class="room-image"> <a href="#" data-toggle="modal" data-target="#room-details-modal"><i class="flaticon-search"></i></a> <img class="img-responsive" src="http://themeradiant-aurelia.surge.sh/assets/images/rooms/double3.jpg" alt="room-image"> </div> <h4 class="room-type">Double C</h4> <p class="light">Enim similique excepturi odit facere temporibus aliquid reiciendis asperiores voluptatum repudiandae labore itaque quae laboriosam.</p> <button class="button dark large" data-toggle="modal" data-target="#room-details-modal">View Details</button> </div> </div> <div class="filtr-item col-md-3 col-sm-6" data-category="1, 3"> <div class="white-space-2 room-box"> <div class="room-image"> <a href="#" data-toggle="modal" data-target="#room-details-modal"><i class="flaticon-search"></i></a> <img class="img-responsive" src="http://themeradiant-aurelia.surge.sh/assets/images/rooms/double4.jpg" alt="room-image"> </div> <h4 class="room-type">Double D</h4> <p class="light">Enim similique excepturi odit facere temporibus aliquid reiciendis asperiores voluptatum repudiandae labore itaque quae laboriosam.</p> <button class="button dark large" data-toggle="modal" data-target="#room-details-modal">View Details</button> </div> </div> <div class="filtr-item col-md-3 col-sm-6" data-category="1, 5"> <div class="white-space-2 room-box"> <div class="room-image"> <a href="#" data-toggle="modal" data-target="#room-details-modal"><i class="flaticon-search"></i></a> <img class="img-responsive" src="http://themeradiant-aurelia.surge.sh/assets/images/rooms/suite.jpg" alt="room-image"> </div> <h4 class="room-type">Suite</h4> <p class="light">Enim similique excepturi odit facere temporibus aliquid reiciendis asperiores voluptatum repudiandae labore itaque quae laboriosam.</p> <button class="button dark large" data-toggle="modal" data-target="#room-details-modal">View Details</button> </div> </div> </div> </div> </div> </div> </section> <!-- END OF ROOMS --> <!-- DINING --> <section id="dining" class="white-space-5"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-6 col-md-offset-3 white-space-2 text-center"> <h6 class="light grey uppercase letter-spacing">We don’t make it until you order it.</h6> <h2 class="light dark-grey underline uppercase">Dining</h2> </div> </div> <div class="white-space-3"></div> <div class="row"> <div class="col-md-6"> <img src="http://themeradiant-aurelia.surge.sh/assets/images/dining/breakfast.jpg" class="img-responsive" alt="dining"> <div class="white-space-2"></div> </div> <div class="col-md-6"> <h2 class="colored">Breakfast</h2> <p class="light">Ask her how her day was. File not found. You guys go on without me! I'm going to go… look for more stuff to steal! It's just like the story of the grasshopper and the octopus. All year long, the grasshopper kept burying acorns for winter, while the octopus mooched off his girlfriend and watched TV. But then the winter came, and the grasshopper died, and the octopus ate all his acorns. Also he got a race car. Is any of this getting through to you?</p> <a href="#" class="button large">Breakfast Menu</a> </div> </div> <div class="white-space-5"></div> <div class="row"> <div class="col-md-6 col-md-push-6"> <img src="http://themeradiant-aurelia.surge.sh/assets/images/dining/lunch.jpg" class="img-responsive" alt="dining"> <div class="white-space-2"></div> </div> <div class="col-md-6 col-md-pull-6"> <h2 class="colored">Lunch</h2> <p class="light">Ask her how her day was. File not found. You guys go on without me! I'm going to go… look for more stuff to steal! It's just like the story of the grasshopper and the octopus. All year long, the grasshopper kept burying acorns for winter, while the octopus mooched off his girlfriend and watched TV. But then the winter came, and the grasshopper died, and the octopus ate all his acorns. Also he got a race car. Is any of this getting through to you?</p> <a href="#" class="button large">Lunch Menu</a> </div> </div> <div class="white-space-5"></div> <div class="row"> <div class="col-md-6"> <img src="http://themeradiant-aurelia.surge.sh/assets/images/dining/dinner.jpg" class="img-responsive" alt="dining"> <div class="white-space-2"></div> </div> <div class="col-md-6"> <h2 class="colored">Dinner</h2> <p class="light">Ask her how her day was. File not found. You guys go on without me! I'm going to go… look for more stuff to steal! It's just like the story of the grasshopper and the octopus. All year long, the grasshopper kept burying acorns for winter, while the octopus mooched off his girlfriend and watched TV. But then the winter came, and the grasshopper died, and the octopus ate all his acorns. Also he got a race car. Is any of this getting through to you?</p> <a href="#" class="button large">Dinner Menu</a> </div> </div> </div> <div class="white-space-3"></div> </section> <!-- END OF DINING --> <!-- MEETINGS & EVENTS --> <section id="hs" style="background-image: url('http://themeradiant-aurelia.surge.sh/assets/images/rooms/meeting-room.jpg')"> <div class="dark-overlay"></div> <div class="container"> <div class="row text-center"> <div class="col-xs-12 waypoint" data-animate="fadeInDown" data-offset="60"> <h5 class="light uppercase white">Meetings & events</h5> <h1 class="title white">Be a <span class="normal colored">guest</span> <br>at your own <span class="normal">event</span></h1> </div> </div> <div class="row text-center white-space-2 waypoint" data-offset="70"> <div class="col-xs-6 col-sm-4 col-xs-offset-3 col-sm-offset-0 white-space-2"> <h4 class="light white underline uppercase">Conference</h4> <p class="white description">Accusantium, sapiente sed minus sit amet, consectetur adipisici.</p> <a href="#contact-us" class="button ghost large round smooth-scroll">Inquiry</a> </div> <div class="col-xs-6 col-sm-4 col-xs-offset-3 col-sm-offset-0 white-space-2"> <h4 class="light white underline uppercase">Business Meetings</h4> <p class="white description">Accusantium, sapiente sed minus sit amet, consectetur adipisici.</p> <a href="#contact-us" class="button ghost large round smooth-scroll">Inquiry</a> </div> <div class="col-xs-6 col-sm-4 col-xs-offset-3 col-sm-offset-0 white-space-2"> <h4 class="light white underline uppercase">Events</h4> <p class="white description">Accusantium, sapiente sed minus sit amet, consectetur adipisici.</p> <a href="#contact-us" class="button ghost large round smooth-scroll">Inquiry</a> </div> </div> </div> </section> <!-- END OF MEETINGS & EVENTS --> <!-- ABOUT --> <section id="about" class="white-space-5"> <div class="container"> <div class="row"> <div class="col-md-6"> <h1 class="title white-space-7"> The <span class="normal dark-grey">right way</span><br> The <span class="normal colored">aurelia way</span><br> </h1> </div> <div class="col-md-6"> <h4 class="light underline uppercase">About</h4> <p class="light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam non numquam unde obcaecati dignissimos voluptates ea eveniet voluptatibus laborum rem quasi, itaque reprehenderit pariatur illum vero. Iste ipsam accusantium fugiat.</p> <p class="light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam non numquam unde obcaecati dignissimos voluptates ea eveniet voluptatibus laborum rem quasi, itaque reprehenderit pariatur illum vero. Iste ipsam accusantium fugiat.</p> </div> </div> <div class="row"> <div class="col-md-6"> <div class="row white-space-2"> <div class="col-xs-6"> <img src="http://themeradiant-aurelia.surge.sh/assets/images/about/beach-hut.jpg" class="img-responsive" alt="about-image"> </div> <div class="col-xs-6"> <img src="http://themeradiant-aurelia.surge.sh/assets/images/about/dining.jpg" class="img-responsive" alt="about-image"> </div> </div> <div class="row"> <div class="col-xs-6"> <img src="http://themeradiant-aurelia.surge.sh/assets/images/about/dining.jpg" class="img-responsive" alt="about-image"> </div> <div class="col-xs-6"> <img src="http://themeradiant-aurelia.surge.sh/assets/images/about/room.jpg" class="img-responsive" alt="about-image"> </div> </div> </div> <div class="col-md-6"> <h4 class="light underline uppercase white-space-2">History</h4> <p class="light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam non numquam unde obcaecati dignissimos voluptates ea eveniet voluptatibus laborum rem quasi, itaque reprehenderit pariatur illum vero. Iste ipsam accusantium fugiat.</p> <p class="light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam non numquam unde obcaecati dignissimos voluptates ea eveniet voluptatibus laborum rem quasi, itaque reprehenderit pariatur illum vero. Iste ipsam accusantium fugiat.</p> <a href="#" class="button">Read More</a> </div> </div> <div class="white-space-3"></div> <div class="row"> <div class="col-md-6"> <h1 class="title white-space-7"> Every great <span class="normal dark-grey">business</span><br> is built on <span class="normal colored">friendship</span><br> </h1> </div> <div class="col-md-6"> <h4 class="light underline uppercase">Customer Reviews</h4> <div class="owl-carousel owl-theme"> <div class="white-space-2"> <span class="light">Grace Wright</span> <br> <span class="flaticon-shape tiny-icon"></span> <span class="flaticon-shape tiny-icon"></span> <span class="flaticon-shape tiny-icon"></span> <span class="flaticon-shape tiny-icon"></span> <span class="flaticon-shape tiny-icon"></span> <br><br> <p>Best experience ever!!!</p> <p class="light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, est, adipisci. Minus maxime vitae, et amet dicta. Provident vel architecto ipsa natus expedita beatae sed aliquid aspernatur, praesentium autem nemo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis numquam non quas ex at quod, ut, et cumque fugiat repellendus quae iusto reiciendis. Ratione accusamus, eligendi dolores, laboriosam beatae vitae.</p> </div> <div class="white-space-2"> <span class="light">Steve Young</span> <br> <span class="flaticon-shape tiny-icon"></span> <span class="flaticon-shape tiny-icon"></span> <span class="flaticon-shape tiny-icon"></span> <span class="flaticon-shape tiny-icon"></span> <span class="flaticon-shape tiny-icon"></span> <br><br> <p>Great Food, Great Stay!</p> <p class="light">Adipisci. Minus maxime vitae, et amet dicta. Provident vel architecto ipsa natus expedita beatae sed aliquid aspernatur, praesentium autem nemo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis numquam non quas ex at quod, ut, et cumque fugiat repellendus quae iusto reiciendis. Ratione accusamus, eligendi dolores, laboriosam beatae vitae.</p> </div> <div class="white-space-2"> <span class="light">Kate Lee Adams</span> <br> <span class="flaticon-shape tiny-icon"></span> <span class="flaticon-shape tiny-icon"></span> <span class="flaticon-shape tiny-icon"></span> <span class="flaticon-shape tiny-icon"></span> <span class="flaticon-shape-2 tiny-icon"></span> <br><br> <p>Had a great time with my family</p> <p class="light">Consectetur adipisicing elit. Nisi, est, adipisci. raesentium autem nemo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis numquam non quas ex at quod, ut, et cumque fugiat repellendus quae iusto reiciendis. Ratione accusamus, eligendi dolores, laboriosam beatae vitae.</p> </div> <div class="white-space-2"> <span class="light">Jessica Williams</span> <br> <span class="flaticon-shape tiny-icon"></span> <span class="flaticon-shape tiny-icon"></span> <span class="flaticon-shape tiny-icon"></span> <span class="flaticon-shape tiny-icon"></span> <span class="flaticon-shape-1 tiny-icon"></span> <br><br> <p>Nice place, great food!</p> <p class="light">Perferendis qui architecto, quos nesciunt, iusto earum labore dolores vel, ducimus nulla dolorum. Voluptas, hic! Distinctio dolorum, dolorem ipsam blanditiis, repellendus necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quod soluta, fugit sit enim assumenda nihil veniam harum fugiat molestiae. Veniam est nam voluptates quam officia quisquam, nobis odio pariatur!</p> </div> </div> </div> </div> </div> </section> <!-- END OF ABOUT --> <!-- CONTACT US --> <section id="contact-us" class="white-space-5 light-bg"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-6 col-md-offset-3 white-space-2 text-center"> <h6 class="light grey uppercase letter-spacing">Get in touch</h6> <h2 class="light dark-grey underline uppercase">Contact Us</h2> </div> </div> <div class="row"> <div class="col-md-6"> <div class="row"> <div class="col-xs-12"> <p class="light text-center-xs text-center-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt sit, similique neque, ratione temporibus.</p> </div> </div> <div class="row"> <div class="col-sm-6"> <h4 class="white-space-2 colored">Main Office</h4> <ul class="list-unstyled"> <li><i class="flaticon-technology"></i> 1-541-967-0010</li> <li><i class="flaticon-mail"></i> example@gmail.com</li> <li><i class="flaticon-location-pin"></i> 1565 Marietta Street<br>Santa Rosa, California</li> </ul> </div> <div class="col-sm-6"> <h4 class="white-space-2 colored">Branch Office</h4> <ul class="list-unstyled"> <li><i class="flaticon-technology"></i> 323-520-1038</li> <li><i class="flaticon-mail"></i> example2@gmail.com</li> <li><i class="flaticon-location-pin"></i> 2133 Evergreen Lane<br>Alhambra, California</li> </ul> </div> </div> <div class="row"> <div class="col-xs-12 white-space-2"> <ul id="social-media-contact" class="list-inline"> <li><a href="#." class="flaticon-facebook-logo-in-circular-button-outlined-social-symbol"></a></li> <li><a href="#." class="flaticon-twitter-circular-button"></a></li> <li><a href="#." class="flaticon-google-plus-circular-button"></a></li> <li><a href="#." class="flaticon-pinterest-social-visual-website-logotype"></a></li> <li><a href="#." class="flaticon-linkedin"></a></li> <li><a href="#." class="flaticon-instagram"></a></li> </ul> </div> </div> </div> <div class="col-md-6"> <h4 class="colored uppercase"><i class="flaticon-edit"></i> Leave a Message</h4> <p class="light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic earum, nulla enim.</p> <div class="row"> <div class="col-md-6"> <div class="form-group"> <input type="text" name="name" class="form-control" placeholder="Your Name"> </div> </div> <div class="col-md-6"> <div class="form-group"> <input type="email" name="email" class="form-control" placeholder="Email"> </div> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <input type="text" name="contact-number" class="form-control" placeholder="Contact Number"> </div> </div> <div class="col-md-6"> <input type="text" name="subject" class="form-control" placeholder="Subject"> </div> </div> <div class="form-group"> <textarea name="message" class="form-control" rows="7" placeholder="Message"></textarea> </div> <div class="form-group"> <button class="button large dark">Submit</button> </div> </div> </div> </div> </section> <!-- END OF CONTACT US --> <div id="map"></div> </div> <!-- END OF SITE WRAPPER --> <!-- MODALS --> <div class="modal fade" id="room-details-modal" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="flaticon-cross-out"></span></button> <h4 class="modal-title light">Aurelia Hotel - Deluxe A</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-md-5"> <div id="room-images" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#room-images" data-slide-to="0" class="active"></li> <li data-target="#room-images" data-slide-to="1"></li> <li data-target="#room-images" data-slide-to="2"></li> <li data-target="#room-images" data-slide-to="3"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="http://themeradiant-aurelia.surge.sh/assets/images/rooms/deluxe.jpg" alt="rooms-carousel"> </div> <div class="item"> <img src="http://themeradiant-aurelia.surge.sh/assets/images/rooms/deluxe.jpg" alt="rooms-carousel"> </div> <div class="item"> <img src="http://themeradiant-aurelia.surge.sh/assets/images/rooms/double.jpg" alt="rooms-carousel"> </div> <div class="item"> <img src="http://themeradiant-aurelia.surge.sh/assets/images/rooms/double2.jpg" alt="rooms-carousel"> </div> </div> <a class="left carousel-control" href="#room-images" role="button" data-slide="prev"> <span class="arrow flaticon-back" aria-hidden="true"></span> </a> <a class="right carousel-control" href="#room-images" role="button" data-slide="next"> <span class="arrow flaticon-next" aria-hidden="true"></span> </a> </div> <div class="white-space-2"></div> </div> <div class="col-md-7"> <div class="row"> <div class="col-sm-6"> <h2>$374.82<small>/night</small></h2> <p class="light">Breakfast Included</p> </div> <div class="col-sm-6"> <button class="button ghost white hotel-book-now" data-toggle="modal" data-target="#booking-form-modal">Book Now</button> </div> </div> <div class="white-space-2"></div> <div class="row"> <div class="col-md-6"> <h4>Room Amenities</h4> <p class="light">Air conditioning, Balcony, Bathroom, Desk, Flat screen TV, Hair dryer, Minibar, Refrigerator, Shower, Toilet, Towels</p> <div class="white-space-2"></div> </div> <div class="col-md-6"> <h4 class="">Max Occupancy</h4> <span class="flaticon-man-silhouette"></span> <span class="flaticon-man-silhouette"></span> </div> </div> </div> </div> <div class="white-space-2"></div> <div class="row"> <div class="col-xs-12"> <h4>Description</h4> <p class="light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis dolore saepe itaque rerum iusto, modi ipsum deserunt qui aliquam, accusantium quasi tempore nam quam sapiente cum laudantium maiores. Consectetur, vero.</p> </div> </div> <div class="white-space-2"></div> <div class="row"> <div class="col-xs-12"> <h4>Payment Terms</h4> <p class="light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam adipisci accusamus unde omnis qui sint at perspiciatis expedita deleniti maxime odio velit deserunt, reiciendis suscipit id maiores, hic dicta rerum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quibusdam nihil voluptatum aliquam voluptates laboriosam magni commodi impedit nulla, neque officia sequi facere, dignissimos magnam vero ratione non eveniet tempora!</p> </div> </div> <div class="white-space-2"></div> <div class="row"> <div class="col-xs-12"> <h4>Cancellation Policy</h4> <p class="light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae fugit ipsum natus neque numquam debitis quis, nihil. Sint laborum porro, perspiciatis illum, pariatur obcaecati quia aliquam officia consequatur voluptatibus impedit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, ducimus cumque nulla. Voluptatem eligendi nihil laborum cupiditate adipisci aliquam temporibus voluptatibus quo blanditiis aperiam quaerat, expedita, magni voluptates delectus at.</p> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="booking-form-modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="flaticon-cross-out"></span></button> <h4 class="modal-title light" ><span class="flaticon-calendar"></span> Booking Form</h4> </div> <div class="modal-body"> <div class="row"> <form> <div class="col-md-6"> <div class="form-group"> <input type="text" class="form-control" placeholder="First Name"> </div> </div> <div class="col-md-6"> <div class="form-group"> <input type="text" class="form-control" placeholder="Last Name"> </div> </div> <div class="col-md-6"> <div class="form-group"> <input type="text" class="form-control" placeholder="Email Address"> </div> </div> <div class="col-md-6"> <div class="form-group"> <input type="text" class="form-control" placeholder="Phone Number"> </div> </div> <div class="col-md-6"> <div class="form-group"> <input type="text" class="form-control" placeholder="Arrival" data-provide="datepicker"> </div> </div> <div class="col-md-6"> <div class="form-group"> <input type="text" class="form-control" placeholder="Departure" data-provide="datepicker"> </div> </div> <div class="col-md-6"> <div class="form-group"> <select class="form-control"> <option disabled selected>Adults</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <select class="form-control"> <option disabled selected>Children</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <select class="form-control"> <option disabled selected>Room</option> <option>Deluxe A</option> <option>Deluxe B</option> <option>Twin</option> <option>Double A</option> <option>Double B</option> <option>Double C</option> <option>Suite</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <select class="form-control"> <option disabled selected>Include Lunch</option> <option>Yes</option> <option>No</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <textarea rows="5" class="form-control" placeholder="Special Requests"></textarea> </div> </div> <div class="col-md-6"> <div class="form-group"> <div class="checkbox"> <label> <input type="checkbox"> <span class="light">I agree to the Terms & Conditions</span> </label> </div> <a href="#." class="button ghost white">Confirm and Book</a> </div> </div> </form> </div> </div> </div> </div> </div> <!-- JQUERY --> <script src="http://themeradiant-aurelia.surge.sh/assets/js/jquery.min.js"></script> <script src="http://themeradiant-aurelia.surge.sh/assets/js/jquery-ui.min.js"></script> <!-- BOOTSTRAP DATEPICKER --> <script src="http://themeradiant-aurelia.surge.sh/assets/js/bootstrap-datepicker.min.js"></script> <!-- BOOTSTRAP --> <script src="http://themeradiant-aurelia.surge.sh/assets/js/bootstrap.min.js"></script> <!-- VEGAS BACKGROUND SLIDESHOW --> <script src="http://themeradiant-aurelia.surge.sh/assets/plugins/vegas/vegas.min.js"></script> <!-- OWL CAROUSEL --> <script src="http://themeradiant-aurelia.surge.sh/assets/plugins/owl/owl.carousel.min.js"></script> <!-- FILTERIZR --> <script src="http://themeradiant-aurelia.surge.sh/assets/plugins/filterizr/jquery.filterizr.min.js"></script> <!-- WAYPOINTS --> <script src="http://themeradiant-aurelia.surge.sh/assets/plugins/waypoints/jquery.waypoints.min.js"></script> <!-- GOOGLE MAPS API JAVASCRIPT --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCefAYkn-vDsdbsV73K9T91Tl9abFQLw-A"></script> <!-- AURELIA JS --> <script src="http://themeradiant-aurelia.surge.sh/assets/js/aurelia.js"></script> </body> </html> في حال احتياجك الى استفسار اخر او توضيح لا تتردي بطرحه هنا 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Mari Carmen
ممكن مساعده لأنشاء صفحه تحتوي معلومات عن فندق
jQuery.docx
رابط هذا التعليق
شارك على الشبكات الإجتماعية
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.