"Untitled"
Bootstrap 4.1.1 Snippet by Hoss

<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 ----------> <script src="https://kit.fontawesome.com/930411c5cd.js" crossorigin="anonymous"></script> <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> <body> <div class="page_content"> <div class="content"> <header> <div class="page_top"> </div> <nav class="navbar navbar-expand-lg navStyle"> <a class="brand-navbar" href="#" style='margin-left:4%'><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSohxuNEOfASjZFuPunLob4m4T0OrGAuDOIG83wZMpUKd66n5SK&usqp=CAU" alt="Responsive image" height="120px"></a> <button class="navbar-toggler" data-toggle="collapse" data-target="#mainMenu"> <span><i class="fas fa-align-right iconStyle"></i></span> </button> <div class="collapse navbar-collapse" id="navbarTogglerDemo01" style='margin-left:5%'> <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> <li class="nav-item active"> <a class="nav-link" href="#">Primăria <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Noutăți</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Transparența decizională</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Informații de interes public</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contacte</a> </li> </ul> <div class="form-inline my-2 my-lg-0"> <ul class="navbar-nav"> <li class="nav-item"> <a href="#"><button class="btn btn-primary my-2 my-sm-0" style='border-radius:50%;'><i class="far fa-envelope text-white"></i></button></a> </li> <li class="nav-item"> <a href="#"><button class="btn btn-primary my-2 my-sm-0" style='border-radius:50%; margin-left:10%'><i class="fab fa-facebook-f text-white"></i></button></a> </li> </ul> </div> </div> </nav> </header> <div class="row"> <div class="col-12 text-center pt-3"> <h4>Ultimele noutati</h4> </div> <div class="col-12 pb-5"> <!--SECTION START--> <section class="row"> <!--Start slider news--> <div class="col-12 col-md-6 pb-0 pb-md-3 pt-2 pr-md-1"> <div id="featured" class="carousel slide carousel" data-ride="carousel"> <!--dots navigate--> <ol class="carousel-indicators top-indicator"> <li data-target="#featured" data-slide-to="0" class="active"></li> <li data-target="#featured" data-slide-to="1"></li> <li data-target="#featured" data-slide-to="2"></li> <li data-target="#featured" data-slide-to="3"></li> </ol> <!--carousel inner--> <div class="carousel-inner"> <!--Item slider--> <div class="carousel-item active"> <div class="card border-0 rounded-0 text-light overflow zoom"> <div class="position-relative"> <!--thumbnail img--> <div class="ratio_left-cover-1 image-wrapper"> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <img class="img-fluid w-100" src="https://bootstrap.news/source/img1.jpg" alt="Bootstrap news template"> </a> </div> <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow"> <!--title--> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <h2 class="h3 post-title text-white my-1">Bootstrap 4 template news portal magazine perfect for news site</h2> </a> <!-- meta title --> <div class="news-meta"> <span class="news-author">by <a class="text-white font-weight-bold" href="../category/author.html">Jennifer</a></span> <span class="news-date">Oct 22, 2019</span> </div> </div> </div> </div> </div> <!--Item slider--> <div class="carousel-item"> <div class="card border-0 rounded-0 text-light overflow zoom"> <div class="position-relative"> <!--thumbnail img--> <div class="ratio_left-cover-1 image-wrapper"> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <img class="img-fluid w-100" src="https://bootstrap.news/source/img2.jpg" alt="Bootstrap news theme"> </a> </div> <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow"> <!--title--> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <h2 class="h3 post-title text-white my-1">Walmart shares up 10% on online sales lift</h2> </a> <!-- meta title --> <div class="news-meta"> <span class="news-author">by <a class="text-white font-weight-bold" href="../category/author.html">Jennifer</a></span> <span class="news-date">Oct 22, 2019</span> </div> </div> </div> </div> </div> <!--Item slider--> <div class="carousel-item"> <div class="card border-0 rounded-0 text-light overflow zoom"> <div class="position-relative"> <!--thumbnail img--> <div class="ratio_left-cover-1 image-wrapper"> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <img class="img-fluid w-100" src="https://bootstrap.news/source/img3.jpg" alt="Bootstrap blog template"> </a> </div> <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow"> <!--title--> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <h2 class="h3 post-title text-white my-1">Bank chief warns on Brexit staff moves to other company</h2> </a> <!-- meta title --> <div class="news-meta"> <span class="news-author">by <a class="text-white font-weight-bold" href="../category/author.html">Jennifer</a></span> <span class="news-date">Oct 22, 2019</span> </div> </div> </div> </div> </div> <!--Item slider--> <div class="carousel-item"> <div class="card border-0 rounded-0 text-light overflow zoom"> <div class="position-relative"> <!--thumbnail img--> <div class="ratio_left-cover-1 image-wrapper"> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <img class="img-fluid w-100" src="https://bootstrap.news/source/img4.jpg" alt="Bootstrap portal template"> </a> </div> <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow"> <!--title--> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <h2 class="h3 post-title text-white my-1">The world's first floating farm making waves in Rotterdam</h2> </a> <!-- meta title --> <div class="news-meta"> <span class="news-author">by <a class="text-white font-weight-bold" href="../category/author.html">Jennifer</a></span> <span class="news-date">Oct 22, 2019</span> </div> </div> </div> </div> </div> <!--end item slider--> </div> <!--end carousel inner--> </div> <!--navigation--> <a class="carousel-control-prev" href="#featured" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#featured" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!--End slider news--> <!--Start box news--> <div class="col-12 col-md-6 pt-2 pl-md-1 mb-3 mb-lg-4"> <div class="row"> <!--news box--> <div class="col-6 pb-1 pt-0 pr-1"> <div class="card border-0 rounded-0 text-white overflow zoom"> <div class="position-relative"> <!--thumbnail img--> <div class="ratio_right-cover-2 image-wrapper"> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <img class="img-fluid" src="https://bootstrap.news/source/img5.jpg" alt="simple blog template bootstrap"> </a> </div> <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow"> <!-- category --> <a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Lifestyle</a> <!--title--> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <h2 class="h5 text-white my-1">Should you see the Fantastic Beasts sequel?</h2> </a> </div> </div> </div> </div> <!--news box--> <div class="col-6 pb-1 pl-1 pt-0"> <div class="card border-0 rounded-0 text-white overflow zoom"> <div class="position-relative"> <!--thumbnail img--> <div class="ratio_right-cover-2 image-wrapper"> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <img class="img-fluid" src="https://bootstrap.news/source/img6.jpg" alt="bootstrap templates for blog"> </a> </div> <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow"> <!-- category --> <a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Motocross</a> <!--title--> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <h2 class="h5 text-white my-1">Three myths about Florida elections recount</h2> </a> </div> </div> </div> </div> <!--news box--> <div class="col-6 pb-1 pr-1 pt-1"> <div class="card border-0 rounded-0 text-white overflow zoom"> <div class="position-relative"> <!--thumbnail img--> <div class="ratio_right-cover-2 image-wrapper"> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <img class="img-fluid" src="https://bootstrap.news/source/img7.jpg" alt="bootstrap blog wordpress theme"> </a> </div> <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow"> <!-- category --> <a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Fitness</a> <!--title--> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <h2 class="h5 text-white my-1">Finding Empowerment in Two Wheels and a Helmet</h2> </a> </div> </div> </div> </div> <!--news box--> <div class="col-6 pb-1 pl-1 pt-1"> <div class="card border-0 rounded-0 text-white overflow zoom"> <div class="position-relative"> <!--thumbnail img--> <div class="ratio_right-cover-2 image-wrapper"> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <img class="img-fluid" src="https://bootstrap.news/source/img8.jpg" alt="blog website templates bootstrap"> </a> </div> <div class="position-absolute p-2 p-lg-3 b-0 w-100 bg-shadow"> <!-- category --> <a class="p-1 badge badge-primary rounded-0" href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/">Adventure</a> <!--title--> <a href="https://bootstrap.news/bootstrap-4-template-news-portal-magazine/"> <h2 class="h5 text-white my-1">Ditch receipts and four other tips to be a shopper</h2> </a> </div> </div> </div> </div> </div> </div> </section> </div> </div> <div class="row"> <div class="col-3"> Others </div> <div class="col-9"> <div class="row"> <div class="col-md-12"> <div class="main-timeline4"> <div class="timeline"> <a href="#" class="timeline-content"> <span class="year">2018</span> <div class="inner-content"> <h3 class="title">Web Designer</h3> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex odio, rhoncus sit amet tincidunt eu, suscipit a orci. In suscipit quam eget dui auctor. </p> </div> </a> </div> <div class="timeline"> <a href="#" class="timeline-content"> <span class="year">2017</span> <div class="inner-content"> <h3 class="title">Web Developer</h3> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex odio, rhoncus sit amet tincidunt eu, suscipit a orci. In suscipit quam eget dui auctor. </p> </div> </a> </div> <div class="timeline"> <a href="#" class="timeline-content"> <span class="year">2016</span> <div class="inner-content"> <h3 class="title">Web Designer</h3> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex odio, rhoncus sit amet tincidunt eu, suscipit a orci. In suscipit quam eget dui auctor. </p> </div> </a> </div> <div class="timeline"> <a href="#" class="timeline-content"> <span class="year">2015</span> <div class="inner-content"> <h3 class="title">Web Developer</h3> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex odio, rhoncus sit amet tincidunt eu, suscipit a orci. In suscipit quam eget dui auctor. </p> </div> </a> </div> </div> </div> </div> </div> </div> <footer class="footer"> <div class="row" style='width:80%; margin: 0 auto'> <div class="col-3"> <div class="row"> <div class="col-4"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSohxuNEOfASjZFuPunLob4m4T0OrGAuDOIG83wZMpUKd66n5SK&usqp=CAU" alt="Responsive image" height="120px"></a> </div> <div class="col-8"> <h4><br>Site-ul primăriei Vadului lui Isac</h4> </div> </div> </div> <div class="col-7"></div> <div class="col-2" style='width:85%; margin: 0 auto;'> <div class="footer_links"> <ul> <li> <a href="#"><button class="btn btn-primary my-2 my-sm-0" style="border-radius:50%;"><i class="far fa-envelope text-white"></i></button></a> </li> <li> <a href="#"><button class="btn btn-primary my-2 my-sm-0" style="border-radius:50%;"><i class="fab fa-instagram text-white"></i></button></a> </li> <li> <a href="#"><button class="btn btn-primary my-2 my-sm-0" style='border-radius:50%;'><i class="fab fa-facebook-f"></i></button></a> </li> <li> <a href="#"><button class="btn btn-primary my-2 my-sm-0" style='border-radius:50%;'><i class="fab fa-youtube text-white"></i></button></a> </li> </ul> </div> </div> </div> </footer> </div> </div> </body>
body { background: #599fd9; background: -webkit-linear-gradient(to right, #599fd9, #c2e59c); background: linear-gradient(to right, #599fd9, #c2e59c); font-family: Open Sans, "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; } .page_content { width:85%; margin: 0 auto; margin-top:3%; } .content { background-color:white; border-top-right-radius:65px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .navbar { background-color: black; border-top-right-radius:65px; height:120px; } .navbar .brand-navbar img:hover { opacity: 0.7; } .navbar a, a:link { color:#cc181e } .navbar a:hover { color:white; } .b-0 { bottom: 0; } .bg-shadow { background: rgba(76, 76, 76, 0); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(179, 171, 171, 0)), color-stop(49%, rgba(48, 48, 48, 0.37)), color-stop(100%, rgba(19, 19, 19, 0.8))); background: linear-gradient(to bottom, rgba(179, 171, 171, 0) 0%, rgba(48, 48, 48, 0.71) 49%, rgba(19, 19, 19, 0.8) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=0 ); } .top-indicator { right: 0; top: 1rem; bottom: inherit; left: inherit; margin-right: 1rem; } .overflow { position: relative; overflow: hidden; } .zoom img { transition: all 0.2s linear; } .zoom:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } a{text-decoration:none} h4{text-align:center;margin:30px 0;color:#444} .main-timeline{position:relative} .main-timeline:before{content:"";width:5px;height:100%;border-radius:20px;margin:0 auto;background:#242922;position:absolute;top:0;left:0;right:0} .main-timeline .timeline{display:inline-block;margin-bottom:50px;position:relative} .main-timeline .timeline:before{content:"";width:20px;height:20px;border-radius:50%;border:4px solid #fff;background:#ec496e;position:absolute;top:50%;left:50%;z-index:1;transform:translate(-50%,-50%)} .main-timeline .timeline-icon{display:inline-block;width:130px;height:130px;border-radius:50%;border:3px solid #ec496e;padding:13px;text-align:center;position:absolute;top:50%;left:30%;transform:translateY(-50%)} .main-timeline .timeline-icon i{display:block;border-radius:50%;background:#ec496e;font-size:64px;color:#fff;line-height:100px;z-index:1;position:relative} .main-timeline .timeline-icon:after,.main-timeline .timeline-icon:before{content:"";width:100px;height:4px;background:#ec496e;position:absolute;top:50%;right:-100px;transform:translateY(-50%)} .main-timeline .timeline-icon:after{width:70px;height:50px;background:#fff;top:89px;right:-30px} .main-timeline .timeline-content{width:50%;padding:0 50px;margin:52px 0 0;float:right;position:relative} .main-timeline .timeline-content:before{content:"";width:70%;height:100%;border:3px solid #ec496e;border-top:none;border-right:none;position:absolute;bottom:-13px;left:35px} .main-timeline .timeline-content:after{content:"";width:37px;height:3px;background:#ec496e;position:absolute;top:13px;left:0} .main-timeline .title{font-size:20px;font-weight:600;color:#ec496e;text-transform:uppercase;margin:0 0 5px} .main-timeline .description{display:inline-block;font-size:16px;color:#404040;line-height:20px;letter-spacing:1px;margin:0} .main-timeline .timeline:nth-child(even) .timeline-icon{left:auto;right:30%} .main-timeline .timeline:nth-child(even) .timeline-icon:before{right:auto;left:-100px} .main-timeline .timeline:nth-child(even) .timeline-icon:after{right:auto;left:-30px} .main-timeline .timeline:nth-child(even) .timeline-content{float:left} .main-timeline .timeline:nth-child(even) .timeline-content:before{left:auto;right:35px;transform:rotateY(180deg)} .main-timeline .timeline:nth-child(even) .timeline-content:after{left:auto;right:0} .main-timeline .timeline:nth-child(2n) .timeline-content:after,.main-timeline .timeline:nth-child(2n) .timeline-icon i,.main-timeline .timeline:nth-child(2n) .timeline-icon:before,.main-timeline .timeline:nth-child(2n):before{background:#f9850f} .main-timeline .timeline:nth-child(2n) .timeline-icon{border-color:#f9850f} .main-timeline .timeline:nth-child(2n) .title{color:#f9850f} .main-timeline .timeline:nth-child(2n) .timeline-content:before{border-left-color:#f9850f;border-bottom-color:#f9850f} .main-timeline .timeline:nth-child(3n) .timeline-content:after,.main-timeline .timeline:nth-child(3n) .timeline-icon i,.main-timeline .timeline:nth-child(3n) .timeline-icon:before,.main-timeline .timeline:nth-child(3n):before{background:#8fb800} .main-timeline .timeline:nth-child(3n) .timeline-icon{border-color:#8fb800} .main-timeline .timeline:nth-child(3n) .title{color:#8fb800} .main-timeline .timeline:nth-child(3n) .timeline-content:before{border-left-color:#8fb800;border-bottom-color:#8fb800} .main-timeline .timeline:nth-child(4n) .timeline-content:after,.main-timeline .timeline:nth-child(4n) .timeline-icon i,.main-timeline .timeline:nth-child(4n) .timeline-icon:before,.main-timeline .timeline:nth-child(4n):before{background:#2fcea5} .main-timeline .timeline:nth-child(4n) .timeline-icon{border-color:#2fcea5} .main-timeline .timeline:nth-child(4n) .title{color:#2fcea5} .main-timeline .timeline:nth-child(4n) .timeline-content:before{border-left-color:#2fcea5;border-bottom-color:#2fcea5} @media only screen and (max-width:1200px){.main-timeline .timeline-icon:before{width:50px;right:-50px} .main-timeline .timeline:nth-child(even) .timeline-icon:before{right:auto;left:-50px} .main-timeline .timeline-content{margin-top:75px} } @media only screen and (max-width:990px){.main-timeline .timeline{margin:0 0 10px} .main-timeline .timeline-icon{left:25%} .main-timeline .timeline:nth-child(even) .timeline-icon{right:25%} .main-timeline .timeline-content{margin-top:115px} } @media only screen and (max-width:767px){.main-timeline{padding-top:50px} .main-timeline:before{left:80px;right:0;margin:0} .main-timeline .timeline{margin-bottom:70px} .main-timeline .timeline:before{top:0;left:83px;right:0;margin:0} .main-timeline .timeline-icon{width:60px;height:60px;line-height:40px;padding:5px;top:0;left:0} .main-timeline .timeline:nth-child(even) .timeline-icon{left:0;right:auto} .main-timeline .timeline-icon:before,.main-timeline .timeline:nth-child(even) .timeline-icon:before{width:25px;left:auto;right:-25px} .main-timeline .timeline-icon:after,.main-timeline .timeline:nth-child(even) .timeline-icon:after{width:25px;height:30px;top:44px;left:auto;right:-5px} .main-timeline .timeline-icon i{font-size:30px;line-height:45px} .main-timeline .timeline-content,.main-timeline .timeline:nth-child(even) .timeline-content{width:100%;margin-top:-15px;padding-left:130px;padding-right:5px} .main-timeline .timeline:nth-child(even) .timeline-content{float:right} .main-timeline .timeline-content:before,.main-timeline .timeline:nth-child(even) .timeline-content:before{width:50%;left:120px} .main-timeline .timeline:nth-child(even) .timeline-content:before{right:auto;transform:rotateY(0)} .main-timeline .timeline-content:after,.main-timeline .timeline:nth-child(even) .timeline-content:after{left:85px} } @media only screen and (max-width:479px){.main-timeline .timeline-content,.main-timeline .timeline:nth-child(2n) .timeline-content{padding-left:110px} .main-timeline .timeline-content:before,.main-timeline .timeline:nth-child(2n) .timeline-content:before{left:99px} .main-timeline .timeline-content:after,.main-timeline .timeline:nth-child(2n) .timeline-content:after{left:65px} } /******************* Timeline Demo - 4 *****************/ .main-timeline4{overflow:hidden;position:relative} .main-timeline4:before{content:"";width:5px;height:70%;background:#333;position:absolute;top:70px;left:50%;transform:translateX(-50%)} .main-timeline4 .timeline-content:before,.main-timeline4 .timeline:before{top:50%;transform:translateY(-50%);content:""} .main-timeline4 .timeline{width:50%;padding-left:100px;float:right;position:relative} .main-timeline4 .timeline:before{width:20px;height:20px;border-radius:50%;background:#fff;border:5px solid #333;position:absolute;left:-10px} .main-timeline4 .timeline-content{display:block;padding-left:150px;position:relative} .main-timeline4 .timeline-content:before{width:90px;height:10px;border-top:7px dotted #333;position:absolute;left:-92px} .main-timeline4 .year{display:inline-block;width:120px;height:120px;line-height:100px;border-radius:50%;border:10px solid #f54957;font-size:30px;color:#f54957;text-align:center;box-shadow:inset 0 0 10px rgba(0,0,0,.4);position:absolute;top:0;left:0} .main-timeline4 .year:before{content:"";border-left:20px solid #f54957;border-top:10px solid transparent;border-bottom:10px solid transparent;position:absolute;bottom:-13px;right:0;transform:rotate(45deg)} .main-timeline4 .inner-content{padding:20px 0} .main-timeline4 .title{font-size:24px;font-weight:600;color:#f54957;text-transform:uppercase;margin:0 0 5px} .main-timeline4 .description{font-size:14px;color:#6f6f6f;margin:0 0 5px} .main-timeline4 .timeline:nth-child(2n){padding:0 100px 0 0} .main-timeline4 .timeline:nth-child(2n) .timeline-content:before,.main-timeline4 .timeline:nth-child(2n) .year,.main-timeline4 .timeline:nth-child(2n):before{left:auto;right:-10px} .main-timeline4 .timeline:nth-child(2n) .timeline-content{padding:0 150px 0 0} .main-timeline4 .timeline:nth-child(2n) .timeline-content:before{right:-92px} .main-timeline4 .timeline:nth-child(2n) .year{right:0} .main-timeline4 .timeline:nth-child(2n) .year:before{right:auto;left:0;border-left:none;border-right:20px solid #f54957;transform:rotate(-45deg)} .main-timeline4 .timeline:nth-child(2){margin-top:110px} .main-timeline4 .timeline:nth-child(odd){margin:-110px 0 0} .main-timeline4 .timeline:nth-child(even){margin-bottom:80px} .main-timeline4 .timeline:first-child,.main-timeline4 .timeline:last-child:nth-child(even){margin:0} .main-timeline4 .timeline:nth-child(2n) .year{border-color:#1ebad0;color:#1ebad0} .main-timeline4 .timeline:nth-child(2) .year:before{border-right-color:#1ebad0} .main-timeline4 .timeline:nth-child(2n) .title{color:#1ebad0} .main-timeline4 .timeline:nth-child(3n) .year{border-color:#7cba01;color:#7cba01} .main-timeline4 .timeline:nth-child(3) .year:before{border-left-color:#7cba01} .main-timeline4 .timeline:nth-child(3n) .title{color:#7cba01} .main-timeline4 .timeline:nth-child(4n) .year{border-color:#f8781f;color:#f8781f} .main-timeline4 .timeline:nth-child(4) .year:before{border-right-color:#f8781f} .main-timeline4 .timeline:nth-child(4n) .title{color:#f8781f} @media only screen and (max-width:1200px){.main-timeline4 .year{top:50%;transform:translateY(-50%)} } @media only screen and (max-width:990px){.main-timeline4 .timeline{padding-left:75px} .main-timeline4 .timeline:nth-child(2n){padding:0 75px 0 0} .main-timeline4 .timeline-content{padding-left:130px} .main-timeline4 .timeline:nth-child(2n) .timeline-content{padding:0 130px 0 0} .main-timeline4 .timeline-content:before{width:68px;left:-68px} .main-timeline4 .timeline:nth-child(2n) .timeline-content:before{right:-68px} } @media only screen and (max-width:767px){.main-timeline4{overflow:visible} .main-timeline4:before{height:100%;top:0;left:0;transform:translateX(0)} .main-timeline4 .timeline:before,.main-timeline4 .timeline:nth-child(2n):before{top:60px;left:-9px;transform:translateX(0)} .main-timeline4 .timeline,.main-timeline4 .timeline:nth-child(even),.main-timeline4 .timeline:nth-child(odd){width:100%;float:none;text-align:center;padding:0;margin:0 0 10px} .main-timeline4 .timeline-content,.main-timeline4 .timeline:nth-child(2n) .timeline-content{padding:0} .main-timeline4 .timeline-content:before,.main-timeline4 .timeline:nth-child(2n) .timeline-content:before{display:none} .main-timeline4 .timeline:nth-child(2n) .year,.main-timeline4 .year{position:relative;transform:translateY(0)} .main-timeline4 .timeline:nth-child(2n) .year:before,.main-timeline4 .year:before{border:none;border-right:20px solid #f54957;border-top:10px solid transparent;border-bottom:10px solid transparent;top:50%;left:-23px;bottom:auto;right:auto;transform:rotate(0)} .main-timeline4 .timeline:nth-child(2n) .year:before{border-right-color:#1ebad0} .main-timeline4 .timeline:nth-child(3n) .year:before{border-right-color:#7cba01} .main-timeline4 .timeline:nth-child(4n) .year:before{border-right-color:#f8781f} .main-timeline4 .inner-content{padding:10px} } .footer { position: relative; width: 100%; min-height: 140px; background: #eee; padding: 10px 0; z-index: 1; } .footer .footer_links ul {z-index: 1;display: block;width: 100%;padding: 0;text-align: right;position: absolute;right: 7%;box-sizing: border-box; margin-top:20%;} .footer .footer_links ul li {display: inline-block;text-align: center;line-height: 0;}

Related: See More


Questions / Comments: