Tuesday, March 29, 2016

Box Design in html

                No comments   

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;" />&nbsp;&nbsp;<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;" />&nbsp;&nbsp;<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;" />&nbsp;&nbsp;<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" />&nbsp;<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>

0 comments:

Post a Comment

Popular Posts