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