web design and development Archives - https://mitindia.in/tag/web-design-and-development/ Mon, 23 Jan 2017 11:20:55 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 https://mitindia.in/wp-content/uploads/2023/03/cropped-android-chrome-512x512-1-32x32.png web design and development Archives - https://mitindia.in/tag/web-design-and-development/ 32 32 Sliding menu in html css https://mitindia.in/sliding-menu-html-css/ Mon, 23 Jan 2017 10:41:58 +0000 http://www.mitindia.in/?p=735 Slider menu in html page using css To create a slider navigation menu in html by using CSS syntax. Copy the following program and paste in Notepad then save as .html file extension and view in browser. <html> <style> body { font-family: "Tahoma", sans-serif; } .sidemenu { height: 100%; width: 0; position: fixed; top: 0; […]

The post Sliding menu in html css appeared first on .

]]> Slider menu in html page using css

To create a slider navigation menu in html by using CSS syntax.

Copy the following program and paste in Notepad then save as .html file extension and view in browser.

<html>
<style>
body 
{
 font-family: "Tahoma", sans-serif;
}

.sidemenu {
 height: 100%;
 width: 0;
 position: fixed;
 top: 0;
 right: 0;
 background-color: #222;
 overflow-x: hidden;
 transition: 1s;
 padding-top: 50px;
}

.sidemenu a {
 padding: 9px 9px 9px 42px;
 text-decoration: none;
 font-size: 25px;
 color: #818181;
 display: block;
 transition: 0.3s
}

.sidemenu a:hover, .offcanvas a:focus{
 color: #f1f1f1;
}

.sidemenu .closebtn {
 position: absolute;
 top: 0;
 right: 25px;
 font-size: 36px;
 margin-left: 50px;
}
</style>
<body>

<div id="mySidenav" class="sidemenu">
 <a href="javascript:void(0)" class="closebtn" 
onclick="closeNav()">&times;</a>
 <a href="#">Web design</a>
 <a href="#">Digital Marketing</a>
 <a href="#">Mobile App</a>
 <a href="#">Contact</a>
<img src="d:\web-design.jpg" height=100 width=100>
<img src="d:\bing.jpg" height=100 width=100>
<img src="d:\ubuntu.png" height=100 width=100>
<img src="d:\java-logo.jpg" height=100 width=100>
</div>
<div align=right>
<h2 align=right>Animated SideMenu Demo</h2>
<span style="font-size:30px;cursor:pointer" 
onclick="openNav()">&#9776; Menu</span>
<script>
function openNav() {
 document.getElementById("mySidenav").style.width = 
"300px";
}

function closeNav() {
 document.getElementById("mySidenav").style.width = 
"0";
}

</script>
</body>
</html>

Output 

Before opening Menu

After opening Menu

Navigation bar with header logo

Share

The post Sliding menu in html css appeared first on .

]]> fixed background image using css https://mitindia.in/fixed-background-image-using-css/ Sat, 21 Jan 2017 12:19:54 +0000 http://www.mitindia.in/?p=728 Fixed background image in HTML page using CSS To fix the background image static at center, means no scrolling image! The following CSS page must be created. Have a look. h1 { background-color: green; } div { background-image: url("d:\solid.jpg"); } p { background-color: yellow; } BODY { background-image:url("d:\java-logo.jpg"); background-repeat: no-repeat; background-position: center; background-attachment: fixed; } […]

The post fixed background image using css appeared first on .

]]> Fixed background image in HTML page using CSS

To fix the background image static at center, means no scrolling image! The following CSS page must be created. Have a look.

h1 {
 background-color: green;
}

div {
 background-image: url("d:\solid.jpg");
}

p {
 background-color: yellow;
}

BODY
{
background-image:url("d:\java-logo.jpg");
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}

table
{
background-color:cyan;
}

td, th
{
padding:15px;
}

tr:hover 
{
background-color: yellow
}

tr:nth-child(even)
{
background-color: grey
}

And Now create HTML page with following syntax in it.

<html>
<head>
<link rel="stylesheet" type="text/css" href="ss.css">
</head>

<body>
<h1> Welcome to CSS </h1>
<p> Welcome to CSS - paragraph text here... </p>
<hr>

<table border=2>
<tr> <td> SrNo </td>
<td> Course Name </td>
<td> Type </td></tr>

<tr> <td> 1 </td>
<td> Digital Marketing </td>
<td> IT and Mgt </td></tr>

<tr> <td> 2 </td>
<td> Data Analytics </td>
<td> IT </td></tr>

<tr> <td> 3 </td>
<td> Six Sigma Green Belt </td>
<td> Mgt </td></tr>
</table>
<hr>

<div>
<h2> Text with background fixed image </h2>
<h3> Text with background fixed image </h3>
<h4> Text with background fixed image </h4>
<h5> Text with background fixed image </h5>
</div>

</body></html>

 

Output of the above program is..

fixed background image in css

Also check here for fixed header(logo) and menu bar using css

 

Share

The post fixed background image using css appeared first on .

]]> Navigation bar with header logo using css https://mitindia.in/navigation-bar-header-logo-using-css/ Wed, 18 Jan 2017 08:06:11 +0000 http://www.mitindia.in/?p=722 Navigation bar with header logo or text demo using css / html Below CSS and HTML program shows the use of Header Logo along with Navigation or Menu bar in the same line or alignment. <html> <head> <style> .menu{ background-color: red; color: white; padding: 18px; font-size: 18px; border: none; } .submenu { position: relative; display: […]

The post Navigation bar with header logo using css appeared first on .

]]> Navigation bar with header logo or text demo using css / html

Below CSS and HTML program shows the use of Header Logo along with Navigation or Menu bar in the same line or alignment.

<html>
<head>
<style>
.menu{
 background-color: red;
 color: white;
 padding: 18px;
 font-size: 18px;
 border: none;
}

.submenu {
 position: relative;
 display: inline-block;
}

.submenu-content {
 display: none;
 position: absolute;
 background-color: #f9f9f9;
 min-width: 120px;
}

.submenu-content a {
 color: black;
 padding: 12px 16px;
 text-decoration: none;
 display: block;
}

.submenu-content a:hover {background-color: gray}

.submenu:hover .submenu-content {
 display: block;
}

.submenu:hover .menu {
 background-color: orange;
}

.menu:hover{background-color: orange;}

nav{
display:inline;
float:right;
}

nav ul{
 list-style:none;
}

nav ul li{
 display:inline-block;
}

#logo-small{
display: inline;
font-weight:0;
font-size: 40pt;
font-family: 'Dosis' ,sans-serif;
}

</style>
</head>
<body>

<h2>Navigation bar with Header</h2>
<header>
<h1 id="logo-small"><img src="logo.png"> </h1>

<nav>
 <button class="menu">Home</button>
 <button class="menu">Service</button>
<div class="submenu">
 <button class="menu">Product</button>
 <div class="submenu-content">
 <a href="#">Product 1</a>
 <a href="#">Product 2</a>
 <a href="#">Product 3</a>
 </div>
</div>
<button class="menu">Contact</button>

</nav>
</header>
</body>
</html>


Output as following

Navigation and Header menu

Share

The post Navigation bar with header logo using css appeared first on .

]]> WordPress site security https://mitindia.in/wordpress-site-security/ https://mitindia.in/wordpress-site-security/#comments Thu, 28 Jul 2016 05:43:09 +0000 http://www.mitindia.in/?p=394 How to prevent your WordPress site / blog from hackers? Now a days it become very common that websites are hacked by hackers / attackers with or without any reasons but how to prevent from such dangerous people? As a blogger, lot of patience is required to write post on their blogging site with using […]

