13_CSS_Display.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS DISPLAY</title>
    <style>
        body{
            font-family: "Comic Sans MS",sans-serif;
        }
        div{
            padding: 10px;
            margin: 10px;
        }


    </style>
</head>
<body>


    <!-- DISPLAY INLINE -->
    <div>
        <h3>HTML</h3>
        <h3>CSS</h3>
        <h3>JavaScript</h3>
        <h3>JQuery</h3>
        <h3>Bootstrap</h3>
    </div>

    <!-- Display Block -->
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            <span >1. At aut beatae cum cumque dolore exercitationem facere in ipsum itaque, </span>
            <span >2. iure libero maiores minus nisi odio sed temporibus totam veniam! Consequuntur!</span>
            <span >3. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
            At aut beatae cum cumque dolore exercitationem facere in ipsum itaque,
            iure libero maiores minus nisi odio sed temporibus totam veniam! Consequuntur!
        </p>
    </div>

    <!-- DISPLAY BLOCK -->
    <div class="div_block">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact Us</a>
        <a href="#">Careers</a>
    </div>

    <!-- DISPLAY BLOCK -->
    <div>
        <form>
            <input type="text" placeholder="User Name">
            <input type="password" placeholder="Password">
            <input type="submit">
        </form>
    </div>

    <!-- DISPLAY NONE / HIDDEN -->
    <div>
        <h1>I am Hidden</h1>
    </div>

    <!-- DISPLAY INLINE-BLOCK -->


</body>
</html>