Lección 15 del Curso Flutter y Laravel Tienda Delivery

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.

Diseño de la portada

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

COMPRA ESTE CURSO

Y accede a todos los recursos y videos, explicación, scripts y descarga del código fuente disponible con la compra del curso

COMPRAR

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>

 


COMPRA ESTE CURSO

Y accede a todos los recursos y videos, explicación, scripts y descarga del código fuente disponible con la compra del curso

COMPRAR

796 visitas

Lecciones del curso

VER MÁS CURSOS
Logo Codea App

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020