"Untitled"
Bootstrap 4.1.1 Snippet by divyalahad

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Choose from our collection of especially hand-picked tours in Italy and discover picture-perfect sights and memorable moments.</h2> <div class="row"> <section class="col-sm-12"> <a id="main-content"></a> <h1 class="page-header">ITALY</h1> <div class="region region-content"> <section id="block-system-main" class="block block-system clearfix"> <article id="node-107437" class="node node-cv-story node-promoted clearfix" about="/featured-tours/europe/italy" typeof="sioc:Item foaf:Document"> <header> <span property="dc:title" content="ITALY" class="rdf-meta element-hidden"></span><span property="sioc:num_replies" content="0" datatype="xsd:integer" class="rdf-meta element-hidden"></span> </header> <div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><style> /* - - this hides the Drupal title - - */ .page-header {display:none;} .main-container { margin-top:0;height:auto !important; } .footer{border-top:none !important;} /* Billboard */ .main1{ width: 100%; height: 600px; background: url("/sites/default/files/FCO_0.jpg") no-repeat center center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; overflow: hidden; } .main1 .caption{ margin-left: 5%; margin-right: 5%; margin-top: 14%; text-align: center; } .main1 .caption h1{ display: inline-block; font-weight: 650; color: #fff; font-size: 8em; padding: 0px; margin-bottom: 2px; text-transform: uppercase; z-index: 8888; } .main1 .caption h4{ color: #fff; letter-spacing:0.09em; font-weight: 600; font-size: 1.5em; text-transform: uppercase; } .main-container.container{ width: 100% !important; padding: 0 !important; } .main2 { background: rgba(0, 0, 0, 0) url("/sites/default/files/home-image-luxury-vacation.jpg") no-repeat scroll left top / cover ; height: 400px; overflow: hidden; width: 100%; } .main2 .caption { margin-left: 0; margin-top: 80px; text-align: center; } .main2 h2{font-size:48px;color:#fff;} .main2 h4{font-size:22px; color:#fff;} span.text-content { bottom: 0; color: #fff; display: table; font-family: Roboto; font-size: 24px; font-weight: 400; left: 0; margin-bottom: 10px; margin-left: 10px; position: absolute; vertical-align: text-bottom;padding: 0 0 10px 10px; } .main3 { overflow: hidden; width: 100%; padding-bottom:5% } .main3 .caption { margin-left: 10%; margin-right: 10%; margin-top: 0%; } .main3 .caption h3{ margin-left: 10%; margin-right: 10%; padding-top:4%; padding-bottom:2%; font-family: Roboto,Arial,sans-serif; color: #F18141; font-size: 2.96em; font-weight: 300; letter-spacing:0.02em; text-transform:uppercase; text-align:center; } .main3 .caption p{ margin-left: 10%; margin-right: 10%; text-align:center; padding-top:2%; padding-bottom:2%; font-family: Roboto,Arial,sans-serif; color: #38404a; font-size: 1.8em; font-weight: 300; line-height: 2em; letter-spacing:.07em; } .main3 .caption li{ padding-top:2%; padding-bottom:0%; font-family: Roboto,Arial,sans-serif; color: #38404a; font-size: 1.3em; font-weight: 300; line-height: 2em; letter-spacing:.07em; margin: auto; width: 40%; } .main4 { width: 100%; height: 250px; background: url("/sites/default/files/europe-tours-banner-cta.png") no-repeat top right; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; overflow: hidden; } .main4 .caption{ margin-left: 5%; margin-right: 5%; margin-top: 7%; text-align: center; } .main4 .caption h1{ display: inline-block; font-weight: 550; color: #38404a; font-size: 8em; padding: 0px; margin-bottom: 2px; text-transform: uppercase; z-index: 8888; text-align:center } .main4 .caption h4{ color: #38404a; letter-spacing:0.09em; font-weight: 600; font-size: 1.5em; text-transform: uppercase; } .main5 .desc{ margin-left: 10%; margin-right: 10%; text-align:center; padding-top:4%; padding-bottom:2%; font-family: Roboto,Arial,sans-serif; color: #38404a; font-size: 1.8em; font-weight: 300; line-height: 2em; letter-spacing:.07em; } /*========== Button ==========*/ .classicButton { background-color: transparent; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; border: 3px solid #38404a; display: inline-block; cursor: pointer; color: #38404a !important; font-size: 1em; font-weight: 700; padding: 14px 24px; text-decoration: none !important; text-transform: uppercase; letter-spacing: .444em; } .classicButton:hover { background-color: #38404a; text-decoration: none; color: #38404a !important; } .classicButton:active { position:relative; top:1px; text-decoration: none !important; } .classicButton:visited { color: #38404a; text-decoration: none !important; } </style> <section class="main1"> <div class="wrapper"> </div> <div class="caption"> <h1>ITALY</h1> <h4>FEATURED TOURS & ACTIVITIES</h4> </div> </section></div> </div></div></article></section><!-- End main1 --> <section class="main3"> <div class="caption" style="text-align:center;"> <h3>W3 <b>Amalfi</b></h3> <ul> <li>Cooking Classes</li> <li>Full Day Pompeii and Vesuvius</li> </ul> <h3>W3 <b>Florence</b></h3> <ul> <li>Cooking Classes</li> <li>Off-Road Adventure to Chianti</li> <li>Half Day Tour with Accademia Gallery</li> <li>Half Day Tour with Uffizi Gallery</li> </ul> <h3>W3 <b>Milan</b></h3> <ul> <li>Half Day Tour with Da Vinci’s Last Supper</li> <li>Romantic Verona and Lake Garda</li> <li>La Scala Theatre</li> </ul> <h3>W3 <b>Naples</b></h3> <ul> <li>Panoramic Naples</li> <li>Mt. Vesuvius Volcano</li> </ul> <h3>W3 <b>Portofino and Rapallo</b></h3> <ul> <li>Cinque Terre by Private Yacht</li> </ul> <h3>W3 <b>Positano</b></h3> <ul> <li>Capri Excursion by Private Boat</li> </ul> <h3>W3 <b>Rome</b></h3> <ul> <li>Cooking Classes</li> <li>The Vatican Tour</li> <li>Timeless Beauties of Rome</li> <li>Naples/Pompeii</li> <li>Papal Summer Retreat</li> <li>Villa D’Este and Villa Adriana</li> </ul> <h3>W3 <b>Venice</b></h3> <ul> <li>Guided Tour on Foot</li> <li>Grand Canal Private Boat Tour with Escort</li> <li>St. Mark’s Basilica and Doge’s Palace</li> <li>Casanova’s Venice with Escort</li> </ul> </div> </section></div> </section> <section class="main4"> <div class="caption"> <h4>call for more information or</h4> <a href="/shopping" target="_blank"><button class="btn btn-default classicButton" type="submit">book a vacation</button></a></div> </section> <section class="main5"> <div class="desc">Choose from our collection of especially hand-picked tours in Italy and discover picture-perfect sights and memorable moments.</div> </section></div> <div style="width:80%;margin-left:10%;margin-right:10%;border-right:1px solid gray;border-left:1px solid gray;border-top:1px solid gray;border-bottom:1px solid gray"> <div style="margin-left:5%;margin-right:5%;padding-top:2%;padding-bottom:2%"> <div> <p style="font-size:13px;font-weight:300;color:#38404a;font-family:Roboto,Arial,sans-serif"> Tours and activities may be subject to availability at time of booking. Book early and secure your choices in advance. Tours may be closed out or discontinued at any time. Some tours may offer transportation, alternate departure locations, entry options, and other departure schedules at time of booking. Certain tours may require participants to read and sign an Acknowledgment of Risk and Safety Form or Liability Waiver prior to tour commencement. Participation restrictions may apply to certain tours based on age, weight, height, general health, pregnancy, recent injury, surgery, back issues, etc. Inquire about specific requirements, if applicable, at time of booking.</p> </div> </div> </div> </div> </div> <!--accessibility--> <div id="inklusion_tab" class="inklusion_bottom-left"> <div id="inklusion_tab_button"> <img src="https://www.ags.gob.mx/assets/img/accesibilidad/boton_acces(60x60).png"> </div> <ul id="inklusion_tab_list" class="inklusion_hover-over-button"> <li class="inklusion_title"><a href="https://ags.inklusion.incluirt.com/">ACCESSIBILITY</a></li> <li><a href="https://ags.inklusion.incluirt.com/"> <img src="https://www.ags.gob.mx/assets/img/accesibilidad/ico_visual(60x65).png"> <br> <img src="https://www.ags.gob.mx/assets/img/accesibilidad/ico_motora(60x65).png"> <br> <img src="https://www.ags.gob.mx/assets/img/accesibilidad/ico_auditiva(60x65).png"> <br> <img src="https://www.ags.gob.mx/assets/img/accesibilidad/ico_auditiva(60x65).png"> </a> </li> </ul> </div>

Related: See More


Questions / Comments: