Make a Navbar with Header In Spck Code Editor In Mobile, Coding Form Mobile | HTML, CSS, JavaScript | Mayank Salvi

Mobile में HTML, CSS की help से Header ओर Navbar बनाने के लिये सबसे पहले आपको एक App की जरूरत होगी जिसकी Complete Guidence

इस Tutorial में हमे सीखेंगे, मोबाइल से Coding कैसे करते हैं ।

Mobile में HTML, CSS की help से Header ओर Navbar बनाने के लिये सबसे पहले आपको एक App की जरूरत होगी जिसकी Complete Guidence मैं मेंरे Previous Tutorial में दे चुका हूं जिसे आप नीच Link पर Click करके देख सकते हैं ।

Click Here: Make Complete Website My Previous Blog

इसके बाद App को Open करने के बाद अपनी New File बनानी है बनाने के बाद आपको दिया गये HTML BASIC STURCTURE की Body में नीचे दिये गये Code को paste करना है ।

Code को Paste करने के बाद आपको Play Button पर Click करना है।

<!DOCTYPE html>
<html>

<head>
    <style>
        * {
            box-sizing: border-box;
        }

body {
            font-family: Arial;
            padding: 10px;
            background: #f1f1f1;
        }

/* Header/Blog Title */
        .header {
            padding: 30px;
            text-align: center;
            background: white;
        }

.header h1 {
            font-size: 50px;
        }

/* Style 
                the top navigation bar */
        .topnav {
            overflow: hidden;
            background-color: #333;
        }

/* Style the topnav links */
        .topnav a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

/* Change color on hover */
        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }

/* Responsive layout - when 
                the screen is less than 
                400px wide, 
                make the navigation links stack 
                on top of each other instead of 
                next to each other */
        @media screen and (max-width: 400px) {
            .topnav a {
                float: none;
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="header">
        <h1>My Website</h1>
        <p>Resize the browser
            window to see the effect.</p>
    </div>
    <div class="topnav">
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#" style="float:right">
            Link</a>
    </div>
</body>

</html>

देख सकते हैं आपका Project तैयार हो चुका है ।