@extends('template.landing')
@section('title')
@section('main')
<style type="text/css">
	/*light*/
	/* #e4fffd */
	/* #35bab2 */
	/* 30a69f */

	/* dark */
	/* #03192e */
	/* #ffa84a */
	/* de8a1d */
	.about{
		font-family: arial;
	}
	ul.brand-about li{
		display: inline-block;
	}
	ul.brand-about{
		margin-left: -10%;
	}
	.a-about:hover{
		filter: contrast(120%);
	}
	@media screen and (max-width: 576px)
	{
		.about h6{
			text-align: justify;
		}
	}
	@media screen and (min-width: 992px)
	{
		.about h6{
			text-align: justify;
		}
		ul.brand-about{
			margin-left: -22%;
		}
	}
	section.dark .about,
	section.dark .blog{
		background-color: #ffa84a;
		transition: .5s;
		color: #fff;
	}
	section.light .about,
	section.light .blog{
		background-color: #35bab2;
		transition: .5s;
		color: #fff;
	}
	section.dark .hero-image,
	section.dark .a-about{
		background-color: #de8a1d;	
		color: #fff;
		transition: .5s;
	}
	section.light .hero-image,
	section.light .a-about{
		background-color: #30a69f;	
		color: #fff;
		transition: .5s;
	}	
	section.dark .achievement,
	section.dark .portfolio{
		background-color: #03192e;
		color: #fff;
	}
	section.dark .prestasi{
		background-color: #ffa84a;
		border: 1px solid #ffa84a;
		height: 3px;
		margin: 0 45%;
		transition: .5s;
		opacity: 200%;
	}
	section.light .prestasi{
		opacity: 200%;
		background-color: #35bab2;
		border: 1px solid #35bab2;
		height: 3px;
		margin: 0 45%;
		transition: .5s;
	}
	section.dark .prestasiblog{
		background-color: #fff;
		border: 1px solid #fff;
		height: 3px;
		margin: 0 45%;
		transition: .5s;
		opacity: 200%;
	}
	section.light .prestasiblog{
		opacity: 200%;
		background-color: #fff;
		border: 1px solid #fff;
		height: 3px;
		margin: 0 45%;
		transition: .5s;
	}
	section.light ul.brand-about li{
		color: #0f756f;
		background-color: #30a69f;
		transition: .5s;
	}
	section.dark ul.brand-about li{
		color: #aa5604;	
		background-color: #dd891d;
		transition: .5s;
	}
	@media screen and (max-width:  576px){
		.ini-prestasinya{
			margin-left: 5%;
			width: 90%;
			height: 240px;
			overflow: hidden;
			border-radius: 20px;
		}
	}
	@media screen and (min-width:  576px){
		.ini-prestasinya{
			margin-left: 20%;
			width: 60%;
			height: 240px;
			overflow: hidden;
			border-radius: 20px;
		}
	}
	@media screen and (min-width:  992px){
		.ini-prestasinya{
			margin-left: 35%;
			width: 30%;
			height: 240px;
			overflow: hidden;
			border-radius: 20px;
		}
	}
	.ini-prestasinya img{
		object-position: center;
		cursor: pointer;
		transition: .5s;
	}
	.buka img:hover{
		filter: contrast(50%);
		transition: .5s;
	}
	.porto img:hover{
		filter: contrast(50%);
		transition: .5s;	
	}
	.ini-prestasinya label{
		/*display: none;*/
	}
	.thumbnail h5, .ini-prestasinya h5{
		color: #000;
	}
	

	
