<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"> <link rel="stylesheet" href="./main.css"> <title>Document</title> </head> <body> <div class="container"> <div id="sidebar"> <!-- <div class="window__close" onclick="closeWindow()"><i class="close icon"></i></div> --> <!-- --> <div class="togglebtn" onclick="toggleBtn()"> </div> <div class="side__profile"> <div class="profile__avatar"><img src="./hi.jpg" alt=""></div> <div class="profile__name">!Hola <span class="name__bold">Slva Kumar!</span> <span class="block">Modifica tu perfil <i class="pencil alternate icon"></i></span></div> </div> <div class="blank__card"> </div> <div class="sidenav__list"> <a href="./qrcode.html" class="sidenav__item"><i class="thumbs up icon"></i> Mi codigo QR</a> <a href="./account.html" class="sidenav__item"><i class="thumbs up icon"></i> Mi Cuenta</a> <a href="./trips.html" class="sidenav__item"><i class="thumbs up icon"></i> Mis viajes</a> <a href="#" class="sidenav__item"><i class="thumbs up icon"></i> Mis Movimientos</a> <a href="#" class="sidenav__item"><i class="thumbs up icon"></i> Mis grupos</a> <a href="#" class="sidenav__item"><i class="thumbs up icon"></i> Promocoines</a> <a href="#" class="sidenav__item"><i class="thumbs up icon"></i> Terminos de uso</a> <a href="#" class="sidenav__item"><i class="thumbs up icon"></i> Preguntas frecuentes</a> <a href="#" class="sidenav__item"><i class="thumbs up icon"></i> Contactanos</a> <a href="#" class="sidenav__item"><i class="thumbs up icon"></i> Refer n Earn</a> </div> <div class="copyright"> <span class="queries">Quieres ofrecer un viaje?</span> <div class="copy__title">Cambia a<span class="copy__bold"> Modo conductor</span></div> </div> </div> <nav class="navigation"> <div class="navigation__menu " onclick="toggleBtn()"> </div> <div class="navigation__title">PasajeBus.<span>Com</span></div> <div class="navigation__notification"> </div> </nav> <div class="searchCard"> <div class="searchWrapper"> <div class="search__title">¿Dónde estás?</div> <div class="input__container"> <div class="inputWrapper "> <input type="text" class="inputBox" placeholder="Origen"> <div class="btline"></div> </div> <div class="inputWrapper"> <input type="text" class="inputBox" placeholder="Destino"> </div> </div> <div class="dateContainer"> <div class="dateWrapper"> <div class="text">¿Cuándo viajas?</div> <input type="date" class="date" placeholder="Arrival Date"> </div> <div class="dateWrapper"> <div class="text">¿Cuándo regresas?</div> <input type="date" class="date" placeholder="Return Date"> </div> </div> </div> </div> <div class="footerNav"> <div class="navlist"> <div class="nav__left"> <div class="nav__item"> <i class="home icon"></i> <div class="navtxt">indicio</div> </div> <div class="nav__item"> <i class="home icon"></i> <div class="navtxt">Angular</div> </div> </div> <div class="nav__right"> <div class="nav__item"> <i class="home icon"></i> <div class="navtxt">Promociones</div> </div> <div class="nav__item"> <i class="home icon"></i> <div class="navtxt">Contacto</div> </div> </div> </div> </div> <a href="./buses.html" class="search__arrow"> <i class="arrow circle right icon"></i> </div> </div> <style> </style> <script> toggleBtn = () =>{ document.getElementById('sidebar').classList.toggle('active') console.log('slide') } </script> </body> </html>