September 27, 2021

Header Design

<header>
      
            <div class="row"><div class="dark-header">
                    <div class="container">
                    <ul>
                        <li> <i class="fa fa-phone"></i>+ 91 123 456 7890</li>
                        <li> <i class="fa fa-clock-o"></i> Mon - Fri 9:00 - 19:00 / Weekdays Free</li>
                    </ul>
                </div></div>
                
            </div>

            <div class="container">

                    <div class="row secnd">
                            <div class="col-sm-6">
                                <img src="logo-health-snippets-tolmatol.jpg" alt="">
                            </div>
                            <div class="col-sm-6">
                                <ol class="pull-right">
                                    <li><i class="fa fa-phone"></i><span>Call us now</span><br><strong>+91 1234 123 123</strong></li>
                                    <li><i class="fa fa-clock-o"></i><span>Opening Times</span><br><strong>08:00 to 18:00</strong> </li>
                                    <li><button class="btn btn-info btn-lg"> Donate </button></li>
                                </ol>
                            </div>
                        </div>
                </header>
            </div>

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
    <style>
        @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500');
        body {  font-family: 'Montserrat', sans-serif; margin:0; padding: 0px; }
        ol li, ul { list-style-type: none; margin:0px; padding: 0px;}
        ol li, ul li { display: inline-block; margin-right: 20px; font-size: 14px; line-height: 30px;}
        ul li { font-weight: 500; color: #c5d5da;}
        ul li i {color:#35a9ce; font-size: 18px !important; padding-right: 15px !important;}
        .dark-header { background: #2690b1; padding: 5px; color: #fff;}
        header span { color: #ccc; font-weight: 400;}
        ol li span {  font-size: 15px; padding-left: 55px;   }
        ol li { line-height: 20px; font-weight: 500;}
        ol li i { position: absolute; font-size: 45px !important; color:#35a9ce;}
        ol li strong { padding-left: 55px; color:#949494; font-weight: 500; font-size: 15px;}
        .secnd { margin-top: 15px;}
    </style>

 

Leave a Reply

Your email address will not be published. Required fields are marked *