Pawan Mall

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.

Video
Audio
PPT
PDF
Download

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

Demo
HTML
CSS
JS
Edit Online
Download


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

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.

Demo
HTML
CSS
JS
Edit Online
Download


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

Pawan Mall : Blog

Search Box

Labels

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

Like this post? Then, Share it

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

Like this post? Then, Share it

Responsive CSS3 Colorful Nav Menubar Demo

Like this post? Then, Share it

Online Responsive Resume

Like this post? Then, Share it

Image

About

Resume

Curriculum Vitae

Pawan Mall

Web Designer, Developer & Blogger

New Delhi, Delhi, INDIA

mailpawanmall.net

www.pawanmall.net

Objective

Skills

Education

Experience

Contact Form

Contact