Navigation Bar With Animated Dropdown || Pawan Mall


See the Pen Navigation Bar With Animated Dropdown by Pawan Mall (@iPawan) on CodePen.



 <!-- Important Resources -->

    <!-- Material Icons -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />

    <!-- google fonts -->
    <link
      href="https://fonts.googleapis.com/css?family=Great+Vibes&display=swap"
      rel="stylesheet"
    />

    <link
      href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900&display=swap"
      rel="stylesheet"
    /> 

 <!-- Important Resources -->

 <nav class="navbar">
      <a href="#" class="navbar-logo"
        ><i class="material-icons">fastfood</i> foodRoad</a
      >
      <ul class="navbar-links">
        <li class="navbar-dropdown">
          <a href="#">Soups</a>
          <div class="dropdown">
            <a href="#">Tomato Soup</a>
            <a href="#">Veg Manchow Soup</a>
            <a href="#">Veg Hot Soup</a>
          </div>
        </li>
        <li class="navbar-dropdown">
          <a href="#">Sweets</a>
          <div class="dropdown">
            <a href="#">Ladoo</a>
            <a href="#">Besan Ladoo</a>
            <a href="#">Ghee Besan Ladoo</a>
            <a href="#">Nariyal Ladoo</a>
            <a href="#">Kaju Katli</a>
            <a href="#">Rasgulla</a>
          </div>
        </li>
        <li class="navbar-dropdown">
          <a href="#">Breads</a>
          <div class="dropdown">
            <a href="#">Lachha Paratha</a>
            <a href="#">Rumali Roti</a>
            <a href="#">Tandoori Roti</a>
            <a href="#">Butter Roti</a>
            <a href="#">Plain Naan</a>
            <a href="#">Butter Naan</a>
          </div>
        </li>
        <li class="navbar-dropdown">
          <a href="#">Rice</a>
          <div class="dropdown">
            <a href="#">Plain Rice</a>
            <a href="#">Veg Pulao</a>
            <a href="#">Veg Biryani</a>
            <a href="#">Paneer Biryani</a>
            <a href="#">Lemon Rice</a>
            <a href="#">Veg Kashmiri Pulao</a>
          </div>
        </li>
        <li class="navbar-dropdown">
          <a href="#">Chinese</a>
          <div class="dropdown">
            <a href="#">Paneer Chill Dry</a>
            <a href="#">Paneer Garlic</a>
            <a href="#">Veg Garlic</a>
            <a href="#">Veg Chilli</a>
          </div>
        </li>
      </ul>
    </nav>
    <header class="header">
      <div class="header-inner">
        <h1>Food House</h1>
        <form>
          <input type="search" placeholder="Enter Your Location" />
          <div class="overlay"></div>
        </form>
      </div>
    </header>




* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Lato", sans-serif;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: -1;
  opacity: 0;
  transition: 1s all;
}

.navbar {
  display: flex;
  align-items: center;
  width: 100vw;
  background-color: #fff;
  box-shadow: 0px 10px 10px 3px rgba(0, 0, 0, 0.3);
  position: relative;
  padding: 0px 70px;
  background-color: #fff;
}
.navbar-logo {
  color: #ff3f34;
  text-decoration: none;
  font-size: 25px;
  padding: 0px 20px;
}

.navbar-links {
  list-style-type: none;
  display: flex;
}
.navbar-links li a {
  display: block;
  text-decoration: none;
  color: #444;
  padding: 20px 20px;
  font-weight: 700;
  transition: 0.4s all;
}

.navbar-links li.navbar-dropdown {
  position: relative;
}

.navbar-links li.navbar-dropdown:hover .dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateY(0px);
}

.navbar-links li.navbar-dropdown .dropdown {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  padding: 20px 0;
  top: 100%;
  transform: translateY(50px);
  left: 0;
  width: 250px;
  background-color: #fff;
  box-shadow: 0px 10px 10px 3px rgba(0, 0, 0, 0.3);
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  z-index: 111;
  transition: 0.4s all;
}
.navbar-links li.navbar-dropdown .dropdown a {
  padding-top: 10px;
  padding-bottom: 10px;
  font-weight: 400;
}
.navbar-dropdown .dropdown a:hover {
  padding-left: 30px;
}
.navbar-links li a:hover {
  color: #ff3f34;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 90vh;
  /* background-color: #f00; */
  background-image: url("http://lorempixel.com/1366/698/food/");
  background-size: cover;
}

.header-inner {
  text-align: center;
  color: #ff3f34;
  text-shadow: 0px 10px 10px rgba(0, 0, 0, .8);
}

.header-inner h1 {
  font-family: "Great Vibes", cursive;
  font-size: 130px;
}

.header-inner form input[type="search"] {
  position: relative;
  width: 500px;
  border: none;
  padding: 15px;
  border-radius: 27px;
  box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.3);
  z-index: 11;
}
.header-inner form input[type="search"]:focus {
  outline: none;
}