The post WordPress site security appeared first on .

]]> How to prevent your WordPress site / blog from hackers?

Now a days it become very common that websites are hacked by hackers / attackers with or without any reasons but how to prevent from such dangerous people?

As a blogger, lot of patience is required to write post on their blogging site with using utmost skills in writing and arranging information in legible manner but what happens if somebody hacks your site? Of course it huge frustration and lot of anger. But having said that the world is having good people also to prevent such attacks and they are real programmer or real software engineer who works for the betterment of the society they live in and not like hackers, who always hide their face from society just like thieves.

Now coming to real fact,

To prevent your site from hackers or attackers you need to implement 2 step-authentication systems provided by Google Authenticator (an app on android / apple store) this app can be downloaded freely on your smart phone.

Google authentication

Once the app is downloaded to your smart phone and do some basic settings like “Account name” and “Your key” and also select a random code to generate frequently based on “Time based” or “Counter based”. [you can also scan the QR code generated after clicking on “Create New Secret key”]

smartphone-key

After this step on your smart phone, now login to your WordPress site and download a plug-in called “Google Authenticator” as look like in the following screen shot.

plugin

After successful download, activate it. And go to “Users” then ”Your Profile” on wordpress dashboard and do the basic settings on Google Authenticator tab as following.

settings

Now click on update.

That’s all, when you login next time to your wordpress blog / site you’ll be prompted with 2step-verification (i.e. one is your user name and password and second is security key provided by your app on smart phone)

wp-login

Now your site is protected with 2step verification so there is almost no chance of hacking your site by hackers because they require user name / password and your smart phone to generate the random key!

Share

The post WordPress site security appeared first on .

]]> https://mitindia.in/wordpress-site-security/feed/ 2 WordPress on Local server https://mitindia.in/wordpress-on-local-server/ Wed, 22 Jun 2016 10:07:37 +0000 http://www.mitindia.in/?p=127 How to run / create a blog/website using WordPress on local pc/laptop?. Brief About WordPress:  It is a CMS(Content Management System), The most powerful open source plat-form for creating blogs and professional websites with over 34% of entire web share out of over 1 billion websites world wide. Over 48,000 plug-ins to use and enhance your […]

The post WordPress on Local server appeared first on .

]]> How to run / create a blog/website using WordPress on local pc/laptop?.

Brief About WordPress:  It is a CMS(Content Management System), The most powerful open source plat-form for creating blogs and professional websites with over 34% of entire web share out of over 1 billion websites world wide. Over 48,000 plug-ins to use and enhance your WordPress site features and stunning themes to look and feel.

In this tutorials you’ll able to install, create and design website/blog using wordpress on local pc/laptop.

Step1:
Install WAMP (server) on your windows PC/Laptop.
Here is an tutorial to install wamp

 

Step2:
After installing, open browser and type : http://localhost

Step3: You’ll see following screen shot with WAMP Home page.

Step4: Click on “phpmyadmin” as per above image and create a database on mysql as following screen image.

After successfully creating the database “mywpsite”, now go for next step.

Step5: Now download the wordpress software from here or
you can also refer below image for that.

Step 6: Unzip the folder and place that folder in C:\wamp\www location. [it looks like c:\wamp\www\mywpsite]

Step 7: Now open above site in the browser by typing : http://localhost/mywpsite (refer following image)

Step 8: Click on “Continue” then Click on Letsgo” button


Step 9: Put here database name (which was just created), user name (commonly “root”), password (commonly blank) and local host, leave this as it is.[follow below screen image]


Step 10: Click on “Submit” button then you’ll see following screen image.

Step 11: Click on “Run the Install” then you’ll be redirected  to following page.

Step 12: provide all user details with email id as per above image. And Click on “Install WordPress” button.

Finally you’ll see following success page.


Now login with user name and password to create your local wordpress sites.

Thank you for reading!.

Share

The post WordPress on Local server appeared first on .

]]>