@extends('layouts.app2')

@section('head-title')
    <title>Brhands Foundation</title>
    <style type="text/css">
    /* .section:nth-child(2) .c-hero-flex .c-hero-flex__item {
    background: #222 url(../imgs/homepage-new/image-1.jpg) no-repeat center center !important;
    background-size: cover !important;
} */
.section:nth-child(1) .c-hero-flex .c-hero-flex__item {
    background: #000 !important;
    background-size: cover !important;
}

.section:nth-child(3) .c-hero-flex .c-hero-flex__item {
    background: #222 url(../imgs/homepage-new/hand.jpg) no-repeat center center !important;
    padding-top: 34% !important;
    padding-left: 19% !important;
    align-items: baseline !important;
    background-size: cover !important;
}

/*.section:nth-child(3) .c-hero-flex .c-hero-flex__item {
    background: #222 url(../imgs/homepage-new/video.jpg) no-repeat center center !important;
    background-size: cover !important;
}*/
.section:nth-child(2) .c-hero-flex .c-hero-flex__item {
    background: #222 url(../imgs/homepage-new/summit-paris.jpg) no-repeat center center !important;
    background-size: cover !important;
    padding-top: 19% !important;
    padding-left: 23% !important;
}
/* .section:nth-child(5) .c-hero-flex .c-hero-flex__item {
    background: #222 url(../imgs/homepage-new/image-3.jpg) no-repeat center center !important;
    background-size: cover !important;
} */

@media(max-width:767px){
  .section:nth-child(3) .c-hero-flex .c-hero-flex__item {
      background: #222 url(../imgs/homepage-new/hand-mobile.jpg) no-repeat center center !important;
      background-size: cover !important;

  }

  .section:nth-child(2) .c-hero-flex .c-hero-flex__item {
      background: #222 url(../imgs/homepage-new/summit-moobile.jpg) no-repeat center center !important;
      background-position: 50% 75% !important;
  }
}

#homo-faber-section a.arrowdo span {
    position: absolute;
    bottom: 9%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin-left: -12px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: sdb10 1.5s infinite;
    animation: sdb10 1.5s infinite;
    box-sizing: border-box;
}

/* .videoHt {
    margin-top: 0% !important;
} */

@media only screen and (max-width: 767px){
  .section:nth-child(2) .c-hero-flex .c-hero-flex__item .see-more-btn {

      bottom: 0px !important;

  }

  h2.title-foundation{
    padding: 0 !important;

  }
  .section:nth-child(2) .c-hero-flex .c-hero-flex__item {
	    background: #222 url(../imgs/homepage-new/summit-paris-mobile.jpg) no-repeat center center !important;
	    padding-top: 0% !important;
	    padding-left: 8% !important;
	    padding-bottom: 18%;
	}
	ul.countdown li {
    	padding: 2em !important;
	}
}

@media only screen and (max-width: 640px) {
	.section:nth-child(2) .c-hero-flex .c-hero-flex__item {
	    background: #222 url(../imgs/homepage-new/summit-paris-mobile.jpg) no-repeat center center !important;
	    padding-top: 0% !important;
	    padding-left: 12% !important;
	    padding-bottom: 25%;
	}
	ul.countdown li {
    padding: 2em !important;
    font-size: 1.2rem !important;
	}
	ul.countdown li span {
	    font-size: 6.5rem !important;;
	}
}

@media only screen and (max-width: 480px) {
	.section:nth-child(2) .c-hero-flex .c-hero-flex__item {
	    background: #222 url(../imgs/homepage-new/summit-paris-mobile.jpg) no-repeat center center !important;
	    padding-top: 0% !important;
	    padding-left: 17% !important;
	    padding-bottom: 18%;
	}
	ul.countdown li {
    padding: 1em !important;
    font-size: 1.2rem !important;
	}
	ul.countdown li span {
	    font-size: 4.5rem !important;;
	}
}

@media only screen and (max-width: 360px) {
	.section:nth-child(2) .c-hero-flex .c-hero-flex__item {
	    background: #222 url(../imgs/homepage-new/summit-paris-mobile.jpg) no-repeat center center !important;
	    padding-top: 0% !important;
	    padding-left: 8% !important;
	    padding-bottom: 18%;
	}
	ul.countdown li {
    padding: 1em !important;
    font-size: 1.2rem !important;
	}
	ul.countdown li span {
	    font-size: 4.5rem !important;;
	}
}


.dropdown-menu{
  padding-top:0 !important;
}

.dark{
  transition: background-color 0.5s ease;
}

ul.countdown {
    display: inline-flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}
ul.countdown li {
    padding: 3em;
    text-transform: uppercase;
    font-size: 1.5rem;
}
ul.countdown li span {
    display: block;
    font-size: 9.5rem;
    font-family: 'Montserrat';
    font-weight: 300;
}
    </style>
@endsection

@section('head-style')
    {{-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.6/jquery.fullpage.css"> --}}
    {{-- <link rel="stylesheet" type="text/css" href="css/style.css"> --}}
    <link rel="stylesheet" type="text/css" href="{{ URL::asset('css/Fullpage/jquery.fullpage.css')}}">
    <link rel="stylesheet" type="text/css" href="{{ URL::asset('css/style.css')}}">

@endsection

@section('content')
<div id="homepage">
	<div class="row">
		<div class="scroll-inner">
			<div class="menu-lateral">
				<ul id="myMenu">
          <li data-menuanchor="foundation" class="active"><a href="#foundation"><i class="fa fa-circle"></i></a></li>
					{{-- <li data-menuanchor="foundation" class="active"><a href="#foundation"><i class="fa fa-circle"></i></a></li> --}}
          <li data-menuanchor="masterofcraftsmanship"><a href="#masterofcraftsmanship"><i class="fa fa-circle"></i></a></li>
					<li data-menuanchor="creativeminds"><a href="#creativeminds"><i class="fa fa-circle"></i></a></li>
					{{-- <li data-menuanchor="craftsmanship"><a href="#craftsmanship"><i class="fa fa-circle"></i></a></li> --}}
					
					<!-- <li data-menuanchor="workshopsandjobcareers"><a href="#workshopsandjobcareers"><i class="fa fa-circle"></i></a></li> -->
				</ul>
			</div>
			<div id="fullpage">
        <div class="section" id="homo-faber-section" data-anchor="foundation">
          <div class="c-hero-flex"> {{--  --}}
            <a class="dark" style="width:100%; height:100%; position:absolute; display:inline-block;background-image:linear-gradient(transparent 100%)!important;" href="https://www.covetfoundation.com/foundation/mission">  </a>
              <div class="c-hero-flex__item">
                <video data-autoplay loop id="videoplay" width="640" class="videoHt" controls style="display: block;" class="embed-responsive embed-responsive-16by9">
                  <source class="embed-responsive-item" id="videogo" src="../videos/brhands.mp4" type="video/mp4">
              </video>
              <div style="position:absolute;bottom:10%;left:10%;z-index:1; color:white" class="overlay text-left">
                      <h2 style="font-size:20px; line-height:30px;" class="title-foundation"><a href="https://www.covetfoundation.com/foundation/mission"><span style="padding: 2px 8px;background-color: #efc802;color: #000;">WE SUPPORT THOSE WHO DEVOTE THEMSELVES </span><br><span style="background-color: #efc802;padding: 2px 8px;color: #000;">to the excellence of craftsmanship</span></a></h2>
                      <div class="see-more-btn">
      						    	<a href="https://www.covetfoundation.com/foundation/mission">DISCOVER WHY +</a>

      						    </div>
                </div>
                <a class="arrowdo" href="#masterofcraftsmanship"><span></span></a>
              </div>
          </div>
        </div>
				<!-- <div class="section demo" id="section0" data-anchor="foundation">

  					<div class="c-hero-flex">
              <a style="width:100%; height:100%; position:absolute; display:inline-block;" href="https://www.covetfoundation.com/foundation/mission">  </a>
  						<div class="c-hero-flex__item">
  						    <!-- <h2 class="title-foundation">FOUNDATION</h2>
                  <h2 style="font-size:20px;" class="title-foundation">WE WANT TO CELEBRATE AND HONOUR THE CRAFTSMANSHIP</h2>
  						    <!-- <div class="excerpt-f">
  						    	<p>WE WANT TO CELEBRATE AND HONOUR THE CRAFTSMANSHIP.</p>
  						    </div>
  						    <div class="see-more-btn">
  						    	<a href="https://www.covetfoundation.com/foundation/mission">SEE MORE +</a>
  						    </div>
  						    <!-- <a class="arrowdo" href="#creativeminds"><span></span></a>
  						</div>
  					</div>

				</div> -->
        <div class="section" data-anchor="masterofcraftsmanship">
          <div class="c-hero-flex">
            <a class="dark" style="width:100%; height:100%; position:absolute; display:inline-block;background-image:linear-gradient(transparent 0%)!important;" href="http://designandcraftsmanship.com/?utm_source=covetfoundation&utm_medium=summit&utm_content=dynamic&utm_campaign=summitevent">  </a>
            <div class="c-hero-flex__item">
            	<ul class="countdown">
				    <li><span id="days"></span>days</li>
				    <li><span id="hours"></span>Hours</li>
				    <li><span id="minutes"></span>Minutes</li>
				    <li><span id="seconds"></span>Seconds</li>
				  </ul>
                {{-- <div style="position:absolute;bottom:10%;left:10%;z-index:1; color:white" class="overlay text-left">
                      <h2 style="font-size:20px; text-transform:uppercase;" class="title-foundation"><a href="https://designandcraftsmanship.com/" style="color: black"><span style="background-color: #ffde00;padding: 2px 8px;color: #000; line-height:30px;">SEE WHAT TO EXPECT</span></a></h2>
                      <div class="see-more-btn">
                        <a href="https://designandcraftsmanship.com/" style="color: black">DISCOVER MORE +</a>

                      </div>
                </div> --}}
            </div>
          </div>
        </div>
				<div class="section" id="section1" data-anchor="creativeminds">
					<div class="c-hero-flex">
            <a class="dark" style="width:100%; height:100%; position:absolute; display:inline-block;background-image:linear-gradient(transparent 100%)!important;" href="https://www.covetfoundation.com/foundation/mission">  </a>
						  <div class="c-hero-flex__item">
						    {{-- <h2 class="title-foundation">WHERE CREATIVE MINDS<br> AND ARTISANS MEET</h2>
						    <div class="see-more-btn btn-white">
						    	<a href="http://designandcraftsmanship.com/?utm_source=covetfoundation&utm_medium=summit&utm_content=dynamic&utm_campaign=summitevent" target="_blank">GET MORE INFO</a>
						    </div> --}}
						    <!-- <div class="see-more-btn">
						    	<a href="http://designandcraftsmanship.com/?utm_source=covetfoundation&utm_medium=summit&utm_content=dynamic&utm_campaign=summitevent">SEE MORE +</a>
						    </div> -->
                <div style="position:absolute;bottom:10%;left:10%; z-index:1; color:white" class="overlay text-left">
                        <h2 style="font-size:20px; text-transform:uppercase; text-align:left" class="title-foundation "><a href="https://www.covetfoundation.com/foundation/mission"><span style="background-color: #efc802;padding: 2px 8px;color: #000;line-height:30px;">We celebrate and honour the craftsmanship</span></a></h2>
                        <div class="see-more-btn">
                          <a href="https://www.covetfoundation.com/foundation/mission">KNOW OUR MISSION +</a>

                        </div>
                  </div>
						  </div>
					</div>
				</div>
				{{-- <div class="section" id="section2" data-anchor="craftsmanship">
					<div class="c-hero-flex">
            <a class="dark" style="width:100%; height:100%; position:absolute; display:inline-block; background-image:linear-gradient(transparent 100%)!important;" href="https://www.youtube.com/watch?v=_FUYtfmmInk">  </a>
						  <div class="c-hero-flex__item">
						    <video data-autoplay loop id="videoplay" width="640" class="videoHt" controls style="display: block;" class="embed-responsive embed-responsive-16by9">
							  	<source class="embed-responsive-item" id="videogo" src="../videos/brhands.mp4" type="video/mp4">
							</video>
              <div style="position:absolute;bottom:25%;left:10%;z-index:1; color:white" class="overlay text-left">
                      <h2 style="font-size:20px; text-transform:uppercase;" class="title-foundation"><span style="background-color: #ffde00;padding: 2px 8px;color: #000; line-height:30px;">A Tribute To All Makers</span></h2>
                      <div class="see-more-btn">
      						    	<a href="https://www.youtube.com/watch?v=_FUYtfmmInk">WATCH FULL VIDEO +</a>

      						    </div>
                </div>
						  </div>
					</div>
				</div> --}}
				
				<!-- <div class="section" data-anchor="workshopsandjobcareers">
					<div class="c-hero-flex">
            <a style="width:100%; height:100%; position:absolute; display:inline-block;" href="https://www.covetfoundation.com/training-programme/training-and-careers-oportunities">  </a>
						<div class="c-hero-flex__item">
						    <h2 class="title-foundation">WORKSHOPS AND JOB CAREERS</h2>
						    <div class="excerpt-f">
						    	<p>FIND OUT THE OPPORTUNITY TO LEARN IN WORK-BASED METHOD <br>
						    		AND INTERNATIONAL ENVIRONMENT.</p>
						    </div>
						    <div class="see-more-btn">
						    	<a href="https://www.covetfoundation.com/training-programme/training-and-careers-oportunities">SEE MORE +</a>
						    </div>
						</div>
					</div>
				</div> -->
				@include('includes.footer-black')
			</div>
		</div>
	</div>
</div>
@endsection

@section('foot')

{{-- <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.6/jquery.fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.6/vendors/jquery.easings.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.6/vendors/scrolloverflow.js"></script> --}}

<script src="{{ URL::asset('js/Fullpage/jquery.fullpage.js')}}"></script>
<script src="{{ URL::asset('js/Fullpage/jquery.easings.min.js')}}"></script>
<script src="{{ URL::asset('js/Fullpage/scrolloverflow.js')}}"></script>


<script type="text/javascript">

$(document).ready(function() {

  $('.nav .dropdown a').hover(function(){
    $('.dark').css("background","rgba(0,0,0,0.5)");
  }, function(){
    $('.dark').css({"background":"linear-gradient(transparent 100%, black)"});
  });

	$('#fullpage').fullpage({
		anchors: ['foundation', 'masterofcraftsmanship', 'creativeminds'],
		menu: '#myMenu'
	});
	$('#footer').addClass('fp-auto-height');

	const second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;

let countDown = new Date('Jan 18, 2019 00:00:00').getTime(),
    x = setInterval(function() {

      let now = new Date().getTime(),
          distance = countDown - now;

      document.getElementById('days').innerText = Math.floor(distance / (day)),
        document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
        document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
        document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
      
      //do something later when date is reached
      //if (distance < 0) {
      //  clearInterval(x);
      //  'IT'S MY BIRTHDAY!;
      //}

    }, second)
});



//adding the action to the button
$(document).on('click', '#moveUp', function(){
		$.fn.fullpage.moveSectionUp();
});

var x = document.getElementById("videoplay");

function playVideo() {
	if(x.paused){
	    x.play();
	    x.style.display = "block";
	}else{
	    x.pause();
	}
}

</script>

@endsection