.header-inner form input[type="search"]:focus + div {
  z-index: 1;
  opacity: 1;
}

::placeholder {
  color: #666;
  font-weight: 400;
}





// No JavaScript Required 
// Created By Pawan Mall / www.pawanmall.net

Read more

Animated Border Effect by Using HTML, CSS and JavaScript





 <div class="banner">
  <div class="inner">
    <h1>Pawan Mall</h1>
  </div>
</div>




:root {
  --img: linear-gradient(120deg, rgba(43, 62, 1, 0.82) 0%, rgba(12, 93, 23, 0.69) 100%), url(https://lh3.ggpht.com/p/AF1QipPMMGScLxelev5oVEp34fh8AJerF40vWMaMFuk=s512);
  --br: linear-gradient(to top, #96fbc4 0%, #f9f586 100%);
  --bb: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
  --bl: linear-gradient(to top, #c471f5 0%, #fa71cd 100%);
  --bt: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
  --p: 20px;
  --bw: 2px;
  --t: 1s;
  --td: 200ms;
  --te: ease-out;
}

body {
  height: 100vh;
  display: flex;
  background-color: darkslategray;
}

.banner {
  --w: 720px;
  --h: 200px;
  max-width: var(--w);
  width: 100%;
  margin: auto;
  height: var(--h);
  background-image: var(--img);
  background-size: var(--w);
  background-repeat: no-repeat;
  background-position: center;
  transition: background-size var(--t);
  position: relative;
  box-shadow: 0px 30px 30px -20px rgba(0, 0, 0, 0.45);
}
.banner .inner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.banner .inner > h1 {
  position: relative;
  font-family: serif;
  color: white;
  letter-spacing: .4em;
  text-transform: uppercase;
  font-size: 1em;
  transition: var(--td);
}
@media (min-width: 480px) {
  .banner .inner > h1 {
    font-size: 2em;
  }
}
@media (min-width: 768px) {
  .banner .inner > h1 {
    font-size: 3em;
  }
}
.banner .inner::before,
.banner .inner::after, .banner::after, .banner::before {
  content: '';
  position: absolute;
}
.banner::before {
  top: var(--p);
  right: var(--p);
  height: 0;
  width: var(--bw);
  background-image: var(--br);
  transition: height var(--td) var(--te) 0.75s;
}
.banner::after {
  bottom: var(--p);
  right: var(--p);
  width: 0;
  height: var(--bw);
  background-image: var(--bb);
  transition: width var(--td) var(--te) 0.5s;
}
.banner .inner::before {
  bottom: var(--p);
  left: var(--p);
  height: 0;
  width: var(--bw);
  background-image: var(--bl);
  transition: height var(--td) var(--te) 0.25s;
}
.banner .inner::after {
  top: var(--p);
  left: var(--p);
  height: var(--bw);
  width: 0;
  background-image: var(--bt);
  transition: width var(--td) var(--te) 0s;
}
.banner:hover::before {
  height: calc(var(--h) - var(--p) * 2);
  transition: height var(--td) var(--te) 0s;
}
.banner:hover::after {
  width: calc(100% - var(--p) * 2);
  transition: width var(--td) var(--te) 0.25s;
}
.banner:hover .inner::before {
  height: calc(var(--h) - var(--p) * 2);
  transition: height var(--td) var(--te) 0.5s;
}
.banner:hover .inner::after {
  width: calc(100% - var(--p) * 2);
  transition: width var(--td) var(--te) 0.75s;
}
@media (min-width: 768px) {
  .banner:hover {
    background-size: 760px;
  }
}





// NO JavaScript Required.... www.pawanmall.net

Read more

Day / Night Mode Switch Toggle Using Html CSS and Javascript





 <section> 

   <h1> Day / Night Mode Switch Toggle Using Html CSS and Javascript </h1> 

   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui accusamus quibusdam a, nesciunt inventore, suscipit praesentium rem ut, dolores impedit dolorum ipsum. Quo odio delectus, cumque pariatur aliquid quis aliquam officia, quos optio eaque amet tenetur possimus minima ratione vel!</p> 

   <p>Ullam obcaecati eius illum ducimus illo temporibus excepturi numquam, necessitatibus fuga quaerat doloribus consequuntur dolorem suscipit est aliquam! Deserunt amet cum non animi expedita iusto minus iste quaerat exercitationem dignissimos! Similique, blanditiis adipisci quisquam assumenda nam suscipit veniam debitis provident? Ullam obcaecati eius illum ducimus illo temporibus excepturi numquam, necessitatibus fuga quaerat doloribus consequuntur dolorem suscipit est aliquam! Deserunt amet cum non animi expedita iusto minus iste quaerat exercitationem dignissimos! Similique, blanditiis adipisci quisquam assumenda nam suscipit veniam debitis provident?</p> 

   <p>Porro ea voluptatibus commodi hic voluptas quae nesciunt ullam! Officia in, facilis tenetur incidunt omnis obcaecati. Sequi, fugiat? Est, architecto nesciunt obcaecati fugiat impedit odit non nobis. Perferendis sed, veritatis labore voluptatibus, possimus, assumenda obcaecati eaque distinctio a libero maxime.</p> 

   <p>Ipsum recusandae tempore adipisci cum, illum placeat eligendi eveniet accusamus in delectus nam, consequatur rem, sapiente dolor incidunt velit voluptas quibusdam laudantium nostrum nemo nobis libero deleniti. Quos ipsa tempore saepe. Praesentium aliquid perferendis maxime deserunt aspernatur fugiat nihil alias. Ullam obcaecati eius illum ducimus illo temporibus excepturi numquam, necessitatibus fuga quaerat doloribus consequuntur dolorem suscipit est aliquam! Deserunt amet cum non animi expedita iusto minus iste quaerat exercitationem dignissimos! Similique, blanditiis adipisci quisquam assumenda nam suscipit veniam debitis provident?</p> 

 </section> 

 <ul> 
   <li> 
     <span>Dark</span> 
     <span>Light</span> 
   </li> 
 </ul>




@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Raleway&display=swap');
body{
  font-family: 'Raleway', sans-serif;
  margin:0;
  padding:0;
}

section
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 100px;
  transition: all 0.8s;
}
section.dark
{
  background-color: #444857;
  color: #fff;
  background: -webkit-linear-gradient(to bottom, #434343, #444857);
  background: linear-gradient(to bottom, #434343, #444857);
  transition: all 0.8s;
}
section p{
  font-family: 'Open Sans Condensed', sans-serif;
  line-height: 32px;
  text-align: justify;
}
ul{
  position: absolute;
  top: 20px;
  right: 20px;
  margin: 0;
  padding: 0;
  width: 100px;
  height: 30px;
  z-index: 1;
  border: 1px solid #000;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.8s;
}
ul.active{
  border-color: #fff;
  transition: all 0.8s;
}
ul li{
  list-style: none;
  width: 100%;
  height: 60px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
}
ul.active li{
  transform: translateY(-30px);
}
ul li span
{
  color: #fff;
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
}
ul li span:nth-child(1)
{
  background-color: #2d303a;
  color: #fff;
}




$(document).ready(function(){
  $('ul').click(function(){
    $('ul').toggleClass('active');
    $('section').toggleClass('dark');
  });
})

Read more

What is HTML Attributes | HTML Attributes क्या होता हैं (Hindi & Urdu) | Lesson - 4

What is HTML Elements?

Hello Friends, Today I'm going to teach you about what is mean by HTML Attributes?

HTML Attributes : HTML Attributes provide additional information about HTML elements. See code demo below:

<tagname attribute_name = "attribute_value" >content</tagname>

Please hit like & share this video tutorial with your friends and don't forget to subscribe.

नमस्कार दोस्तों, आज मैं आपको HTML Attributes के बारे में बताने जा रहा हूँ. HTML Attributes हमें किसी टैग की और अधिक जानकारी मुहैया कराते हैं। जैसा की मैंने आपको वीडियो में बताया हैं।

अगर आपको ये वीडियो अच्छी एवं काम की लगी हो तो अपने दोस्तों के साथ शेयर और इस वीडियो को लाईक जरूर करे और आप सब्स्क्राइब करे ताकि आपको नयी वीडियो की जानकारी मिल सके।

अगर आपको इस वीडियो में कोई भी परेशानी हो रही हैं तो आप अपने प्रश्न कमेंट बॉक्स में पोस्ट करे और मैं जल्द से जल्द उसका हल या उसका निवारण दूंगा।

Read more

 Image

 Image

About



I'm something poet, marketer, social media consultant, web designer, web developer, web programmer, blogger(hobby) & a good human being. Originally from Gorakhpur, UP and currently living in the New Delhi. ..

Twitter
Facebook

Resume

Curriculum Vitae


Pawan Mall

Web Designer, Developer & Blogger

New Delhi, Delhi, INDIA
mailpawanmall.net
www.pawanmall.net
Pawan Mall - resume photo avatar

Objective

I'm something poet, marketer, social media consultant, web designer, web developer, web programmer, blogger(hobby) & a good human being. Originally from Gorakhpur, UP and currently living in the New Delhi. ..

Skills

  • Front-end
  • HTML/HTML5
  • CSS/CSS3
  • JS/jQuery
  • Bootstrap
  • Back-end
  • PHP/OOP
  • SQL/MySQL
  • Codeigniter Framework
  • cPanel & phpMyAdmin

Education

  • Sikkim Manipal University graduate of 2015.

Experience

  • Web Designer/Developer/Leads Manager ~ 2007-2017

Contact Form

Contact

  • New Delhi, Delhi, India

  • +91 **********

  • mailpawanmall.net

Follow me on :-