Monday, August 17, 2015


Hello friends today i am posting a full code of a website created using html and css. Hope you like it...
This code works perfectly in firefox.
Simply copy the code and paste in your text-editor and save it with .html extension. And also copy the following image and name it bg.jpg. Here is the code and image.


<html>
<head>
<title>Home Page</title>
<body>
<style>
*{
margin:0px;
padding:0px;
}

a{
text-decoration: none;}

body{
background-image: url(bg.jpg);
background-position: center;
background-repeat: no-repeat;
height:100%;
width:100%;
background-color: #800000;
}

header{
font-family:Comic Sans MS;
color:‪#‎fffff0‬;
font-size:35px;
text-align:center;
margin-top:5px;
text-shadow:4px 4px 2px #333333;
}

header e{
color: ‪#‎deb887‬;
font-size:25px;
text-shadow:1px 1px 2px #333333;
}

header a{
font-size:15px;
color: ‪#‎8b0000‬;
text-shadow:1px 1px 2px #333333;
}

header a:hover{
color: #660033}

nav ul li{
display:inline;
}

nav ul{
background-color: #808000;
width:657px;
opacity:0.5;
filter:alpha(opacity=50);
padding:10px;
border-radius:50px;
box-shadow:2px 5px 2px #333333;}

nav ul li a{
color:white;
font-size:30px;
font-family:Comic Sans MS;
margin-left:25px;
border-radius:50px;
padding:9px;
}

nav ul li a:hover{
box-shadow: inset 2px 2px 2px #333333;
}

nav ul li a:active{
box-shadow: inset 3px 3px 3px #333333;
}

p#description{
font-family:Comic Sans MS;
color: #990000;
font-size:25px;
text-align:center;
margin-top:50px;
margin-left:150px;
margin-bottom:80px;
width:700px;
height:350px;
box-shadow: inset 0px 0px 100px #800000;
box-shadow: 2px 2px 5px #333333;
}

footer{
color:‪#‎f5f5f5‬;
font-family: Comic Sans MS;
font-size:20px;
text-align: center;}

footer a{
color: #f5f5f5;
}

log{
color:brown;
font-family:Comic Sans MS;
}
</style>
</body>
<header><i><b>First name</i> <e>Second name</e></b> <a title="Twitter" href="http://www.twitter.com/avishekshah1">@avishekshah1</a></header>
<nav><center>
<ul>
<li><a title="Home Page" href=#>Home</a></li>
<li><a title="Photo Gallery" href=#>Gallery</a></li>
<li><a title="Contacts" href=#>Contact Us</a></li>
<li><a title="About Us" href=#>About Us</a></li>
</ul>
</nav><br></center>
<p id="description"><font size=35 color=#660000>
Hello! smile emoticon,<br></font>
Text Text Text Text Text Text Text Text Text<br>
Text Text Text Text Text Text Text<br>
Text Text Text Text Text<br>
Text Text Text<br>
Enjoy... kiki emoticon<br>
</p>
<hr color=‪#‎8b4513‬><footer>
<u>Desi</u>g<u>ned</u> <u>b</u>y : <a href="http://www.twitter.com/avishekshah1">Avishek Shah</a><br>
<u>E</u>-<u>mail</u> : avishekshah14@gmail.com
</footer>
<log>Designed on : 30-JUNE-2015</log>
</html>

Posted by at No comments:

Here is the complete code to make a stylish hover gallery;


 <html>
<head>
<title>gallery</title>
</head>
<body>
<style>
ul{
margin-top:100px;
margin-left:200px;
}
ul li{
display:inline;
}
div{
height:280px;
width:50px;
float:left;
border-style:solid;
border-color:grey;
border-width:2px;
}
div:hover{
width:300px;
}
.first{
background-image:url("img (1).jpg");
}
.second{
background-image:url("img (2).jpg");
}
.third{
background-image:url("img (3).jpg");
}
.fourth{
background-image:url("img (4).jpg");
}
.fifth{
background-image:url("img (5).jpg");
}
.sixth{
background-image:url("img (6).jpg");
}
h1{
color:gray;
Font-family:Comic Sans MS;
text-align:center;
}
</style>
</body>
<h1>Mouseover any part of the following images to display it.</h1><br>
<ul>
<li><div class="first"></div></li>
<li><div class="second"></div></li>
<li><div class="third"></div></li>
<li><div class="fourth"></div></li>
<li><div class="fifth"></div></li>
<li><div class="sixth"></div></li>
</ul>
</html>
Add images as you like. Enjoy!! smile emoticon
Posted by at No comments:

Hello! Today i am sharing you some of the cool css tricks and tips that will make your website look cool. Lets start from shadow property; Mot of you know that you can add shadow to text and images through shadow property in css. But you can do much more like making blood effect or fire effect. Here are some codes to make some effect.

Blood effect;



 h1{
color:‪#‎f8f8ff‬;
text-align:center;
font-size:70px;
font-family:Comic Sans MS;
text-shadow:
4px 2px 1px #300000,
4px 4px 1px #400000,
4px 6px 1px #500000,
4px 6px 1px #600000,
4px 8px 1px #700000,
4px 10px 1px #800000,
4px 12px 1px #900000,
4px 14px 1px ‪#‎A00000‬,
4px 16px 1px ‪#‎B00000‬,
4px 18px 1px ‪#‎C00000‬,
4px 20px 1px ‪#‎D00000‬,
4px 22px 1px ‪#‎E00000‬,
4px 24px 1px ‪#‎F00000‬,
4px 26px 1px ‪#‎FA0000‬,
4px 28px 1px ‪#‎FB0000‬,
4px 30px 1px ‪#‎FC0000‬,
4px 32px 1px ‪#‎FD0000‬,
4px 34px 1px ‪#‎FE0000‬,
4px 36px 5px ‪#‎FF0000‬;
}

Fire effect;


 h1{
margin-top:50px;
color:white;
font-family:Comic Sans MS;
text-shadow: 0 0 4px white,
0 -5px 4px ‪#‎FFFF33‬,
2px -10px 6px ‪#‎FFDD33‬,
-2px -15px 11px ‪#‎FF8800‬,
2px -25px 18px ‪#‎FF2200‬;
}
See my next post for more. smile emoticon
Posted by at No comments:

This is my first post in this blog.
Today i will give you SEO(Search Engine Optimization) tips for beginner that will help you increase your visitors. 


Here are steps;


1. Give your website's description in one line. If you give your site's description in one line, it will be easier for others to know exactly what your website is about. Like 'Facebook helps to share and connect to your friends' or if your site is about music you can write 'Come listen and share music'.

 2.Check if your site is fast or not. If your site is slow, visitors will be bored in your website and search for others, as a result your website will be down. There are various ways to make it faster, Google it.

 3. Make it mobile friendly. All visitors don't use only computer to visit to your site. They also use mobiles, tablets etc. So it is very important that your website is mobile friendly.

 4. New content. You should publish new things in your site to give the visitor a reason to come back to your site. If you don't update your site regularly user will be bored from your site.

 5.Manage your links and contents. Do not make your site rough. Make it clean and easy for others to surf. This is the most important thing for your website.
This much for now. Hope you like it. Thank you for reading. smile emoticon
Posted by at No comments:
Subscribe to: Posts (Atom)