Web Designing & Web Development Tutorial Series - Introduction (Hindi & Urdu) Lesson - 1

Web design is the process of creating websites.

Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications, electronic businesses, and social network services.

While the terms web design and web development are often used interchangeably, web design is technically a subset of the broader category of web development.

Read more

Tales of Gorakhpur - Path Towards a Sustainable Future (TERI)



Read more

Responsive CSS3 Colorful Nav Menubar Demo

In this tutorial I want to demonstrate simple CSS code to style your nav menubar with the help of CSS at various screen resolutions.

<h1 class="heading">Responsive CSS3 Colorful Nav Menubar Demo</h1>
<div class="wrapper">
<h2 class="Cdefault">DEFAULT - Navbar Menu</h2>
<ul class="menu default">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<div class="clear" />

<h2 class="Cgrapefruit">GRAPEFRUIT  - Navbar Menu</h2>
<ul class="menu grapefruit">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<div class="clear" />

<h2 class="Cbittersweet">BITTERSWEET  - Navbar Menu</h2>
<ul class="menu bittersweet">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<div class="clear" />

<h2 class="Csunflower">SUNFLOWER  - Navbar Menu</h2>
<ul class="menu sunflower">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<div class="clear" />

<h2 class="Cgrass">GRASS  - Navbar Menu</h2>
<ul class="menu grass">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<div class="clear" />

<h2 class="Cmint">MINT - Navbar Menu</h2>
<ul class="menu mint">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<div class="clear" />

<h2 class="Caqua">AQUA - Navbar Menu</h2>
<ul class="menu aqua">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<div class="clear" />

<h2 class="Cbluejeans">BLUEJEANS - Navbar Menu</h2>
<ul class="menu bluejeans">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<div class="clear" />

<h2 class="Clavander">LAVANDER - Navbar Menu</h2>
<ul class="menu lavander">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<div class="clear" />

<h2 class="Cpinkrose">PINKROSE - Navbar Menu</h2>
<ul class="menu pinkrose">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<div class="clear" />

<h2 class="Clight">LIGHT - Navbar Menu</h2>
<ul class="menu light">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<div class="clear" />

<h2 class="Cgray">GRAY - Navbar Menu</h2>
<ul class="menu gray">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<div class="clear" />
</div>

ul.menu {
    list-style-type: none;
    margin: 5% 8%;
    padding: 0;
    width: 95%;
    border-radius: .5em;
    box-shadow: 0 0 5px rgba(0, 0, 0, .3  )
    clear:both;
}
ul.menu li {
    display: inline;
    float: left;
    width: 82%;
    text-align:center;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#fff;
    padding: 5px;
}
ul.menu li:nth-last-child(1) {
    border:none;
}
ul.menu li a {
    display: block;
    padding: 5px;
    text-decoration:none;
    font-weight:bolder;
    text-transform: uppercase;
    font-size:15px;
    color:#fff;
}
ul.menu li a:hover{
    border-left-style:solid;
    border-left-width:1px;
    border-left-color:#fff;
    border-right-style:solid;
    border-right-width:1px;
    border-right-color:#fff;
}

/* Large screens (640px or 1080px) */
@media (min-width: 40rem) { 
  html { font-size: 112%; }
ul.menu {
    list-style-type: none;
    margin: 2% 8%;
    padding: 0;
    width: 95%;
    border-radius: .5em;
    box-shadow: 0 0 5px rgba(0, 0, 0, .3  )
    clear:both;
}
ul.menu li {
    display: inline;
    float: left;
    width: 16%;
    text-align:center;
    border-right-style:solid;
    border-right-width:1px;
    border-bottom-style:none;
    border-bottom-width:0px;
    border-right-color:#fff;
    padding: 5px;
}
ul.menu li:nth-last-child(1) {
    border:none;
}
ul.menu li a {
    display: block;
    padding: 5px;
    text-decoration:none;
    font-weight:bolder;
    text-transform: uppercase;
    font-size:15px;
    color:#fff;
}
ul.menu li a:hover{
    border-top-style:solid;
    border-top-width:1px;
    border-top-color:#fff;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#fff;
    border-left-style:none;
    border-left-width:0px;
    border-right-style:none;
    border-right-width:0px;
}

}

/*Default Color Palette*/
ul.default li{
    background-color:#656d77;
    box-shadow: 5px 10px 5px #434a53;
}
ul.default li:hover{
    background-color:#434a53;
    box-shadow: 0px 5px 0 #656d77;
}

/*Grapefruit Color Palette*/
ul.grapefruit li{
    background-color:#ed5565;
    box-shadow: 5px 10px 5px #da4453;
}
ul.grapefruit li:hover{
    background-color:#da4453;
    box-shadow: 0px 5px 0 #ed5565;
}

/*Bittersweet Color Palette*/
ul.bittersweet li{
    background-color:#fc6d58;
    box-shadow: 5px 10px 5px #e95546;
}
ul.bittersweet li:hover{
    background-color:#e95546;
    box-shadow: 0px 5px 0 #fc6d58;
}

/*Sunflower Color Palette*/
ul.sunflower li{
    background-color:#ffcd69;
    box-shadow: 5px 10px 5px #f6ba59;
}
ul.sunflower li:hover{
    background-color:#f6ba59;
    box-shadow: 0px 5px 0 #ffcd69;
}

/*Grass Color Palette*/
ul.grass li{
    background-color:#9fd477;
    box-shadow: 5px 10px 5px #8bc163;
}
ul.grass li:hover{
    background-color:#8bc163;
    box-shadow: 0px 5px 0 #9fd477;
}

/*Mint Color Palette*/
ul.mint li{
    background-color:#46cfb0;
    box-shadow: 5px 10px 5px #34bc9d;
}
ul.mint li:hover{
    background-color:#34bc9d;
    box-shadow: 0px 5px 0 #46cfb0;
}

/*Aqua Color Palette*/
ul.aqua li{
    background-color:#4fc2e5;
    box-shadow: 5px 10px 5px #3bb0d6;
}
ul.aqua li:hover{
    background-color:#3bb0d6;
    box-shadow: 0px 5px 0 #4fc2e5;
}

/*Blue Jeans Color Palette*/
ul.bluejeans li{
    background-color:#5e9de6;
    box-shadow: 5px 10px 5px #4b8ad6;
}
ul.bluejeans li:hover{
    background-color:#4b8ad6;
    box-shadow: 0px 5px 0 #5e9de6;
}

/*Lavander Color Palette*/
ul.lavander li{
    background-color:#ad93e6;
    box-shadow: 5px 10px 5px #977bd5;
}
ul.lavander li:hover{
    background-color:#977bd5;
    box-shadow: 0px 5px 0 #ad93e6;
}

/*Pinkrose Color Palette*/
ul.pinkrose li{
    background-color:#ed87bd;
    box-shadow: 5px 10px 5px #d870a9;
}
ul.pinkrose li:hover{
    background-color:#d870a9;
    box-shadow: 0px 5px 0 #ed87bd;
}

/*Light Color Palette*/
ul.light li{
    background-color:#f5f7fa;
    box-shadow: 5px 10px 5px #e6e9ed;
}
ul.light li:hover{
    background-color:#e6e9ed;
    box-shadow: 0px 5px 0 #f5f7fa;
}

/*Gray Color Palette*/
ul.gray li{
    background-color:#ccd1d8;
    box-shadow: 5px 10px 5px #aab2bc;
}
ul.gray li:hover{
    background-color:#aab2bc;
    box-shadow: 0px 5px 0 #ccd1d8;
}

No need for any JS script...
Read more

Online Responsive Resume

In this tutorial I want to demonstrate how we can build a responsive single-page resume layout. I’ll be coding everything in HTML5/CSS3 to work properly at various screen resolutions.



