Box Design in html ~ Asp.net modules

Intoduction :-
Hii Friends...
Today I explain how to make multiple box with multiple colors with the help of html. Here with the html we create multiple colors boxes.Html is a client side tool, and a good thing is html is not a case sensitive language.

DEMO:-

Example :-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.ser_top
{
border: 1px #e91547 solid;
}
.ser_hadding
{
background-color: #eb1646;
border-radius: 0px 0px 10px 0px;
text-align: center;
font-size: 16px;
padding: 5px 0px 5px 0px;
}
.ser_hadding a
{
color: #FFFFFF;
}
.ser_hadding a:hover
{
color: #FFFF00;
text-decoration: none;
}
.col-md-3
{
width: 25%;
}
.ser_img
{
padding-left: 75px;
margin-top: 5px;
}
.img-responsive
{
display: block;
height: auto;
max-width: 100%;
}
.ser_text
{
text-align: center;
font-size: 14px;
font-family: Arial;
color: #000000;
}
.read_more
{
background-color: #1195d5;
color: #FFFFFF;
text-align: center;
width: 110px;
padding: 5px;
border-radius: 5px;
margin-left: 65px;
margin-top: 5px;
margin-bottom: 5px;
}
.read_more a
{
color: #FFFFFF;
}

.ser_top1
{
border: 1px #fc6e22 solid;
}
.ser_top2
{
border: 1px #8ae409 solid;
}
.ser_top3
{
border: 1px #1195d5 solid;
}
#welcome
{
background: #FFFFFF;
width: 100%;
float: left;
margin-top: 20px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="welcome">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="ser_top">
<div class="ser_hadding">
<img src="img/page-html.ico" style="height:30px; width:30px;" />  <a href="#">HTML</a></div>
<div class="ser_img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png" class="img-responsive" style="margin-left: -42px;" /></div>
<div class="ser_text">
you can find Html,Html5 designs
<br />
on my blog.</div>
<div class="read_more">
<a href="#">Read More....</a></div>
</div>
</div>
<div class="col-md-3">
<div class="ser_top1">
<div class="ser_hadding" style="background-color: #fc6e22;">
<img src="img/download.png" style="height:30px; width:30px;" />  <a href="#">Css</a></div>
<div class="ser_img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png" class="img-responsive" style="margin-left: -42px;" /></div>
<div class="ser_text">
you can find Css,Css3 designs
<br />
on my blog.
</div>
<div class="read_more">
<a href="#">Read More....</a></div>
</div>
</div>
<div class="col-md-3">
<div class="ser_top2">
<div class="ser_hadding" style="background-color: #83da06;">
<img src="img/logo_js.png" style="height:30px; width:30px;" />  <a href="#">JavaScript</a></div>
<div class="ser_img">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhriHfw8KtedIOQ1MQwCVDUdBEtTB7K11-LVZaA9IPxJ1op4wjjue14yF5t3M0akFrTrkosTqywM6QDePPjkK06ALp-zfukLsrPKp7Od0Lx4kTyVGhujfPX2lJWbCspz1lkZ2R-FWoZ44Q/s1600-r/dotnetnew.png" class="img-responsive" style="margin-left: -42px;" /></div>
<div class="ser_text">
you can find Javascrip and Angular js
<br />
on my blog.
</div>
<div class="read_more">
<a href="#">Read More....</a></div>
</div>
</div>
<div class="col-md-3" style="display:none;">
<div class="ser_top3">
<div class="ser_hadding" style="background-color: #1195d5;">
<img src="img/post.png" /> <a href="#">blank</a></div>
<div class="ser_img">
<img src="img/pos.png" class="img-responsive" /></div>
<div class="ser_text">
blank<br />blank
</div>
<div class="read_more">
<a href="#">Read More....</a></div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>

Tuesday, March 29, 2016

Box Design in html

0 comments:

Post a Comment

Popular Posts

Blog Archive

About Me