<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 de Coronavirus</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">
El nuevo coronavirus que saltó de algún animal al humano en la ciudad de Wuhan a finales del 2019 ha logrado, en apenas unas cuantas semanas, acaparar toda la atención mediática, científica y de la comunidad internacional. El 30 de enero, la Organización Mundial de la Salud lo declaró una situación de emergencia internacional (PHEIC, por sus siglas en inglés).
La epidemia está evolucionando de manera muy rápida y con ello, el conocimiento que tenemos sobre este nuevo virus. De no saber nada de él a principios del 2020, la comunidad científica ya ha logrado aislarlo, secuenciarlo, identificarlo y desarrollar pruebas para diagnosticarlo.
Sin embargo, como sucede con toda nueva epidemia, sigue habiendo muchas incógnitas que se irán resolviendo a medida que ésta evolucione y a medida que los científicos logren entender más sobre el comportamiento del virus.
</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;
}