<div class="myResume">
  <div class="myResume-Contact-Info">
    <h1>Pawan Mall</h1>
    <h3>Web Designer, Developer & Blogger</h3>
    <h6>New Delhi, Delhi, INDIA</h6>
    <h6>email@pawanmall.net</h6>
    <h6>My Portfolio • <a href="http://www.pawanmall.net">www.pawanmall.net</a></h6>
  </div>
  <div class="myResume-Profile-Pic">
    <img src="http://4.bp.blogspot.com/-PMdKDQ6bm1k/VFK2baK8iEI/AAAAAAAA0vY/mX6UsaXwK-c/s1600/Pawan%2BMall%2B-%2BProfile%2BPic-Small.jpg" alt="Pawan Mall - resume photo avatar" />
  </div>
  <div class="clear"></div>
  <div class="myResume-Profile-Intro">
    <h1 class="title">Profile</h1>
    <p>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. ..</p>
   
  </div>   
  <div class="myResume-Skills">
    <h1 class="title">Skills</h1>
    
        <ul class="myResume-Skills-left">
          <li>Development</li>
          <li>HTML5/CSS3</li>
          <li>JavaScript & jQuery</li>
          <li>PHP Backend</li>
          <li>SQL Databases</li>
          <li>Wordpress</li>
          <li>Pligg CMS</li>
          <li>Some Objective-C</li>
        </ul>
    
        <ul class="myResume-Skills-right">
          <li>Software</li>
          <li>Adobe Photoshop</li>
          <li>Adobe Dreamweaver</li>
          <li>MS Office 2007-2010</li>
          <li>cPanel & phpMyAdmin</li>
          <li>Xcode 4</li>
        </ul>
    
  </div>
  <div class="clear"></div>
  <div class="myResume-Education">
    <h1 class="title">Education</h1>
    <ul>
      <li>Sikkim Manipal University graduate of 2015.</li>
    </ul>
  </div>   
  <div class="myResume-Experience">
    <h1 class="title">Experience</h1>
    <ul>
      <li>Web Designer/Developer ~ 2007-2014</li>
    </ul>
  </div>   
</div>


/* 
// Online Responsive Resume
// Made with ❤ by @Pawan_Mall
// http://www.pawanmall.net 
*/

* { margin: 0; padding: 0; }

body { 
  background: #f2f2f2; 
  font-size: 62.5%; 
  padding: 10px; 
}
.myResume-Contact-Info h1 { 
  font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; 
  margin-bottom: 20px;
  font-size: 40px; 
}
.myResume-Contact-Info > h3 { 
  font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; 
  color: #484848; 
  margin-bottom: 10px; 
  text-decoration: underline; 
}
.myResume-Contact-Info > h6 { 
  font-family: "Trebuchet MS", Verdana, Arial, sans-serif; 
  color: #777; 
  font-weight: normal; 
  font-size: 1em; 
}

.myResume{
  background: #fff; 
  width:80%;
  font-family: "Balthazar", "Droid Serif", serif; 
  color: #565656; 
  font-size: 1.8em; 
  line-height: 1.4em; 
  margin: 3% auto; 
  padding: 10px 0px 35px 80px; 
  //padding: 35px;
    text-shadow: 1px 1px 10px #CCC;
}
.myResume-Contact-Info{
  width:50%;
  margin-top: 50px; 
  margin-bottom: 30px;
  margin-right:100px;
  float:left;
}
.clear{
  clear:both;
}
.myResume-Profile-Pic{
  width:100%;
  margin:40px auto;
}
.myResume-Profile-Pic img{
  width:25%;
  height:auto;  
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px;
}
.myResume-Profile-Intro{
  width:88.5%;
  margin:10 px auto;
  text-align:justify;
  margin-top:50px;
}
.myResume-Skills{
  width:88.5%;
  margin:10 px auto;
  text-align:justify;
  margin-top:50px;
}

.myResume-Education{ 
  width:88.5%;
  margin-top:50px;
}
.myResume-Education > ul > li {
  list-style-type: circle; 
}
.myResume-Experience{
  width:88.5%;
  margin-top:50px;
}
 .myResume-Experience > ul > li {
  list-style-type: circle; 
}

