Pawan Kumar Mall

Monday, June 23, 2014

OVER 700 NEW DOMAIN EXTENSIONS!!!

Pawan Mall

3:10 PM

Read full artical →

New opportunities, new possibilities: OVER 700 NEW DOMAIN EXTENSIONS

Benefit of it :
Achieve better search engine positioning
All new domains from a single source
Integrated forwarding allows your 1&1 registered domains to quickly and easily be connected to your website, no matter where it is hosted

Here are the some example of new domain extensions:: .app .blog .buy .car .cars .church .eat

.hotel .inc .mail .mobile .music .news .online

.restaurant .school .shop .site .tech .web

Pre-reserve your domain (Please before book see terms & conditions on website!!!) - Pre-reserve your domain

Wednesday, April 30, 2014

How to create profile interface with the help of HTML & CSS3?

Pawan Mall

2:28 PM

Filled Under: Code Snippet CSS HTML Interface

I am going to tell you that how can we create a simple profile interface that show you a photo, tagline and some rotating media social icons.
It's built with the help of only HTML & CSS3, font awesome, and prefix free.

EXAMPLE - Profile Interface
HTML
CSS
Full Code
Edit

HTML Code - Profile Interface


<div class="profile_content">
  <div class="name">
  <h3>Pawan Mall - Net Geek</h3>
</div>

  <img class="profile_pic" src="YOUR Image Path.jpg" 
alt="Pawan Mall" /> 
 <br />
  <div class="tagline"><b>Tagline</b> : 
  Simple, hardworking & co-operative.</div>
  <ul class="icons">
    <li><a href="http://facebook.com/Mr.PawanMall">
<i class="icon-facebook rotate"></i></a></li>
    
    <li><a href="http://twitter.com/Pawan_Mall">
<i class="icon-twitter rotate"></i></a></li>
    
    <li><a href="https://www.google.com/+PawanMall">
<i class="icon-google-plus rotate"></i></a></li>
  </ul>
  </div>

CSS Code - Profile Interface


@import url(
http://thecodeplayer.com/uploads/fonts/fontawesome
/css/font-awesome.min.css);
@import url(
http://fonts.googleapis.com/css?family=Montserrat
);

* {
  margin:0px;
  padding:0px;
}

.profile_content {
  background-color:#f6fdf5;
  width:270px;
  z-index:2;
  display:block;
  margin:130px auto;
  position:relattive;
  padding-top:10px;
  border-radius:5px;
}

.name {
  width:270px;
  display:block;
  z-index:-2;
  position:absolute;
  left:50%;
  margin:-15px 0px;
   transition:0.3s all ease-out;
}

.name h3 {
  left:-50%;
  color:white;
  font-size:16px;
  position:relative;
  text-align:center;
  background:#ff5c00;
  line-height:50px;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
}

.profile_content:hover .name {
  margin:-55px 0;
}

.profile_content:hover .profile_pic {
  transform:scale(1.05);
}

.profile_pic {
  border-radius:100%;
  width:50%;
  display:block;
  margin:0 auto;
  margin-top:20px;
  transform:scale(.95);
  transition:.3s all ease;
}
.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
     
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
     
    overflow:hidden;
 
    }  
 
.rotate:hover  
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}  
.tagline{
  font-size:12px;
 padding: 0px 10px;
}
.tagline b{
  font-weight:bolder;
}
ul.icons {
  width:270px;
  display:block;
  list-style:none;
  font-size:0;
  margin:10px auto;
}

ul.icons li:nth-child(1) {
  background: #476b0a; 
  transition:0.3s background ease-in;
}
ul.icons li:nth-child(2) {
  background: #476b0a;
  transition:0.3s background ease-in;
}
ul.icons li:nth-child(3) {
  background: #476b0a;
  transition:0.3s background ease-in;
}


ul.icons li:nth-child(1):hover {
  background: #3B5997;
}
ul.icons li:nth-child(2):hover {
  background: #00ACF0;
}
ul.icons li:nth-child(3):hover {
  background: #DB4F48;
}

ul.icons li {
  display:inline-block;
  background: #bdc3c7;
}

ul.icons li:nth-child(1) {
  border-bottom-left-radius:5px;
}

ul.icons li:nth-child(3) {
  border-bottom-right-radius:5px;
}


.icons li {
  display:inline-block;
  text-decoration:none;
  overflow:hidden;
}

.icons i {
 display: block;
  color:white;
  text-decoration:none;
 font-size: 24px;
 line-height: 50px; width: 90px;
 text-align: center;
}

CSS Code - Profile Interface


<html>
<head>

<title>Profile Interface - Pawan Mall</title>

<style>
@import url(
http://thecodeplayer.com/uploads/fonts/fontawesome
/css/font-awesome.min.css);
@import url(
http://fonts.googleapis.com/css?family=Montserrat
);

* {
  margin:0px;
  padding:0px;
}

.profile_content {
  background-color:#f6fdf5;
  width:270px;
  z-index:2;
  display:block;
  margin:130px auto;
  position:relattive;
  padding-top:10px;
  border-radius:5px;
}

.name {
  width:270px;
  display:block;
  z-index:-2;
  position:absolute;
  left:50%;
  margin:-15px 0px;
   transition:0.3s all ease-out;
}

.name h3 {
  left:-50%;
  color:white;
  font-size:16px;
  position:relative;
  text-align:center;
  background:#ff5c00;
  line-height:50px;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
}

.profile_content:hover .name {
  margin:-55px 0;
}

.profile_content:hover .profile_pic {
  transform:scale(1.05);
}

.profile_pic {
  border-radius:100%;
  width:50%;
  display:block;
  margin:0 auto;
  margin-top:20px;
  transform:scale(.95);
  transition:.3s all ease;
}
.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
     
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
     
    overflow:hidden;
 
    }  
 
