EVOLUTION-NINJA

Edit File: new_dashboard.php

<?php $this->load->view('includes/admin_header.php');?>

<div class="content-wrapper">
		<br>
			<section class="home-yas">
				<div class="container">
				  <div class="mid-image">
					<img src="<?php echo base_url('assets_dashboard/images/mid-img.png');?>" alt="First slide" class="img-responsive center-block">
				  </div>
				</div>
			</section>

<section class="home-mid-one">
				<div class="container-fluid">
					<div class="row">
					    <div class="col-sm-12">
					        <div class="col-sm-7">
    						  <div class="events-block">
    							<h5>News & Events</h5>
    							<div class="events-tabs">
    								<ul class="nav nav-tabs">
    									  <li class="active"><a data-toggle="tab" href="#home">2019</a></li>
    									  <li><a data-toggle="tab" href="#menu1">2018</a></li>
    									  <li><a data-toggle="tab" href="#menu2">2017</a></li>
    									  <li><a data-toggle="tab" href="#menu3">2016</a></li>
    									  <li><a data-toggle="tab" href="#menu4">2015</a></li>
    								</ul>
    
    								<div class="tab-content">
    								  <div id="home" class="tab-pane fade in active">
    									 <ul class="home-tab-list">
    									   <li>YASKAWA India won the Silver Prize at the 27th Chapter Convention on Quality Concepts</li>
    										 <p class="tab-in">August 19, 2018, Bengaluru: We are pleased to announce that YASKAWA India won the Silver Prize at the 27th Chapter Convention on Quality Concepts 2018 held on August 19, 2018 ...</p>
    									   <li>Seminar on Low Harmonic Drive Solution for Building Automation</li>
    										 <p class="tab-in">August 3, 2018, Kolkata: Continuing the spree of educating and creating awareness of Low Harmonic Solution for Building Automation, YASKAWA in association with ISHRAE Kolkata ...</p>
    									   <li>Seminar on Low Harmonic and Regenerative Solution for JSW Vijayanagar at Hyatt Place, Bellary</li>
    										 <p class="tab-in">June 21, 2018, Torangallu, Bellary: Our belief in driving responsive relationships involves creating a more adaptive human-business experience by extending technology systems ...</p>
    									 </ul>
    								  </div>
    								  <div id="menu1" class="tab-pane fade">
    									<h3>Menu 1</h3>
    									<p>Some content in menu 1.</p>
    								  </div>
    								  <div id="menu2" class="tab-pane fade">
    									<h3>Menu 2</h3>
    									<p>Some content in menu 2.</p>
    								  </div>
    								  <div id="menu3" class="tab-pane fade">
    									<h3>Menu 3</h3>
    									<p>Some content in menu 2.</p>
    								  </div>
    								  <div id="menu4" class="tab-pane fade">
    									<h3>Menu 4</h3>
    									<p>Some content in menu 2.</p>
    								  </div>
    								</div>
    							</div>
    						  </div>
    						</div>
    						<div class="col-sm-5">
            					<div class="polling-block">
            						<h3>What do you think ?</h3>
            						<form>
            						    <div class="row">
            						        <textarea type="text" class="form-control" style="width: 94%;margin-left: 3%;"></textarea>
            						    </div>
            							<div class="poll-radio">
            								<div class="radio">
            									<label class="radio-inline chec-1"><input type="radio" name="optradio">Strongly agree
            										<span class="rad-box">A</span></label>
            									<label class="radio-inline chec-2"><input type="radio" name="optradio">Agree
            										<span class="rad-box">B</span></label>
            									<label class="radio-inline chec-3"><input type="radio" name="optradio">Neither agree or disagree
            									    <span class="rad-box">C</span></label>
            								</div>
            								
            		  				
            		  				
            								
            								<div>
            									<label class="radio-inline chec-4"><input type="radio" name="optradio">Disagree
            										<span class="rad-box">D</span></label>
            									<label class="radio-inline chec-5"><input type="radio" name="optradio">Strongly disagree
            										<span class="rad-box">E</span></label>
            								</div>
            							</div>
            						</form>
            					</div>
            					<div class="polling-res">
            						<div class="progress pol-prog">
              							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
              								aria-valuemin="0" aria-valuemax="100" style="width:40%">
                								40% 
              							</div>
              							<span class="prog-letter">A</span>
            						</div>
            						<div class="progress pol-prog">
              							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
              								aria-valuemin="0" aria-valuemax="100" style="width:20%">
                								20% 
              							</div>
              							<span class="prog-letter">B</span>
            						</div>
            						<div class="progress pol-prog">
              							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
              								aria-valuemin="0" aria-valuemax="100" style="width:10%">
                								10% 
              							</div>
              							<span class="prog-letter">C</span>
            						</div>
            						<div class="progress pol-prog">
              							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
              								aria-valuemin="0" aria-valuemax="100" style="width:05%">
                								5%
              							</div>
              							<span class="prog-letter">D</span>
            						</div>
            						<div class="progress pol-prog">
              							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
              								aria-valuemin="0" aria-valuemax="100" style="width:02%">
                								2% 
              							</div>
              							<span class="prog-letter">E</span>
            						</div>
            					</div>
            				</div>
					    </div>
					</div>
				</div>
			</section>
		</div>
		
		
