Thursday, February 15, 2018

Facebook Style Header Design Using CSS

In this tutorial, we are going to discuss how to create Facebook like top header design using CSS. Here we have created simple code and placed some images & search bar in header section of html page.

Facebook Style Header Design Using CSS

Facebook Style Header Design:

Let see the complete source code for header design.


header.html
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
    <style>
        * {
            margin: 0px;
            padding: 0px
        }
        #main-container {
            width: 100%;
            margin: 0px auto;
        }
        #header {
            width: 100%;
            background-color: #4267b2;
            padding: 10px;
            color: white;
        }
        #header:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        #header section > #fb-icon {
            margin-left: 140px;
        }
        #header section > img {
            float: left;
            margin-left: 10px;
        }
        #header section > input {
            float: left;
            margin-top: 0px;
            margin-left: 10px;
            margin-right: 400px;
        }
        #header nav {
            width: 50%;
            float: left;
        }
        #header nav ul {
            list-style: none;
        }
        #header nav ul li {
            float: left;
            min-width: 10%;
            padding: 4px;
            margin-left: 10px;
            background-color: #ffffcc;
            text-align: center;
            color: black;
        }
        #header nav ul li a,
        a {
            text-decoration: none;
        }
        input {
            display: block;
            margin-top: 10px;
            min-width: 20%;
            height: 6px;
            padding: 10px;
            border: solid 1px #BDC7D8;
        }
   @media screen and (max-width: 1000px) {
            #header section > input  {
            margin-right: 40px;
        }
        }
    </style>
</head>

<body>

    <div id="main-container">
        <header id="header">
            <section> <img id="fb-icon" src="fb.png" width="30" /> </section>

            <section> 
            <input type="text" id="search" placeholder="Search Friend" autocomplete="off" /> 
   </section>

            <section> <img src="user.png" width="30" /> </section>
            <section> <img src="chat.png" width="30" /> </section>
            <section> <img src="earth.png" width="30" /> </section>
            <section> <img src="setting.png" style="margin-left:40px;" width="30" /> </section>

        </header>
    </div>
</body>

</html>


Download link :
https://github.com/skptricks/php-Tutorials/tree/master/Facebook%20Style%20Header%20Design%20Using%20CSS

Demo Link:
https://skptricks.github.io/learncoding/facebook-style-header-design-using-css/header.html

This is all about Facebook like header design. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.


1 comment: