FRONT END ( Tribal & Farmer Website)

-

Component's :-


Navbar:

First of all include all file mention below :

Link the Bootstrap (4.0 Version) CDN to the header section of  the html page Other vise download bootstrap 📂folder and past it project folder 📂 and link the CSS file to most header section and js link to end of the body tag.  Download here.

Link the font awesome  CDN  CDN Link  to the after bootstrap folder link ( help full for icon integration )

Let see exactly code we write code in HTML CSS BOOSTRAP:

HTML CODE :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Product Detaile</title>
    <!--Boostrap File Link-->
    <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css"/>
    <script src="bootstrap/dist/js/jquery.js"></script>
    <script src="bootstrap/dist/js/bootstrap.bundle.min.js "></script>
    <script src="bootstrap/dist/js/bootstrap.min.js"></script>
    <!--Font awesome -->
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
    <!--External Style Sheet-->
    <link rel="stylesheet" href="style/style.css">
</head>
<body>
    <!--nav bar-->
    <header>
        <div class="container-fluid fixed-top bg-dark" id="top">
          <div class="row">
            <!---Top nav bar --->
            <div class="col-xl-12 top_nav">
               <div id="logo"><a href="index.html"><h2>Tribal & Farmer</h2></a></div>
               <div id="language">
                  Hello,<br><span class="dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Select Language</span>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                    <a class="dropdown-item" href="#">Englesh</a>
                    <a class="dropdown-item" href="#">Marathi</a>
                  </div>
               </div>
                <div id="search">
                  <div class="input-group">
                    <input type="text" class="form-control" placeholder="">
                    <i class="fa fa-search" aria-hidden="true"></i>
                   </div>
                </div>
                <div id="sing_in">
                   Hello,<br><span class="dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sing In</span>
                    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                      <a class="dropdown-item" href="#">Profile</a>
                      <a class="dropdown-item" href="#">Logout</a>
                    </div>
                </div>
                <div id="Order"><a href="order.html">Orders</a></div>
                <div id="cart"><a href="cart.html"><i class="fa fa-shopping-cart" aria-hidden="true"></i><span style="font-size: 15px">0</span></a></div>
            </div>
            <div class="col-xl-12">


              <!--Pages Nav Bar Here-->
              <nav class="navbar navbar-expand-lg bg-dark">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <i class="fa fa-bars" aria-hidden="true"></i>
                </button>
                <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
                  <ul class="navbar-nav">
                    <li class="nav-item active">
                      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">About Us</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Countact Us</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Products</a>
                    </li>
                  </ul>
                </div>
              </nav>
            </div>
          </div>
        </div>
    </header>
</body>
</html>


CSS CODE :

body{
    background-color:#eaeded;;
}
.top_nav{
   padding-top: 10px;
   display: flex;
   justify-content: space-evenly;
   background-color: rgba(0,0,0);
   cursor: pointer;
}
#logo a{
    color: #fff;
    text-decoration: none;
}
#language{
 color: #fff;
 font-size: 13px;
}
#language span{
    font-size: 15px;
    font-weight: bold;
}
#sing_in{
 color: #fff;
 font-size: 13px;
}
#sing_in span{
    font-size: 15px;
    font-weight: bold;
}
#Order a{
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
}
#cart{
   font-size: 25px;
   color: #fff;
}
#cart .fa{
    color: #FFF;
}
#cart a{
    text-decoration: none;
    color: #fff;
}
#search{
    width: 35rem;
}
#search .fa{
    padding: 10px;
    background-color: green;
    color: #fff;
    border-radius: 0px 5px 5px 0px;
}
.navbar-toggler .fa{
    color: #fff;
}
.nav-link{
    color: #fff;
    font-weight: bold;
}
.nav-link:hover{
    color: #fff;
}

/*====Media Query=====*/
@media (max-width:1534px){
    #search{
        width: 25rem;
    }
}
@media (max-width:1134px){
    #search{
        width: 20rem;
    }
}
@media (max-width:1000px){
    #search{
        width: 15rem;
    }
}
@media (max-width:800px){
    #search{
        width: 12rem;
    }
    #logo a h2{
       font-size: 15px;
    }
    #language{
        font-size: 10px;
    }
    #language span{
        font-size: 12px;
    }
    #sing_in{
        font-size: 10px;
    }
    #sing_in span{
        font-size: 12px;
    }
    #Order a{
        font-size: 12px;
    }
    #cart{
       font-size: 18px;
    }
}
@media (max-width:450px){
    #search{
       display: none;
    }
    #logo a h2{
       font-size: 13px;
    }
    #language{
        font-size: 5px;
    }
    #language span{
        font-size: 8px;
    }
    #sing_in{
        font-size: 5px;
    }
    #sing_in span{
        font-size: 8px;
    }
    #Order a{
        font-size: 8px;
    }
    #cart{
       font-size: 12px;
    }
}

Exactly Output:




II Footer : 

HTML  CODE:

<!--Footer-->
<footer>
    <div class="container-fluid footer mt-5">
      <div class="row">
        <div class="col-xl-3">
           <h4 class="text-light">Get To Know Us</h4>
           <p class="text-light">About Us</p>
           <p class="text-light">Products</p>
           <p class="text-light">Countact Us</p>
        </div>
        <div class="col-xl-3">
          <h4 class="text-light">Countact With Us</h4>
          <div class="link">
            <a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a>
            <a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a>
            <a href=""><i class="fa fa-linkedin" aria-hidden="true"></i></a>
          </div>
        </div>
        <div class="col-xl-3">
          <h4 class="text-light">Make Mony With Us</h4>
           <p class="text-light"><i class="fa fa-shopping-bag text-success" aria-hidden="true"></i> <span>Sell Your Product</span></p>
           <p class="text-light"><i class="fa fa-commenting-o text-success" aria-hidden="true"></i> <span>Join With Tribal & Farmer Comunity</span></p>
        </div>
        <div class="col-xl-3">
          <h4 class="text-light">Let Us Help You</h4>
          <p class="text-light">Any problem Selling With Us.</p>
          <p class="text-light">Information About Platform</p>
          <p class="text-light">Live Review</p>
        </div>
      </div>
      <div class="text-light text-center pt-2">
        &copy; 2021-Tribal & Farmer All Rights Reserved.
      </div>
      <div class="text-light pt-2" id="dev">Developer : Project Id &copy; 17</div>
    </div>
</footer>


CSS CODE:

/*============Footer===========*/
.footer{ 
    background-color: #232F3E;
    margin-top: 20px;
    padding: 50px;
}
.footer .row {
    border-bottom: 1px solid #fff;
}
.footer .link a{
    display: block;
    text-decoration: none;
}
.footer .link a .fa{
    color: #fff;
    font-size: 18px;
    padding: 5px;
}
.footer #dev{
    text-align: center;
}
.chat{
  float: right;
  
}
.resiv_chat{
    background-color: green;
    color: #fff;
    padding: 10px;
    width: 15rem;
    border-radius: 10px;
}
.sender_chat{ 
    background-color: #ededed;
    color: black;
    padding: 10px;
    width: 15rem;
    border-radius: 10px;
}
@media (max-width:768px){
    .footer{
        text-align: center;
    }
}
@media (max-width:1199px){
    .footer{
        text-align: center;
    }
}


Exactly Output :






Comments

Post a Comment

Popular posts from this blog

Switching Tab in wix

-
Image
Multi State Boxes STEPS:- 1) First of all please on development mode in wix. 2) Click the + ( add) icon. 3) Select and click interactive 4) And select and drag and drop Boxes -> Multi state boxes. 6) And manage and rename state boxes like repeater  7) Add the code -> open code corvid  terminal and past the following code and changes the accordingly  8) code => $w.onReady( function  () {                 $w( '# add button id' ).onClick(() => {         $w( '# add state box id' ).changeState( " add box name edited " );     });       $w( '# next button id ' ).onClick(() => {         $w( '# add state box id ' ).changeState( " add box name " );     }); });  
Read more

Culture Interactive Project Research

-
 Culture Interactive Error In Code: Ui Is note Responsive. Many Dependencies Is Installed But Never Used. React is a single-page application but our project page is refreshed. Add the account is work but the data storing time page is refreshed Also Deleting time refreshed. Only Account Added and project add functionality are mentioned. In signup and login, functionality is mentioned but not stored data in firestore. Also, Contributor details are note added. In code, most of the code is hardcoded not soft coded. Folder Structure: public 📂 👇               index.html  📂 👇                                        All HTML header section details are available here.                                        👉 Google F...
Read more

Bootstrap /Flex-Boxs / Grids

-
Image
 Bootstrap Introduction:-                                 Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites. How To Accesses Bootstrap?                                                 First Link The Bootstrap CDN in HTML file in the header section.                 Like CSS CDN :- <link rel= "stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity= "sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin= "anonymous" > <script src= "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity= "sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" cros...
Read more