Softweb Tuts
Top Sticky Notification Bar

Have you seen sticky notification bar the top of any website? I think yes because most of the website use these kind of notifications to attract visitors and today I am going to show you and provide you the source code of that notification bar which sticks at the top of a web page and grabs out user attraction.

You will be provided with the source code and if you want to add this kind of sticky notification bar on the top of your website whether it is on blogger or on wordpress you simply have to copy and paste the source code provided below to the template section of your website where you can edit the html code of your website.

Here is the Preview Of This Top Sticky Notification Bar:

This is the snapped preview of this top sticky notification bar you can see it below.

Top Sticky Notification Bar

What's happening buddy today we are going to make Top Sticky Notification Bar

As you know the HTML markup is mandatory for that so we should have some HTML markup first. Below is the HTML markup.

The HTML, CSS & Javascript code that are provided below can have some encoding errors so i recommend you to used codes from project files in case if there is any error with the working of code.

HTML markup for Top Sticky Notification Bar :

<div class="at-banner" id='banner'><div class="at-banner__content"><div class="at-banner__text">Hey friend, check out my <b>youtube channel</b> and subscribe to it!</div><a class="at-banner__button" onclick="document.getElementById('banner').style.display='none';" href="#">VIEW CHANNEL</a></div><div class="at-banner__close" onclick="this.parentElement.style.display='none';"></div></div>
To make this sticky notification bar at the top of your website we don't need much lengthy HTML code for that.

You can see the source code is not too much length its about 3 to 4 lines of code.
Without CSS our this script (Top Sticky Notification Bar) will never look splendid. So here we are, our HTML markup is ready now we have to personalize our HTML and it can only be done using CSS.

So this is the CSS code which i have written and we will use this to customize Top Sticky Notification Bar you can copy it by clicking on the code and code will be automatically copied to clipboard.

CSS Code for Top Sticky Notification Bar :