.rotate:hover  
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}  
.tagline{
  font-size:12px;
 padding: 0px 10px;
}
.tagline b{
  font-weight:bolder;
}
ul.icons {
  width:270px;
  display:block;
  list-style:none;
  font-size:0;
  margin:10px auto;
}

ul.icons li:nth-child(1) {
  background: #476b0a; 
  transition:0.3s background ease-in;
}
ul.icons li:nth-child(2) {
  background: #476b0a;
  transition:0.3s background ease-in;
}
ul.icons li:nth-child(3) {
  background: #476b0a;
  transition:0.3s background ease-in;
}


ul.icons li:nth-child(1):hover {
  background: #3B5997;
}
ul.icons li:nth-child(2):hover {
  background: #00ACF0;
}
ul.icons li:nth-child(3):hover {
  background: #DB4F48;
}

ul.icons li {
  display:inline-block;
  background: #bdc3c7;
}

ul.icons li:nth-child(1) {
  border-bottom-left-radius:5px;
}

ul.icons li:nth-child(3) {
  border-bottom-right-radius:5px;
}


.icons li {
  display:inline-block;
  text-decoration:none;
  overflow:hidden;
}

.icons i {
 display: block;
  color:white;
  text-decoration:none;
 font-size: 24px;
 line-height: 50px; width: 90px;
 text-align: center;
}

</style>
</head>

<body>
<div class="profile_content">
  <div class="name">
  <h3>Pawan Mall - Net Geek</h3>
</div>

  <img class="profile_pic" src="YOUR Image Path.jpg" 
alt="Pawan Mall" /> 
 <br />
  <div class="tagline"><b>Tagline</b> : 
  Simple, hardworking & co-operative.</div>
  <ul class="icons">
    <li><a href="http://facebook.com/Mr.PawanMall">
<i class="icon-facebook rotate"></i></a></li>
    
    <li><a href="http://twitter.com/Pawan_Mall">
<i class="icon-twitter rotate"></i></a></li>
    
    <li><a href="https://www.google.com/+PawanMall">
<i class="icon-google-plus rotate"></i></a></li>
  </ul>
  </div>

</body>
</html>

Friday, March 14, 2014

Image

Pawan Mall

3:13 PM

Filled Under: Image

Read full artical →

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Steps

Pawan Mall

1:13 PM

Filled Under: CSS HTML Steps

Read full artical →

Wednesday, March 12, 2014

Colorful Boxes

Pawan Mall

3:58 PM

Filled Under: Colorful Boxes

Read full artical →

Title Here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ipsum tellus, gravida sit amet vestibulum eget, aliquam at sem.

Title Here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ipsum tellus, gravida sit amet vestibulum eget, aliquam at sem.

Title Here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ipsum tellus, gravida sit amet vestibulum eget, aliquam at sem.

Title Here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ipsum tellus, gravida sit amet vestibulum eget, aliquam at sem.

Title Here: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ipsum tellus, gravida sit amet vestibulum eget, aliquam at sem.

Code

DROP TABLE IF EXISTS `dyn_menu`;

CREATE TABLE IF NOT EXISTS `dyn_menu` (
  `id`                int(11)            NOT NULL    AUTO_INCREMENT,
  `title`            varchar(100)    NOT NULL    DEFAULT '',
  `link_type`        varchar(20)        NOT NULL    DEFAULT 'uri',
  `page_id`            int(11)            NOT NULL    DEFAULT '0',
  `module_name`        varchar(50)        NOT NULL    DEFAULT '',
  `url`                varchar(255)    NOT NULL    DEFAULT '',
  `uri`                varchar(255)    NOT NULL    DEFAULT '',
  `dyn_group_id`    int(11)            NOT NULL    DEFAULT '0',
  `position`        int(5)            NOT NULL    DEFAULT '0',
  `target`            varchar(10)                    DEFAULT NULL,
  `parent_id`        int(11)            NOT NULL    DEFAULT '0',
  `is_parent`        tinyint(1)        NOT NULL    DEFAULT '0',
  `show_menu`        enum('0','1')    NOT NULL    DEFAULT '1',
  PRIMARY KEY (`id`),
  KEY `dyn_group_id - normal` (`dyn_group_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Friday, February 28, 2014

Buttons

Pawan Mall

4:00 PM

Filled Under: Buttons

Read full artical →

Button Button Button Button Button Button

Small Button Small Button Small Button Small Button Small Button Small Button

Large Button Large Button Large Button Large Button Large Button

Large Button

Button and Input elements:

Button Button Button Button Button Button

Small Button Small Button Small Button Small Button Small Button Small Button

Large Button Large Button Large Button Large Button Large Button

Large Button

Code Snippet

Pawan Mall

3:36 PM

Filled Under: Code Snippet

Read full artical →

HTML Code


<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Notepad</title>
  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js">
</script><![endif]-->
</head>
<body>
  <div class="notepad">
    <div class="notepad-heading">
      <h1>Code Snippest</h1>
    </div>
    <blockquote>
      The essence of the independent mind lies not in what it thinks, 
but in how it thinks.
    </blockquote>

  </div>
</body>
</html>

Pawan Kumar Mall

Pawan Mall

Poetry

Writing

Recent Post

Popular Posts

My Blog

Monday, June 23, 2014

Read full artical →

Benefit of it :

Wednesday, April 30, 2014

Read full artical →

Friday, March 14, 2014

Read full artical →

Read full artical →

Wednesday, March 12, 2014

Read full artical →

Friday, February 28, 2014

Read full artical →

Read full artical →

Author

Gallery

About