Curso Flutter y Laravel Tienda Delivery

Diseño de la portada

Para diseñar una portada bosquejamos que partes va a tener la página inicial distribuyendo el menú de navegación, el carrusel, los productos más vendidos.

Lección 15 del Curso Flutter y Laravel Tienda Delivery

DESCRIPCIÓN DE LA LECCIÓN

Para diseñar una portada bosquejamos que partes va a tener la página inicial distribuyendo el menú de navegación, el carrusel, los productos más vendidos.

Parte de la plantilla blade:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>AREQUIPA LOCAL | Tienda delivery de abarrotes en Arequipa</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="{{ asset('js/bootstrap.min.js') }}" defer></script>
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
    <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
  
</head>
<body>

        <nav class="navbar navbar-expand-md navbar-dark bg-primary shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    AREQUIPA <strong class="text-secondary">LOCAL</strong>
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                    </ul>
                    <ul class="navbar-nav mx-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="/">INICIO</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/">MENU 1</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/">MENU 2</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/">MENU 3</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav ml-auto">
                        <!-- Authentication Links -->
                        @guest
                            <li class="nav-item">
                                <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                            </li>
                            @if (Route::has('register'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                </li>
                            @endif
                        @else
                           ...............
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>

@yield('content')
<div class="container-fluid text-center bg-warning pt-5 pb-5">
    <p>&copy; Todos los derechos reservados | arequipalocal.com | 2020</p>
</div>
    <style>
    .bg-primary{
        background: #340166 !important;
    }
    </style>
</body>
</html>

 


POR LA COMPRA DEL CURSO COMPLETO

  • MIRA TODOS LOS VIDEOS SIN RESTRICCIÓN
  • TEN ACCESO AL CURSO
  • DESCARGA TODO CÓDIGO FUENTE DEL PROYECTO
  • ACCESO A CURSOS Y RECURSOS GRATIS

Flutter y Laravel Tienda Delivery

¿Cómo diseñar la portada de una página para una tienda de delivery?

1754 visitas

Lecciones del curso

1. Introducción 1964
2. Planteamiento 1285
4. Base de datos 1105
6. Módulo Usuarios 943
7. Módulo Categorías 1019
8. Módulo Subcategorías 920
9. Módulo Productos 984
10. Módulo Pedidos 807
11. Módulo Detalle 874
12. Carrusel de imágenes 1272
13. Blog para SEO 828
14. Roles de usuario 1747
16. Menú de navegación dinámico 1717
17. Carrusel de imágenes dinámico 1980
18. Productos en la Portada 741
19. Arquitectura de urls en Laravel 707
20. Mostrar categorías y subcategorías 1294
21. Mostrar Producto 797
22. Blog en Laravel 643
24. Procesar el Pedido 653
25. Historial del Pedido 745
26. Integrar Json Web Tokens 1241
27. Autenticación con JWT 888
28. Enviar Productos en JSON 1673
29. Recibir pedidos en Laravel 828
31. Creación del Proyecto Flutter 575
32. Estructura de Archivos 2364
33. Implementación del Servicio Web (API) 1149
34. Modelos Categoria, Subcategoria y Producto 824
35. Creación de la Base de Datos Sqflite 829
36. Métodos para gestionar la DB DbHelper 509
37. Modelo Carrito 465
38. Métodos para la gestión del Carrito 542
39. Implementación de la Pantalla Inicio 848
40. Implementación de la Pantalla Login 3229
41. Implementación de la Pantalla Registro 1223
42. Uso de la API para sincronizar la BD 1105
43. Implementación Pantalla Categoria con Sqflite 637
44. Implementación de la pantalla Productos 507
45. Implementación Pantalla Producto 740
46. Logout de la App Delivery 1183
47. Integrar ChangeNotifierProvider 517
48. Integrar Notificaciones en la AppBar 625
49. Botón Agregar al Carrito 726
50. Resumen Carrito de Compra 476
51. Envío del Pedido Delivery 593
52. Confirmación del Pedido Delivery 474
53. SEO Onpage en Laravel 622
54. Maquetación FrontEnd 682
55. Diseño en Flutter 611
VER MÁS CURSOS
Codea App

Codea App FullStack

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados Codea App FullStack | Cursos de programación avanzados | 2020 - 2021