Prabhat kumar: how to create web page only HTML and CSS

Only use HTML and CSS

<!DOCTYPE html>

<title>Insert title here</title>

</head>

<body>

<p class="textheader">SHIMPY COMPUTER SHOP</p>

</div>

<button class="buttonheader">Opening Time<br>10:00-18.00</button>

<button class="buttonheader">Email<br>shimpycomputershop@gmail.com</button>

<button class="buttonheader1">Today Deal</button>

</div>

<nav>

<button class="headermixButton"><a href="http://localhost:8081/Shimpy_Computer_shop/Home.html" style="text-decoration:none;">HOME</a></button> |

<button class="headermixButton"><a href="http://localhost:8081/Shimpy_Computer_shop/Home.html" style="text-decoration:none;">OUR SERVICES</a></button> |

<button class="headermixButton"><a href="http://localhost:8081/Shimpy_Computer_shop/Home.html" style="text-decoration:none;">ABOUT US</a></button> |

<button class="headermixButton"><a href="http://localhost:8081/Shimpy_Computer_shop/Home.html" style="text-decoration:none;">SHOP</a></button> |

<button class="headermixButton"><a href="http://localhost:8081/Shimpy_Computer_shop/Home.html" style="text-decoration:none;">LATEST NEWS</a></button> |

<button class="headermixButton"><a href="http://localhost:8081/Shimpy_Computer_shop/Home.html" style="text-decoration:none;">CONTACT US</a></button>

</nav>

</div>

</header>

<p class="middelp">Advanced technologies handed <br>to us</p>

<p class="middelp1">Our aim is to offer outstanding services straight to your home<br>

or to your office to conduct repair works or troubleshoot your computer.</p>

<nav>

<button class="headermixButton2">NO FIX, NO FEE<br>Repair on Demand</button> |

<button class="headermixButton2">30 DAYS WARRANTY <br> Guaranteed Service</button> |

<button class="headermixButton2">EXPERT STAFF<br>Available Anytime</button> |

<button class="headermixButton2">WE ARE FAST<br>Qualified Workers</button>

</nav>

</div>

<button class="leftcontentb">LAPTOP REPAIR</button>

<button class="leftcontentb">TABLET & IPAD REPAIR</button>

<button class="leftcontentb">GAME SYSTEMS REPAIR</button>

<button class="leftcontentb">LCD TV REPAIR</button>

<button class="leftcontentb">DESKTOP REPAIR </button>

<button class="leftcontentb">OTHER ELECTRONICS </button>

</div>

<p class="leftp"><b><a href="http://localhost:8081/Shimpy_Computer_shop/Home.html">MAC AND PC REPAIR</a></b><br><br>

Whether you are a business or an individual looking to fix your

computer, you can trust us to take care of all your needs. We

understand that computers make our lives and business much...

</p>

</div>

<p class="leftp"><b><a href="http://localhost:8081/Shimpy_Computer_shop/Home.html">BROKEN GLASS REPAIR</a></b><br><br>

Mobiles phone have become an inseparable part of our lives.

We can now surf the web, log onto our social networking websites

or just carry out leisure activities for hours on your...

</p>

</div>

<p class="leftp"><b><a href="http://localhost:8081/Shimpy_Computer_shop/Home.html">GAME CONSOLES REPAIR</a></b><br><br>

Most of us are stressed and tired with all the professional and personal

commitments that at the end of the day, we want to just relax and head to

a fantasy world where you are the one..

</p>

</div>

<h1 class="h1">Easy way to get your computer repaired</h1>

<div class="content1"><p class="leftp"><b>BROKEN DEVICE</b><br><br>

If your device breaks, don't panic.

We offer a huge range of mobile

phone & computer repair services.</p><p>

</p><h1 class="h1">1</h1></div>

We offer free postage with all mobile

phone & computer repairs. Saving you time and

money. Just print the label and send.</p>

<div class="content1"><p class="leftp"><b>QUICK FIX</b><br><br>

Our trained technicians will repair your phone

or computer device quickly & efficiently,

keeping you informed all the way.</p>

<div class="content1"><p class="leftp"><b>FAST RETURN</b><br><br>

Choose the delivery method that matches your requirements.

We will make sure you repaired device is returned safely.</p>

</div>

<h1>About us</h1><hr>

<p>

When it comes to gadgets and gizmos, we love all things tech.

one thing that you should not do is confuse our passion for snobbery.

We fix all electronic devices such as phones, tablets, PCs and even

your gaming consoles. Whether you accidently dropped your iPhone from

your pocket while boarding the bus or a train or your tablet took a

painful journey in the toilet, you should not worry. We know exactly how

it feels and can understand the traumatic experience you might be going

through when you see your precious device being broken.

</p>

</div>

asdfasd

</div>

<p class="textheader">SHIMPY COMPUTER SHOP</p>

