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?

1484 visitas

Lecciones del curso

1. Introducción 1739
2. Planteamiento 1051
4. Base de datos 948
6. Módulo Usuarios 782
7. Módulo Categorías 862
8. Módulo Subcategorías 772
9. Módulo Productos 727
10. Módulo Pedidos 684
11. Módulo Detalle 702
12. Carrusel de imágenes 964
13. Blog para SEO 675
14. Roles de usuario 1366
16. Menú de navegación dinámico 1194
17. Carrusel de imágenes dinámico 1377
18. Productos en la Portada 606
19. Arquitectura de urls en Laravel 570
20. Mostrar categorías y subcategorías 1068
21. Mostrar Producto 603
22. Blog en Laravel 521
24. Procesar el Pedido 484
25. Historial del Pedido 507
26. Integrar Json Web Tokens 1042
27. Autenticación con JWT 660
28. Enviar Productos en JSON 1093
29. Recibir pedidos en Laravel 600
31. Creación del Proyecto Flutter 416
32. Estructura de Archivos 1724
33. Implementación del Servicio Web (API) 850
34. Modelos Categoria, Subcategoria y Producto 633
35. Creación de la Base de Datos Sqflite 682
36. Métodos para gestionar la DB DbHelper 418
37. Modelo Carrito 367
38. Métodos para la gestión del Carrito 393
39. Implementación de la Pantalla Inicio 483
40. Implementación de la Pantalla Login 2224
41. Implementación de la Pantalla Registro 779
42. Uso de la API para sincronizar la BD 763
43. Implementación Pantalla Categoria con Sqflite 502
44. Implementación de la pantalla Productos 398
45. Implementación Pantalla Producto 455
46. Logout de la App Delivery 790
47. Integrar ChangeNotifierProvider 399
48. Integrar Notificaciones en la AppBar 497
49. Botón Agregar al Carrito 569
50. Resumen Carrito de Compra 381
51. Envío del Pedido Delivery 432
52. Confirmación del Pedido Delivery 394
53. SEO Onpage en Laravel 496
54. Maquetación FrontEnd 508
55. Diseño en Flutter 461
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