Website Design

🎨 Website Design Kya Hai?

Hindi

Website design ka matlab hai webpage ke elements ko achhe way mein arrange karna aur colors, fonts, spacing aur layout ka use karke professional look dena.

English

Website design means arranging webpage elements properly and using colors, fonts, spacing and layouts to create a clean and professional appearance.

🌈 1. Colors

Hindi

Website ke liye colors select karte waqt readability aur consistency ka dhyan rakhna chahiye.

body{
    background:#f5f7fa;
    color:#172033;
}

h1{
    color:#008bb0;
}

English

Choose colors that make the content easy to read and keep the design consistent.

🔠 2. Fonts

Hindi

Font website ke text ka style hota hai. Simple aur readable font website ko professional banata hai.

body{
    font-family:Arial, sans-serif;
}

English

Fonts control the appearance of text. A simple readable font improves the user experience.

↔️ 3. Spacing

Hindi

Elements ke beech proper space hona website ko clean aur easy to read banata hai.

CSS mein margin aur padding spacing ke liye commonly use hote hain.

.card{
    margin:20px;
    padding:25px;
}

English

Proper spacing makes a webpage clean and easier to read. Margin and padding are commonly used for spacing.

📦 4. Cards

Hindi

Cards ka use services, products, projects aur information ko separate sections mein dikhane ke liye hota hai.

.card{
    background:white;
    padding:25px;
    border-radius:12px;
    border:1px solid #e5e7eb;
}

English

Cards are useful for displaying services, products, projects and other information in separate sections.

⭕ 5. Border Radius

Hindi

border-radius se element ke corners ko rounded banaya ja sakta hai.

.card{
    border-radius:15px;
}

English

The border-radius property creates rounded corners on an element.

🌑 6. Box Shadow

Hindi

box-shadow ka use cards aur boxes ko depth dene ke liye kiya ja sakta hai.

.card{
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

English

Box shadow can add depth and visual separation to cards and other elements.

📐 7. Layout

Hindi

Website layout ka matlab hai webpage ke elements ko proper position aur structure mein arrange karna.

.container{
    max-width:1100px;
    margin:auto;
}

.grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

English

Layout controls how different webpage elements are positioned and organized.

🧭 8. Navigation Bar

Hindi

Navigation bar website ke important pages ko connect karta hai, jaise Home, About, Services aur Contact.

<nav>

    <a href="index.html">Home</a>

    <a href="about.html">About</a>

    <a href="services.html">Services</a>

    <a href="contact.html">Contact</a>

</nav>

English

A navigation bar helps users move between important pages of a website.

💻 Simple Professional Design

Hindi

HTML aur CSS ko use karke ek simple professional section is tarah banaya ja sakta hai:

<div class="card">

    <h2>Our Services</h2>

    <p>
        We create modern websites.
    </p>

    <a href="contact.html">
        Contact Us
    </a>

</div>

CSS:

.card{
    background:white;
    padding:25px;
    border-radius:15px;
    border:1px solid #e5e7eb;
}

.card h2{
    color:#008bb0;
}

.card p{
    color:#475569;
    line-height:1.7;
}

English

HTML creates the content and CSS controls its visual design. Together they can create clean and professional webpage sections.