@extends('layouts.auth')
<style>
  *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;}

       
       img {
         width: auto;
         height: 50%;
         position: absolute;
         bottom: 0;
         left: 0;
         
         
         margin: auto;
         
       }


.callouts {
  list-style-type: none;
}

li + li {
  margin-left: 15%;
}

/* BASE STYLES FOR EACH */
.callouts li {
  display: inline-block;
  /* Real styles */
  position: relative;
	width: 100%;
	height: 150px;
  padding: 15px;
  font-size:20px;
	background-color: #d2f4e8;
  border: 1px solid #c1c1c1;
	border-radius: 4px;
	box-shadow: 0 0 10px #c1c1c1;
}

/* BOTTOM */
.callouts--bottom:before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	left: 23px;
	bottom: -42px;
  border: 10px solid transparent;
  border-top: 32px solid rgb(193,193,193); /* IE8 Fallback */
  border-top: 32px solid rgba(193,193,193,0.5);
  z-index: 2;
}
.callouts--bottom:after {
  content: "";
	position: absolute;
	width: 0;
	height: 0;
	left: 25px;
	bottom: -31px;
  border: 8px solid transparent;
  border-top: 24px solid #d2f4e8;
  z-index: 3;
}
@media only screen and (max-width: 500px) {
    .hide-img{
        display:none !important;
		width:0;
		height:0;
		opacity:0;
		visibility: collapse
    }
}


       @media only screen and (min-device-width : 501px) and (max-width: 600px) {
         /* For phone: */
        .hide-img{
        display:none !important;
		width:0;
		height:0;
		opacity:0;
		visibility: collapse
    }
}

  /* BASE STYLES FOR EACH */
.callouts li {
  display: inline-block;
  /* Real styles */
  position: relative;
	width: 100%;
	height: 45%;
  padding: 15px;
  font-size:18px;
	color:#ffff;
	background-color: #36b9cc;
  border: 1px solid #c1c1c1;
	border-radius: 4px;
	box-shadow: 0 0 10px #c1c1c1;
}
}

@media only screen and (min-device-width : 600px) and (max-width: 992px) {
  /* For tablet: */
  img {
         width: auto;
         height: 30%;
         position: absolute;
         bottom: 0;
         left: 8%;        
         
         margin: auto;
         
       }

  /* BASE STYLES FOR EACH */
.callouts li {
  display: inline-block;
  /* Real styles */
  position: relative;
	width: 100%;
	height: 45%;
  padding: 15px;
  font-size:13px;
	color:#ffff;
	background-color: #36b9cc;
  border: 1px solid #c1c1c1;
	border-radius: 4px;
	box-shadow: 0 0 10px #c1c1c1;
}

}

@media only screen and (min-width: 992px) {
  /* For desktop: */
  img {
         width: auto;
         height: 50%;
         position: absolute;
         bottom: 0;
         left: 0;         
         
         margin: auto;
         
       }

  /* BASE STYLES FOR EACH */
.callouts li {
  display: inline-block;
  /* Real styles */
  position: relative;
	width: 100%;
	height: 30%;
  padding: 15px;
  
  font-size:16px;
  color:#ffff;
	background-color: #36b9cc;
  border: 1px solid #c1c1c1;
	border-radius: 4px;
	box-shadow: 0 0 10px #c1c1c1;
}

}

       </style>


@section('main-content')
<div class="container pb-3">
<div class="row">
  <div class="col-md-12">
  <h1 class="h5 mt-3  text-gray-100 font-weight-bold"><span id="blink"><i class="fa fa-circle text-success"></i></span>   AFRIKOT APP</h1>
</div>
</div>
</div>

<div class="container">

    <!-- Outer Row -->
    
    <ul class="callouts">
  
  <li class="callouts--bottom"><p>Aplikasi AFRIKOT (analisis faktor resiko ibu rekomendasi terpadu) adalah aplikasi yang membantu para bunda yang saat ini sedang hamil  untuk dapat  mengidentifikasi faktor  yang beresiko dapat mengganggu masa  kehamilan.</p> 
    <p>Aplikasi ini dilengkapi dengan rekomendasi terpadu bagi bunda  selama menjalani proses kehamilan</p></li>
  
</ul>




  
<img class="hide-img" src="{{ asset('img/Zuliani.png') }}" rel="popover" alt="description of myimage">

</div>

<style>
        #blink {
            transition: 0.5s;
        }
    </style>


<script type="text/javascript">
        var blink = document.getElementById('blink');
        setInterval(function() {
            blink.style.opacity = (blink.style.opacity == 0 ? 1 : 0);
        }, 1000);
    </script>
@endsection