<?php
/* Template Name: Brand */
get_header(); ?>

<section class="l-brands-welcome pt-lg-4 pb-lg-0">
	<div class="l-brands-welcome__wrapper container">
		<a class="c-arrow-prev" href="#0"><i class="icon icon-left-open-big"></i>Back</a>
		<div class="row mt-3">
			<div class="col-lg-6">
				<img class="c-logo-brand m-auto m-lg-0" src="<?php echo get_template_directory_uri(); ?>/img/layout/celebrity-logo.png" alt="Celebrity X Cruises">
				<h1 class="c-title text-center text-lg-left mt-2 mt-lg-1">Celebrity Edge<span class="c-title__top">SM</span></h1>
				<div class="c-description mt-2">
					<p>Celebrity EdgeSM marks a turning point in our approach to ship design. From the very first sketches to experiencing those designs in a virtual reality setting, every step was done in 3-D. From the incredible new Magic Carpet to the private plunge pools in our new 2-story Edge Villas, we could design the most refined ship at sea.</p>
				</div>
			</div>
		</div>
	</div>
	<!-- <div class="l-brands-welcome__cover d-none d-lg-block">
		<img src="<?php echo get_template_directory_uri(); ?>/img/content/ship-cover.jpg" alt="Ship">
	</div> -->
</section>

<section class="l-brand-technology">
	<div class="l-brand-technology__cube"></div>
	<div class="container">
		
		<div class="row no-gutters h-100">
			<div class="col-lg-8 h-100 order-2 order-lg-1">
				<div class="c-info-ships">
					<h2 class="c-subtitle is-dark">Technology</h2>
					<div class="row">
						<div class="col-lg-6">
							<h3 class="c-subtitle is-dark is-small mt-2 mt-lg-4">Celebrity App</h3>
							<div class="c-description is-dark mt-1">
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
							</div>
							<div class="stores mt-2">
								<img class="pr-1" src="<?php echo get_template_directory_uri(); ?>/img/content/applestore.png" alt="Appe Store">
								<img src="<?php echo get_template_directory_uri(); ?>/img/content/playstore.png" alt="Play Store">
							</div>
						</div>
						<div class="col-lg-6">
							<h3 class="c-subtitle is-dark is-small mt-3 mt-lg-4">Celebrity Edge Access Tour</h3>
							<div class="c-description is-dark mt-1">
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
							</div>
							<div class="stores mt-2">
								<img class="pr-1" src="<?php echo get_template_directory_uri(); ?>/img/content/applestore.png" alt="Appe Store">
								<img src="<?php echo get_template_directory_uri(); ?>/img/content/playstore.png" alt="Play Store">
							</div>
						</div>
						<div class="col-lg-6">
							<h3 class="c-subtitle is-dark is-small mt-3 mt-lg-4">In-App Chat</h3>
							<div class="c-description is-dark mt-1">
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
							</div>
						</div>
						<div class="col-lg-6">
							<h3 class="c-subtitle is-dark is-small mt-2 mt-lg-4">Stateroom Automation</h3>
							<div class="c-description is-dark mt-1">
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
							</div>
						</div>
						<div class="col-lg-6">
							<h3 class="c-subtitle is-dark is-small mt-2 mt-lg-4">Bring Me</h3>
							<div class="c-description is-dark mt-1">
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
							</div>
						</div>
						<div class="col-lg-6">
							<h3 class="c-subtitle is-dark is-small mt-2 mt-lg-4">Frictionless Arrival</h3>
							<div class="c-description is-dark mt-1">
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="col-lg-3 offset-lg-1 l-brand-technology__ship order-1 order-lg-2">
				<img src="<?php echo get_template_directory_uri(); ?>/img/content/ship-brand.png" alt="Ship">
			</div> 
		</div>
	</div>
</section>

<section class="l-brand-discover py-3 pt-lg-4 pb-lg-0">
	<div class="l-brand-discover__diamond"></div>
	<div class="l-brand-discover__cover-mobile d-lg-none">
		<img src="<?php echo get_template_directory_uri(); ?>/img/content/ship-cover.jpg" alt="Ship">
	</div>
	<div class="l-brand-discover__wrapper container mt-3 mt-lg-0">
		<div class="row">
			<div class="col-lg-5">
				<h2 class="c-subtitle is-dark">Discover Celebrity Cruising</h2>
				<a class="c-btn-icon is-dark mt-1" href="#0">Browse Edge Sailings<i class="icon icon-go"></i></a>
			</div>
		</div>
	</div>
	<div class="l-brand-discover__cover d-none d-lg-block">
		<img src="<?php echo get_template_directory_uri(); ?>/img/content/ship-cover.jpg" alt="Ship">
	</div>
</section>

<section class="l-brands-news py-3 py-md-4 py-lg-5">
	<div class="container d-flex justify-content-between align-items-center mb-3">
		<h2 class="c-subtitle">Gallery</h2>

		<div class="d-none d-sm-flex">
			<a href="javascript:;" class="c-btn-round js-carousel-default-prev" aria-label="Prev"><i class="icon icon-left-arrow"></i></a>
			<a href="javascript:;" class="c-btn-round js-carousel-default-next" aria-label="Next"><i class="icon icon-right-arrow"></i></a>
		</div>
	</div>
	<div class="c-carousel-default js-carousel-default owl-carousel">
		<?php for ($i = 0; $i < 6; $i++) : ?>
			<a data-fancybox href="<?php echo get_template_directory_uri(); ?>/img/content/placeholder<?php echo ($i == 1) ? '-2' : '' ?>.jpg" class="c-card-news">
				<div class="c-card-news__cover">
					<img src="<?php echo get_template_directory_uri(); ?>/img/content/placeholder<?php echo ($i == 1) ? '-2' : '' ?>.jpg">
				</div>
			</a>
		<?php endfor; ?>
	</div>
</section>


<?php get_footer(); ?>