<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" rel="stylesheet">
<div class="nav-side-menu">
<div class="brand">Safe Conduct v1.0</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fas fa-tachometer-alt fa-lg"></i> Home
</a>
</li>
<li>
<a href="#">
<i class="fas fa-inbox fa-lg"></i> Safe Conducts
</a>
</li>
<li>
<a href="#">
<i class="fas fa-user-tie fa-lg"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users fa-lg"></i> Users
</a>
</li>
<li>
<a href="#">
<i class="fa fa-globe fa-lg"></i> Información
</a>
</li>
</ul>
</div>
</div>
<div class="container">
<h2 class="">Información Importante sobre confinamiento</h2>
<div class="row">
<div class="col-12 col-md-8 col-lg-6 pb-5">
<div class="card border-primary rounded-0">
<div class="card-header p-0">
Estos son los casos en los que sí se podrá salir a la calle:
<li>Para comprar de alimentos, productos farmacéuticos o de primera necesidad.</li>
<li>Para asistir a centros sanitarios.</li>
<li>Para asistir a entidades bancarias o de seguros.</li>
<li>Para desplazarse al trabajo (aunque el Gobierno ha pedido priorizar el teletrabajo).</li>
<li>Para volver a la vivienda habitual.</li>
<li>Para cuidar de personas mayores, menores, dependientes y personas con discapacidad.</li>
<li>Por "fuerza mayor".</li>
<li>Por otras actividades de análoga naturaleza, siempre debidamente justificadas.</li>
</div>
</div>
</div>
</div>
</div>
@charset "ISO-8859-1";
@import url("https://use.fontawesome.com/releases/v5.0.11/css/all.css");
.Button {
height: 50px;
position: relative;
background: #ccc;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0px;
left: 0px;
right: 0px;
width: 100%;
overflow: hidden;
}
.nav-side-menu {
overflow: auto;
font-family: verdana;
font-size: 12px;
font-weight: 200;
background-color: rgb(23, 162, 184);
position: fixed;
top: 0px;
padding-left: 0px;
height: 100%;
width: 17%;
color: #e1ffff;
}
.nav-side-menu .brand {
background-color: rgb(23, 162, 184);
line-height: 50px;
display: block;
text-align: center;
font-size: 14px;
}
.nav-side-menu .toggle-btn {
display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
list-style: none;
padding: 0px;
margin: 0px;
line-height: 35px;
cursor: pointer;
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
font-family: 'Font Awesome 5 Free';
content: "\f13a";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
float: right;
font-weight: 900;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
border-left: 3px solid #d19b3d;
background-color: rgb(23, 162, 184);
}
.nav-side-menu ul .sub-menu li.active,
.nav-side-menu li .sub-menu li.active {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li.active a,
.nav-side-menu li .sub-menu li.active a {
color: #d19b3d;
}
.nav-side-menu ul .sub-menu li,
.nav-side-menu li .sub-menu li {
background-color: rgb(23, 162, 184);
border: none;
line-height: 28px;
border-bottom: 1px solid #23282e;
margin-left: 0px;
}
.nav-side-menu ul .sub-menu li:hover,
.nav-side-menu li .sub-menu li:hover {
background-color: #020203;
}
.nav-side-menu ul .sub-menu li:before,
.nav-side-menu li .sub-menu li:before {
font-family: 'Font Awesome 5 Free';
content: "\f105";
display: inline-block;
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
font-weight: 900;
}
.nav-side-menu li {
padding-left: 0px;
border-left: 3px solid #84a3c6;
border-bottom: 1px solid #23282e;
}
.nav-side-menu li a {
text-decoration: none;
color: #e1ffff;
}
.nav-side-menu li a i {
padding-left: 10px;
width: 20px;
padding-right: 20px;
}
.nav-side-menu li:hover {
border-left: 3px solid #d19b3d;
background-color: rgb(23, 162, 184);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
@media (max-width: 767px) {
.nav-side-menu {
position: relative;
width: 100%;
margin-bottom: 10px;
}
.nav-side-menu .toggle-btn {
display: block;
cursor: pointer;
position: absolute;
right: 10px;
top: 10px;
z-index: 10 !important;
padding: 3px;
background-color: #000000;
color: #000;
width: 40px;
text-align: center;
}
.brand {
text-align: left !important;
font-size: 22px;
padding-left: 20px;
line-height: 50px !important;
}
}
@media (min-width: 767px) {
.nav-side-menu .menu-list .menu-content {
display: block;
}
}
body {
margin: 0px;
padding: 0px;
}
