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

What is HTML Elements | HTML Elements क्या होता हैं? (हिंदी | उर्दू) Lesson - 3

What is HTML Elements?

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

HTML Elements : HTML documents are made up by HTML elements. HTML elements are written with a start tag, with an end tag, with the content in between:

<tagname>content</tagname>

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

नमस्कार दोस्तों, आज मैं आपको HTML Elements के बारे में बताने जा रहा हूँ. HTML Elements, HTML टैग्स के ग्रुप को मतलब की <शुरवाती टैग> कंटेंट </आखिरी टैग> को कहते हैं। जैसा की मैंने आपको वीडियो में बताया हैं।

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

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

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 :-