<p class="leftlast">When it comes to gadgets and gizmos, we love all things tech.

one thing that you should not do is confuse our passion for snobbery.

We fix all electronic devices such as phones, tablets, PCs, televisions and even your

gaming consoles

</p>

</div>

<p class="leftlast"><b>CONTACT INFO</b><br><br>

c-132/7 Badarpur Delhi 110044<br>

shimpycomputershop@gmail.com<br>

www.ShimpyComputerShop.com

</p></div>

</div>

<h1 class="textheader">PRABHAT KUMAR</h1>

</div>

</body></html>

CSS code here!

@CHARSET "ISO-8859-1";

body{background:lightwhite;}

.container{width:100%; background-color:white;}

.header{width:auto; height:130px; background-color: steelblue; padding-left:10px;

box-shadow:0px -10px 10px mintcream,

0px 1px 1px mintcream,

-10px 1px 1px mintcream;

}

.textheader{color:white; font-size:30px; font-family:impact; }

.leftdiv{float:left; width:300px;padding-left:30px;}

.rightdiv{float:right;width:850px; padding-top:45px; padding-left:20px; }

.buttonheader{text-decoration:none; width:130px; border:none; background:transparent; font-size:18px;

font-family:Copperplate; color:white; font-weight:bold; text-align:left; }

.todaydeal{float:right; background-color:darkslateblue; width:200px;height:50px; margin-right:35px;

border-radius:4px; box-shadow: 2px 5px 3px black; }

.buttonheader1{text-decoration:none; width:200px; border:none; background:transparent; font-size:25pt;

font-family:Copperplate; color:white; font-weight:bold; text-align:center; }

.headermix{clear:both; float:right; margin-top:10px; margin-right:200px; width:900px; background-color:mintcream; height:auto;

border-radius:20px; padding:15px;}

.headermixButton{text-decoration:none; width:140px; border:none; background:transparent; font-size:12pt; font-family:Bodoni MT;

text-align:center;position:sticky;}

.middelsection{width:auto; height:350px;margin:none; padding-left:30px; padding-top:50px;

background-image:url("IMAGE/slider1.jpg");

background-size:cover;

background-repeat: no-repeat;

}

.middelp{margin:none; padding-top:10px; font-weight:900; font-size:30pt;}

.middelp1{margin:none; font-size:16pt; color:Skyblue; text-shadow:1px 1px 1px gray;}

.middelsection2{clear:both; float:right; margin-top:90px; margin-right:170px; width:900px; background-color:whitesmoke; height:auto;

border-radius:20px; padding:15px}

.headermixButton2{text-decoration:none; width:215px; border:none; background:transparent; font-size:12pt; font-family:Bodoni MT;

text-align:center;}

.leftcontent{float:left; margin-left:70px; margin-top:20px; width:250px; height:AUTO; background-color:whitesmoke; box-shadow:1px 1px 10px darkgray; }

.leftcontentb{ width:250px; margin:none; height:60px; font-size:14pt; font-family:Calisto MT; background:transparent;

text-align:left; padding-left:10px; border-radius:5px;color:gray;}

.leftcontent1{float:left; margin:20px; width:250px; height:360px; background-color:whitesmoke; box-shadow:1px 1px 10px darkgray;}

.leftp{padding:10px;font-size:13pt;color:gray;}

.leftcontent2{float:left; margin:20px; width:250px; height:360px; background-color:whitesmoke; box-shadow:1px 1px 10px darkgray;}

.leftcontent3{float:left; margin:20px; width:250px; height:360px;; background-color:whitesmoke; box-shadow:1px 1px 10px darkgray;}

.container1{width:auto; background-color:black; height:500px; margin-top:500px; margin-left:40px; margin-right:40px; color:whitesmoke;}

.h1{font-size:25pt; text-align:center; padding:20px;}

.content1{float:left; margin:45px; width:200px; height:300px; background-color:transparent; box-shadow:1px 1px 10px darkgray; }

.container2{width:auto; background-color:ghostwhite; height:500px; margin-top:20px; margin-left:40px; margin-right:40px; }

.left2con{float:left; width:50%; background-color: snow; height:auto; padding:10px; }

.right2con{ float:right; width:45%; background-color: snow; height:393px;;padding:10px;box-shadow:1px 1px 10px darkgray;}

.footer{clear:both; width:auto; height:400px;; background-color:steelblue; padding:10px;}

.footer2{ width:auto; height:310px; background-color:cornflowerblue ; box-shadow:1px 1px 10px darkblue; margin:20px;border-radius:4px;}

.last1{float:left; width:60%; height:250px; margin:10px; padding:15px;}

.last4{float:left; width:200px; height:250px; margin:10px; padding:15px;}

.leftlast{padding:10px;font-size:15pt;color:white;}

Prabhat kumar

Pages

how to create web page only HTML and CSS

No comments:

INTRODUCTION TO COMPUTER NETWORKS