</style>
<section class="dark" id="section">
	@foreach($tentang as $ttg)
	<div class="hero" id="home">
		<div class="abs-hero">
			<div class="cover-bounce">
						        <ul>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		        </ul>
		    			        <ul>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		        </ul>
		    			        <ul>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		        </ul>
		    			        <ul>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		        </ul>
		    			        <ul>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		        </ul>
		    			        <ul>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		        </ul>
		    			        <ul>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		        </ul>
		    			        <ul>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		          <li class="fill-current"></li>
		        </ul>
		    			    </div>
    	</div>
    	<div class="rot-hero d-lg-none">
			<div class="cover-rotate">
						          <div class="fill-current-rot"></div>
		    			          <div class="fill-current-rot"></div>
		    			          <div class="fill-current-rot"></div>
		    			          <div class="fill-current-rot"></div>
		    			          <div class="fill-current-rot"></div>
		    			          <div class="fill-current-rot"></div>
		    			          <div class="fill-current-rot"></div>
		    			          <div class="fill-current-rot"></div>
		    			          <div class="fill-current-rot"></div>
		    			          <div class="fill-current-rot"></div>
		    			          <div class="fill-current-rot"></div>
		    			          <div class="fill-current-rot"></div>
		    			          <div class="fill-current-rot"></div>
		    			          <div class="fill-current-rot"></div>
		    			          <div class="fill-current-rot"></div>
		    			          <div class="fill-current-rot"></div>
		    			          <div class="fill-current-rot"></div>
		    			          <div class="fill-current-rot"></div>
		    			          <div class="fill-current-rot"></div>
		    			          <div class="fill-current-rot"></div>
		    			    </div>
    	</div>
		<div class="content-home pt-lg-5 pt-md-5 pt-3">
			<div class="mt-lg-5 mt-lg-4 mt-3 ms-lg-5 ms-md-4 me-lg-5 me-md-4 ms-0 float-start col-lg-5 col-md-5">
				<p class="pt-lg-1 pt-md-3 mt-md-3">Halo, saya</p>
				<h1><strong>{{$ttg->nama}}</strong></h1>
				<p class="mb-3">{{$ttg->profesi}}</p>
				<a href="#about" class="pt-2 pb-2 ps-3 pe-3 rounded-pill">Selengkapnya</a>
			</div>
			<div class="ms-lg-5 pt-lg-4 mt-3 ms-md-4 me-lg-5 me-md-4 ms-0 float-start col-lg-3 col-md-3">
				<div class="cover-home ms-lg-5">
					<div class="hero-image"></div>
					<img src="{{ asset('mystyle/image/'.$ttg->foto_home) }}" width="90%">
				</div>
			</div>
			<div class="clearfix"></div>
			<br /><br /><br />
		</div>
	</div>
	<div class="about" id="about">
		<div class="content-home">
			<div class="mt-lg-5 mt-lg-4 mt-3 ms-lg-5 ms-md-4 me-lg-5 me-md-4 ms-0 float-start col-lg-4 col-md-4">
				<div class="cover-home ms-lg-5 ms-md-3 ms-4">
					<div class="hero-image"></div>
					<img src="{{ asset('mystyle/image/'.$ttg->foto_about) }}" width="90%">
				</div>
				<div style="width: 100%; text-align: center;">
					<ul class="brand-about mt-3">
						<a href="{{$ttg->link_blog}}"><li class="rounded-circle me-1"><i class="fa-brands fa-blogger-b p-2"></i></li></a>
						<a href="{{$ttg->link_instagram}}"><li class="rounded-circle ms-1 me-1"><i class="fa-brands fa-instagram p-2"></i></li></a>
						<a href="{{$ttg->link_twitter}}"><li class="rounded-circle ms-1 me-1"><i class="fa-brands fa-twitter p-2"></i></li></a>
						<a href="{{$ttg->link_facebook}}"><li class="rounded-circle ms-1 me-1"><i class="fa-brands fa-facebook p-2"></i></li></a>
						<a href="{{$ttg->link_linkedin}}"><li class="rounded-circle ms-1"><i class="fa-brands fa-linkedin p-2"></i></li></a>

					</ul>
				</div>
			</div>
			<div class="ms-lg-5 pt-lg-4 mt-3 ms-md-4 me-lg-5 me-md-4 ms-0 float-start col-lg-5 col-md-5">
				<h2 class="text-light"><strong>ABOUT</strong></h2>
				<h6 style="font-size: 110%; font-weight: normal;" class="text-light">
					{{$ttg->tentang}}
				</h6>
				<br>
				<a class="a-about pt-2 pb-2 ps-3 pe-3 rounded-pill me-2" href="{{$ttg->link_cv}}">Download CV</a>
				<a class="a-about pt-2 pb-2 ps-3 pe-3 rounded-pill" href="#contact">Hire Me</a>
				
			</div>
			<div class="clearfix"></div>
			<br /><br /><br />
		</div>
	</div>
	@endforeach
	<div class="achievement pt-5" id="achievement">
		<div class="text-center">
			<h1><strong>Achievement</strong></h1>
			<hr class="prestasi">
			<div class="mt-4 ini-prestasinya">
				@foreach($prestasi as $pres)
				<div style="position: relative; height: 240px;" class="buka" id="{{ $pres->id }}" data-bs-toggle="modal" data-bs-target="#exampleModal{{$pres->id}}">
					<img id="img{{$pres->id}}" src="{{ asset('mystyle/image/prestasi/'.$pres->foto) }}" width="100%" >
				</div>
				<div class="modal fade" id="exampleModal{{$pres->id}}" tabindex="-1" aria-labelledby="exampleModalLabel{{$pres->id}}" aria-hidden="true">
				  <div class="modal-dialog">
				    <div class="modal-content">
				      <div class="modal-header">
				        <h5 class="modal-title" id="exampleModalLabel{{$pres->id}}">{{$pres->nama}}</h5>
				        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				      </div>
				      <div class="modal-body">
				        <img id="img{{$pres->id}}" src="{{ asset('mystyle/image/prestasi/'.$pres->foto) }}" width="100%" >
				      </div>
				      <div class="modal-footer">
				        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
				      </div>
				    </div>
				  </div>
				</div>
				@endforeach
			</div>
		</div>
	</div>
	<div class="portfolio pt-5" id="portfolio">
		<div class="text-center">
			<h1><strong>Portfolio</strong></h1>
			<hr class="prestasi">
			<div class="mt-4">
				<a id="cekall" style="cursor: pointer;" class="ps-3 pe-3 pt-1 pb-1 rounded-pill active" onclick="cekport(1)">ALL</a>
				<a id="cekadobe" style="cursor: pointer;" class="ps-3 pe-3 pt-1 pb-1 rounded-pill" onclick="cekport(2)">ADOBE ILUSTRATOR</a>
				<a id="cekphotoshop" style="cursor: pointer;" class="ps-3 pe-3 pt-1 pb-1 rounded-pill" onclick="cekport(3)">PHOTOSHOP</a>
				<a id="cekafter" style="cursor: pointer;" class="ps-3 pe-3 pt-1 pb-1 rounded-pill" onclick="cekport(4)">AFTER EFFECT</a>
				<a id="cekpremier" style="cursor: pointer;" class="ps-3 pe-3 pt-1 pb-1 rounded-pill" onclick="cekport(5)">PREMIER PRO</a>
				<a id="cekwebapp" style="cursor: pointer;" class="ps-3 pe-3 pt-1 pb-1 rounded-pill" onclick="cekport(6)">WEB APP</a>
				<a id="cekmobileapp" style="cursor: pointer;" class="ps-3 pe-3 pt-1 pb-1 rounded-pill" onclick="cekport(7)">MOBILE APP</a>
			</div>
			<div class="mt-3">
				<div class="thumbnail" id="all">
					<div class="container">
						@foreach($porto as $por)
						<div style="cursor: pointer" class="porto float-start col-12 col-lg-3 col-md-4 col-12" data-bs-toggle="modal" data-bs-target="#exampleModal1{{$por->id}}">
							<div class="m-lg-4 m-md-3 m-2 cover-thumbnail">
								<img src="{{ asset('mystyle/image/portofolio/'.$por->thumbnail) }}" width="100%">
							</div>
						</div>
						<div class="modal fade" id="exampleModal1{{$por->id}}" tabindex="-1" aria-labelledby="exampleModal1Label{{$por->id}}" aria-hidden="true">
						  <div class="modal-dialog">
						    <div class="modal-content">
						      <div class="modal-header">
						        <h5 class="modal-title" id="exampleModal1Label{{$por->id}}">{{$por->judul}}</h5>
						        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						      </div>
						      <div class="modal-body">
						        <img src="{{ asset('mystyle/image/portofolio/'.$por->thumbnail) }}" width="100%" >
						      </div>
						      <div class="modal-footer">
						        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
						      </div>
						    </div>
						  </div>
						</div>
						@endforeach
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="thumbnail d-none" id="adobe">
					<div class="container">
						@foreach($porto1 as $por)
						<div style="cursor: pointer" class="porto float-start col-12 col-lg-3 col-md-4 col-12" data-bs-toggle="modal" data-bs-target="#exampleModal2{{$por->id}}">
							<div class="m-lg-4 m-md-3 m-2 cover-thumbnail">
								<img src="{{ asset('mystyle/image/portofolio/'.$por->thumbnail) }}" width="100%">
							</div>
						</div>
						<div class="modal fade" id="exampleModal2{{$por->id}}" tabindex="-1" aria-labelledby="exampleModal2Label{{$por->id}}" aria-hidden="true">
						  <div class="modal-dialog">
						    <div class="modal-content">
						      <div class="modal-header">
						        <h5 class="modal-title" id="exampleModal2Label{{$por->id}}">{{$por->judul}}</h5>
						        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						      </div>
						      <div class="modal-body">
						        <img src="{{ asset('mystyle/image/portofolio/'.$por->thumbnail) }}" width="100%" >
						      </div>
						      <div class="modal-footer">
						        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
						      </div>
						    </div>
						  </div>
						</div>
						@endforeach
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="thumbnail d-none" id="photoshop">
					<div class="container">
						@foreach($porto2 as $por)
						<div style="cursor: pointer" class="porto float-start col-12 col-lg-3 col-md-4 col-12" data-bs-toggle="modal" data-bs-target="#exampleModal3{{$por->id}}">
							<div class="m-lg-4 m-md-3 m-2 cover-thumbnail">
								<img src="{{ asset('mystyle/image/portofolio/'.$por->thumbnail) }}" width="100%">
							</div>
						</div>
						<div class="modal fade" id="exampleModal3{{$por->id}}" tabindex="-1" aria-labelledby="exampleModal3Label{{$por->id}}" aria-hidden="true">
						  <div class="modal-dialog">
						    <div class="modal-content">
						      <div class="modal-header">
						        <h5 class="modal-title" id="exampleModal3Label{{$por->id}}">{{$por->judul}}</h5>
						        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						      </div>
						      <div class="modal-body">
						        <img src="{{ asset('mystyle/image/portofolio/'.$por->thumbnail) }}" width="100%" >
						      </div>
						      <div class="modal-footer">
						        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
						      </div>
						    </div>
						  </div>
						</div>
						@endforeach
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="thumbnail d-none" id="after">
					<div class="container">
						@foreach($porto3 as $por)
						<div style="cursor: pointer" class="porto float-start col-12 col-lg-3 col-md-4 col-12" data-bs-toggle="modal" data-bs-target="#exampleModal4{{$por->id}}">
							<div class="m-lg-4 m-md-3 m-2 cover-thumbnail">
								<img src="{{ asset('mystyle/image/portofolio/'.$por->thumbnail) }}" width="100%">
							</div>
						</div>
						<div class="modal fade" id="exampleModal4{{$por->id}}" tabindex="-1" aria-labelledby="exampleModal4Label{{$por->id}}" aria-hidden="true">
						  <div class="modal-dialog">
						    <div class="modal-content">
						      <div class="modal-header">
						        <h5 class="modal-title" id="exampleModal4Label{{$por->id}}">{{$por->judul}}</h5>
						        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						      </div>
						      <div class="modal-body">
						        <img src="{{ asset('mystyle/image/portofolio/'.$por->thumbnail) }}" width="100%" >
						      </div>
						      <div class="modal-footer">
						        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
						      </div>
						    </div>
						  </div>
						</div>
						@endforeach
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="thumbnail d-none" id="premier">
					<div class="container">
						@foreach($porto4 as $por)
						<div style="cursor: pointer" class="porto float-start col-12 col-lg-3 col-md-4 col-12" data-bs-toggle="modal" data-bs-target="#exampleModal5{{$por->id}}">
							<div class="m-lg-4 m-md-3 m-2 cover-thumbnail">
								<img src="{{ asset('mystyle/image/portofolio/'.$por->thumbnail) }}" width="100%">
							</div>
						</div>
						<div class="modal fade" id="exampleModal5{{$por->id}}" tabindex="-1" aria-labelledby="exampleModal5Label{{$por->id}}" aria-hidden="true">
						  <div class="modal-dialog">
						    <div class="modal-content">
						      <div class="modal-header">
						        <h5 class="modal-title" id="exampleModal5Label{{$por->id}}">{{$por->judul}}</h5>
						        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						      </div>
						      <div class="modal-body">
						        <img src="{{ asset('mystyle/image/portofolio/'.$por->thumbnail) }}" width="100%" >
						      </div>
						      <div class="modal-footer">
						        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
						      </div>
						    </div>
						  </div>
						</div>
						@endforeach
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="thumbnail d-none" id="webapp">
					<div class="container">
						@foreach($porto5 as $por)
						<div style="cursor: pointer" class="porto float-start col-12 col-lg-3 col-md-4 col-12" data-bs-toggle="modal" data-bs-target="#exampleModal6{{$por->id}}">
							<div class="m-lg-4 m-md-3 m-2 cover-thumbnail">
								<img src="{{ asset('mystyle/image/portofolio/'.$por->thumbnail) }}" width="100%">
							</div>
						</div>
						<div class="modal fade" id="exampleModal6{{$por->id}}" tabindex="-1" aria-labelledby="exampleModal6Label{{$por->id}}" aria-hidden="true">
						  <div class="modal-dialog">
						    <div class="modal-content">
						      <div class="modal-header">
						        <h5 class="modal-title" id="exampleModal6Label{{$por->id}}">{{$por->judul}}</h5>
						        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						      </div>
						      <div class="modal-body">
						        <img src="{{ asset('mystyle/image/portofolio/'.$por->thumbnail) }}" width="100%" >
						      </div>
						      <div class="modal-footer">
						        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
						      </div>
						    </div>
						  </div>
						</div>
						@endforeach
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="thumbnail d-none" id="mobileapp">
					<div class="container">
						@foreach($porto6 as $por)
						<div style="cursor: pointer" class="porto float-start col-12 col-lg-3 col-md-4 col-12" data-bs-toggle="modal" data-bs-target="#exampleModal7{{$por->id}}">
							<div class="m-lg-4 m-md-3 m-2 cover-thumbnail">
								<img src="{{ asset('mystyle/image/portofolio/'.$por->thumbnail) }}" width="100%">
							</div>
						</div>
						<div class="modal fade" id="exampleModal7{{$por->id}}" tabindex="-1" aria-labelledby="exampleModal7Label{{$por->id}}" aria-hidden="true">
						  <div class="modal-dialog">
						    <div class="modal-content">
						      <div class="modal-header">
						        <h5 class="modal-title" id="exampleModal7Label{{$por->id}}">{{$por->judul}}</h5>
						        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
						      </div>
						      <div class="modal-body">
						        <img src="{{ asset('mystyle/image/portofolio/'.$por->thumbnail) }}" width="100%" >
						      </div>
						      <div class="modal-footer">
						        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
						      </div>
						    </div>
						  </div>
						</div>
						@endforeach
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="blog pt-5" id="blog">
		<div class="text-center">
			<h1><strong>Blog</strong></h1>
			<hr class="prestasiblog">
			<div class="content-blog">
				@foreach($blog as $b)
				<div class="float-start col-lg-3 col-md-6 col-12">
					<div class="m-3" style="overflow: hidden; border-radius: 20px; text-align: left; border: 1px solid #fff">
						<img src="{{ asset('mystyle/image/blog/'.$b->featured_image) }}" width="100%" height="220px" style="border-radius: 20px;">
						<h4 class="mt-2 ps-2 pe-2"><strong>{{ $b->judul }}</strong></h4>
						<a class="ms-2 me-2 mb-2 btn baca" href="/blog/read/{{ $b->id }}">Baca Selengkapnya</a>
					</div>
				</div>
				@endforeach
				<div class="clearfix"></div>
				<div class="text-center">
					<a class="ms-2 me-2 mb-2 btn baca" href="/blog">Lihat Semua Blog</a>
				</div>
			</div>
		</div>
	</div>
	<div class="testimonial pt-5" id="testimonial">
		<div class="text-center container">
			<h1><strong>Testimonials</strong></h1>
			<hr class="prestasi">
			<div class="content-blog ms-lg-5 me-lg-5 ms-md-3 me-md-3 ms-2 me-2">
				@foreach($testi as $test)
				<div class="float-start col-lg-3 col-md-6 col-12">
					<div class="m-3">
						<div>
							<img src="{{ asset('mystyle/image/testimoni/'.$test->foto) }}" style="height: 75px; width: 75px; border-radius: 50%; ">
						</div>
						<div class="text-testi ps-3 pe-3">
							"{{$test->pesan}}"<br /><br />
							<strong>{{$test->nama}}</strong><br />
							<small style="font-size: 80%"><em>{{$test->title}}</em></small><br /><br />
						</div>
					</div>
				</div>
				@endforeach
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<div class="contact pt-5 pb-5" id="contact">
		<div class="text-center">
			<h1><strong>Contact</strong></h1>
			<hr class="prestasi">
			<div class="content-blog ms-lg-5 me-lg-5 ms-md-3 me-md-3 ms-2 me-2 mt-3">
				<form style="text-align: justify;" action="{{ route('pesanstore') }}" method="post">
					@csrf
					<div class="form float-start col-lg-6 col-md-6 col-12">
						<div class="form-group ms-2 me-2 mt-1">
							<h6><label><strong>Name</strong></label></h6>
							<input type="text" name="name" class="form-control" required>
						</div>
						<div class="form-group ms-2 me-2 mt-3">
							<h6><label><strong>Email</strong></label></h6>
							<input type="email" name="email" class="form-control" required>
						</div>
						<div class="form-group ms-2 me-2 mt-3">
							<h6><label><strong>Subject</strong></label></h6>
							<input type="text" name="subject" class="form-control" required>
						</div>
						<div class="form-group ms-2 me-2 mt-3">
							<h6><label><strong>Whataspp</strong></label></h6>
							<input type="number" name="Whataspp" class="form-control" required>
						</div>
					</div>
					<div class="form float-start col-lg-6 col-md-6 col-12">
						<div class="form-group ms-2 me-2 mt-2">
							<h6><label><strong>Message</strong></label></h6>
							<textarea name="pesan" class="form-control" rows="11" required></textarea>
						</div>
					</div>
					<div class="clearfix"></div>
					<div class="form float-end col-lg-4 col-md-4 col-12 text-end mt-3">
						<button style="border: none;" type="submit" class="pt-1 pb-1 pe-3 ps-3 rounded-pill text-contact" >SUBMIT</button>
					</div>
					<div class="form float-end col-lg-8 col-md-8 col-12">
						<div class="ms-2 mt-3 alamat">
							@foreach($tentang as $ttg)
			              	<i class="fas fa-phone me-2 mt-3"></i>{{ $ttg->telepon }}<br />
			              	<i class="fas fa-envelope me-2 mt-3"></i>{{ $ttg->email }}<br />
			              	<i class="fa-solid fa-map-location-dot me-2 mt-3"></i>{{ $ttg->alamat }}<br />
			              	@endforeach
						</div>
					</div>
					<div class="clearfix"></div>
				</form>
			</div>
		</div>
	</div>
