Afinaciones
This commit is contained in:
@ -61,7 +61,8 @@ return [
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.4/themes/default/assets/fonts/icons.woff2',
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.4/themes/default/assets/fonts/outline-icons.woff',
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.4/themes/default/assets/fonts/outline-icons.woff2',
|
||||
'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;900&display=swap'
|
||||
'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;900&display=swap',
|
||||
'https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap'
|
||||
]
|
||||
]
|
||||
]
|
||||
|
@ -20,7 +20,7 @@ class Home {
|
||||
];
|
||||
$clientes = [];
|
||||
for ($i = 0; $i < 20; $i ++) {
|
||||
$clientes[$i] = '<div class="ui fluid placeholder"><div class="rectangular image"></div>' . $i . '</div>';
|
||||
$clientes[$i] = '<div class="ui fluid placeholder"><div class="circular image"></div>' . $i . '</div>';
|
||||
}
|
||||
|
||||
$testimonios = $this->loadData($container, 'testimonios');
|
||||
@ -29,13 +29,11 @@ class Home {
|
||||
if (!isset($evento->image)) {
|
||||
$evento->image = '<div class="ui fluid placeholder"><div class="rectangular image"></div></div>';
|
||||
}
|
||||
if (!isset($evento->servicio)) {
|
||||
$evento->servicio = mt_rand(0, count($servicios) - 1);
|
||||
}
|
||||
}
|
||||
/*$eventos = [
|
||||
(object) [
|
||||
'titulo' => '2da Corrida Famliar Inclusiva DIMERC',
|
||||
'image' => '<div class="ui fluid placeholder"><div class="rectangular image"></div></div>'
|
||||
]
|
||||
];*/
|
||||
|
||||
|
||||
return $view->render($response, 'home', compact('banner', 'servicios', 'frase', 'clientes', 'testimonios', 'eventos'));
|
||||
}
|
||||
|
@ -1,9 +0,0 @@
|
||||
#page_logo {
|
||||
font-family: Raleway, sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 2.2rem;
|
||||
color: #404041;
|
||||
}
|
||||
#page_logo .orange {
|
||||
color: #F26721;
|
||||
}
|
@ -41,9 +41,9 @@
|
||||
#clientes .header:first-child {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
#clientes .ci {
|
||||
display: flex;
|
||||
align-items: center
|
||||
#clientes #img_clientes .row {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
#testimonios {
|
||||
|
@ -2,6 +2,16 @@ body, .ui {
|
||||
font-family: Roboto, sans-serif !important;
|
||||
}
|
||||
|
||||
#page_logo {
|
||||
font-family: Raleway, sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 2.2rem;
|
||||
color: #404041;
|
||||
}
|
||||
#page_logo .orange {
|
||||
color: #F26721;
|
||||
}
|
||||
|
||||
footer {
|
||||
flex: none;
|
||||
color: white;
|
||||
@ -9,7 +19,7 @@ footer {
|
||||
font-family: Roboto;
|
||||
}
|
||||
footer .dark-grey {
|
||||
background-color: grey;
|
||||
background-color: #404041;
|
||||
}
|
||||
footer .grid {
|
||||
margin: 0 !important;
|
||||
|
@ -3,29 +3,33 @@
|
||||
CLIENTES
|
||||
</div>
|
||||
<div class="ui grid">
|
||||
<div class="column ci">
|
||||
<i class="left chevron big icon" id="left_arrow"></i>
|
||||
</div>
|
||||
<div class="fourteen wide column">
|
||||
<div class="ui center aligned stackable grid" id="img_clientes">
|
||||
<div class="row">
|
||||
@for ($i = 0; $i < min(10, count($clientes)); $i += 2)
|
||||
<div class="three wide column">
|
||||
{!!$clientes[$i]!!}
|
||||
</div>
|
||||
@endfor
|
||||
</div>
|
||||
<div class="row">
|
||||
@for ($i = 1; $i < min(10, count($clientes)); $i += 2)
|
||||
<div class="three wide column">
|
||||
{!!$clientes[$i]!!}
|
||||
</div>
|
||||
@endfor
|
||||
</div>
|
||||
<div class="two column row">
|
||||
<div class="left alined column ci">
|
||||
<i class="left chevron big icon" id="left_arrow"></i>
|
||||
</div>
|
||||
<div class="right aligned column ci">
|
||||
<i class="right chevron big icon" id="right_arrow"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column ci">
|
||||
<i class="right chevron big icon" id="right_arrow"></i>
|
||||
<div class="one column row">
|
||||
<div class="column">
|
||||
<div class="ui center aligned grid" id="img_clientes">
|
||||
<div class="row">
|
||||
@for ($i = 0; $i < min(12, count($clientes)); $i += 2)
|
||||
<div class="five wide tablet two wide computer column">
|
||||
{!!$clientes[$i]!!}
|
||||
</div>
|
||||
@endfor
|
||||
</div>
|
||||
<div class="row">
|
||||
@for ($i = 1; $i < min(12, count($clientes)); $i += 2)
|
||||
<div class="five wide tablet two wide computer column">
|
||||
{!!$clientes[$i]!!}
|
||||
</div>
|
||||
@endfor
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -38,34 +42,36 @@
|
||||
@endforeach
|
||||
]
|
||||
var current = 0
|
||||
var rows = 2
|
||||
var cols = 6
|
||||
function decreaseClientes() {
|
||||
$('#img_clientes').find('.row').find('.column:last-child').remove()
|
||||
current -= 2
|
||||
if (current < -8) {
|
||||
current = clientes.length - 10
|
||||
current -= rows
|
||||
if (current < - cols * rows) {
|
||||
current = clientes.length - (cols - 1) * rows
|
||||
}
|
||||
n = current
|
||||
if (n < 0) {
|
||||
n = clientes.length + n
|
||||
}
|
||||
$('#img_clientes').find('.row:first-child').prepend(
|
||||
$('<div></div>').attr('class', 'three wide column').append(clientes[n])
|
||||
$('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[n])
|
||||
)
|
||||
$('#img_clientes').find('.row:last-child').prepend(
|
||||
$('<div></div>').attr('class', 'three wide column').append(clientes[n + 1])
|
||||
$('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[n + 1])
|
||||
)
|
||||
}
|
||||
function increaseClientes() {
|
||||
$('#img_clientes').find('.row').find('.column:first-child').remove()
|
||||
current += 2
|
||||
if (current > clientes.length - 10) {
|
||||
current = -8
|
||||
if (current > clientes.length - cols * rows) {
|
||||
current = - (cols - 1) * rows
|
||||
}
|
||||
$('#img_clientes').find('.row:first-child').append(
|
||||
$('<div></div>').attr('class', 'three wide column').append(clientes[current + 8])
|
||||
$('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[current + (cols - 1) * rows])
|
||||
)
|
||||
$('#img_clientes').find('.row:last-child').append(
|
||||
$('<div></div>').attr('class', 'three wide column').append(clientes[current + 9])
|
||||
$('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes[current + cols * rows - 1])
|
||||
)
|
||||
}
|
||||
$(document).ready(function() {
|
||||
|
@ -8,7 +8,7 @@
|
||||
</div>
|
||||
<div class="ui stackable two columns grid">
|
||||
<div class="column">
|
||||
<form class="ui form" id="formulario" method="post" action="{{$urls->base}}/contacto">
|
||||
<form class="ui form" id="formulario_contacto" method="post" action="{{$urls->base}}/contacto">
|
||||
<div class="field">
|
||||
<input type="text" name="nombre" placeholder="Nombre" />
|
||||
</div>
|
||||
@ -35,7 +35,7 @@
|
||||
@push('scripts')
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$('#formulario').submit(function(e) {
|
||||
$('#formulario_contacto').submit(function(e) {
|
||||
e.preventDefault()
|
||||
|
||||
var nombre = $(this).find("[name='nombre']").val()
|
||||
|
@ -5,17 +5,17 @@
|
||||
</div>
|
||||
<div class="ui centered grid">
|
||||
<div class="center aligned column">
|
||||
<div class="ui tabular compact menu">
|
||||
<a class="active item" data-filter="none">Todos</a>
|
||||
<div class="ui tabular stackable compact menu">
|
||||
<a class="active item servicio" data-filter="none">Todos</a>
|
||||
@foreach ($servicios as $i => $servicio)
|
||||
<a class="item" data-filter="{{$i}}">{{$servicio->titulo}}</a>
|
||||
<a class="item servicio" data-filter="{{$i}}">{{$servicio->titulo}}</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui stackable center aligned grid">
|
||||
<div class="ui center aligned grid" id="eventos_cards">
|
||||
@foreach ($eventos as $evento)
|
||||
<div class="four wide column">
|
||||
<div class="eight wide tablet four wide computer column">
|
||||
<div class="ui basic segment">
|
||||
{!!$evento->image!!}
|
||||
<div class="ui center aligned header">
|
||||
@ -29,3 +29,53 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script type="text/javascript">
|
||||
var eventos = [
|
||||
@foreach ($eventos as $evento)
|
||||
{
|
||||
titulo: '{{$evento->titulo}}',
|
||||
image: '{!!$evento->image!!}',
|
||||
empresa: '{{$evento->empresa}}',
|
||||
servicio: {{$evento->servicio}}
|
||||
},
|
||||
@endforeach
|
||||
];
|
||||
function changeEventos(filter) {
|
||||
var grid = $('#eventos_cards')
|
||||
grid.html('')
|
||||
$.each(eventos, function(i, el) {
|
||||
if (filter != 'none' && el.servicio != filter) {
|
||||
return
|
||||
}
|
||||
grid.append(
|
||||
$('<div></div>').attr('class', 'eight wide tablet four wide computer column').append(
|
||||
$('<div></div>').attr('class', 'ui basic segment').append(el.image).append(
|
||||
$('<div></div>').attr('class', 'ui center aligned header').append(el.titulo).append(
|
||||
$('<br />')
|
||||
).append(el.empresa)
|
||||
)
|
||||
)
|
||||
)
|
||||
})
|
||||
}
|
||||
var current_tab = 'none'
|
||||
function changeTab(filter) {
|
||||
$('.servicio.active').removeClass('active')
|
||||
$(".servicio[data-filter='" + filter + "']").addClass('active')
|
||||
current_tab = filter
|
||||
}
|
||||
$(document).ready(function() {
|
||||
$('.servicio').click(function(e) {
|
||||
e.preventDefault()
|
||||
var filter = $(this).attr('data-filter')
|
||||
if (filter == current_tab) {
|
||||
return
|
||||
}
|
||||
changeTab(filter)
|
||||
changeEventos(filter)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@endpush
|
||||
|
@ -32,9 +32,9 @@
|
||||
},
|
||||
@endforeach
|
||||
]
|
||||
var current = 0
|
||||
var current_testimonio = 0
|
||||
function cambiar(id) {
|
||||
if (id == current) {
|
||||
if (id == current_testimonio) {
|
||||
return
|
||||
}
|
||||
$('#testimonio').html('').append(
|
||||
@ -42,15 +42,18 @@
|
||||
).append(
|
||||
$('<div></div>').attr('class', 'ui header').html(testimonios[id].emisor)
|
||||
)
|
||||
$('#marcador').find(".icon[data-id='" + current + "']").addClass('outline')
|
||||
$('#marcador').find(".icon[data-id='" + current_testimonio + "']").addClass('outline')
|
||||
$('#marcador').find(".icon[data-id='" + id + "']").removeClass('outline')
|
||||
current = id
|
||||
$('#marcador').find('.icon.outline').css('cursor', 'pointer')
|
||||
$('#marcador').find('.icon:not(.outline)').css('cursor', 'default')
|
||||
current_testimonio = id
|
||||
}
|
||||
$(document).ready(function() {
|
||||
$('#marcador').find('.icon').css('cursor', 'pointer').click(function() {
|
||||
$('#marcador').find('.icon').click(function() {
|
||||
var id = $(this).attr('data-id')
|
||||
cambiar(id)
|
||||
})
|
||||
$('#marcador').find('.icon.outline').css('cursor', 'pointer')
|
||||
})
|
||||
</script>
|
||||
@endpush
|
||||
|
@ -3,13 +3,13 @@
|
||||
<div class="ui inverted container main">
|
||||
<div class="ui stackable grid">
|
||||
<div class="three columns row">
|
||||
<div class="column">
|
||||
<div class="middle aligned column">
|
||||
@include('layout.footer.contacto')
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="middle aligned column">
|
||||
@include('layout.footer.ubicacion')
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="middle aligned column">
|
||||
@include('layout.footer.redes')
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<div style="text-align: center;">
|
||||
<a href="{{$urls->base}}/contacto">
|
||||
<a href="{{$urls->base}}#contacto">
|
||||
<i class="big icon icon-contacto"></i>
|
||||
<p>
|
||||
<strong>
|
||||
|
@ -0,0 +1,17 @@
|
||||
<div class="ui stackable five columns center aligned grid">
|
||||
<div class="column">
|
||||
<i class="youtube big icon"></i>
|
||||
</div>
|
||||
<div class="column">
|
||||
<i class="instagram big icon"></i>
|
||||
</div>
|
||||
<div class="column">
|
||||
<i class="facebook big icon"></i>
|
||||
</div>
|
||||
<div class="column">
|
||||
<i class="linkedin big icon"></i>
|
||||
</div>
|
||||
<div class="column">
|
||||
<i class="twitter big icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<div style="text-align: center;">
|
||||
<a href="{{$urls->base}}/contacto">
|
||||
<a href="{{$urls->base}}#contacto">
|
||||
<i class="big icon icon-ubicacion"></i>
|
||||
<p>
|
||||
<strong>
|
||||
@ -7,7 +7,7 @@
|
||||
</strong>
|
||||
</p>
|
||||
</a>
|
||||
<a href="{{$urls->base}}/contacto">
|
||||
<a href="{{$urls->base}}#contacto">
|
||||
<p>
|
||||
Av. Nueva Providencia 1945, Of. 919,
|
||||
<br />
|
||||
|
@ -1,21 +1,16 @@
|
||||
<nav class="ui massive stackable center aligned text fluid three item grey menu">
|
||||
<nav class="three item stackable menu">
|
||||
<nav class="ui massive stackable center aligned text three item grey menu">
|
||||
<div class="left three item menu">
|
||||
<a class="item" href="{{$urls->base}}#servicios">Servicios</a>
|
||||
<a class="item" href="{{$urls->base}}#nosotros">Nosotros</a>
|
||||
<a class="item" href="{{$urls->base}}#clientes">Clientes</a>
|
||||
</nav>
|
||||
</div>
|
||||
<a class="item" href="{{$urls->base}}">
|
||||
<div class="ui header" id="page_logo">
|
||||
Total<span class="orange">Sport</span>
|
||||
</div>
|
||||
</a>
|
||||
<nav class="two item stackable menu">
|
||||
<div class="right two item menu">
|
||||
<a class="item" href="{{$urls->base}}#eventos">Eventos</a>
|
||||
<a class="item" href="{{$urls->base}}#contacto">Contacto</a>
|
||||
</nav>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@push('styles')
|
||||
<link rel="stylesheet" type="text/css" href="{{$urls->styles}}/header.css" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap" />
|
||||
@endpush
|
||||
|
Reference in New Issue
Block a user