.at-banner{z-index:999999;position:fixed;top:0;right:0;left:0;background:#974DF3;width:100%;border-bottom:1px solid #EEEEEE;padding:10px;box-sizing:border-box;-webkit-transform:translateY(-150%);transform:translateY(-150%);color:#FFFFFF;font-family:"Open Sans", sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-animation:at-banner-slide-in 0.8s ease forwards;animation:at-banner-slide-in 0.8s ease forwards}.at-banner__content{display:flex;align-items:center;flex-direction:row;justify-content:center;width:90%;margin:0 auto;padding:10px 40px;box-sizing:border-box}.at-banner__title{font-size:18px}.at-banner__text{margin:0 20px 0 0}.at-banner__button{display:inline-block;background:#FFFFFF;height:40px;border:0;border-radius:2px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);padding:0 20px;color:#974DF3;font-size:12px;font-weight:700;line-height:40px;text-decoration:none;white-space:nowrap}.at-banner__close{position:absolute;top:50%;right:20px;width:20px;height:20px;-webkit-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer}.at-banner__close:before, .at-banner__close:after{content:"";position:absolute;top:50%;left:50%;display:block;background:#FFFFFF;width:100%;height:3px;border-radius:2px;-webkit-transform-origin:center;transform-origin:center}.at-banner__close:before{-webkit-transform:translate(-50%, -50%) rotate(-45deg);transform:translate(-50%, -50%) rotate(-45deg)}.at-banner__close:after{-webkit-transform:translate(-50%, -50%) rotate(45deg);transform:translate(-50%, -50%) rotate(45deg)}@-webkit-keyframes at-banner-slide-in{0%{-webkit-transform:translateY(-150%);transform:translateY(-150%)}100%{-webkit-transform:translateY(0%);transform:translateY(0%)}}@keyframes at-banner-slide-in{0%{-webkit-transform:translateY(-150%);transform:translateY(-150%)}100%{-webkit-transform:translateY(0%);transform:translateY(0%)}}

As a color scheme I have used my own background color that is purple and this is the hex code of that background color #974DF3 you can change it according to your requirement whatever color you like and whatever the color scheme of your website is.

A little bit of JavaScript code was required for this but I haven't created a separate script for that I simply added that code to our HTML you can see in the HTML markup that the JavaScript is added and it will be executed on click event.

We simply needed JavaScript code to hide or remove this notification bar when user Clicks on cross icon.

At The End :

So here we are, We have done and our project Top Sticky Notification Bar is ready now you can copy and combine all the codes provided above and combine them into single html file and have fun.

If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment i will try to resolve the issue as soon as possible.

Download Project (Top Sticky Notification Bar) File :

Top Sticky Notification Bar.zip
File Size 1.41 KB
Click the download button and you will be redirected to download page from where you can download project files.

If you face any difficulty in downloading the project file leave you comment below i will resolve that issue as soon as possible.

That's it we are done now if you want to download the project file download button is provided above you can download it from there our today's post and hair and if you want to post on this site you are welcome here you can simply write your post and wrap it in a text file and simply send that post a text file to my email ID I will review and try to publish that post on my website.
Thank you !
Top Sticky Notification Bar - Pure CSS + HTML
css html

Top Sticky Notification Bar - Pure CSS + HTML

Codepen User Card Generator - Open Source Tools

Today in this article I am going to share with you a source code of an tool. The name of this tool is codepen user card generator.

Basically the functionality of this user card generator for codepen is that you simply have to enter the username of any codepen member or user and this tool will generate a card for that user.

You will be provided with the source code of that card which you can add to your website to show up info about admin.

You can also use that user card as a widget in blogger.

Demo:
The Demo of this tool will be like this.

Codepen User Card Generator - Open Source Tools

When you will enter the username of any codepen user card data will be updated in real-time and you will get this kind of code which you can use to add that card to your website.
Codepen User Card Generator - Open Source Tools


How do you do programmers today we are going to design Codepen User Card Generator

As you know the HTML code is required for that so we should have some HTML code first. Below is the HTML code.

The HTML, CSS & Javascript code that are provided below can have some encoding errors so i recommend you to used codes from project files in case if there is any error with the working of code.

There are some external files used in the code provided below you can download them if you want:
https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

HTML code for Codepen User Card Generator :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"><link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800'><div class="card-footer"><div class="card-footer__pens"><span>231</span><div class="label">Pens</div></div><div class="card-footer__followers"><span>0</span><div class="label">Followers</div></div><div class="card-footer__following"><span>0</span><div class="label">Following</div></div></div></div></div><pre class="code"></pre><script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

I have included the jquery script or plugin in the above code because we are going to use jquery code instead of javascript code so you have to include it if you already have added in your website then remove this one.

If you want to change anything or add anything to this card you simply have to add that elements in the above HTML code and that element will be added to that card.
Without CSS our this script (Codepen User Card Generator) will never look delicate. So here we are, our HTML code is ready now we have to personalize our HTML and it can only be done using CSS.

So this is the CSS code which i have written and we will use this to customize Codepen User Card Generator you can copy it by clicking on the code and code will be automatically copied to clipboard.

CSS Code for Codepen User Card Generator :

body{background:#F3F3F3;color:#666666;font-size:14px;font-family:'Open Sans';-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}input{display:block;background:rgba(0, 0, 0, 0.1);border:0;border-radius:2px;margin:20px auto 10px;padding:15px 20px;color:#666666;line-height:normal;font-size:14px}label{display:block;margin:0 0 40px;font-size:12px;text-align:center}label:before{content:'Username:';font-weight:600}.card{background:#FFFFFF;width:300px;border-radius:4px;box-shadow:0 10px 20px rgba(0, 0, 0, 0.2);margin:0 auto;overflow:hidden}.card-header{position:relative;background:#303841;height:200px;text-align:center;overflow:hidden}.card-header__avatar{background:#303841;background-position:center 30%;background-size:100%;height:100%;width:100%}.card-header__follow{position:absolute;top:20px;right:20px;background:#FFFFFF;border-radius:2px;box-shadow:0 2px 4px rgba(0, 0, 0, 0.2);padding:6px 10px;color:#333333;font-size:10px;font-weight:600;line-height:normal;text-decoration:none;text-transform:uppercase}.card-content{text-align:center;padding:30px 20px}.card-content__username{margin:0 0 10px;color:#333333;font-size:14px;font-weight:600;text-transform:uppercase}.card-content__username .badge{display:inline-block;background:#FCD000;border-radius:2px;margin:0 10px 0;padding:4px;color:#333333;font-size:10px;font-weight:600;vertical-align:middle}.card-content__bio{color:#666666;font-size:12px}.card-footer{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;background:#F3F3F3;padding:15px 40px;color:#333333;font-size:14px;font-weight:600;text-align:center}.card-footer .label{display:block;margin:4px 0 0;color:#666666;font-size:10px;font-weight:400}.code{background:rgba(0, 0, 0, 0.1);max-width:600px;border-radius:2px;margin:40px auto 100px;font-family:monospace;overflow:hidden;overflow-x:auto}.code:before{content:'HTML Code';display:block;padding:20px 20px 0;color:#333333;font-weight:600}

If you want to implement or add this card simply copy the code generated by this tool and to customise that card you have to copy the above CSS code.
So we have written HTML code and customised it using CSS and now we will add some functionality in this project (Codepen User Card Generator) to make it work as we want it to be.

To make this project (Codepen User Card Generator) work properly for that we will use JavaScript or jquery in some cases which is a javascript library.

This is the javascript code for our project you can also copy it by simple clicking once and code will be copied automatically.

JavaScript Code for Codepen User Card Generator :

$( document ).ready(function() {
var username = "softwebtuts";
$("input").keyup(function() {
username = $(this).val();
$("label").text(username);
getData(username);
});
getData = function(username) {
$.getJSON("http://cpv2api.com/profile/" + username, function(resp) {
if (resp.success) {
console.log("Successful");
$(".card-header__avatar").css("background-image", "url(" + resp.data.avatar + ")");
$(".card-header__follow").attr("href", "https://codepen.io/" + resp.data.username);
if (resp.data.pro) {
$(".card-content__username").text(resp.data.nicename);
$(".card-content__username").append("<span class="badge">PRO</span>");
} else {
$(".card-content__username").text(resp.data.nicename);
}
if (resp.data.bio) {
$(".card-content__bio").text(resp.data.bio);
} else {
$(".card-content__bio").text("Demo or it didn\"t happen.");
}
$(".card-footer__pens span").text(Math.floor((Math.random() * 100) + 1));
$(".card-footer__followers span").text(resp.data.followers);
$(".card-footer__following span").text(resp.data.following);
} else {
$(".card-header__avatar").css("background-image", "url(http://placehold.it/500/000/fff)");
$(".card-content__username").text("CodePen");
$(".card-content__username").append("<span class="badge">PRO</span>");
$(".card-content__bio").text("Demo or it didn\"t happen.");
$(".card-footer__followers span").text("1337");
$(".card-footer__following span").text("1337");
}
getHTML();
});
}
getHTML = function() {
var cardHTML = $(".container").html();
$(".code").text(cardHTML);
}
getData(username);
});

I have used some javascript/Jquery BuiltIn functions in the above code here is the list of them with description.
FunctionDescription
event.dataContains the optional data passed to an event method when the current executing handler is bound
keyup()Attaches/Triggers the keyup event
on()Attaches event handlers to elements
ready()Specifies a function to execute when the DOM is fully loaded
floor()Returns the largest integer less than or equal to a number.
log()Returns the natural logarithm (base E) of a number.
random()Returns a pseudo-random number between 0 and 1.

You will only need JavaScript to run this tool if you want to implement this card on your blogger blogger any website then you don't need any JavaScript code for that.

To Sum Up :

So here we are, We have done and our project Codepen User Card Generator is ready now you can copy and combine all the codes provided above and combine them into single html file and have fun.

If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment i will try to resolve the issue as soon as possible.

Download Project (Codepen User Card Generator) File :

Codepen User Card Generator.zip
File Size 5.11 KB
Click the download button and you will be redirected to download page from where you can download project files.

If you face any difficulty in downloading the project file leave you comment below i will resolve that issue as soon as possible.

That's it i thing you may have got your answer and i think this will help you alot if it did leave your feedback in the comment section below i will be glad to hear from you.
Thank you !
Codepen User Card Generator - Open Source Tools
open source tools

Codepen User Card Generator - Open Source Tools

Recent Posts Blogger Widget with Hover Animation

Hello today I have any brand new blogger widget for blogger users and this is recent post blogger widget I have given't gave it any name but in this article we are calling it recent post blogger widget with hover animation.

Before going ahead let me show you the demo of this recent post blogger widget.

Demo:

View Demo

So you can see the demo above it looks beautiful this widget is very beautiful I also like it and love it by the way that's my profile on codepen.io website that's kind of IDE for developers.

So now it's time to build this blogger widgets here is the source code and steps how to implement this blogger widget in blogger you should have to follow the steps as they are provided if you have knowledge about blogger then you can also customise this visit according to your requirements.

Steps To Follow:

  1. Go to Blogger Dashboard
  2. Go to Layout Section
  3. Click Add New Widget
  4. Choose HTML/Javascript Widget from list of blogger widgets.
    5. Choose the best location to show this widget the location which i recommend you is just above or below comments section.
  5. Copy the code provided below and paste as widget content.
    6. <style>body{background:#efefef;font-family:Roboto,sans-serif}a{text-decoration:none;color:#000}.container{width:550px;margin:0 auto}.post{display:flex;width:100%;justify-content:center;align-items:center;margin:0 0 20px 0;overflow:visible;border-radius:4px;transition:.5s ease}.post:hover>.preview:before{transition:.3s;width:350px;background-size:80%}.post .preview{min-width:190px;text-align:center;transition:.3s;position:relative}.post .preview:before{content:"";transition:.3s;position:absolute;width:300px;height:100%;border-radius:10px;left:0;top:0;z-index:-1;clip-path:polygon(0 99%,0 0,100% 0,65% 100%);box-shadow:inset 4px 5px 100px 0 rgba(0,0,0,.5)}.post .preview span{font-size:22px;font-weight:900;margin:58px 0;display:block;text-transform:uppercase;letter-spacing:-1px;color:#fff;opacity:0}.post .content{transition:all .3s ease;padding:20px;margin:0 10px 0 0;position:relative}.post .content span{font-size:13px;letter-spacing:.3px;line-height:1.5;color:#000;position:relative;z-index:5;padding:5px;display:block;min-width:300px;background:#fff}.post .content .bg_clip{position:absolute;top:0;left:0;width:100%;height:100%;transition:.3s ease;background:#fff;border-radius:10px;text-overflow:hidden}.credit *{z-index:999999}.credit{position:absolute;margin:10px 10px;background:tomato;padding:1px 6px;color:#fff;border-radius:50%;text-align:center;opacity:.2;text-decoration:none;transition:.3s opacity;top:0;left:0}.credit:hover{opacity:1}.credit .tooltiptext{visibility:hidden;width:120px;font-size:10px;background-color:tomato;color:#fff;text-align:center;border-radius:6px;padding:5px 0;position:absolute;top:150%;left:50%;margin-left:-60px}.credit .tooltiptext strong{color:inherit;font-weight:200;border-bottom:1px dotted #000}.credit .tooltiptext::after{content:" ";position:absolute;bottom:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:transparent transparent tomato transparent}.credit:hover .tooltiptext{visibility:visible}</style>
<div id='recent-posts'>
<script type='text/javaScript'>
//<![CDATA[
var rcp_website="https://www.softwebtuts.com",rcp_numposts=5,rcp_snippet_length=150,rcp_info="yes",rcp_comment="Comments",rcp_disable="yes",rcp_thumbs_wid=300,rcp_thumbs_hei=190,rcp_ytthumbsize=0,rcp_title="yes";function recent_posts(t){var e="";a=location.href,y=a.indexOf("?m=0"),e+='<div class="container">';for(var s=0;s<rcp_numposts;s++){var r=t.feed.entry[s],i=r.title.$t;if("content"in r)var n=r.content.$t;else if("summary"in r)n=r.summary.$t;else n="";if((n=n.replace(/<[^>]*>/g,"")).length<rcp_snippet_length);else{var l=(n=n.substring(0,rcp_snippet_length)).lastIndexOf(" ");n.substring(0,l)+"…"}for(var p=0;p<r.link.length;p++){if("thr$total"in r)var c=r.thr$total.$t+" "+rcp_comment;else c=rcp_disable;if("alternate"==r.link[p].rel){var o=r.link[p].href;-1!=y&&(o+="?m=0");var m=r.published.$t;if("media$thumbnail"in r)var _=r.media$thumbnail.url;else _="http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png"}}var u=_.replace("/s72-c/","/w"+rcp_thumbs_wid+"-h"+rcp_thumbs_hei+"-c/").replace("/default.jpg","/"+rcp_ytthumbsize+".jpg"),d=rcp_numposts+1555,h=Math.floor(Math.random()*(+d-1))+1;e+="<style>.post .post-item-"+h+":before {background: url("+u+') 0 50%;background-size: 100%;}</style><div class="post"><div class="preview post-item-'+h+'"><a href="https://www.softwebtuts.com" rel="dofollow" class="credit">ⓘ<strong class="tooltiptext">This widget is made by <strong>M.Muzammil</strong></strong></a><span>View</span></div>',e+='<a class="content" href="'+o+'" rel="nofollow" title="'+i+'">',"yes"==rcp_title&&(e+="<span>"+i,"yes"==rcp_info&&(e+="<br/><small>"+m.substring(8,10)+"/"+m.substring(5,7)+"/"+m.substring(0,4)+" - "+c+"</small>"),e+="</span>"),e+='<div class="bg_clip"></div></a></div>'}e+="</div>",document.getElementById("recent-posts").innerHTML=e}document.write('<script type="text/javascript" src="'+rcp_website+"/feeds/posts/default?alt=json-in-script&max-results="+rcp_numposts+'&callback=recent_posts"><\/script>');
 //]]>
</script>
</div>
  6. Save Widget

You are all done you have just implemented this blogger widget into your blogger blog now go and have a look on your blog that this widget is working or not if not in the comment section I will resolve it.

Customizations in the above:

In the code provided above you have to make some customisation. Here is a list of that customizations that are you have to do in the above code.

ReplacementDescription
https://www.softwebtuts.com Replace this URL with the URL of your blogger blog.
rcp_numposts=5 Replace 5 with the number of posts to show in this widget by default you will see 5 posts.

You can customize the above 2 things only there are some other setting that can also be customized but without customizing this widget will work perfectly.

Conclusion:
In the end I want to say that if you want any other blogger widget with this style comment below.
Recent Posts Blogger Widget with Hover Animation
blogger widgets

Recent Posts Blogger Widget with Hover Animation

Flat Navigation Menu - CSS + HTML + JQuery

Hello welcome friends and today in this article I am going to tell you how you can create flat navigation menu for your website or blog.

I have provided the source code of this flat navigation below you can get that source code and implement it on your website or blog where you want to show this navigation.

This flat navigation looks very much beautiful but one thing that I want to tell us that somehow I was unable to make it responsive for a while but I will try to make it afterwards responsive.

If you resize your screen or change your device you will see that this navigation will overflow and will be hidden that's not a good thing.

So now let me share the source code of this flat navigation menu with you.

First of all let me show you the snapped preview of this flat navigation menu.

Demo / Preview:

Flat Navigation Menu - CSS + HTML + JQuery

How are you buddy today we are going to make Flat Navigation

As you know the HTML markup is mandatory for that so we should have some HTML markup first. Below is the HTML markup.

The HTML, CSS & Javascript code that are provided below can have some encoding errors so i recommend you to used codes from project files in case if there is any error with the working of code.

There are some external files used in the code provided below you can download them if you want:
http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/logo_(1).svg
http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

HTML markup for Flat Navigation :

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700'><link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'><div class='info'><h1>Flat Navigation</h1><span>Made with<i class='fa fa-heart animated infinite pulse'></i>by<a href='https://www.softwebtuts.com'>Muhammad Muzammil</a><div class='spoilers'>(Dropdown Menu) | (Very Cool!)</div></span></div><div class='nav'><ul><li><a class='logo' href='https://www.softwebtuts.com'><img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/logo_(1).svg'></a></li><li><a href='#portfolio'>Portfolio</a></li><li><a href='#calendar'>Calendar<i class='fa fa-caret-down'></i></a><ul class='menu'><li><a href='#event_one'>Event #1</a></li><li><a href='#event_two'>Event #2</a></li><li><a href='#event_three'>Event #3</a></li></ul></li><li><a href='#resume'>Resume</a></li><li><a href='#about'>About</a></li><li><a href='#privacy-policy'>Privacy Policy</a></li><li><a href='#categories'>Categories</a></li><li><a href='#blog'>Blog</a></li><li><a href='#contact'><div class='fa fa-envelope'></div></a></li></ul></div><script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

I have included the jquery script or plugin in the above code because we are going to use jquery code instead of javascript code so you have to include it if you already have added in your website then remove this one.

In the code provided above i have added some icons using fontawesome css library that's why i have included the fontawesome library if you will remove it then you will see squares instead icons.

If you want to implement this flat navigation menu into your blogger blog then I recommend you to create a new widget where you want to implement this and add the source code as provided to that widget content.
Without CSS our this script (Flat Navigation) will never look wonderful. So here we are, our HTML markup is ready now we have to personalize our HTML and it can only be done using CSS.

So this is the CSS code which i have written and we will use this to customize Flat Navigation you can copy it by clicking on the code and code will be automatically copied to clipboard.

CSS Code for Flat Navigation :

body{background:#e9e9e9;font-family:'Roboto', sans-serif;text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.nav{display:inline-block;background:#FFFFFF;border-radius:3px;border-top:2px solid #ffce54;height:60px}.nav ul{list-style:none;margin:0;padding:0}.nav ul li{position:relative;display:inline-block;height:60px;border-left:1px solid rgba(0, 0, 0, 0.05);vertical-align:middle;float:left}.nav ul li:first-child,
.nav ul li:nth-child(2),
.nav ul li:last-child{border-left:0}.nav ul li:nth-child(2) a:before,
.nav ul li:nth-last-child(2) a:before,
.nav ul li:nth-child(2) a:after,
.nav ul li:nth-last-child(2) a:after{-webkit-transition:all 0.3s linear 0s;-moz-transition:all 0.3s linear 0s;-ms-transition:all 0.3s linear 0s;-o-transition:all 0.3s linear 0s;transition:all 0.3s linear 0s}.nav ul li:nth-child(2) > a:before{z-index:1;position:absolute;top:0;left:-15px;content:'';width:0;height:0;display:block;border-right:15px solid #FFFFFF;border-top:60px solid transparent}.nav ul li:nth-last-child(2) a:after{position:absolute;z-index:1;top:0;right:-15px;content:'';width:0;height:0;display:block;border-left:15px solid #FFFFFF;border-bottom:60px solid transparent}.nav ul li:last-child a{background:#ffce54;padding:0 25px 0 30px;color:#FFFFFF}.nav ul li:last-child a:hover{background:#ffce54}.nav ul li a{position:relative;display:block;padding:0 25px;color:#666666;font-size:14px;line-height:60px;text-decoration:none;-webkit-transition:all 0.3s linear 0s;-moz-transition:all 0.3s linear 0s;-ms-transition:all 0.3s linear 0s;-o-transition:all 0.3s linear 0s;transition:all 0.3s linear 0s}.nav ul li a:hover{background:#f2f2f2}.nav ul li a:hover:before{border-right:15px solid #f2f2f2}.nav ul li a:hover:after{border-left:15px solid #f2f2f2}.nav ul li a.logo{background:#ffce54;width:30px;height:30px;padding:15px 30px 15px 15px;line-height:1;vertical-align:middle}.nav ul li a.logo:hover{background:#ffce54}.nav ul li a.logo img{width:100%}.nav ul li a i{margin:0 0 0 6px}.nav ul li .menu{display:none;position:absolute;background:#FFFFFF;top:100%;width:180px;border-top:1px solid rgba(0, 0, 0, 0.05);border-bottom:3px solid #ffce54;border-radius:0 0 3px 3px;overflow:hidden}.nav ul li .menu li{display:block;width:100%;height:45px;margin:0;border-bottom:1px solid rgba(0, 0, 0, 0.05)}.nav ul li .menu li:nth-child(2),
.nav ul li .menu li:nth-last-child(2){height:45px}.nav ul li .menu li:nth-child(2) a:before,
.nav ul li .menu li:nth-last-child(2) a:before,
.nav ul li .menu li:nth-child(2) a:after,
.nav ul li .menu li:nth-last-child(2) a:after{content:'';display:none}.nav ul li .menu li a{background:#FFFFFF;padding:0 15px 0 30px;color:#666666;line-height:45px;text-align:left}.nav ul li .menu li a:hover{background:#f2f2f2}.info{width:300px;margin:50px auto;text-align:center}.info h1{margin:0;padding:0;font-size:24px;font-weight:400;color:#333333}.info span{color:#666666;font-size:12px}.info span a{color:#000000;text-decoration:none}.info span .fa{color:#ffce54}.info span .spoilers{color:#999999;margin-top:5px;font-size:10px}

In the CSS code I have used a scheme of yellow color you can change his dad color code to your favourite color code and that color code can be in hex or in RGB format.

These are some css selectors that are used in the above css code with their description and example.
SelectorExampleExample description
:first-childp:first-childSelects every <P> elements that is the first child of its parent
:hovera:hoverSelects links on mouse over
:last-childp:last-childSelects every <P> elements that is the last child of its parent

So we have written HTML markup and customised it using CSS and now we will add some functionality in this project (Flat Navigation) to make it work as we want it to be.

To make this project (Flat Navigation) work properly for that we will use JavaScript or jquery in some cases which is a javascript library.

This is the javascript code for our project you can also copy it by simple clicking once and code will be copied automatically.

JavaScript Code for Flat Navigation :

$(".nav li").hover(function () {
$(this).children("ul").stop().delay(200).animate({height: "toggle", opacity: "toggle"}, 200);
});

Customizations :

In the above codes provided you have to make customizations replace following things:
Replace https://www.softwebtuts.com with your own website url.

Completion :

So here we are, We have done and our project Flat Navigation is ready now you can copy and combine all the codes provided above and combine them into single html file and have fun.

If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment i will try to resolve the issue as soon as possible.

Download Project (Flat Navigation) File :

Flat Navigation.zip
File Size 5.08 KB
Click the download button and you will be redirected to download page from where you can download project files.

If you face any difficulty in downloading the project file leave you comment below i will resolve that issue as soon as possible.

I hope that this post help you a lot and I think you will appreciate it so don't take that appreciation with you if you like my post appreciate me in the comment form below.
Thank you !
Flat Navigation Menu - CSS + HTML + JQuery
css html jquery

Flat Navigation Menu - CSS + HTML + JQuery

Flat Responsive Pricing Tables - Pure CSS

Today we are going to make flat pricing tables that looks very much responsive and amazing.

I cannot provide you the demo because I don't have the availability of that stuff but you can download the project files and have a look.

You can use these pricing tables if you want to sell anything on your website.

Specially used for selling different things with packages for example you may have seen pricing tables on websites that sell domains and hosting.

These Pricing tables will make your website look stunning and give your website a beautiful look so that everyone who visits your website will be attracted and he will be bound to subscribe to the newsletters of your blog because of the beauty of your website.

So without further video let's start our tutorial.

Stepping into the tutorial I want to tell you that if you are new visitor on this blog subscribe to the newsletters right now and stay updated.

Let me show you the demo of these pricing tables before providing you the source code.
Demo:
Flat Responsive Pricing Tables - Pure CSS


Hi buddy today we are going to design Flat Pricing Table

As you know the HTML folder is mandatory for that so we should have some HTML folder first . Below is the code provided and you have to save it with the filename as provided.


Create New directory because we are going to work in that directory give it a name Flat Pricing Table and save all the files in it as they are said in the steps below.

The HTML code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

There are some external files used in the code provided below you can download them if you want:
https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js


Save It As Flat Pricing Table/index.html :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"><link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700'><link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'><link rel="stylesheet" href="css/style.css"><div class='info'><h1>Pricing Table</h1><span>Made with<i class='fa fa-heart animated infinite pulse'></i>by<a href='#'>Muhammad Muzammil</a><div class='spoilers'>(3 Tables!) | (Active Class!) | (Very Swagy!)</div></span></div><div class='container'><div class='column'><div class='pricing-table'><h2 class='title'>Hatchling Plan</h2><div class='price'><span>$</span><span>3.96</span><span>/ month</span></div><ul><li><div class='fa fa-check'></div>Single Domain</li><li><div class='fa fa-check'></div>Unlimited Disk Space         </li><li><div class='fa fa-check'></div>Unlimited Bandwidth         </li><li><div class='fa fa-check'></div>Shared SSL Certificate         </li><li><div class='fa fa-times'></div>FREE Toll Free Number         </li></ul><a class='button' href='#'>Sign Up Now</a></div></div><div class='column'><div class='pricing-table best'><h2 class='title'>Baby Plan</h2><div class='price'><span>$</span><span>6.36</span><span>/ month</span></div><ul><li><div class='fa fa-check'></div>Unlimited Domain</li><li><div class='fa fa-check'></div>Unlimited Disk Space         </li><li><div class='fa fa-check'></div>Unlimited Bandwidth         </li><li><div class='fa fa-check'></div>Shared SSL Certificate         </li><li><div class='fa fa-times'></div>FREE Toll Free Number         </li></ul><a class='button' href='#'>Sign Up Now</a></div></div><div class='column'><div class='pricing-table'><h2 class='title'>Business Plan</h2><div class='price'><span>$</span><span>10.36</span><span>/ month</span></div><ul><li><div class='fa fa-check'></div>Unlimited Domain</li><li><div class='fa fa-check'></div>Unlimited Disk Space         </li><li><div class='fa fa-check'></div>Unlimited Bandwidth         </li><li><div class='fa fa-check'></div>FREE Priate SSL & IP         </li><li><div class='fa fa-check'></div>FREE Toll Free Number         </li></ul><a class='button' href='#'>Sign Up Now</a></div></div></div><script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Make External Stylesheet

With an external style sheet, you can change the look of an entire website by changing just one file i have included in the code above and also added in the project files.

Our HTML page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section in this article we will make external stylesheet in css directory.

The main code that will be included in the header tags will be similar to this <link rel='stylesheet' href='Flat Pricing Table/css/style.css' />
I have included the jquery script or plugin in the above code because we are going to use jquery code instead of javascript code so you have to include it if you already have added in your website then remove this one.

In the code above I have included three pricing tables but you can increase them according to your requirements.
Without CSS our this script (Flat Pricing Table) will never look good-looking. So here we are, our HTML folder is ready now we have to personalize our HTML and it can be done using CSS.

So below is the CSS code for our HTML folder and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.

The CSS code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

Save It As Flat Pricing Table/css/style.css :

body{background:#e9e9e9;font-family:'Roboto', sans-serif;text-align:center;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{position:relative;max-width:960px;margin:0 auto}.container .column{width:33%;padding:0 15px;-webkti-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;float:left}.container .column:nth-child(2) .pricing-table{-webkit-animation-duration:1.5s;-moz-animation-duration:1.5s;animation-duration:1.5s}.container .column:nth-child(3) .pricing-table{-webkit-animation-duration:2s;-moz-animation-duration:2s;animation-duration:2s}.container:before,
.container:after{content:'';display:block;clear:both}.pricing-table{position:relative;background:#666666;margin:0 auto;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-transition:all 0.3s linear 0s;-moz-transition:all 0.3s linear 0s;-ms-transition:all 0.3s linear 0s;-o-transition:all 0.3s linear 0s;transition:all 0.3s linear 0s;-webkit-animation:1s slideDown ease;overflow:hidden}.pricing-table .title{margin:0;padding:15px 5px;color:#FFFFFF;font-size:18px;font-weight:600;text-transform:uppercase}.pricing-table .price{background:rgba(0, 0, 0, 0.1);padding:30px 10px;color:#FFFFFF}.pricing-table .price span{display:inline-block;font-size:14px;font-weight:600}.pricing-table .price span:nth-child(2){font-size:48px}.pricing-table ul{background:#FFFFFF;margin:0;padding:0;color:#666666;font-size:14px;text-align:left}.pricing-table ul li{padding:15px 30px}.pricing-table ul li .fa{margin:0 11px 0 0}.pricing-table ul li:nth-child(2n){background:rgba(0, 0, 0, 0.05)}.pricing-table .button{display:block;background:rgba(0, 0, 0, 0.1);margin:15px;padding:15px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;color:#FFFFFF;font-weight:600;text-decoration:none;text-transform:uppercase}.pricing-table.best{background:#2ecc71;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}.info{width:300px;margin:25px auto 60px;text-align:center}.info h1{margin:0;padding:0;font-size:24px;font-weight:400;color:#333333}.info span{color:#666666;font-size:12px}.info span a{color:#000000;text-decoration:none}.info span .fa{color:#2ecc71}.info span .spoilers{color:#999999;margin-top:5px;font-size:10px}@-webkit-keyframes slideDown{0%{opacity:0;top:-60px}50%{top:10px}100%{opacity:1;top:0}}

The color scheme is my own you didn't reach that according to your website.

In the above code some color codes are used that are listed below you can change them as required.
  • #e9e9e9
  • #666666
  • #FFFFFF
  • rgba(0, 0, 0, 0.1)
  • #FFFFFF
  • #FFFFFF
  • #666666
  • rgba(0, 0, 0, 0.05)
  • rgba(0, 0, 0, 0.1)
  • #FFFFFF
  • #2ecc71
  • #333333
  • #666666
  • #000000
  • #2ecc71
  • #999999

    • Ending :

    So here we are, We have done and our project Flat Pricing Table is ready now you can save all the files as provided.

    Like CSS files in css directory and JavaScript files in a js directory name. Below is directory tree of the files and folders of this project.


    • Flat Pricing Table
      • css
        • style.css
      • js
      • index.html

    If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment i will try to resolve the issue as soon as possible.

    Download Project (Flat Pricing Table) File :

    Flat Pricing Table.zip
    File Size 4.58 KB
    Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.

    That's it we are done now if you want to download the project file download button is provided above you can download it from there our today's post and hair and if you want to post on this site you are welcome here you can simply write your post and wrap it in a text file and simply send that post a text file to my email ID I will review and try to publish that post on my website.

    Before Leaving this page please tell me that in comment section are these pricing tables attractive or not i will be glad if you will do so.

    Thank you !




    Flat Responsive Pricing Tables - Pure CSS
    css html

    Flat Responsive Pricing Tables - Pure CSS

    Registration Form - Login Form Marketing Style

    Hello guys today in this article I am going to share with you a registration form with a marketing style.

    This is full with registration form which will provide you a functionality of login and signup.

    Using this form user can sign up and login to your website.

    One thing that I want to tell you is that it is full weight and looks amazing and beautiful than you have a look on it.

    I created it and I think that you will like it that's why I am sharing it with you.

    Good day people today we are going to design Registration Form Login Form Marketing Style

    As you know the HTML directory is necessary for that so we should have some HTML directory first . Below is the code provided and you have to save it with the filename as provided.

    Preview Of Registration Form - Login Form Marketing Style

    Registration Form - Login Form Marketing Style


    Create New folder because we are going to work in that folder give it a name Registration Form Login Form Marketing Style and save all the files in it as they are said in the steps below.

    The HTML code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

    There are some external files used in the code provided below you can download them if you want:
    https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
    https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css
    http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js


    Save It As Registration Form Login Form Marketing Style/index.html :

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"><link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,700'><link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'><link rel="stylesheet" href="css/style.css"><div class="hero"><div class="container"><div class="column"><h1>Welcome to Softweb Tuts!</h1><p>Do you want blogger widgets <a href="#">Click Here</a> and get any widget you want for blogger free.</p></div><div class="column"><div class="wv-tabs"><div class="wv-tabs-header"><div class="wv-tabs-header__tab wv-tabs-header__tab--active" data-tab="1">User</div><div class="wv-tabs-header__tab" data-tab="2">Developer</div></div><div class="wv-tabs-content"><div class="wv-tabs-content__panel wv-tabs-content__panel--active" data-tab="1"><div class="wv-button-group"><button class="wv-button wv-button--facebook"><i class="fa fa-facebook"></i><span>Facebook</span></button><button class="wv-button wv-button--twitter"><i class="fa fa-twitter"></i><span>Twitter</span></button><button class="wv-button wv-button--github"><i class="fa fa-github-alt"></i><span>Github</span></button><button class="wv-button wv-button--google"><i class="fa fa-google"></i><span>Google</span></button></div><div class="wv-divider"></div><form class="wv-form"><input class="wv-input" type="email" placeholder="Email Address"/><input class="wv-input" type="password" placeholder="Password"/><button class="wv-button" type="submit"><span>Sign In</span></button></form></div><div class="wv-tabs-content__panel" data-tab="2"><div class="wv-button-group wv-button-group--developer"><button class="wv-button wv-button--github"><i class="fa fa-github-alt"></i><span>Github</span></button><button class="wv-button wv-button--facebook"><i class="fa fa-facebook"></i><span>Facebook</span></button><button class="wv-button wv-button--twitter"><i class="fa fa-twitter"></i><span>Twitter</span></button><button class="wv-button wv-button--google"><i class="fa fa-google"></i><span>Google</span></button></div><div class="wv-divider"></div><form class="wv-form"><input class="wv-input" type="email" placeholder="Email Address"/><input class="wv-input" type="password" placeholder="Password"/><button class="wv-button" type="submit"><span>Sign In</span></button></form></div></div></div></div></div></div><script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="js/index.js"></script>

    Make External Stylesheet

    With an external style sheet, you can change the look of an entire website by changing just one file i have included in the code above and also added in the project files.

    Our HTML page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section in this article we will make external stylesheet in css folder.

    The main code that will be included in the header tags will be similar to this <link rel='stylesheet' href='Registration Form Login Form Marketing Style/css/style.css' />
    I have included the jquery script or plugin in the above code because we are going to use jquery code instead of javascript code so you have to include it if you already have added in your website then remove this one.

    In the above markup I have written a code for HTML form that is login and signup form and also the others that are required for this registration form.
    Without CSS our this script (Registration Form Login Form Marketing Style) will never look magnificent. So here we are, our HTML directory is ready now we have to customize our HTML and it can be done using CSS.

    So below is the CSS code for our HTML directory and you have to save it with the filename as provided. Make a new folder called css and put this file to that folder.

    The CSS code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

    Save It As Registration Form Login Form Marketing Style/css/style.css :

    body{background:#F3F3F3;width:100%;height:100%;font-family:"Montserrat";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wv-tabs{z-index:1;position:relative;background:#FFF;width:400px;border-radius:4px;overflow:hidden}.wv-tabs-header{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}.wv-tabs-header__tab{background:#DD3E48;width:100%;padding:20px;color:#FFF;font-size:16px;text-align:center;cursor:pointer}.wv-tabs-header__tab--active{background:#FFF;color:#F0525C}.wv-tabs-content__panel{display:none;background:#FFF}.wv-tabs-content__panel--active{display:block}.wv-button-group{display:flex;flex-wrap:wrap;padding:13px 23px}.wv-button-group .wv-button{width:calc(50% - 14px);margin:7px;padding:12px 20px;text-align:left}.wv-button-group--developer .wv-button{width:calc(33% - 14px);text-align:center}.wv-button-group--developer .wv-button .fa{margin:0}.wv-button-group--developer .wv-button span{display:none}.wv-button-group--developer .wv-button--github{width:100%}.wv-button-group--developer .wv-button--github .fa{margin:0 10px 0 0}.wv-button{display:block;background:#41BB93;width:100%;border:0;border-radius:4px;padding:15px 20px;box-sizing:border-box;color:#FFF;font-family:"Montserrat";font-size:14px;line-height:normal;text-align:center;cursor:pointer}.wv-button .fa{background:#FFF;width:24px;height:24px;border-radius:100%;margin:0 10px 0 0;line-height:24px;text-align:center}.wv-button--facebook{background:#3B5998}.wv-button--facebook .fa{color:#3B5998}.wv-button--github{background:#333333}.wv-button--github .fa{color:#333333}.wv-button--google{background:#DB4437}.wv-button--google .fa{color:#DB4437}.wv-button--twitter{background:#55ACEE}.wv-button--twitter .fa{color:#55ACEE}.wv-divider{position:relative;background:rgba(0, 0, 0, 0.1);width:100%;height:1px;margin:20px 0}.wv-divider:before{content:"OR";position:absolute;left:50%;top:-50%;background:#FFF;padding:0 15px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);color:#7E7E7E;font-size:14px}.wv-form{margin:-10px 0 0;padding:30px}.wv-input{display:block;background:#F3F3F3;width:100%;border:0;border-radius:4px;margin:0 0 14px;padding:15px 20px;box-sizing:border-box;color:#212121;font-family:"Montserrat";font-size:14px;line-height:normal;text-align:center}.hero{z-index:1;position:relative;background:#F0525C;min-width:440px;margin:20px 20px 100px;padding:40px 0;box-sizing:border-box}.container{display:flex;align-items:center;flex-direction:row;flex-wrap:no-wrap;justify-content:space-between;max-width:1140px;margin:0 auto;padding:0 20px;box-sizing:border-box}.container .column{height:100%;padding:20px}h1{margin:0 0 20px;color:#FFF;font-size:48px;font-weight:700;line-height:1.4em}p{color:#FFF;font-family:'Roboto';font-weight:400;line-height:1.4em}p a{color:#FFD800;font-weight:600;text-decoration:none}.wv-tabs{margin:0 0 -160px}@media (max-width:980px){.container{flex-direction:column;flex-wrap:wrap}}@media (max-width:760px){h1, p{text-align:center}h1{font-size:40px}p{width:80%;margin:0 auto}}

    There are particularly several things in the above CSS code that you can change according to your requirements. You can only do that if you are a web designer or web developer.

    The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.

    I have used @media rule in the above css code for making this project responsive for all kind of devices.


    In the above code some color codes are used that are added in the above code you can change them as required.

    So we have written HTML directory and customised it and now we will add some functionality in this project (Registration Form Login Form Marketing Style) to make it work as we want it to be.

    To make this project (Registration Form Login Form Marketing Style) work properly for that we will use JavaScript.

    So here is a JavaScript code for our project (Registration Form Login Form Marketing Style) and also save it with the filename as provided. Make a new folder called js and put this file to that folder.

    The JavaScript code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

    Save It As Registration Form Login Form Marketing Style/js/index.js :

    (function() {
$(".wv-tabs-header__tab").on("click", function(e) {
var tabId;
e.preventDefault();
$(".wv-tabs-header__tab").removeClass("wv-tabs-header__tab--active");
$(this).addClass("wv-tabs-header__tab--active");
tabId = $(this).attr("data-tab");
$(".wv-tabs-content__panel").removeClass("wv-tabs-content__panel--active");
return $(".wv-tabs-content__panel[data-tab="" + tabId + ""]").addClass("wv-tabs-content__panel--active");
});
}).call(this);
    I have used a little bit of jQuery code to transform between login and signup forms I haven't added or functionality of user registration using PHP you can do that if you want.

    For that you will have to game in depth knowledge of PHP programming language but you can find tutorials about that on internet.

    To Sum Up :

    So here we are, We have done and our project Registration Form Login Form Marketing Style is ready now you can save all the files as provided.

    Like CSS files in css folder and JavaScript files in a js folder name. Below is folder tree of the files and folders of this project.


    • Registration Form Login Form Marketing Style
      • css
        • style.css
      • js
        • index.js
      • index.html

    If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment i will try to resolve the issue as soon as possible.

    Download Project (Registration Form Login Form Marketing Style) File :

    Registration Form Login Form Marketing Style.zip
    File Size 5.67 KB
    Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.

    I hope that you will like my this post and if you do then please share it with your friends and keep visiting this site for more this kind of projects and tutorials.
    Thank you !




    Registration Form - Login Form Marketing Style
    css html jquery

    Registration Form - Login Form Marketing Style

    Phone Mockup With Login & Signup Form

    In this article I am going to share with you phone mockup with login and signup form. It is very attractive and useful specially in making your website responsive.

    You can easily remove the makeup of a phone and have responsive sign in and sign up form.

    What's happening programmers today we are going to design Phone Mockup With Login & Signup Form

    As you know the HTML directory is essential for that so we should have some HTML directory first . Below is the code provided and you have to save it with the filename as provided.


    Create New folder because we are going to work in that folder give it a name Phone Mockup With Login & Signup Form and save all the files in it as they are said in the steps below.

    The HTML code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

    There are some external files used in the code provided below you can download them if you want:
    https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
    https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/hat.svg
    http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
    http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js


    Save It As Phone Mockup With Login & Signup Form/index.html :

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"><link rel="stylesheet" href="css/style.css"><div class="phone"><div class="screen"><div class="form"><div class="thumbnail"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/hat.svg"/></div><form class="register-form"><input type="text" placeholder="name"/><input type="password" placeholder="password"/><input type="text" placeholder="email address"/><button>create</button><p class="message">Already registered? <a href="#">Sign In</a></p></form><form class="login-form"><input type="text" placeholder="username"/><input type="password" placeholder="password"/><button>login</button><p class="message">Not registered? <a href="#">Create an account</a></p></form></div></div></div><script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script><script  src="js/index.js"></script>

    Make External Stylesheet

    With an external style sheet, you can change the look of an entire website by changing just one file i have included in the code above and also added in the project files.

    Our HTML page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section in this article we will make external stylesheet in css folder.

    The main code that will be included in the header tags will be similar to this <link rel='stylesheet' href=' Phone Mockup With Login & Signup Form/css/style.css' />
    I have included the jquery script or plugin in the above code because we are going to use jquery code instead of javascript code so you have to include it if you already have added in your website then remove this one.

    Before going that I want to tell you something that I don't have bought hosting yet so I can't upload project files I usually do zippyshare but I am not sure that that files are available at that time when you reach this article or not.

    If you face any difficulty please leave your comments in the comment section.
    Without CSS our this script ( Phone Mockup With Login & Signup Form) will never look radiant. So here we are, our HTML directory is ready now we have to personalize our HTML and it can be done using CSS.

    So below is the CSS code for our HTML directory and you have to save it with the filename as provided. Make a new folder called css and put this file to that folder.

    The CSS code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

    Save It As Phone Mockup With Login & Signup Form/css/style.css :

    body{background:#fff;font-family:'Helvetica Neue', sans-serif}.phone{position:relative;display:block;background:#fafafa;width:324px;height:624px;border:2px solid #e6e6e6;-webkit-border-radius:40px;-webkit-background-clip:padding-box;-moz-border-radius:40px;-moz-background-clip:padding;border-radius:40px;background-clip:padding-box;margin:100px auto;padding:50px 10px;box-sizing:border-box}.phone:before,
.phone:after{content:'';position:absolute;left:50%;display:block;background:rgba(0, 0, 0, 0.1);-webkit-border-radius:100px;-webkit-background-clip:padding-box;-moz-border-radius:100px;-moz-background-clip:padding;border-radius:100px;background-clip:padding-box}.phone:before{top:23px;width:100px;height:6px;margin-left:-50px}.phone:after{bottom:10px;width:60px;height:30px;margin-left:-30px}.phone .screen{background:rgba(0, 0, 0, 0.1);width:300px;height:520px;overflow:hidden;border:2px solid #e6e6e6;box-sizing:border-box}.form{position:relative;z-index:1;background:#FFFFFF;height:100%;padding:40px 30px;text-align:center;box-sizing:border-box}.form .thumbnail{background:#EF3B3A;width:150px;height:150px;margin:0 auto 30px;padding:50px 30px;border-top-left-radius:100%;border-top-right-radius:100%;border-bottom-left-radius:100%;border-bottom-right-radius:100%;box-sizing:border-box}.form .thumbnail img{display:block;width:100%}.form input{outline:0;background:#f2f2f2;width:100%;border:0;margin:0 0 15px;padding:15px;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-left-radius:3px;border-bottom-right-radius:3px;box-sizing:border-box;font-size:14px}.form button{outline:0;background:#EF3B3A;width:100%;border:0;padding:15px;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-left-radius:3px;border-bottom-right-radius:3px;color:#FFFFFF;font-size:14px;transition:all 0.3 ease;cursor:pointer}.form .message{margin:15px 0 0;color:#b3b3b3;font-size:12px}.form .message a{color:#EF3B3A;text-decoration:none}.form .register-form{display:none}

    In the CSS code provided by I have embedded the CSS code for more cup of mobile phone and responsiveness you can have a look on the code.


    In the above code some color codes are used that are listed below you can change them as required.
  • #fff
  • #fafafa
  • #e6e6e6
  • rgba(0, 0, 0, 0.1)
  • rgba(0, 0, 0, 0.1)
  • #e6e6e6
  • #FFFFFF
  • #EF3B3A
  • #f2f2f2
  • #EF3B3A
  • #FFFFFF
  • #b3b3b3
  • #EF3B3A

    • So we have written HTML directory and customised it and now we will add some functionality in this project ( Phone Mockup With Login & Signup Form) to make it work as we want it to be.

    To make this project ( Phone Mockup With Login & Signup Form) work properly for that we will use JavaScript.

    So here is a JavaScript code for our project ( Phone Mockup With Login & Signup Form) and also save it with the filename as provided. Make a new folder called js and put this file to that folder.

    The JavaScript code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

    Save It As Phone Mockup With Login & Signup Form/js/index.js :

    $(".message a").click(function(){
$("form").animate({height: "toggle", opacity: "toggle"}, "slow");
});
    To make this login and signup form work properly we need to have some jquery code so that we can toggle between login and signup forms on click and that can only be done using jQuery or JavaScript in this case we are using jQuery.

    Consequence :

    So here we are, We have done and our project Phone Mockup With Login & Signup Form is ready now you can save all the files as provided.

    Like CSS files in css folder and JavaScript files in a js folder name. Below is folder tree of the files and folders of this project.


    • Phone Mockup With Login & Signup Form
      • css
        • style.css
      • js
        • index.js
      • index.html

    If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment i will try to resolve the issue as soon as possible.

    Download Project ( Phone Mockup With Login & Signup Form) File :

    Phone Mockup With Login & Signup Form.zip
    File Size 4.31 KB
    Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.

    I hope that this post help you a lot and I think you will appreciate it so don't take that appreciation with you if you like my post appreciate me in the comment form below.
    Thank you !




    Phone Mockup With Login & Signup Form
    css html jquery

    Phone Mockup With Login & Signup Form

    Simple Flat Option Button - Pure CSS

    In this article and going to share with you a simple flat option button which will have two options true or false. You can simply integrate this into your web page and easily have fun with it.

    It is having nice appearance and beautiful UI design.

    Greetings friends today we are going to make Simple Flat Option Button

    As you know the HTML directory is necessary for that so we should have some HTML directory first . Below is the code provided and you have to save it with the filename as provided.

    Create New directory because we are going to work in that directory give it a name Simple Flat Option Button and save all the files in it as they are said in the steps below.

    The HTML code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

    There are some external files used in the code provided below you can download them if you want:
    https://daneden.github.io/animate.css
    http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css
    http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js


    Save It As Simple Flat Option Button/index.html :

    <link rel='stylesheet' href='https://daneden.github.io/animate.css/animate.min.css'><link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'><link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700'><link rel="stylesheet" href="css/style.css"><div class='container'><p>Hey there, want a friend?</p><div class='btn-group animated bounceIn'><a class='btn' href='https://www.softwebtuts.com/'><div class='fa fa-check'></div></a><span>or</span><a class='btn' href='http://www.raufgraphics.com/'><div class='fa fa-times'></div></a></div></div><script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    Make External Stylesheet

    With an external style sheet, you can change the look of an entire website by changing just one file i have included in the code above and also added in the project files.

    Our HTML page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section in this article we will make external stylesheet in css directory.

    The main code that will be included in the header tags will be similar to this <link rel='stylesheet' href='Simple Flat Option Button/css/style.css' />
    I have included the jquery script or plugin in the above code because we are going to use jquery code instead of javascript code so you have to include it if you already have added in your website then remove this one.

    You can replace the links which I have used in the above code.
    Without CSS our this script (Simple Flat Option Button) will never look wonderful. So here we are, our HTML directory is ready now we have to personalize our HTML and it can be done using CSS.

    So below is the CSS code for our HTML directory and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.

    The CSS code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

    There are some external files used in the code provided below you can download them if you want:
    https://s3.amazonaws.com/ooomf-com-files/Vo7YbYQQ8iyOo4J9bOoj_ggb24.jpg

    Save It As Simple Flat Option Button/css/style.css :

    body{background:#f7f7f7 url("https://s3.amazonaws.com/ooomf-com-files/Vo7YbYQQ8iyOo4J9bOoj_ggb24.jpg") no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;font-family:"Roboto";font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body::before{content:'';position:fixed;z-index:-1;top:0;left:0;background:#c0392b;background:rgba(52, 152, 219, 0.9);width:100%;height:100%}.container{position:fixed;top:50%;left:50%;margin:-112px 0 0 -200px}.container p{color:#fff;text-align:center;font-size:30px}.container .btn-group{position:relative}.container .btn-group .btn{cursor:pointer;display:inline-block;background:#34495e;width:200px;height:120px;border-bottom:5px solid #2c3e50;color:#fff;font-size:36px;line-height:120px;text-align:center;vertical-align:middle;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px}.container .btn-group .btn:last-child{background:#fff;border-bottom:5px solid #ccc;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;color:#34495e;margin:0 0 0 -4px}.container .btn-group .btn:active{margin-top:5px;border:none;box-shadow:none}.container .btn-group span{position:absolute;top:50%;left:50%;z-index:999;display:inline-block;background:#34495e;width:40px;height:40px;line-height:40px;margin:-25px 0 0 -25px;color:#fff;border:5px solid #fff;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;text-align:center;vertical-align:middle}

    In the above code i have used font awesome icons that's why I have integrated that library.

    SelectorExampleExample description
    :activea:activeSelects the active link
    :last-childp:last-childSelects every <p> elements that is the last child of its parent


    In the above code some color codes are used that are listed below you can change them as required.

  • #f7f7f7

  • #c0392b

  • rgba(52, 152, 219, 0.9)

  • #fff

  • #34495e

  • #2c3e50

  • #fff

  • #fff

  • #ccc

  • #34495e

  • #34495e

  • #fff

  • #fff


    • Outcome :

    So here we are, We have done and our project Simple Flat Option Button is ready now you can save all the files as provided.

    Like CSS files in css directory and JavaScript files in a js directory name. Below is directory tree of the files and folders of this project.


    • Simple Flat Option Button
      • css
        • style.css
      • js
      • index.html

    If the project files are not downloaded or if you face any error while downloading, you can simply leave your comment i will try to resolve the issue as soon as possible.

    Download Project (Simple Flat Option Button) File :

    Simple Flat Option Button.zip
    File Size 3.77 KB
    Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.

    So our today's project is completed I have also provided that download files above you can download them from the above link that's free do it now and also subscribe to the newsletters and join our mailing list.
    Thank you !




    Simple Flat Option Button - Pure CSS
    css html

    Simple Flat Option Button - Pure CSS

    CSS Sprites Generator - Open Source Tools

    Hello friends today in this article and going to share with you and open source application that was online and that is CSS sprites generator this tool will help you to generate CSS sprites from your icons or images.

    Basically this CSS Sprites generator is a clone of Toptal CSS suprite generator.

    What Are CSS Sprites?

    To reduce your web page load time and to reduce your component on your web page you need to create CSS sprites from your images so that you will not have to load same image again and again. Using CSS sprites technique you can generate CSS sprite from your image and combine all of your images into a single image file and you can use that anywhere you want.

    In the final results you will get a single combined or compressed image and also the CSS code to use that Sprite. If you want to know more about CSS sprites just search it on Google and you will get the exact results whatever you want.

    Demo of CSS Sprites:

    As I have already told you that this is toptal CSS Sprites Generator so you haven't made another them for that you can go to that website and checkout that demo.

    View Demo

    Important Info:

    This is the most important information that you must read.
    I was not having any hosting so I made this app work in localhost you can easily run this application in your localhost server. If you want me to install this on your website you can contact me I will provide you a full information about that.

    In my case I checked this online CSS sprites generator applications it was working fine I was not having any difficulty or any errors I just check that and shared it with you.

    Download Source Code:

    I've compressed the all the files used for this program in a Zip file and shared the zip file with you you can download the zip file of this CSS sprites generator online tool from the link provided below just click the download button and your download will be started automatically.

    Once again let me tell you that this online tool will not work on your online server you have to make some changes in the code but as I have already told you that this will only work in localhost server.

    Download CSS Sprites Generator - Open Source Tools


    CSS-Sprites-Generator.zip
    File Size 286 KB
    Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.



    Conclusion:
    In the end my suggestion for you id to subscribe to the newsletters of this website to stay updated and get the notifications of all my upcoming posts in you inbox.
    CSS Sprites Generator - Open Source Tools
    open source tools

    CSS Sprites Generator - Open Source Tools

    Box Shadow Generator Using Angularjs - Open Source Tools

    Hello and welcome gyz today we are going to make an app using javascript and angularjs library.

    This tool will help you to generate box shadows according to your requirements with simple slider you can make and customise shadows. You will get live preview and code generated in real-time.

    How are you designers today we are going to build Box Shadow Generator Using Angularjs

    As you know the HTML directory is vital for that so we should have some HTML directory first . Below is the code provided and you have to save it with the filename as provided.


    Create New directory because we are going to work in that directory give it a name Box Shadow Generator Using Angularjs and save all the files in it as they are said in the steps below.

    The HTML code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

    There are some external files used in the code provided below you can download them if you want:
    https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
    http://cdnjs.cloudflare.com/ajax/libs/angular.js

    Save It As Box Shadow Generator Using Angularjs/index.html :

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"><link rel="stylesheet" href="css/style.css"><div ng-app="boxShadow" ng-controller="ShadowGenerator"><header><div><span>box-shadow</span>{{updateCSS().replace('box-shadow','')}}</div></header><div class="content"><aside class="controls"><div class="form-control"><label>x-offset: {{xOffset}}px</label><input type="range" min="-50" max="50" ng-model="xOffset" /></div><script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script><script  src="js/index.js"></script>
    In the html code provided some attributes are used that are not html attributes basically that attributes are for angularjs library to get and give results.
    Without CSS our this script (Box Shadow Generator Using Angularjs) will never look angelic. So here we are, our HTML directory is ready now we have to customize our HTML and it can be done using CSS.

    So below is the CSS code for our HTML directory and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.

    The CSS code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

    Save It As Box Shadow Generator Using Angularjs/css/style.css :

    *{box-sizing:border-box}body{font-family:Arial, sans-serif;background-color:#242930;color:#fff}header{display:flex;align-items:center;justify-content:center;position:relative;z-index:2;background-color:#242930;font-size:1.2em;height:100px;border-bottom:1px solid #343434}header span{color:#FF5722}.content{max-width:960px;margin:0 auto}.controls{padding:20px 10px;float:left;width:35%}.result{display:flex;align-items:center;justify-content:center;position:relative;top:-100px;z-index:1;min-height:100vh;float:left;width:65%;background-color:#fff;color:#242930}.victim{width:150px;height:150px;background-color:#FF5722}input[type=range]{-webkit-appearance:none;width:100%;margin:8px 0}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;box-shadow:0px 0px 0px #000000, 0px 0px 0px #0d0d0d;background:rgba(92, 92, 92, 0.78);border-radius:25px;border:1px solid rgba(0, 5, 0, 0.44)}input[type=range]::-webkit-slider-thumb{box-shadow:0px 0px 0px #5c5c5c, 0px 0px 0px #696969;border:1.1px solid #00001e;height:20px;width:20px;border-radius:50px;background:#fefefe;cursor:pointer;-webkit-appearance:none;margin-top:-9px}input[type=range]:focus::-webkit-slider-runnable-track{background:rgba(191, 191, 191, 0.78)}input[type=range]::-moz-range-track{width:100%;height:4px;cursor:pointer;box-shadow:0px 0px 0px #000000, 0px 0px 0px #0d0d0d;background:rgba(92, 92, 92, 0.78);border-radius:25px;border:1px solid rgba(0, 5, 0, 0.44)}input[type=range]::-moz-range-thumb{box-shadow:0px 0px 0px #5c5c5c, 0px 0px 0px #696969;border:1.1px solid #00001e;height:20px;width:20px;border-radius:50px;background:#fefefe;cursor:pointer}input[type=range]::-ms-track{width:100%;height:4px;cursor:pointer;background:transparent;border-color:transparent;color:transparent}input[type=range]::-ms-fill-lower{background:rgba(0, 0, 0, 0.78);border:1px solid rgba(0, 5, 0, 0.44);border-radius:50px;box-shadow:0px 0px 0px #000000, 0px 0px 0px #0d0d0d}input[type=range]::-ms-fill-upper{background:rgba(92, 92, 92, 0.78);border:1px solid rgba(0, 5, 0, 0.44);border-radius:50px;box-shadow:0px 0px 0px #000000, 0px 0px 0px #0d0d0d}input[type=range]::-ms-thumb{box-shadow:0px 0px 0px #5c5c5c, 0px 0px 0px #696969;border:1.1px solid #00001e;height:20px;width:20px;border-radius:50px;background:#fefefe;cursor:pointer;height:4px}input[type=range]:focus::-ms-fill-lower{background:rgba(92, 92, 92, 0.78)}input[type=range]:focus::-ms-fill-upper{background:rgba(191, 191, 191, 0.78)}#cp{width:1px;height:1px;visibility:hidden;opacity:1;position:absolute}label[for="cp"]{display:block;width:100%;height:20px;margin-top:15px;cursor:pointer}.form-control{padding:15px;border-bottom:1px solid #343434}.form-control input{margin-top:15px}@media (max-width:700px){.content,.controls,.result{width:100%}.result{top:0;min-height:400px}}

    This is css code you can customize it and change the things you want.

    The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.

    I have used @media rule in the above css code for making this project responsive for all kind of devices.


    In the above code some color codes are used that are listed below you can change them as required.

  • #242930

  • #fff

  • #242930

  • #343434

  • #FF5722

  • #242930

  • #FF5722

  • #000000

  • #0d0d0d

  • #5c5c5c

  • #696969

  • #00001e

  • #fefefe

  • #5c5c5c

  • #696969

  • #00001e

  • #fefefe

  • rgba(0, 0, 0, 0.78)

  • rgba(0, 5, 0, 0.44)

  • #0d0d0d

  • #5c5c5c

  • #696969

  • #00001e

  • #fefefe

  • rgba(92, 92, 92, 0.78)

  • rgba(191, 191, 191, 0.78)

  • #343434


    • So we have written HTML directory and customised it and now we will add some functionality in this project (Box Shadow Generator Using Angularjs) to make it work as we want it to be.

    To make this project (Box Shadow Generator Using Angularjs) work properly for that we will use JavaScript.

    So here is a JavaScript code for our project (Box Shadow Generator Using Angularjs) and also save it with the filename as provided. Make a new directory called js and put this file to that directory.

    The JavaScript code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

    Save It As Box Shadow Generator Using Angularjs/js/index.js :

    var app = angular.module("boxShadow", []);
app.controller("ShadowGenerator", function($scope) {
$scope.xOffset = 10;
$scope.yOffset = 10;
$scope.blur = 10;
$scope.spread = 0;
$scope.opacity = 100;
$scope.mode = "";
$scope.hex = "#000000";
$scope.rgba = function() {
var
hex = $scope.hex.replace("#",""),
r = parseInt(hex.substring(0,2), 16),
g = parseInt(hex.substring(2,4), 16),
b = parseInt(hex.substring(4,6), 16),
result = "rgba("+r+","+g+","+b+","+$scope.opacity/100+")";
return result;
};//rgba
$scope.updateCSS = function() {
return "box-shadow: "+$scope.mode + " "+$scope.xOffset+"px "+$scope.yOffset+"px "+$scope.blur+"px "+ $scope.spread + "px " + $scope.rgba() +";";
};//updateCSS
});
    This is javascript code which will not work if angularjs library is not added.

    Ending :

    So here we are, We have done and our project Box Shadow Generator Using Angularjs is ready now you can save all the files as provided.

    Like CSS files in css directory and JavaScript files in a js directory name. Below is directory tree of the files and folders of this project.


    • Box Shadow Generator Using Angularjs
      • css
        • style.css
      • js
        • index.js
      • index.html

    Download Project (Box Shadow Generator Using Angularjs) File :

    Box Shadow Generator Using Angularjs.zip
    File Size 2.48 KB
    Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.

    I hope that you will like my this post and if you do then please share it with your friends and keep visiting this site for more this kind of projects and tutorials.
    Thank you !




    Box Shadow Generator Using Angularjs - Open Source Tools
    open source tools

    Box Shadow Generator Using Angularjs - Open Source Tools

    Subscribe Our Newsletter