Agar aap bhi html aur css ke madad se kise website k leye tamplet bana chahte hai to ye bahut hi aasan hai.

Sab log to Photoshop ko use kar ke disign bana sakte hai. Lekin html aur css se banane ki bat ki jay to bahut log soch me par jate hai is are! bhai ye to bahut hi muskil kaam hai. lekin muskil lagta hai yah karna utna hi aashan hai.

To neche do coad hai ek html aur dusra css ke leye. Aap us coad ko copy kare aur kisi bhi text editor me jay aur us coad ke sath kuch naya banane ke liye usme kuch idhar udhar kare. Coad j sath kuch khele . Us coad me kuch fer badal kare aur aapne man pasand layak web template banay.

HTML

<!DOCTYPE html> <html > <head> <title>Sonu</title> <link rel="stylesheet" href="style.css"> </head> <body> <main> <div class="div1">header</div> <div class="div2">box1</div> <div class="div3">box2</div> <div class="div4">box3</div> <div class="div5">sidebar</div> <div class="div6">main</div> <div class="div7">footer</div> </main> </body> </html>

CSS

*{ margin: 10; padding: 10px; box-sizing: border-box;} main{ width: 75%; padding: 50px auto; color: #000; border: 5px solid #000; display: grid; grid-template-rows:60px 100px 200px 60px; grid-template-columns: repeat(3,1fr)150px; grid-gap: 15px;} .div1{background-color: red; grid-column: 1/-1} .div2{background-color:#00FFA6 ;} .div3{background-color: #01BDFF;} .div4{background-color:#0A51FF ;} .div5{background-color:#FF9B08 ; grid-row: 2/4; grid-column: 4/5;} .div6{background-color:#C102FF ; grid-column: 1/4;} .div7{background-color:#0294ff; grid-column:1/-1;}

Subscribe our youtube channel

↘️⬇️↙️
↪️click here ➡️🔴⬅️
↗️⬆️↖️

2 Comments

Flowgiri said…

Great blog post! I loved your step-by-step guide on creating a website template using HTML and CSS. For more convenience, you can also explore "Flowgiri webflow templates" to enhance your web design process!

flowgiri

July 29, 2023 at 9:30 AM

Wegems Agency said…

Your blog post is a beacon of clarity in the vast realm of web design tutorials! The step-by-step guide on crafting a website template with HTML and CSS is invaluable. As a cherry on top, the suggestion to explore 'Flowgiri webflow templates' adds a layer of convenience and sophistication, turning an already great process into an exceptional web design journey!

November 25, 2023 at 10:40 PM

Ticker

Header Ads Widget

How to make Website template using html and css.

HTML

CSS

Post a Comment

2 Comments

Categories

Advertisement

Ad Space

Ticker

Header Ads Widget

How to make Website template using html and css.

HTML

CSS

You may like these posts

Post a Comment

2 Comments

Categories

Advertisement

Ad Space