<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--head--> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> <header> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"> <a class="navbar-brand" target="_blank" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine"> YOUR LOGO </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="ml-auto navbar-nav text-uppercase"> <li class="nav-item active"> <a class="nav-link p-3" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link p-3" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">About us</a> </li> <li class="nav-item"> <a class="nav-link p-3" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Features</a> </li> <li class="nav-item"> <a class="nav-link p-3" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">My Account</a> </li> <li class="nav-item"> <a class="nav-link p-3" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Sign Out</a> </li> </ul> </div> </div> </nav> </header> <section id="about-us" class="py-5"> <div class="container"> <div class="row"> <!--left sidebar--> <div class="col-md-3 pr-md-4"> <div class="sidebar-left"> <!--sidebar menu--> <ul class="list-unstyled sidebar-menu pl-md-2 pr-md-0"> <li> <a class="sidebar-item active d-flex justify-content-between align-items-center" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> Dashboard <span class="fas fa-tachometer-alt"></span> </a> </li> <li> <a class="sidebar-item d-flex justify-content-between align-items-center" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> Profile <span class="fas fa-user"></span> </a> </li> <li> <a class="sidebar-item d-flex justify-content-between align-items-center" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> Post <span class="fas fa-copy"></span> </a> </li> <li> <a class="sidebar-item d-flex justify-content-between align-items-center" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> Comment <span class="side-notif" title="1 new comment">1</span> <span class="fas fa-comment"></span> </a> </li> <li> <a class="sidebar-item d-flex justify-content-between align-items-center" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> Messages <span class="side-notif" title="1 new messages">1</span> <span class="fas fa-envelope"></span> </a> </li> <li> <a class="sidebar-item d-flex justify-content-between align-items-center" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> Favorite <span class="fas fa-heart"></span> </a> </li> <li> <a class="sidebar-item d-flex justify-content-between align-items-center" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> Setting <span class="fas fa-cog"></span> </a> </li> <li> <a class="sidebar-item d-flex justify-content-between align-items-center" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> Sign out <span class="fas fa-sign-out-alt"></span> </a> </li> </ul> </div> </div> <!--Content--> <div class="col-md-9"> <div class="dashboard-area"> <div class="row"> <div class="col-12"> <div class="mb-3 bg-dark"> <div class="row"> <div class="col-12"> <a class="position-absolute ml-3 mt-3 text-white" href="setting.html" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Edit cover images"><i class="fas fa-cog"></i></a> <div class="row"> <div class="col-md-6 ml-auto mr-auto"> <div class="profiles p-3 my-4 rounded text-center shadow-sm"> <div class="avatars"> <a href="setting.html"> <img src="https://demo.bootstrap.news/bootnews/assets/img/avatar/avatar1.png" alt="Circle Image" class="avatar-lg rounded-circle img-fluid" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Edit avatar images"> </a> </div> <div class="names"> <h3 class="title text-light">@jenifer</h3> <a href="#" class="btn btn-link btn-facebook"><i class="fab fa-facebook"></i></a> <a href="#" class="btn btn-link btn-twitter"><i class="fab fa-twitter"></i></a> <a href="#" class="btn btn-link btn-gplus"><i class="fab fa-google-plus"></i></a> <a href="#" class="btn btn-link btn-instagram"><i class="fab fa-instagram"></i></a> <a href="#" class="btn btn-link btn-youtube"><i class="fab fa-youtube"></i></a> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="row"> <div class="col-12"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item"> <a class="nav-link active show" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Statistic</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Latest post</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade active show" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"> <div class="row"> <div class="col-lg-4 col-sm-6"> <a class="member-item" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <div class="card mb-2 mb-md-5 py-3"> <div class="content"> <div class="row"> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="icon-big text-warning text-center"> <i class="fas fa-copy"></i> </div> </div> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="numbers"> <p>Article</p> 112 </div> </div> </div> </div> </div> </a> </div> <div class="col-lg-4 col-sm-6"> <a class="member-item" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <div class="card mb-2 mb-md-5 py-3"> <div class="content"> <div class="row"> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="icon-big text-info text-center" title="1 new comment"> <div class="notif">1</div> <i class="fas fa-comment"></i> </div> </div> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="numbers"> <p>Comments</p> 454 </div> </div> </div> </div> </div> </a> </div> <div class="col-lg-4 col-sm-6"> <a class="member-item" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <div class="card mb-2 mb-md-5 py-3"> <div class="content"> <div class="row"> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="icon-big text-danger text-center"> <i class="fas fa-heart"></i> </div> </div> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="numbers"> <p>Favorite</p> 56 </div> </div> </div> </div> </div> </a> </div> <div class="col-lg-4 col-sm-6"> <a class="member-item" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <div class="card mb-2 mb-md-5 py-3"> <div class="content"> <div class="row"> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="icon-big text-twitter text-center" title="1 new messages"> <div class="notif">1</div> <i class="fas fa-envelope"></i> </div> </div> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="numbers"> <p>Messages</p> 23 </div> </div> </div> </div> </div> </a> </div> <div class="col-lg-4 col-sm-6"> <a class="member-item" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <div class="card mb-2 mb-md-5 py-3"> <div class="content"> <div class="row"> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="icon-big text-facebook text-center"> <i class="fas fa-star"></i> </div> </div> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="numbers"> <p>Following</p> 112 </div> </div> </div> </div> </div> </a> </div> <div class="col-lg-4 col-sm-6"> <a class="member-item" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <div class="card mb-2 mb-md-5 py-3"> <div class="content"> <div class="row"> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="icon-big text-success text-center"> <i class="fas fa-users"></i> </div> </div> <div class="col-6 d-flex justify-content-center align-items-center"> <div class="numbers"> <p>Follower</p> 1567 </div> </div> </div> </div> </div> </a> </div> </div> </div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"> <div class="p-3 border mb-3"> <a class="position-absolute" style="right: 25px" href="setting.html" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Edit profile"><i class="fas fa-cog"></i></a> <h3>Jenifer Tan</h3> <p><b>Jobs:</b> Writter</p> <p><b>About:</b> Hello my name is Jenifer, My passion is writting. I hope you enjoy with my article.</p> <p><b>Address:</b> Street 12 vo 05, California, United States</p> <p><b>Phone:</b> +1 987654321</p> </div> </div> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"> <div class="p-3 border mb-3"> <h5>Recently Published</h5> <div class="row"> <div class="col-12"> <ul class="list-unstyled statistics"> <li> <span class="text-primary">Oct 20</span> <a class="h6" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Toyota Sienna rates marginal in passenger-side overlap crash test</a> </li> <li> <span class="text-primary">Oct 12</span> <a class="h6" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Ford reveals autonomous vehicle philosophies, priorities</a> </li> <li> <span class="text-primary">Oct 7</span> <a class="h6" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Offer Hints to How Dogs Became Domesticated</a> </li> <li> <span class="text-primary">Oct 6</span> <a class="h6" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Consumer apprehension grows over autonomous tech, study says</a> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section>

