Skip to content

Commit

Permalink
alpinejs
Browse files Browse the repository at this point in the history
  • Loading branch information
victoryoalli committed Jan 30, 2020
1 parent 2592f15 commit d863e5a
Showing 1 changed file with 27 additions and 23 deletions.
50 changes: 27 additions & 23 deletions public/home.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,40 +8,44 @@
<title>header</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.js" defer></script>

</head>

<body>
<nav class="bg-secondary text-gray-100">
<nav x-data="{ open: false }" class="fixed z-10 w-full bg-secondary text-gray-100">
<div class="px-2 bg-secondary text-white flex justify-between items-center">
<div>
<img class="h-8 py-1" src="images/logo-w.svg" alt="">
</div>
<div class="text-2xl">&equiv;</div>
<div class="text-2xl" @click="open = true">&equiv;</div>
</div>

<div class="mt-1 mx-2">
<input class="form-control" type="search" placeholder="Búsqueda">
</div>
<div class="py-1 mx-2 md:flex justify-around">
<div class="flex">
Precio:
<div class="ml-2">$</div>
<div class="ml-2 text-primary">$$</div>
<div class="ml-2">$$$</div>
<div class="ml-2">$$$$</div>
<div x-show="open" @click.away="open = false">
<div class="mt-1 mx-2">
<input class="form-control" type="search" placeholder="Búsqueda">
</div>
<div class="flex">
<div class="">
Calificación
<div class="py-1 mx-2 md:flex justify-around">
<div class="flex">
Precio:
<div class="ml-2">$</div>
<div class="ml-2 text-primary">$$</div>
<div class="ml-2">$$$</div>
<div class="ml-2">$$$$</div>
</div>
<div class="flex">
<div class="">
Calificación
</div>
<div class="ml-2 text-primary">&starf; </div>
<div class="ml-px text-primary">&starf; </div>
<div class="ml-px text-primary">&starf; </div>
<div class="ml-px text-primary">&starf; </div>
<div class="ml-px">&star; </div>
</div>
<div>
<button class="btn btn-primary">Filtrar</button>
</div>
<div class="ml-2 text-primary">&starf; </div>
<div class="ml-px text-primary">&starf; </div>
<div class="ml-px text-primary">&starf; </div>
<div class="ml-px text-primary">&starf; </div>
<div class="ml-px">&star; </div>
</div>
<div>
<button class="btn btn-primary">Filtrar</button>
</div>
</div>
</nav>
Expand Down

0 comments on commit d863e5a

Please sign in to comment.