Html examples,site codes
(html code for a site)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Home | official site of darul hidaya da`wa </title>
<!-- core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="images/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">
</head><!--/head-->
<body class="homepage">
<header id="header">
<div class="top-bar">
<div class="container">
<div class="row">
<div class="col-sm-6 col-xs-4">
<div class="top-number"><p><i class="fa fa-phone-square"></i> 0494 2698268</p></div>
</div>
<div class="col-sm-6 col-xs-8">
<div class="social">
<ul class="social-share">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-skype"></i></a></li>
</ul>
<div class="search">
<form role="form">
<input type="text" class="search-form" autocomplete="off" placeholder="Search">
<i class="fa fa-search"></i>
</form>
</div>
</div>
</div>
</div>
</div><!--/.container-->
</div><!--/.top-bar-->
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="logo" width="350" height="100"></a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="principal.html">Principal</a></li>
<li><a href="staff.html">Staff</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Students <i class="fa fa-angle-down"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Alumni</a></li>
<li><a href="swalah.html">Union</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">log in</a></li>
</ul>
</li>
<li><a href=".//x-gallery/default.html">Gallery</a></li>
<li><a href="log.html">log in</a></li>
</ul>
</div>
</div><!--/.container-->
</nav><!--/nav-->
</header><!--/header-->
<section id="main-slider" class="no-margin">
<div class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
<li data-target="#main-slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active" style="background-image: url(images/slider/bg1.jpg)">
<div class="container">
<div class="row slide-margin">
<div class="col-sm-6">
<div class="carousel-content">
<h1 class="animation animated-item-1"><div style="background-color: #c1191e; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;">
<b>MASJIDUL HIDAYA</b><br/></h1>
</div>
</div>
<div class="col-sm-6 hidden-xs animation animated-item-4">
</div>
</div>
</div>
</div><!--/.item-->
<div class="item" style="background-image: url(images/slider/bg2.jpg)">
<div class="container">
<div class="row slide-margin">
<div class="col-sm-6">
<div class="carousel-content">
<h1 class="animation animated-item-1" align="center"><div style="background-color: #c1191e; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;">
<b>SAYYID MUHAMMED ALI SHIHAB THANGAL SOUDHAM</b><br/></h1>
</div>
</div>
<div class="col-sm-6 hidden-xs animation animated-item-4">
</div>
</div>
</div>
</div><!--/.item-->
<div class="item" style="background-image: url(images/slider/bg3.jpg)">
<div class="container">
<div class="row slide-margin">
<div class="col-sm-6">
<div class="carousel-content">
<h1 class="animation animated-item-1" align="center"><div style="background-color: #c1191e; margin-left: 20px; margin-right: 20px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px;">
<b>MARHOOM KV USTHAD KOOTTANADU SOUDHAM</b><br/></h1>
</div>
</div>
<div class="col-sm-6 hidden-xs animation animated-item-4">
</div>
</div>
</div>
</div><!--/.item-->
</div><!--/.carousel-inner-->
</div><!--/.carousel-->
<a class="prev hidden-xs" href="#main-slider" data-slide="prev">
<i class="fa fa-chevron-left"></i>
</a>
<a class="next hidden-xs" href="#main-slider" data-slide="next">
<i class="fa fa-chevron-right"></i>
</a>
</section>
<!--/.col-sm-6-->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseFour1">
<marquee> <strong> <font color="black"><font color="green">LATEST NEWS .....</font><font color=" #6f2c22
">Next Monthly leave announced..<img src="images/vv.gif">|MEELAD FEST.."EXELLENCIA`16"..<img src="images/vv.gif">|</font> </strong></marquee>
<i class="fa fa-angle-down pull-right"></i>
</a>
</h3>
</div>
<div id="collapseFour1" class="panel-collapse collapse">
<div class="panel-body">
<p> Next Monthly leave on Dec/22/2016.</p>
</div>
</div>
</div>
</div><!--/#accordion1-->
</div>
</div>
</div><!--/.row-->
</div<!--/#main-slider-->
<section id="services" class="service-item">
<div class="container">
<div class="center wow fadeInDown">
<h2><Font size="5">DARUL HIDAYA DA`WA COLLEGE MANUR,KALADI(PO),</BR>EDAPPAL,MALAPPURAM(DT),KERALA,INDIA,679582</font></h2>
<p class="lead"><U>AFFILIATED TO DARUL HUDA ISLAMIC UNIVERSITY,CHEMMAD</u></p>
</div>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="media services-wrap wow fadeInDown">
<div class="pull-left">
<img class="img-responsive" src="images/services/services1.png" width="90" height="150">
</div>
<div class="media-body">
<p class="media-heading" align="center">HADI and HUDAWI<br><a class="btn-slide animation animated-item-3" href="about-us.html"><font color="red">Read More..</font></a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="media services-wrap wow fadeInDown">
<div class="pull-left">
<img class="img-responsive" src="images/services/services2.png" width="90" height="150" >
</div>
<div class="media-body">
<p class="media-heading">Affiliated to DHIU, chemmad<br><a class="btn-slide animation animated-item-3" href="http://www.dhiu.in/"target="_blank"><font color="red">Read More..</font></a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="media services-wrap wow fadeInDown">
<div class="pull-left">
<img class="img-responsive" src="images/services/services3.png" width="90" height="150" >
</div>
<div class="media-body">
<h3 class="media-heading">IT FACILITIES</h3>
<p>Computer and science lab <BR><a class="btn-slide animation animated-item-3" href="about-us.html"><font color="red">Read More..</font></a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="media services-wrap wow fadeInDown">
<div class="pull-left">
<img class="img-responsive" src="images/services/services4.png" width="90" height="150">
</div>
<div class="media-body">
<h3 class="media-heading">HOSTEL </h3>
<p>sms and kvs building,<br><a class="btn-slide animation animated-item-3" href="about-us.html"><font color="red">Read More..</font></a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="media services-wrap wow fadeInDown">
<div class="pull-left">
<img class="img-responsive" src="images/services/services5.png" width="90" height="150">
</div>
<div class="media-body">
<h3 class="media-heading">LAIBRARY </h3>
<p>AL-JAWAHIR library <br><a class="btn-slide animation animated-item-3" href="about-us.html"><font color="red">Read More..</font></a></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="media services-wrap wow fadeInDown">
<div class="pull-left">
<img class="img-responsive" src="images/services/services6.png" width="90" height="150">
</div>
<div class="media-body">
<h3 class="media-heading">STAFF</h3>
<p>expert and inteligents<br><a class="btn-slide animation animated-item-3" href="about-us.html"><font color="red">Read More..</font></a></p>
</div>
</div>
</div>
</div><!--/.row-->
</div><!--/.container-->
</section><!--/#feature-->
</div>
</div>
</div><!--/.row-->
</div><!--/.container-->
</section><!--/#recent-works-->
</div>
</div><!--/.row-->
</div><!--/.container-->
</section><!--/#services-->
</div>
</div>
</div>
</div><!--/.container-->
</section><!--/#middle-->
<section id="middle">
<div class="container">
<div class="row">
<div class="col-sm-6 wow fadeInDown">
<div class="skill">
<h2 align ="center"><Font color="red" size="8"><strong>EXELLENCIA`16</strong></font></h2>
<p align="center"><u>Darul Hidaya Da`wa College,<STRONG>MEELAD ARTS FEST 2016</STRONG></u></p>
<h3 align="center"><Font color="red" size="5">TEAM STATUS BAR</font></h3>
<div class="progress-wrap">
<h3 align="center"> <font color="#008066" size="4">DHALIA</font></h3>
<div class="progress">
<div class="progress-bar color1" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span class="bar-width">0%</span>
</div>
</div>
</div>
<div class="progress-wrap">
<h3 align="center"><font color="#008066" size="4"> MAGNOLIA</font></h3>
<div class="progress">
<div class="progress-bar color2" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span class="bar-width">0%</span>
</div>
</div>
</div>
<div class="progress-wrap">
<h3 align="center"><font color="#008066" size="4">GAZANIA</font></h3>
<div class="progress">
<div class="progress-bar color3" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span class="bar-width">0%</span>
</div>
</div>
</div>
<div class="progress-wrap">
<h3 align="center"><font color="#008066" size="4">BEGONIA</font></h3>
<div class="progress">
<div class="progress-bar color4" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span class="bar-width">0%</span>
</div>
</div>
</div>
</div>
</div><!--/.col-sm-6-->
<div class="col-sm-6 wow fadeInDown">
<div class="accordion">
<h2 align="center"><font color="red" size="6"><strong><b><u>OUR FACILITIES</font></strong></b></u></h2>
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading active">
<h3 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1">
MARHOOM KV USTHAD SOUDHAM
<i class="fa fa-angle-right pull-right"></i>
</a>
</h3>
</div>
<div id="collapseOne1" class="panel-collapse collapse in">
<div class="panel-body">
<div class="media accordion-inner">
<div class="pull-left">
<img class="img-responsive" src="images/accordion1.jpg">
</div>
<div class="media-body">
<p>KV usthad block that reserved for senior secondary and Degree students, this block is equipped with classrooms, computer lab, science lab and dining facilities while the second one, viz.</p>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo1">
SAYYID MUHAMMED ALI SHIHAB THANGAL SOUDHAM
<i class="fa fa-angle-right pull-right"></i>
</a>
</h3>
</div>
<div id="collapseTwo1" class="panel-collapse collapse">
<div class="panel-body">
<div class="media accordion-inner">
<div class="pull-left">
<img class="img-responsive" src="images/ashraf.jpg">
</div></div>
Sayyid Muhammed Ali Shihab Memorial block, was restricted for the secondary students, with their classrooms and hostel facility along with a common multipurpose auditorium having 175 seating capacity, conference hall and a library.
.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree1">
SCIENCE LAB and COMPUTER LAB
<i class="fa fa-angle-right pull-right"></i>
</a>
</h3>
</div>
<div id="collapseThree1" class="panel-collapse collapse">
<div class="panel-body">
<div class="media accordion-inner">
<div class="pull-left">
<img class="img-responsive" src="images/library.jpg">
</div></div>
Computer Lab
The computer lab is attached with ground floor of KVS block . There are more than 15 computers for students` purposes. For the ease and convenience of the usage it ensures the availability of the round the clock and the guidelines of professional mentors .
and
Science Lab
The well- equipped science laboratory is next to the computer lab. The amenities for the basic experiments for student scientists are also available. The helpline of mentors, specially focused in science, is open at any time. <a class="btn-slide animation animated-item-3" href="about-us.html"><font color="red">Read More..</font></a>
</div>
</div>
</div>
<!--/#accordion1-->
</div>
</div>
</div><!--/.row-->
</div><!--/.container-->
</section><!--/#content-->
<!--/#bottom-->
<footer id="footer" class="midnight-blue">
<div class="container">
<div class="row">
<div class="col-sm-6" >
©2016 <a target="_blank" href="http://hirainfotech.blogspot.in/" title="Free Twitter Bootstrap WordPress Themes and HTML templates">HIRA INFOTECH</a>. All Rights Reserved.
</div>
<h6 align="right"></h6>
</div>
</div>
</footer><!--/#footer-->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/main.js"></script>
<script src="js/wow.min.js"></script>
</body>
</html>
Leave a Comment