@extends('layouts.web')

@section('contenido')
<style>
/* Banner */
    .banner .titulo-banner {
        position: absolute;
        left: 14%;
        top: 15px;
        z-index: 100; 
    }

    .banner .numero {
        display: inline;
        font-size: 50px;
        font-family: 'Baskeville Old Face';
        color: #aaa;
    }
    .banner .numero::after {
        z-index: 0;
        content: '';
        position: absolute;
        left: 0;
        top: 8px;
        display: inline-block;
        height: 100%;
        width: 75px;
        border-bottom: 2px solid #aaa;
        /* transition: 0.25s; */
    }

    .banner .texto {
        display: inline;
        margin-left: 20px;
        font-family: 'Century Gothic';
        font-size: 50px;
        font-weight: 600;
        letter-spacing: 8px;
    }
</style>

<section style="padding-top: 100px; padding-bottom: 80px;">
    <div class="container banner">
        <div class="row">
            <div class="col text-center">
                <div class="titulo-banner">
                    <h1 class="numero">0.1</h1>
                    <h1 class="texto">quiénes somos</h1>
                </div>
                {{-- <h1 class="titulo">
                    <span class="numero">0.1</span>
                    <span class="texto">quiénes somos</span>
                </h1> --}}
            </div>
        </div>
        <div class="row text-white" style="margin-top: 180px; font-size: 18px;">
            <div class="col-6 offset-lg-4">
                <p><i><strong>CostEar</strong> es un equipo facilitador de relaciones de integrantes del rubro construcciones. Nació de una necesidad ante la demanda de: agilizar la búsqueda, automatizar procesos, afianzar vínculos y poner precio, es decir, costear la obra que se quiere ejecutar.</i></p>
            </div>
        </div>
    </div>
</section>

<section style="height: 0px; position: relative;">
    <div style="width: 300px; overflow: hidden; position: relative; top: -240px; left: 10%;">
        <img src="{{ asset('img/textura-concreto.jpg') }}" alt="">
    </div>
</section>

<section style="background: #eee; padding-top: 80px; padding-bottom: 80px;">
    <div class="container">
        <div class="row">
            <div class="col text-center">
                <h1 class="titulo" style="color: #222; letter-spacing: 8px;">
                    <span class="texto">nuestra misión</span>
                </h1>
            </div>
        </div>
        <div class="row">
            <div class="col-6 offset-lg-4">
                <p style="font-size: 18px;">
                    <i>Desarrollar un sistema donde se genere un punto de encuentro, ofreciendo el servicio de publicidad para dar presencia en la web  e informatizar la modalidad de compra/venta on line.</i>
                </p>
            </div>
        </div>
    </div>
</section>

@endsection