/*------------------------------------ Social color ------------------------------------*/ .text-facebook, .hover-facebook-text:hover i, .hover-facebook a:hover i { color: #3b5998; } .bg-facebook, .btn-facebook { background-color: #3b5998; color: #fff; } .text-twitter, .hover-twitter-text:hover i, .hover-twitter a:hover i { color: #00aced; } .bg-twitter, .btn-twitter { background-color: #00aced; color: #fff; } .text-instagram, .hover-instagram-text:hover i, .hover-instagram a:hover i { color: #b300ad; } .bg-instagram, .btn-instagram { background-color: #b300ad; color: #fff; } .text-youtube, .hover-youtube-text:hover i, .hover-youtube a:hover i { color: #bd0000; } .bg-youtube, .btn-youtube { background-color: #bd0000; color: #fff; } .text-gplus, .hover-gplus-text:hover i, .hover-gplus a:hover i { color: #eb5e4c; } .bg-gplus, .btn-gplus { background-color: #eb5e4c; color: #fff; } .text-vimeo, .hover-vimeo-text:hover i, .hover-vimeo a:hover i { color: #35c6ea; } .bg-vimeo, .btn-vimeo { background-color: #35c6ea; color: #fff; } .text-envelope, .hover-envelope-text:hover i, .hover-envelope a:hover i { color: #faa33d; } .bg-envelope, .btn-envelope { background-color: #faa33d; color: #fff; } .text-linkedin, .hover-linkedin-text:hover i, .hover-linkedin a:hover i { color: #6697ff; } .bg-linkedin, .btn-linkedin { background-color: #6697ff; color: #fff; } .text-telegram, .hover-telegram-text:hover i, .hover-telegram a:hover i { color: #30a8dc; } .bg-telegram, .btn-telegram { background-color: #30a8dc; color: #fff; } .text-pinterest, .hover-pinterest-text:hover i, .hover-pinterest a:hover i { color: #bd081b; } .bg-pinterest, .btn-pinterest { background-color: #bd081b; color: #fff; } .black a { color: #000; } .post-content ul { color: #474b5f; } .white a { color: #fff; } /*------------------------------------ Member area ------------------------------------*/ .sidebar-item.active, .sidebar-item:hover { background-color: #fff; border: 1px solid #e6e7e9; border-right: 0; margin-right: -1px; } .sidebar-menu { border-bottom: 1px solid #e6e7e9; border-top: 1px solid #e6e7e9; border-right: 1px solid #e6e7e9; padding-bottom: 1rem; padding-top: 1rem; background-color: #f4f4f4; } .sidebar-item { position: relative; display: block; padding: 0.75rem 1.25rem; margin-bottom: 0.5rem; border: 1px solid transparent; } .sidebar-item.active:hover { background-color: #fff; } .card .icon-big { font-size: 3rem; } .card .icon-big .notif { position: absolute; min-width: 25px; border-radius: 5rem; font-size: 1rem; background: #dc3545; color: #fff; } .card .numbers { text-align: right; } .card .numbers p { font-size: 1rem; margin: 0; } .card .footer { padding: 0; line-height: 30px; } .side-notif { padding-left: 7px; padding-right: 7px; font-size: 0.8rem; border-radius: 5rem; background-color: #dc3545; color: #fff; } .statistics li { padding: 0.25rem 0; } .member-item:hover .card { background-color: #f4f4f4; } .table-striped tbody tr:nth-of-type(odd) { background-color: #f4f4f4; } @media (max-width: 767.98px) { .sidebar-item.active, .sidebar-item:hover { border-right: 1px solid #e6e7e9; margin-left: 0.25rem; margin-right: 0.25rem; } }