@extends('layouts.blog')
@section('title', 'Technoblog | About')
@section('blog_content')

	<div id="welcome" class="aboutWelcome">
		<div class="fullscreenBg">
			<video muted loop autoplay>
				<source src="{{ asset("assets/videos/aboutUsVideo.mp4") }}" type="video/mp4">
			</video>
		</div>

		<div class="aboutWelcomeContent">
			<img src="{{ asset("assets/images/logo.png") }}" style="width: 200px;">
			<br>
			<br>
			<span class="display-4 font-weight-bold text-light pl-3">Everything about technology.</span>
		</div>

		<a data-easing="linear" href="#about" class="elemWithTooltip scrollArrow scrollDownArrow scrollBtn" data-tooltip-info="top-More About us">
			<i class="fa fa-arrow-down" aria-hidden="true"></i>
		</a>
	</div>

	<a data-easing="linear" href="#welcome" class="elemWithTooltip scrollArrow scrollUpArrow scrollBtn" data-tooltip-info="top-Welcome to">
		<i class="fa fa-arrow-down" aria-hidden="true"></i>
	</a>

	<div id="about" class="aboutInfo" style="padding: 50px 0;">
		<span class="bottomBefore"></span>
		<div class="w-50 h-100 m-auto text-light aboutInfoContent">
			<h2 class="aboutUsHeader font-weight-bold text-center">About Us</h2>
			<p class="pl-5 pr-5 pt-4 font-weight-bold text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus bibendum nulla lacinia neque auctor placerat. Mauris sagittis leo ac dolor laoreet vestibulum. Proin eget elementum nisi. Mauris vel pretium sapien. Nullam scelerisque risus dolor, eu vestibulum ex elementum quis. Nulla in scelerisque est, in congue orci. Vestibulum sit amet nibh et est efficitur volutpat congue sit amet lacus.</p>
			<p class="pl-5 pr-5 pt-1 font-weight-bold text-justify">Donec aliquet vulputate sem quis lacinia. Ut tincidunt leo sapien, sit amet dignissim metus suscipit in. Nam hendrerit diam lacinia diam malesuada, ut posuere purus euismod. Pellentesque malesuada elit a ante sagittis, quis accumsan libero euismod. Curabitur consectetur ultricies est eu pellentesque.</p>
		</div>
	</div>

	<div class="aboutTeamMembers pt-5 pb-5" style="background: #374785;">
		<div class="w-75 container-fluid pt-5">
			<h2 class="aboutUsHeader pt-5 text-light text-center">Our Professionals</h2>
			<div class="row">

				<div class="pt-5 pb-5 col-md-4">
					<div class="teamMemberRounded">
						<img src="{{ asset("assets/images/team_members/1.png") }}">
						<div class="teamMemberOverlay">
							<p class="font-weight-bold text-light text-center">John Smith
								<br> Founder</p>
						</div>
					</div>
				</div>

				<div class="pt-5 pb-5 col-md-4">
					<div class="teamMemberRounded">
						<img src="{{ asset("assets/images/team_members/2.png") }}">
						<div class="teamMemberOverlay">
							<p class="font-weight-bold text-light text-center">Mike Moore
								<br> Project Manager</p>
						</div>
					</div>
				</div>

				<div class="pt-5 pb-5 col-md-4">
					<div class="teamMemberRounded">
						<img src="{{ asset("assets/images/team_members/3.png") }}">
						<div class="teamMemberOverlay">
							<p class="font-weight-bold text-light text-center">Jacob Smith
								<br> Back-end Developer</p>
						</div>
					</div>
				</div>

			</div>

			<div class="row">

				<div class="pt-5 pb-5 col-md-4">
					<div class="teamMemberRounded">
						<img src="{{ asset("assets/images/team_members/4.png") }}">
						<div class="teamMemberOverlay">
							<p class="font-weight-bold text-light text-center">Sarah Davis
								<br> Front-end Developer</p>
						</div>
					</div>
				</div>

				<div class="pt-5 pb-5 col-md-4">
					<div class="teamMemberRounded">
						<img src="{{ asset("assets/images/team_members/5.png") }}">
						<div class="teamMemberOverlay">
							<p class="font-weight-bold text-light text-center">Mary Hayes
								<br> Designer</p>
						</div>
					</div>
				</div>

				<div class="pt-5 pb-5 col-md-4">
					<div class="teamMemberRounded">
						<img src="{{ asset("assets/images/team_members/6.png") }}">
						<div class="teamMemberOverlay">
							<p class="font-weight-bold text-light text-center">Thomas Anderson
								<br> Editor</p>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>

	<div id="contact-us" class="aboutContact pt-5 pb-5">
		<div class="w-50 aboutContactContent m-auto">
			<h2 class="aboutUsHeader pt-5 text-light text-center">Contact with us</h2>
			<form style="max-width: 640px;" class="w-100 pt-5 pb-5 m-auto" method="post" action="">
				<div class="container-fluid pb-4">
					<div class="row">
						<div class="col-md-4 text-center text-light">
							<i class="fa fa-mobile pr-1" aria-hidden="true"></i> <span class="formInfo">000-000-0000</span>
						</div>
						<div class="col-md-4 text-center text-light">
							<i class="fa fa-map-marker pr-1" aria-hidden="true"></i> <span class="formInfo">Silicon Valley</span>
						</div>
						<div class="col-md-4 text-center text-light">
							<i class="fa fa-envelope pr-1" aria-hidden="true"></i> <span class="formInfo">hello@technoblog.com</span>
						</div>
					</div>
				</div>
				<div class="form-group">
					<input type="text" class="form-control" placeholder="Name" autocomplete="off" required>
				</div>
				<div class="form-group">
					<input type="email" class="form-control" placeholder="E-mail" autocomplete="off" required>
				</div>
				<div class="form-group">
					<textarea class="w-100" rows="4" style="resize: none;" required></textarea>
				</div>
				<input type="submit" class="btn btn-primary btn-block" value="Submit">
			</form>
		</div>
	</div>

@endsection