h1.title{
  text-transform: uppercase;
  font-size: 150%;
  background-color:#CCC;
  padding:10px 0px 10px 100px;
  border-radius:0px 50px 50px 0px;
  width:80%;
  margin-bottom:10px;
  color:#fff;
  text-shadow: 2px 2px 8px #000;
  position:relative;
  left:-85px;
}

.myResume-Skills-left { 
  display: block; 
  float: left; 
  padding-bottom:20px;
   margin-left:30px;
}

.myResume-Skills-right { 
  display: block; 
  float: left;
  margin-left:30px;
}


ul.myResume-Skills-left,ul.myResume-Skills-right { 
  display: block; 
}
ul.myResume-Skills-left > li { 
  padding-left: 10px; 
  list-style-type: circle; 
  vertical-align: top; 
  font-family: "Balthazar", "Droid Serif", serif; 
}
ul.myResume-Skills-right > li { 
  padding-left: 10px; 
  list-style-type: circle; 
  vertical-align: top; 
  font-family: "Balthazar", "Droid Serif", serif; 
}
ul.myResume-Skills-left > li:first-child {
  list-style-type: none;  
  font-weight:bolder;
  font-size:20px;
  text-decoration:underline;
}
ul.myResume-Skills-right > li:first-child { 
  list-style-type: none;  
  font-weight:bolder; 
  font-size:20px;
  text-decoration:underline;
}

@media only screen and (max-width: 740px) {
.myResume{
  width:90%;
  font-family: "Balthazar", "Droid Serif", serif; 
  color: #565656; 
  padding: 10px;
  }
  .myResume-Contact-Info h1{
    font-size:30px;
    padding-left:10%;
  }
  .myResume-Contact-Info > h3 { 
   font-size:14px;
   padding-left:10%;
}
.myResume-Contact-Info > h6 { 
  font-size:13px;
  padding-left:10%;
}
  .myResume-Contact-Info {
   width:40%;
    text-align:center;
  }
  .myResume-Profile-Pic{
  width:60%;
  margin-right:5%;
    
}
.myResume-Profile-Pic img{
  width:45%; 
  float:right;  
}
  
h1.title{
  font-size: 25px;
  background-color:#CCC;
  padding:5px 0px 5px 0px;
  border-radius:0px;
  width:100%;
  margin-bottom:10px;
  position:relative;
  left:-35px;
  text-align:center;  
}
.myResume-Profile-Intro{
  width:90%;  
  text-align:justify;
  font-size: 20px;
  padding-left:18px;  
}
.myResume-Skills{
  width:90%;
  font-size: 15px;
  padding-left:18px;      
}
.myResume-Education{ 
  width:90%;
  font-size: 18px;
  padding-left:18px;          
}  
.myResume-Experience{
  width:90%;
  font-size: 18px;
  padding-left:18px;              
}    
}

@media only screen and (max-width: 570px) {
  .myResume{
  width:90%;
  font-family: "Balthazar", "Droid Serif", serif; 
  color: #565656; 
  padding: 10px;
  }
  .myResume-Contact-Info h1{
    font-size:60px;
    padding-left:10%;
  }
  .myResume-Contact-Info > h3 { 
   font-size:18px;
   padding-left:10%;
}
.myResume-Contact-Info > h6 { 
  font-size:15px;
  padding-left:10%;
}
  .myResume-Contact-Info {
   width:90%;
    font-size:60%;
    text-align:center;
  }
  .myResume-Profile-Pic{
  width:90%;
  margin:auto 6%;
}
.myResume-Profile-Pic img{
  width:70%;
  margin:auto 15%;  
}
  
h1.title{
  font-size: 25px;
  background-color:#CCC;
  padding:5px 0px 5px 0px;
  border-radius:0px;
  width:100%;
  margin-bottom:10px;
  position:relative;
  left:-35px;
  text-align:center;  
}
.myResume-Profile-Intro{
  width:90%;  
  text-align:justify;
  font-size: 20px;
  padding-left:18px;  
}
.myResume-Skills{
  width:90%;
  font-size: 15px;
  padding-left:18px;      
}
.myResume-Education{ 
  width:90%;
  font-size: 18px;
  padding-left:18px;          
}  
.myResume-Experience{
  width:90%;
  font-size: 18px;
  padding-left:18px;              
}  
}

