- The Provided Mediterranean Vacations Web Page Needs Bootstrap To Make The Web Page Responsive Download Bootstrap 1 Poi 1 (113.65 KiB) Viewed 38 times
Mediterranean Vacations Featured Packages Exotic Vacations Historic Locations Contact Us Affordable! Our vacation packages give you the most bang for your buck. Quality! We use only the finest lodgings and qualified tour guides. Cancel Anytime! You may cancel your trip at any time for a full refund. Benefits container (2 points) Add the necessary Bootstrap classes to the <div> with ID benefits and the div's child elements so the div acts as a responsive fixed-width container with a max-width setting. The inner divs should use the col-sm class to form one equally-spaced row when the viewport is at least 576px wide. Do not add or remove any HTML elements. The screenshot below shows the three benefits on a single row when the viewport is at least 576px wide. Featured Packages Exotic Vacations Historic Locations Contact Us Affordable! Our vacation packages give you the most bang for your buck. Quality! We use only the finest lodgings and qualified tour guides. Cancel Anytime! You may cancel your trip at any time for a full refund.
Section div containers (2 points) Each <section> has a child <div> that as a fluid container with one row. Use the col-lg class to create two equally spaced columns so the photo is on the left and the text description is on the right when the viewport is at least 992px wide. Do not add or remove any HTML elements. The screenshot below shows the vacation photos with descriptions on the right when the viewport is at least 992px wide. Featured Packages Egypt Egypt is a land of enduring beauty and rich culture. Explore the capital city of Cairo, the Great Pyramids of Giza, and the iconic Great Sphinx Packages include airfare, lodging, and several guided tours! Exotic Vacations Greece Enjoy the scenic, peaceful Greek island of Santorini. Take a cruise, soak in the sun, and explore the idyllic villages that sit atop the cliffs! Packages include airfare, overnight cruises, and lodging!
Responsive images (1 point) Add the rounded class to the photos to give the photos rounded corners. Add the img-fluid class to the photos so the photos stretch to fill the column when the viewport is at least 992px wide. The screenshot below shows the rounded corners. The images grow in size as the viewport is made wider. Featured Packages Egypt Egypt is a land of enduring beauty and rich culture. Explore the capital city of Cairo, the Great Pyramids of Giza, and the iconic Great Sphinx Packages include airfare, lodging, and several guided tours! Exotic Vacations Greece Enjoy the scenic, peaceful Greek island of Santorini. Take a cruise, soak in the sun, and explore the idyllic villages that sit atop the cliffs! Packages include airfare, overnight cruises, and lodging! Show a Modal and Alert (2 points) A Bootstrap Modal with ID contact-modal and an Alert with ID conf-alert are defined in the section with ID contact. Clicking the "Send a message" button displays the Modal, and clicking either button in the Modal closes the Modal. Add the necessary jQuery code in script.js to perform the following when the "Send message" button is clicked in the Modal:
Show a Modal and Alert (2 points) A Bootstrap Modal with ID contact-modal and an Alert with ID conf-alert are defined in the section with ID contact. Clicking the "Send a message" button displays the Modal, and clicking either button in the Modal closes the Modal. Add the necessary jQuery code in script.js to perform the following when the "Send message" button is clicked in the Modal: • Hide the <button> with ID send-message-btn. • Show the Alert with ID conf-alert. The screenshot below shows the Modal that is displayed when clicking the "Send a message" button. After the user types their information and click "Send message", the Modal disappears, and the Alert should appear in place of the "Send a message" button. Contact Us Contact Us Our team of travel experts is readily available to make your Х Name? Send a message Or call us at 1-800-1111-2222. Barbra Smith Email? [email protected] Contact Us Our team of travel experts is readily available to make your I'm interested in... Booking a vacation. Thank you! We will contact you soon! Or call us at 1-800-1111-2222. Close Send message Photos by Frank McCown used with permission.