Scribd Logo
Upload

Welcome to Scribd!

  • Site

    Uploaded by

    Khadija Elaouni
    11 views2 pages
    The document contains code for a navigation bar with links to different sections of a website, as well as code for a search form in the header that expands when a search button is clicked. The navigation bar contains links for home, features, products, categories, review, and blogs. The search form code styles the form to be positioned absolutely, define its size and appearance, and toggles its active class when the search button is clicked.

    Original Description:

    parfait

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains code for a navigation bar with links to different sections of a website, as well as code for a search form in the header that expands when a search button is clicked. The navigation bar contains links for home, features, products, categories, review, and blogs. The search form code styles the form to be positioned absolutely, define its size and appearance, and toggles its active class when the search button is clicked.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    11 views2 pages

    Site

    Uploaded by

    Khadija Elaouni
    The document contains code for a navigation bar with links to different sections of a website, as well as code for a search form in the header that expands when a search button is clicked. The navigation bar contains links for home, features, products, categories, review, and blogs. The search form code styles the form to be positioned absolutely, define its size and appearance, and toggles its active class when the search button is clicked.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    <a href="#" class="logo"><i class="fas fa-shopping-basket"></i>0612461626</a>

    <div class="col-sm-6 col-md-4 col-lg-3"> <i data-feather="phone-call"></i> phone-


    call </div>

    navbar

    <nav class="navbar">
    <a href="#home">home</a>
    <a href="#features">features</a>
    <a href="#products">products</a>
    <a href="#categories">categories</a>
    <a href="#review">review</a>
    <a href="#blogs">blogs</a>
    </nav>

    .header .search-form{
    position: absolute;
    top:110%;right:-110%;
    width:50rem;
    height:5rem;
    background:#fff;
    border-radius: .5rem;
    overflow:hidden;
    display:flex;
    align-items:center;
    box-shadow:var(--box-shadow);

    .header .search-from.active{
    right:2rem;
    transition:.4s linear;
    }

    .header .search-form input{


    height:100%;
    width:100%;
    background:none;
    text-transform:none;
    font-size:1.6rem;
    color:var(--black);
    padding:0 1.5rem;

    .header .search-form label{


    font-size: 2.2rem;
    padding-right: 1.5rem;
    color:var(--black);
    cursor:pointer;
    }
    .header .search-form label:hover{
    color:var(--orange);
    }

    let searchForm=document.querySelector('.search-form');

    document.querySelector('#search-btn').onclick=()=>{
    searchForm.classList.toggle('active');
    }

    #menu-btn{
    display: none;
    }

    You might also like