<?php $this->load->view('includes/admin_footer.php');?>
		
<style>
	.home-mid-one{
		padding: 2% 0%;
	}
	.events-block{
	  border: 2px solid #0065B3;
	  padding: 10px;
	  text-align: justify;
	  line-height: 2;
      height: 403px;
      overflow-y: hidden;
	}
	.events-block h5{
	  color: #0065B3;
	  font-weight: bold;
	  padding-bottom: 10px;
	  padding-left: 40px;
	  padding-right: 40px;
	  border-bottom: 2px solid #0065B3;
	  display: inline-block;
	  margin-left: 35%;
	}
	.events-tabs .nav-tabs{
	  border-bottom: none!important;
	  text-align: center!important;
	  margin-bottom: 20px;
	}
	.events-tabs .nav-tabs>li{
	  float: none!important;
	  display: inline-block!important;
	  font-weight: bold!important;  
	}
	.events-tabs .nav-tabs>li>a{
	  color: #C1C1C1!important;
	}
	.events-tabs .nav-tabs>li>a:hover{
	  color: #0065B3!important;
	  border-bottom: 2px solid #0065B3!important;
	  border-right: transparent!important;
	  border-top:transparent!important;
	  border-left: transparent!important;
	  background: white;
	}
	.events-tabs .nav-tabs>li.active>a,.events-tabs .nav-tabs>li.active>a:focus,.events-tabs .nav-tabs>li.active>a:hover{
	  color: #0065B3!important;
	  border-bottom: 2px solid #0065B3!important;
	  border-right: none!important;
	  border-top:none!important;
	  border-left: none!important;
	}
	.home-tab-list{
	  list-style-type: none;
	}
	.home-tab-list li{
	  display: flex;
	  color: #2D2D2D;
	  font-weight: bold;
	}
	.home-tab-list li:before{
	  content: "\f192 ";
	  font-family: FontAwesome;
	  margin-right: 10px;
	  color: #2D2D2D;
	}
	.tab-in{
	  padding-left: 22px;
	  color:#AFAFAF;
	  font-size: 12px; 
	}
	.polling-block{
	  margin: 15px 0px;
	}
	.polling-block h3{
	  font-weight: bold;
	  padding-bottom: 10px;
	  border-bottom: 4px solid #0065B3;
	  color: #3C3C3C;
	  margin-top: 0;
	}
	.polling-block h3:before{
	  content: "\f192 ";
	  font-family: FontAwesome;
	  margin-right: 10px;
	  color: #3C3C3C;
	  font-size: 22px;
	}
	.poll-radio label{
	  font-size: 12px;
    color: #000;
    font-weight: 600;
    line-height: 2;
    margin-right: 0px;
    padding-left: 33px;
    position: relative;
	}
	.poll-radio input[type="radio"]{
	  opacity: 0;
	}
	.rad-box{
	  position: absolute;
	  top: 0;
	  left: 0;
	  background:#0065B3;
	  width: 30px;
	  height: 30px;
	  text-align: center;  
	  color: white;
	}

.polling-res{
	  border: 2px solid #0065B3;
	  padding: 10px;
	}

.poll-radio input:checked ~ .rad-box{
	  background: #65B200;
	}
	.pol-prog{
	  position: relative;
	  padding-left: 30px;
	  margin-bottom: 15px;
	}
	.prog-letter{
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 30px;
	  height: 30px;
	  text-align: center;
	  background: #0065B3;
	  color: white;
	}
	.footer-bl{
	  padding-top: 20px;
	}
</style>