</section>

<script type="text/javascript">
	let all = document.getElementById('all');
	let adobe = document.getElementById('adobe');
	let photoshop = document.getElementById('photoshop');
	let after = document.getElementById('after');
	let premier = document.getElementById('premier');
	let webapp = document.getElementById('webapp');
	let mobileapp = document.getElementById('mobileapp');

	let cekall = document.getElementById('cekall');
	let cekadobe = document.getElementById('cekadobe');
	let cekphotoshop = document.getElementById('cekphotoshop');
	let cekafter = document.getElementById('cekafter');
	let cekpremier = document.getElementById('cekpremier');
	let cekwebapp = document.getElementById('cekwebapp');
	let cekmobileapp = document.getElementById('cekmobileapp');

	function cekport(values)
	{
		if(values == 1){
			cekall.classList.add('active')
			all.classList.remove('d-none')

			cekadobe.classList.remove('active')
			adobe.classList.add('d-none')

			cekphotoshop.classList.remove('active')
			photoshop.classList.add('d-none')

			cekafter.classList.remove('active')
			after.classList.add('d-none')

			cekpremier.classList.remove('active')
			premier.classList.add('d-none')

			cekwebapp.classList.remove('active')
			webapp.classList.add('d-none')

			cekmobileapp.classList.remove('active')
			mobileapp.classList.add('d-none')
		} else if(values == 2){
			cekall.classList.remove('active')
			all.classList.add('d-none')

			cekadobe.classList.add('active')
			adobe.classList.remove('d-none')

			cekphotoshop.classList.remove('active')
			photoshop.classList.add('d-none')

			cekafter.classList.remove('active')
			after.classList.add('d-none')

			cekpremier.classList.remove('active')
			premier.classList.add('d-none')

			cekwebapp.classList.remove('active')
			webapp.classList.add('d-none')

			cekmobileapp.classList.remove('active')
			mobileapp.classList.add('d-none')
		} else if(values == 3){
			cekall.classList.remove('active')
			all.classList.add('d-none')

			cekadobe.classList.remove('active')
			adobe.classList.add('d-none')

			cekphotoshop.classList.add('active')
			photoshop.classList.remove('d-none')

			cekafter.classList.remove('active')
			after.classList.add('d-none')

			cekpremier.classList.remove('active')
			premier.classList.add('d-none')

			cekwebapp.classList.remove('active')
			webapp.classList.add('d-none')

			cekmobileapp.classList.remove('active')
			mobileapp.classList.add('d-none')
		} else if(values == 4){
			cekall.classList.remove('active')
			all.classList.add('d-none')

			cekadobe.classList.remove('active')
			adobe.classList.add('d-none')

			cekphotoshop.classList.remove('active')
			photoshop.classList.add('d-none')

			cekafter.classList.add('active')
			after.classList.remove('d-none')

			cekpremier.classList.remove('active')
			premier.classList.add('d-none')

			cekwebapp.classList.remove('active')
			webapp.classList.add('d-none')

			cekmobileapp.classList.remove('active')
			mobileapp.classList.add('d-none')
		} else if(values == 5){
			cekall.classList.remove('active')
			all.classList.add('d-none')

			cekadobe.classList.remove('active')
			adobe.classList.add('d-none')

			cekphotoshop.classList.remove('active')
			photoshop.classList.add('d-none')

			cekafter.classList.remove('active')
			after.classList.add('d-none')

			cekpremier.classList.add('active')
			premier.classList.remove('d-none')

			cekwebapp.classList.remove('active')
			webapp.classList.add('d-none')

			cekmobileapp.classList.remove('active')
			mobileapp.classList.add('d-none')
		} else if(values == 6){
			cekall.classList.remove('active')
			all.classList.add('d-none')

			cekadobe.classList.remove('active')
			adobe.classList.add('d-none')

			cekphotoshop.classList.remove('active')
			photoshop.classList.add('d-none')

			cekafter.classList.remove('active')
			after.classList.add('d-none')

			cekpremier.classList.remove('active')
			premier.classList.add('d-none')

			cekwebapp.classList.add('active')
			webapp.classList.remove('d-none')

			cekmobileapp.classList.remove('active')
			mobileapp.classList.add('d-none')
		} else if(values == 7){
			cekall.classList.remove('active')
			all.classList.add('d-none')

			cekadobe.classList.remove('active')
			adobe.classList.add('d-none')

			cekphotoshop.classList.remove('active')
			photoshop.classList.add('d-none')

			cekafter.classList.remove('active')
			after.classList.add('d-none')

			cekpremier.classList.remove('active')
			premier.classList.add('d-none')

			cekwebapp.classList.remove('active')
			webapp.classList.add('d-none')

			cekmobileapp.classList.add('active')
			mobileapp.classList.remove('d-none')
		}
	}
</script>
@endsection

@section('script')
	
@endsection