@media only screen and (max-width: 480px) {
  .myResume{
  width:90%;
  font-family: "Balthazar", "Droid Serif", serif; 
  color: #565656; 
  padding: 10px;
  }
  .myResume-Contact-Info h1{
    font-size:40px;
    padding-left:10%;
  }
  .myResume-Contact-Info > h3 { 
   font-size:13px;
   padding-left:10%;
}
.myResume-Contact-Info > h6 { 
  font-size:13px;
  padding-left:10%;
}
  .myResume-Contact-Info {
   width:90%;
    font-size:60%;
    text-align:center;
  }
  .myResume-Profile-Pic{
  width:90%;
}
.myResume-Profile-Pic img{
  width:80%;
  margin:auto 10%;  
}
  
h1.title{
  font-size: 25px;
  background-color:#CCC;
  padding:5px 0px 5px 0px;
  border-radius:10px;
  width:122.0%;
  margin-bottom:10px;
  position:relative;
  left:-32px;
  text-align:center;  
}
.myResume-Profile-Intro{
  width:90%;  
  text-align:justify;
  font-size: 20px;
  padding-left:18px;  
}
.myResume-Skills{
  width:90%;
  font-size: 18px;
  padding-left:18px;      
}
.myResume-Education{ 
  width:90%;
  font-size: 18px;
  padding-left:18px;          
}  
.myResume-Experience{
  width:90%;
  font-size: 18px;
  padding-left:18px;              
}  
  
}

@media only screen and (max-width: 320px) {
  .myResume{
  background: #fff; 
  width:80%;
  font-family: "Balthazar", "Droid Serif", serif; 
  color: #565656; 
  margin: auto; 
  padding: 0px 10px 10px 45px;
  }
  .myResume-Contact-Info h1{
    font-size:30px;
  }
  .myResume-Contact-Info > h3 { 
   font-size:12px;
}
.myResume-Contact-Info > h6 { 
  font-size:12px;
}
  .myResume-Contact-Info {
   width:90%;
    font-size:60%;
    text-align:center;
    margin-left:-15px;
  }
  .myResume-Profile-Pic{
  width:90%;
  margin:auto 0%;    
}
.myResume-Profile-Pic img{
  width:80%;
}
  
h1.title{
  font-size: 20px;
  background-color:#CCC;
  padding:5px 0px 5px 0px;
  border-radius:0px 0px 0px 0px;
  width:146%;
  margin-bottom:10px;
  position:relative;
  left:-41px;
  text-align:center;  
}
.myResume-Profile-Intro{
  width:90%;
  text-align:justify;
  margin-top:50px;
  font-size: 18px;
  margin-left:-25px;  
}
.myResume-Skills{
  width:90%;
  font-size: 15px; 
  margin-left:-25px;   
}
.myResume-Education{ 
  width:90%;
  font-size: 15px;
  margin-left:-25px;   
}  
.myResume-Experience{
  width:90%;
  font-size: 15px;
  margin-left:-25px;   
}  
}


No need for any JS script...
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

  • Development
  • HTML5/CSS3
  • JavaScript & jQuery
  • PHP Backend
  • SQL Databases
  • Wordpress
  • Pligg CMS
  • Some Objective-C
  • Software
  • Adobe Photoshop
  • Adobe Dreamweaver
  • MS Office 2007-2010
  • cPanel & phpMyAdmin
  • Xcode 4

Education

  • Sikkim Manipal University graduate of 2015.

Experience

  • Web Designer/Developer ~ 2007-2014

Contact Form

Contact

  • New Delhi, Delhi, India

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

  • mailpawanmall.net

Follow me on :-