<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h1>NIELIT</h1>
<div class="tab_container">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1"><i class="fa fa-code"></i><span>HOME</span></label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2"><i class="fa fa-pencil-square-o"></i><span>About us</span></label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3"><i class="fa fa-bar-chart-o"></i><span>Departments</span></label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4"><i class="fa fa-folder-open-o"></i><span>Services</span></label>
<input id="tab5" type="radio" name="tabs">
<label for="tab5"><i class="fa fa-envelope-o"></i><span>Contact us</span></label>
<section id="content1" class="tab-content">
<h3>Welcome to nielit </h3>
<p>National Institute of Electronics and Information Technology (NIELIT) is an autonomous body of Ministry of Electronics and Information Technology, Govt. of India. The Centre is a premier organisation for education, training, R&D and consultancy in IT and electronics.</p>
</section>
<section id="content2" class="tab-content">
<h3>Who we are</h3>
<p>NIELIT Calicut has successfully executed many software development and electronics design projects for reputed organisations like TISCO, BPL, BPL Telecom, KEL, Kannur University, Kerala Feeds, KCMMF Ltd., MTAB, etc. NIELIT Calicut is also having 50 authorised training centers in Kerala for conducting computer software and hardware courses at present.
Long term regular programmes such as M.Tech. in Embedded Systems, M.Tech. in Electronics Design and Technology, M.C.A. under University of Calicut are also offered from the Centre/p>
</section>
<section id="content3" class="tab-content">
<h3>Wide platform</h3>
<p>control an instrumentation</p>
<p>Embedded system group</p>
<p>VLSI Design group</p>
<p>Information technology</p>
</section>
<section id="content4" class="tab-content">
<h3>Speard to</h3>
<p>Accademin projects</p>
<p>Industrial training</p>
<p>Projects</p>
</section>
<section id="content5" class="tab-content">
<h3>How to reach us</h3>
<p>NIELIT Calicut</p>
<p>Post Box No. 5, P. O. NIT Campus,</p>
<p>CALICUT – 673601,Kerala</p>
<p>Tel. : 0495-2287266, 2287166 ,</p>
<p>Fax : 0495-2287168</p>
<p>Reach Us on WhatsApp 9446711666</p>
<p>Email : info@calicut.nielit.in</p>
</section>
</div>
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
body {
font-family: sans-serif;
background: #f6f9fa;
}
h1 {
color: #2f3;
text-align: center;
}
a {
color: #cc;
text-decoration: none;
outline: none;
}
/*Fun begins*/
.tab_container {
width: 90%;
margin: 0 auto;
padding-top: 70px;
position: relative;
}
input, section {
clear: both;
padding-top: 10px;
display: none;
}
label {
font-weight: 700;
font-size: 18px;
display: block;
float: left;
width: 20%;
padding: 1.5em;
color: #757675;
cursor: pointer;
text-decoration: none;
text-align: center;
background: #f0f0f0;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4,
#tab5:checked ~ #content5 {
display: block;
padding: 20px;
background: #fff;
color: #999;
border-bottom: 2px solid #f0f0f0;
}
.tab_container .tab-content p,
.tab_container .tab-content h3 {
-webkit-animation: fadeInScale 0.7s ease-in-out;
-moz-animation: fadeInScale 0.7s ease-in-out;
animation: fadeInScale 0.7s ease-in-out;
}
.tab_container .tab-content h3 {
text-align: center;
}
.tab_container [id^="tab"]:checked + label {
background: #fff;
box-shadow: inset 0 3px #0CE;
}
.tab_container [id^="tab"]:checked + label .fa {
color: #0CE;
}
label .fa {
font-size: 1.3em;
margin: 0 0.4em 0 0;
}
/*Media query*/
@media only screen and (max-width: 930px) {
label span {
font-size: 14px;
}
label .fa {
font-size: 14px;
}
}
@media only screen and (max-width: 768px) {
label span {
display: none;
}
label .fa {
font-size: 16px;
}
.tab_container {
width: 98%;
}
}
/*Content Animation*/
@keyframes fadeInScale {
0% {
transform: scale(0.9);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
