How do I create a Zomato style search bar?

Refresh

December 2018

Views

733 time

2

I want to crate a search bar similar to that of https://www.zomato.com/ Exactly the same layout.

I am able create a floating search box on top of my background image. Not sure how to join various input fields and button side by side. This is the css I have as of now.

.search {
    background:rgba(0,0,0,0.6);
    border: 2px solid #414141;
    border-radius: 5px;
    padding: 10px;
}

header {
    text-align: center;
    color: #fff;
    background-attachment: scroll;
    background-image: url(../img/header-bg.jpg);
    background-position: center center;
    background-repeat: none;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

header .intro-text {
    padding-top: 100px;
    padding-bottom: 50px;
}

header .intro-text .intro-lead-in {
    margin-bottom: 25px;
    font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 22px;
    font-style: italic;
    line-height: 22px;
}

As for the HTML:

<body id="page-top" class="index">

    <!-- I have a navbar here -->

    <!-- Header -->
    <header>

               <div class="intro-text">
                            <div class="intro-lead-in">Welcome To Our Studio!</div>
                            <div class="intro-heading">It's Nice To Meet You</div>
               </div>     

    </header>
</body>

1 answers

0

это скрипка , которая containes стиля бара. Я думаю , что это может помочь you.Main интерес КСС:

.header-link {
    float: left;
    height: 60px;
    margin: 0px 7px auto 0px;
 }
.header-link a {
line-height: 62px;
color:#FFF;
 }
.header-hiring-btn {
background-color: #CB202D;
padding: 7px 8px 6px;
border-radius: 3px;
text-align: center;
color: #FFF !important;
transition: all 0.15s ease-out 0s;
margin-right: 6px;
}

.header {
    box-sizing: border-box;
    height: 60px;
    position: absolute;
    width: 100%;
    z-index: 7;
    background: none repeat scroll 0% 0% rgba(45, 45, 45, 0.8) !important;
    color:#FFF;
}
.wrapper {
    padding-left: 10px;
    padding-right: 10px;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
    max-width: 1140px;
}
.col-s-16 {
    width: 100%;
    box-sizing: border-box;
}
.logo-header {
    width: 134px;
}
.logo {
    display: inline-block;
    float: left;
    text-align: center;
    height:46px;
}
.logo img {
    width: 130px;
    margin-top: 15px;
    margin-left: -4px;
    vertical-align: middle;
    border: 0px none;
}
.header-navigation {
    float: right;
    display: inline-block;
    height: 60px;
}
.login-navigation {
    float: left;
}
.header-link {
    float: left;
    height: 60px;
    margin: 0px 7px auto 0px;
}
.header-link a {
    line-height: 62px;
    color:#FFF;
}
.header-hiring-btn {
    background-color: #CB202D;
    padding: 7px 8px 6px;
    border-radius: 3px;
    text-align: center;
    color: #FFF !important;
    transition: all 0.15s ease-out 0s;
    margin-right: 6px;
}
<header class="header  header--fixed " id="header">
    <div class="wrapper">
        <div class="">
            <div class="col-s-16"> <a class="logo logo--header" href="https://www.zomato.com" title="">
          <img src="https://bzmtcdn-a.akamaihd.net/images/logo/zlogo.png" alt="">
      </a>

                <section class="header-navigation" id="header-navigation">
                    <section class="login-navigation" id="login-navigation">
                        <div class="header-link"> <a class="header-hiring-btn" href="https://www.zomato.com/careers" target="_blank">We&#039;re Hiring!</a>

                        </div> <span class="header-link">
      <a href="#" class="facebook-login header-login-button" data-reload="true">Log in with Facebook</a>
    </span>
 <span class="header-link mr0">
      <a href="#" id="signin-link">Log in</a>
    </span>

                    </section>
                </section>
                <!-- end header-navigation -->
            </div>
            <!-- end col-s-16 -->
        </div>
        <!-- end row -->
    </div>
    <!-- end wrapping class -->
</header>

Код, кажется, основан на bootstrap.css перестраивать. Надеюсь, поможет.