<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="fas fa-globe fa-lg"></i> Information </a> </li> </ul> </div> </div> <div class="container"> <h2 class="">&nbsp</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"> <div class="bg-info text-white text-center py-2"> <h3><i class="fa fa-envelope"></i> General Information about COV-19</h3> <p class="m-0"></p> </div> </div> <div class="card-body p-3"> <!-- add --> El coronavirus de Wuhan fue detectado por primera vez en el mes de diciembre en la ciudad China de Wuhan. Se trata de una nueva cepa de esta familia de virus que hasta entonces era desconocida. Los síntomas de este coronavirus son similares a los de la neumonía, fiebre, fatiga, tos seca y en muchos casos dificultad respiratoria. Estos síntomas resultan muy peligrosos en determinados pacientes, como las personas mayores, aquellos pacientes que presentan patologías previas (como la diabetes o cardiopatías) o las personas que tengan el sistema inmunológico debilitado. </div> <div class="text-center"> <a href="url" class="btn btn-info btn-block rounded-0 py-2">Request your Safe Conduct</a> </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: #4f5b69; } .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: #181c20; 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: #4f5b69; -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: #ffffff; 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; }