HTML-CSS Programs With Their Input And Output

पोस्ट को शेयर करे!

हेल्लो दोस्तों स्वागत है आपका हमारी एक और HTML Language कि फायदेमंद पोस्ट में | इस पोस्ट में HTML-CSS Program Notes यानि कि CSS लैंग्वेज के सभी प्रोग्राम के नोट्स को बोहोत ही आसान तरीके से इस पोस्ट में दर्शाया गया है |

यहाँ पर कुछ जरुरी बेसिक HTML-CSS programs को उनके इनपुट और आउटपुट के साथ में दर्शाया गया है जिन्हें समझना बोहोत ही आसान है और इन सभी HTML-CSS programs के codes को आप बोहोत ही आसानी से right side में ऊपर की ओर दिए गए copy button पर क्लिक करके कॉपी करके अपने अभ्यास के लिए और समझने के लिए प्रयोग भी कर सकते है|

Contents दिखाएँ

Ques 1. Use of Tag Selector (Internal CSS) in HTML-CSS.

HTML-CSS Programs With Their Input And Output

<html>
  <head>
    <title>HTML-CSS-1</title>
    <style>
      p {
        color: white;
        background: red;
      }
      h1 {
        color: blue;
        background: aqua;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore dolore
      doloribus aut cupiditate, placeat nemo? Magnam aliquam omnis aut sit enim
      fuga, dolore laboriosam accusantium delectus illum quidem? Optio,
      voluptatibus corrupti nostrum ipsum ea, laudantium expedita nihil modi
      itaque vel totam suscipit odit! Eaque, ab quam? Laboriosam vel minima
      architecto distinctio officiis veritatis eos, reprehenderit blanditiis
      porro dolorem tempora ratione mollitia repudiandae non ea. Recusandae
      aliquam minus aperiam? Consequatur ea enim animi eligendi hic et, esse
      nobis cupiditate ab accusamus libero, ipsam veritatis eveniet, at aut
      ullam laboriosam voluptates molestias eius? Mollitia deleniti fuga quasi
      nulla inventore reprehenderit voluptatem sunt!
    </p>
    <h1>Welcome to the world of CSS</h1>
  </body>
</html>

Ques 2. Use of Group Selector (Internal CSS) in HTML-CSS.

<html>
  <head>
     <title>HTML-CSS-2</title>
    <style>
      p,h1 {
        color: white;
        background: green;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum perspiciatis
      tempora voluptatem totam non rem, eos atque? Nihil sit suscipit recusandae
      porro dignissimos reiciendis consequatur, quod soluta ullam tenetur illum
      autem laudantium cum. Culpa quos beatae ex tenetur deserunt nesciunt!
      Maiores aspernatur distinctio accusamus doloremque nemo est molestiae
      expedita velit! Aut sit libero at, id tempore soluta culpa vitae
      distinctio rem fugiat pariatur totam. Corporis architecto earum ab
      nesciunt eum ipsa voluptate. Nisi quos voluptatum consectetur assumenda
      doloremque totam, rerum quas nulla reiciendis fugit, molestias architecto
      enim animi quia soluta. Beatae, voluptas dolor enim nostrum accusantium
      harum esse excepturi ipsum.
    </p>
    <h1>Welcome to the world of CSS</h1>
  </body>
</html>

Ques 3. Use of ID Selector (Internal CSS) in HTML-CSS.

<html>
  <head>
     <title>HTML-CSS-3</title>
    <style>
      #para {
        color: white;
        background: blue;
      }
      #head {
        color: white;
        background: red;
      }
    </style>
  </head>
  <body>
    <p id="para">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum perspiciatis
      tempora voluptatem totam non rem, eos atque? Nihil sit suscipit recusandae
      porro dignissimos reiciendis consequatur, quod soluta ullam tenetur illum
      autem laudantium cum. Culpa quos beatae ex tenetur deserunt nesciunt!
      Maiores aspernatur distinctio accusamus doloremque nemo est molestiae
      expedita velit! Aut sit libero at, id tempore soluta culpa vitae
      distinctio rem fugiat pariatur totam. Corporis architecto earum ab
      nesciunt eum ipsa voluptate. Nisi quos voluptatum consectetur assumenda
      doloremque totam, rerum quas nulla reiciendis fugit, molestias architecto
      enim animi quia soluta. Beatae, voluptas dolor enim nostrum accusantium
      harum esse excepturi ipsum.
    </p>
    <h1 id="head">Welcome to the world of CSS</h1>
  </body>
</html>

Ques 4. Use of writing-mode property in HTML-CSS.

<html>
  <head>
     <title>HTML-CSS-4</title>
    <style>
      #para1 {
        color: white;
        background: blue;
        writing-mode: vertical-rl;
      }
      #para2 {
        color: white;
        background: green;
        writing-mode: vertical-rl;
      }
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <p id="para1">Welcome to the world of CSS</p>
    <br>
    <p id="para2">Welcome to the world of HTML</p>
    <h1>Welcome to the world of CSS</h1>
  </body>
</html>

Ques 5. Print this html student form using HTML-CSS.

<html>
    <head>
        <title>HTML-CSS-5</title>
    </head>
    <style>
        h1{
            color: red;
        }
        *{
            font-weight: bold;
            background: rgb(137, 255, 137);
        }
    </style>
    <body>
        <center>
        <h1>Personal Details</h1>
        <form method="post" enctype="multipart/form-data" autocomplete="off">
<label for="name">Name:</label>
<input type="text" id="name">
<br><br>
<label for="pass">Password:</label>
<input type="password" id="pass">
<br><br>
<label for="mail">E-mail id:</label>
<input type="email" id="mail">
<br><br>
<label>Gender:</label>
<input type="radio" name="gender">Male <input type="radio" name="gender">Female
<br><br>
<label for="num">Contact#:</label>
<input type="number" id="num">
<br>
<h1>Educational Qualification</h1>
<label for="mail">Degree:</label>
<select>
    <option>--Select Group--</option>
    <option>B.Tech</option>
    <option>M.tech</option>
</select>
<br><br>
<label for="mail">Engineering:</label>
<select>
    <option>--Select Group--</option>
    <option>DIPLOMA</option>
    <option>IIT</option>
</select>
<br><br>
<label for="num">Hobbies:</label>
<input type="checkbox">Playing chess <input type="checkbox">Reading Books
<br>
<h1>Address</h1>
<textarea cols="40" rows="8"></textarea>
<br><br>
<input type="submit" value="Submit">
        </form>
        </center>
             </body>
</html>

Ques 6. Use of border and border-radius property in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-6</title>
    <style>
      #a {
        color: purple;
        border: 5px groove red;
        border-radius: 10px;
        border-radius: 50px 50px 0px 0px;
        text-align: center;
      }
      #b {
        color: purple;
        border: 5px double green;
        border-radius: 10px;
        border-radius: 50px 50px 50px 50px;
        text-align: center;
      }
      #c {
        color: purple;
        border: 5px dotted blue;
        border-radius: 10px;
        border-radius: 0px 0px 50px 50px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1 id="a">HTML AND CSS</h1>
    <h1 id="b">JAVASCRIPT AND JQUERY</h1>
    <h1 id="c">JAVA</h1>
  </body>
</html>

Ques 7. Use of text-shadow and text-transform property in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-7</title>
    <style>
      body {
        font-size: 100px;
        text-align: center;
        font-family: arial;
        text-shadow: -10px -5px 3px black, -15px -10px 6px blue,-20px -15px 9px red;
        text-transform: lowercase;
        color: grey;
      }
    </style>
  </head>
  <body>
    <h1>HTML</h1>
  </body>
</html>

Ques 8. Use of box-shadow property in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-8</title>
    <style>
      h1 {
        color: green;
        border: 20px groove red;
        text-align: center;
        font-size: 50px;
        width: 600px;
        margin: auto;
        box-shadow: 0px 0px 40px 10px black inset, 0px 0px 50px blue;
        border-radius: 50px;
        position: relative;
        top: 30%;
      }
    </style>
  </head>
  <body>
    <h1>HTML AND CSS</h1>
  </body>
</html>

Ques 9. Use of line-height , letter-spacing and word-spacing property in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-9</title>
    <style>
      p {
        background: green;
        color: white;
        font-size: 20px;
        line-height: 35px;
        letter-spacing: 3px;
        word-spacing: 5px;
        font-family: arial;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <h1>HTML AND CSS</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error est ipsum,
      at porro aspernatur eaque vel quas obcaecati, quasi fuga sequi, nemo
      voluptatum quisquam saepe. Et, dicta vel consectetur accusamus magnam
      incidunt veritatis molestiae quas officia, quaerat animi adipisci odio
      reprehenderit? Exercitationem iusto eveniet provident expedita, atque
      architecto eius necessitatibus, libero ipsa minima quia? Quo qui velit
      dolorum, adipisci odio delectus fugit eaque perspiciatis impedit magnam
      error, eum praesentium, asperiores amet soluta rerum necessitatibus ut
      porro suscipit doloremque. Vitae expedita, aspernatur dicta recusandae
      illum, iste tenetur cumque impedit perferendis vel at aperiam ratione
      nobis adipisci laudantium, neque ullam quisquam maiores?
    </p>
  </body>
</html>

Ques 10. Print this design on webpage using box-shadow property in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-10</title>
    <style>
      fieldset {
        width: 582px;
        height: 500px;
        margin: auto;
        display: block;
        border: 2px solid black;
        padding-top: 0px;
      }
      #para {
        height: 20px;
        width: 546px;
        border: 2px solid green;
        margin-left: 15px;
        margin-bottom: 35px;
      }
      #para1 {
        height: 60px;
        width: 485px;
        border: 2px solid green;
        margin-left: 50px;
        margin-bottom: 35px;
        box-shadow: -15px -15px 0px darkblue, 8px 8px 0px rgb(255, 0, 251) inset,
          14px 14px 0px orange inset, 23px 23px 0px rgb(0, 255, 0) inset,
          14px 14px 0px red, 14px 16px 0px orange;
      }
      .para1 {
        box-shadow: 14px 12px 0px red, 14px 14px 1px orange;
      }
      .para2 {
        box-shadow: -14px -12px 0px red, -14px -14px 2px orange;
      }
      .para3 {
        box-shadow: 14px -12px 8px red;
      }
      .para4 {
        box-shadow: 17px -12px 0px red, 17px -28px 0px red;
      }
      .para5 {
        box-shadow: 5px 5px 1px red inset;
      }
      .para6 {
        box-shadow: 0px 0px 14px 8px red;
      }
      .para7 {
        box-shadow: 0px 0px 15px 8px red;
        border-radius: 20px;
      }
    </style>
  </head>
  <body>
    <fieldset>
      <p class="para1" id="para">box-shadow</p>
      <p class="para2" id="para">box-shadow</p>
      <p class="para3" id="para">box-shadow</p>
      <p class="para4" id="para">box-shadow</p>
      <p class="para5" id="para">box-shadow</p>
      <p class="para6" id="para">box-shadow</p>
      <p class="para7" id="para">box-shadow</p>
      <p class="para8" id="para1">box-shadow</p>
    </fieldset>
  </body>
</html>

Ques 11. Print this design using box-shadow property in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-11</title>
    <style>
      fieldset {
        width: 900px;
        height: 345px;
        margin: auto;
        display: block;
        border: 2px solid black;
        padding-top: 25px;
        padding-bottom: 20px;
      }
      #para {
        height: 40px;
        width: 860px;
        border: 2px solid black;
        margin-left: 12px;
        margin-bottom: 45px;
        background: black;
        color: white;
        padding-top: 17px;
        padding-left: 16px;
        font-size: 20px;
      }
      .para1 {
        box-shadow: 10px 15px 0px black;
      }
      .para2 {
        box-shadow: 9px 16px 4px 4px red;
      }
      .para3 {
        box-shadow: 11px 9px 0px red, -10px -16px 0px darkblue;
      }
    </style>
  </head>
  <body>
    <fieldset>
      <p class="para1" id="para">BOX1</p>
      <p class="para2" id="para">BOX2</p>
      <p class="para3" id="para">BOX3</p>
    </fieldset>
  </body>
</html>

Ques 12. Print this paragraph on webpage using writing-mode property in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-12</title>
    <style>
      fieldset {
        width: 195px;
        height: 351px;
        margin: auto;
        display: block;
        border: 2px solid black;
        padding-top: 10px;
        padding-left: 0px;
        padding-right: 0px;
      }
      #para {
        font-family: arial;
        writing-mode: vertical-rl;
        line-height: 28px;
        font-size: 18px;
        margin-left: 1px;
      }
      .para1 {
      }
    </style>
  </head>
  <body>
    <fieldset>
      <p class="para1" id="para">
        The <b>center of mass</b> of a <b>cone</b> is located along a line. This
        line is perpendicular to the base and reaches the apex. The
        <b>center of mass</b> is a distance 3/4 of the height of the
        <b>cone</b> with respect to the apex. This means the
        <b>center of mass</b> is 1/4 of the height from the base.
      </p>
    </fieldset>
  </body>
</html>

Ques 13. Print these lines on webpage using text-shadow property in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-13</title>
    <style>
      fieldset {
        width: 550px;
        height: 260px;
        margin: auto;
        display: block;
        border: 2px solid black;
        padding: 10px;
        padding-left: 2px;
        padding-right: 2px;
      }
      #para {
        margin-top: 8px;
        font-size: 27px;
      }
      .para1 {
        text-shadow: 1px 1px 2px red;
      }
      .para2 {
        text-shadow: 2px 1px 1px blue;
      }
      .para3 {
        text-shadow: 2px 1px 4px green;
      }
      .para4 {
        text-shadow: 2px 2px 5px black;
        color: white;
      }
    </style>
  </head>
  <body>
    <fieldset>
      <p class="para1" id="para">This is having 1px red shadow all around</p>
      <p class="para2" id="para">
        This is having blue vertical shadow(1px) and blue horizontal shadow(1px)
      </p>
      <p class="para3" id="para">This is having a blur effect to the shadow</p>
      <p class="para4" id="para">
        This is having black biur shadow at white text
      </p>
    </fieldset>
  </body>
</html>

Ques 14. Print these lines on webpage using word-spacing property in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-14</title>
    <style>
      fieldset {
        width: 505px;
        height: 265px;
        margin: auto;
        display: block;
        border: 2px solid black;
        padding: 0px;
      }
      #heading1 {
        color: red;
        text-align: center;
        font-size: 50px;
        margin: 0px;
      }
      #heading2 {
        color: green;
        font-size: 36px;
        margin-top: 30px;
        margin-left: 10px;
      }
      #para {
        color: rgb(1, 1, 223);
        font-size: 25px;
        margin-left: 10px;
        margin-top: 30px;
        margin-bottom: 0px;
        word-spacing: 1px;
      }
    </style>
  </head>
  <body>
    <fieldset>
      <h1 id="heading1">This is a main heading.</h1>
      <h1 id="heading2">This is a sub heading.</h1>
      <p class="para2" id="para">
        Lorem ipsum lvinar mattis nunc sed blan dit libero. Turpis massa sed
        eleme. Lentesque id nibh tortor id aliq ueted risus pretium quam.
      </p>
    </fieldset>
  </body>
</html>

Ques 15. Print this heading using text-shadow property in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-15</title>
    <style>
      #block {
        margin: auto;
        display: block;
        border: 2px solid black;
        width: 850px;
      }
      #heading1 {
        text-shadow: 4px 4px 4px rgb(0, 255, 0);
        font-size: 50px;
        margin: 0px;
        margin-left: 15px;
        margin-bottom: 6px;
      }
    </style>
  </head>
  <body>
    <div id="block">
      <h1 id="heading1">Testing Text-shadow Property</h1>
    </div>
  </body>
</html>

Ques 16. Print this design using HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-16</title>
    <style>
      #block{
        margin: auto;
        display: block;
        border: 2px solid black;
        width: 620px;
        height: 340px;
        padding: 0px;
        padding-left: 12px;
        background: rgb(253, 253, 33);
      }
      u{
        color: rgb(1, 163, 1);
      }
      #heading1 {
        font-size: 50px;
        margin: 0px;
        margin-top: 10px;
        font-family: arial;
        color: rgb(1, 163, 1);
        margin-bottom: 30px;
      }
      #heading2{
        color: rgb(97, 96, 96);
        font-size: 38px;
        margin: 0px;
        margin-bottom: 30px;
      }
      #heading3 {
        color: purple;
        font-size: 29px;
        margin: 0px;
        margin-bottom: 30px;
      }
      #para {
        font-size: 22px;
        margin: 0px;
        font-family: Comic Sans MS;
        font-weight: bold;
      }
    </style>
  </head>
    <div id="block">
    <u>  <h1 id="heading1">My First Web Page</h1></u>
      <h2 id="heading2">I am heading 2</h1>
      <h3 id="heading3">I am heading 3</h1>
        <p id="para">Hey , there I am a paragraph</p>
    </div>
  </body>
</html>

Ques 17. Print these headings using text-shadow in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-17</title>
    <style>
      #block {
        margin: auto;
        display: block;
        border: 2px solid black;
        width: 535px;
        height: 335px;
        padding: 0px;
      }
      #heading1 {
        font-size: 50px;
        margin: 0px;
        margin-left: 12px;
        margin-bottom: 30px;
      }
      #heading2 {
        color: orange;
        font-size: 38px;
        margin: 0px;
        margin-left: 12px;
        margin-bottom: 30px;
        text-shadow: 6px 6px 15px orange;
      }
      #heading3 {
        color: rgb(255, 0, 225);
        text-shadow: 2px 4px 3px rgb(138, 0, 122);
        font-size: 38px;
        margin: 0px;
        margin-left: 12px;
      }
    </style>
  </head>
  <body>
    <div id="block">
      <h1 id="heading1">Text Shadow Example</h1>
      <h1 id="heading2">Elex Tutorial - Best Learning Experience</h1>
      <h1 id="heading3">Elex Tutorial - Best Learning Experience</h1>
    </div>
  </body>
</html>

Ques 18. Print these headings using writing-mode in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-18</title>
    <style>
      #block {
        margin: auto;
        display: block;
        border: 2px solid black;
        width: 980px;
        height: 380px;
        padding: 0px;
      }
      #div1 {
        display: inline-block;
        writing-mode: horizental-tb;
        margin-left: 30px;
        position: relative;
        bottom: 290px;
      }
      #div2 {
        display: inline-block;
        writing-mode: vertical-lr;
        margin-top: 10px;
        margin-left: 100px;
      }
      #div3 {
        display: inline-block;
        writing-mode: vertical-lr;
        margin-top: 10px;
        margin-left: 100px;
      }
      #div4 {
        display: inline-block;
        writing-mode: vertical-lr;
        margin-top: 10px;
        margin-left: 100px;
        transform: rotate(180deg);
      }
      #div5 {
        display: inline-block;
        writing-mode: vertical-lr;
        margin-top: 10px;
        margin-left: 100px;
        transform: rotate(180deg);
      }
    </style>
  </head>
  <body>
    <div id="block">
      <div id="div1"><h2 id="heading1">HORIZENTAL</h2></div>
      <div id="div2"><h2 id="heading2">VERTICAL RIGHT TO LEFT</h2></div>
      <div id="div3"><h2 id="heading3">VERTICAL LEFT TO RIGHT</h2></div>
      <div id="div4"><h2 id="heading4">SIDEWAYS RIGHT TO LEFT</h2></div>
      <div id="div5"><h2 id="heading5">SIDEWAYS LEFT TO RIGHT</h2></div>
    </div>
  </body>
</html>

Ques 19. Print this paragraph using text-shadow in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-19</title>
    <style>
      fieldset {
        width: 510px;
        height: 290px;
        margin: auto;
        display: block;
        border: 2px solid black;
        padding-left: 5px;
      }
      h2 {
        margin: 0px;
        margin-top: 15px;
      }
      #para {
        font-size: 17px;
        text-align: justify;
        text-shadow: 1px 1px 2px black;
        margin-top: 22px;
      }
    </style>
  </head>
  <body>
    <fieldset>
      <h2>Text-justify property example</h2>
      <p id="para">
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. Lorem Ipsum has been the industry's standard dummy text ever
        since the 1500s when an unknown printer took a galley of type and
        scrambled it to make a type specimen book. It has survived not only five
        centuries, but also the leap into electronic typesetting, remaining
        essentially unchanged. It was popularised in the 1960s with the release
        of Letraset sheets containing Lorem Ipsum passages, and more recently
        with desktop publishing software like Aldus PageMaker including versions
        of Lorem Ipsum.
      </p>
    </fieldset>
  </body>
</html>

Ques 20. Print these headings using text-shadow in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-20</title>
    <style>
      fieldset {
        width: 535px;
        height: 220px;
        margin: auto;
        display: block;
        border: 2px solid black;
        padding: 0px;
        color: green;
        text-align: center;
        line-height: 75px;
      }
      #heading1 {
        font-size: 50px;
        margin: 0px;
        text-shadow: 1px 1px 4px green;
      }
      #para {
        font-size: 25px;
        margin: 0px;
        text-shadow: 1px 1px 3px green;
      }
      #heading2 {
        font-size: 40px;
        margin: 0px;
        text-shadow: 1px 1px 4px green;
      }
    </style>
  </head>
  <body>
    <fieldset>
      <h1 id="heading1">This is a heading</h1>
      <p id="para">This is paragraph</p>
      <h2 id="heading2">This is a second level heading.</h2>
    </fieldset>
  </body>
</html>

Ques 21. Print this design using box-shadow in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-21</title>
    <style>
      fieldset {
        width: 600px;
        height: 550px;
        margin: auto;
        display: block;
        border: 2px solid black;
        padding-top: 0px;
      }
      #para {
        height: 42px;
        width: 480px;
        border: 2px solid grey;
        margin-left: 50px;
        margin-bottom: 50px;
        background: orange;
        padding-top: 20px;
        padding-left: 10px;
      }
      .para1 {
        box-shadow: 10px 10px 0px black;
      }
      .para2 {
        box-shadow: 10px 10px 0px black inset;
      }
      .para3 {
        box-shadow: 8px -17px 0px blue inset;
        color: blue;
      }
      .para4 {
        box-shadow: -17px 0px 0px black inset;
      }
    </style>
  </head>
  <body>
    <fieldset>
      <p class="para1" id="para">
        Une ombre projetee vers la droite et vers le bas
      </p>
      <p class="para2" id="para">
        Ombre interne projetee vers la droite et vers le bas
      </p>
      <p class="para3" id="para">
        Ombre interne projetee vers la droite et vers le haut
      </p>
      <p class="para4" id="para">Ombre interne projetee vers la gauche</p>
      <p class="para5" id="para">
        Ombre interne centree sur la boite et non projetee
      </p>
    </fieldset>
  </body>
</html>

Ques 22. Print these headings using text-shadow in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-22</title>
    <style>
      fieldset {
        width: 360px;
        height: 470px;
        margin: auto;
        display: block;
        border: 2px solid black;
        padding: 0px;
        padding-left: 50px;
        line-height: 45px;
      }
      .heading1 {
        font-size: 45px;
        text-shadow: 3px 3px 1px brown;
      }
      .heading2 {
        font-size: 34px;
        text-shadow: 3px 3px 1px rgb(219, 45, 45);
      }
      .heading3 {
        font-size: 26px;
        text-shadow: 2px 2px 6px black;
      }
      .heading4 {
        font-size: 21px;
        text-shadow: 2px 2px 3px green;
        color: white;
      }
      .heading5 {
        font-size: 17px;
        text-shadow: 2px 0px 3px orangered;
      }
      .heading6 {
        font-size: 14px;
        text-shadow: -1px -1px 4px red;
      }
      .heading7 {
        font-size: 19px;
        text-shadow: 2px 2px 6px black, -2px -2px 6px black;
        color: white;
      }
    </style>
  </head>
  <body>
    <fieldset>
      <h1 class="heading1">shubhampal.co.in</h1>
      <h1 class="heading2">shubhampal.co.in</h1>
      <h1 class="heading3">shubhampal.co.in</h1>
      <h1 class="heading4">shubhampal.co.in</h1>
      <h1 class="heading5">shubhampal.co.in</h1>
      <h1 class="heading6">shubhampal.co.in</h1>
      <h1 class="heading7">shubhampal.co.in</h1>
    </fieldset>
  </body>
</html>

Ques 23. Print this paragraph using text-shadow in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-23</title>
    <style>
      fieldset {
        width: 500px;
        height: 70px;
        margin: auto;
        display: block;
        border: 2px solid black;
        padding: 0px;
        box-shadow: -6px 0px 0px black inset;
      }
      .para {
        font-size: 45px;
        text-shadow: 8px 6px 4px grey;
        margin: 0px;
        margin-left: 15px;
      }
    </style>
  </head>
  <body>
    <fieldset>
      <p class="para">Best Hindi Tutorials</p>
    </fieldset>
  </body>
</html>

Ques 24. Print this paragraph using writing-mode in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-24</title>
    <style>
      #block {
        border: 2px solid black;
        width: 395px;
        height: 300px;
        margin: auto;
        display: block;
        padding-top: 12px;
      }
      fieldset {
        width: 260px;
        height: 250px;
        margin: auto;
        display: block;
        border: none;
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 0px;
        background: green;
        color: white;
      }
      #para {
        writing-mode: vertical-rl;
        line-height: 28px;
        margin-left: 1px;
        font-size: 22px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="block">
      <fieldset>
        <p class="para1" id="para">
          questions. <br />course to cover algorithms Noida. This is a quick
          classroom program in Geeks Classes is a
        </p>
      </fieldset>
    </div>
  </body>
</html>

Ques 26. Use of External CSS in HTML

CSS File

h1 {
    background: aqua;
    border: 20px groove lightgreen;
    color: red;
    font-size: 50px;
}

p {
    border: 20px groove lightgreen;
    color: lightgreen;
    font-size: 50px;
    text-align: center;
    border-radius: 20px;
    text-shadow: 5px 5px 2px black;
    box-shadow: 0px 0px 5px 2px black inset;
}

HTML File

<html>
  <head>
    <title>HTML-CSS-26</title>
    <link href="HTML-CSS-26.css" rel="stylesheet" />
  </head>
  <body>
    <p>HTML AND CSS</p>
    <p>HTML AND CSS</p>
    <h1>HTML AND CSS</h1>
    <h1>HTML AND CSS</h1>
  </body>
</html>

Ques 27. Use of Inline CSS in HTML.

<html>
  <head>
    <title>HTML-CSS-27</title>
  </head>
  <body>
    <image src="https://miro.medium.com/v2/resize:fit:450/format:webp/1*bg7JqIN-3BpLmIPtdObMkA.png" style="height: 500px; width: 400px; border: 20px groove maroon; border-radius: 50px; box-shadow: 0px 0px 30px 10px black;">
  </body>
</html>

Ques 28. Check Priority order of Inline CSS , Internal CSS and External CSS.

CSS File

h1{
    background: red !important;
    color: black;
    border: 20px groove lightgreen !important;
}

HTML File

<html>
  <head>
    <title>HTML-CSS-28</title>
    <link href="HTML-CSS-28.css" rel="stylesheet" />
    <style>
      h1 {
        background: yellow;
        color: red;
        text-align: right;
        border: 10px groove orange;
      }
    </style>
  </head>
  <body>
    <h1 style="background: blue; color: yellow; text-align: center; border: 10px groove yellow;">HTML AND CSS</h1>
  </body>
</html>

Ques 29. Use of <span> tag in HTML.

CSS File

#div1 {
    text-align: center;
}

#id1 {
    font-size: 150px;
    text-align: center;
    font-family: arial;
    font-weight: bold;
}

#id2 {
    height: 50px;
    width: 700px;
    border: 2px solid black;
    border-radius: 50px;
    margin: auto;
    display: block;
    margin-top: 50px;
}

.c1 {
    color: blue;
}

.c2 {
    color: red;
}

.c3 {
    color: yellow;
}

.c4 {
    color: blue;
}

.c5 {
    color: green;
}

.c6 {
    color: red;
}

HTML File

<html>
  <head>
    <title>HTML-CSS-29</title>
    <link href="HTML-CSS-29.css" rel="stylesheet" />
  </head>
  <body>
    <div id="div1">
      <span class="c1" id="id1">G</span>
      <span class="c2" id="id1">o</span>
      <span class="c3" id="id1">o</span>
      <span class="c4" id="id1">g</span>
      <span class="c5" id="id1">l</span>
      <span class="c6" id="id1">e</span>
    </div>
    <div id="id2"></div>
  </body>
</html>

Ques 30. Use of ‘Hover’ property in HTML-CSS.

CSS File

h1 {
    border: 10px groove navy;
    color: navy;
    font-size: 80px;
    cursor: pointer;
    text-align: center;
}

h1:hover {
    border: 10px groove red;
    color: red;
    font-size: 100px;
    cursor: pointer;
    text-align: center;
}

HTML File

<html>
  <head>
    <title>HTML-CSS-30</title>
    <link href="HTML-CSS-30.css" rel="stylesheet" />
  </head>
  <body>
    <h1>HTML & CSS</h1>
  </body>
</html>

Ques 31. Use of ‘Transition’ property in HTML-CSS

CSS File

h1 {
    color: red;
    cursor: pointer;
    border: 10px groove red;
    text-align: center;
    transition: 2s;
}

h1:hover {
    color: white;
    background: red;
    text-align: center;
    cursor: pointer;
    border: 10px groove blue;
    border-radius: 50px;
    transition: color 3s, border 4s, background 5s, border-radius 6s;
    /* or */
    transition: 5s;
}

HTML File

<html>
  <head>
    <title>HTML-CSS-31</title>
    <link href="HTML-CSS-31.css" rel="stylesheet" />
  </head>
  <body>
    <h1>Transition Property in CSS</h1>
      </body>
</html>

Ques 32. Use of ‘Border’ property in HTML-CSS.

CSS File

#sp-main {
    margin: auto;
    display: block;
    width: 700px;
    height: 300px;
}

.sp {
    font-family: arial;
    font-size: 45px;
    margin: 20px;
    display: inline-block;
}

#sp1 {
    border: 15px solid rgb(15, 191, 74);
}

#sp2 {
    border: 15px dashed rgb(15, 191, 74);
}

#sp3 {
    border: 15px dotted rgb(15, 191, 74);
}

#sp4 {
    border: 15px double rgb(15, 191, 74);
}

#sp5 {
    border: 15px groove rgb(15, 191, 74);
}

#sp6 {
    border: 15px none rgb(15, 191, 74);
}

#sp7 {
    border: 15px ridge rgb(15, 191, 74);
}

#sp8 {
    border: 15px inset rgb(15, 191, 74);
}

#sp9 {
    border: 15px outset rgb(15, 191, 74);
}

HTML File

<html>
  <head>
    <title>HTML-CSS-32</title>
    <link href="HTML-CSS-32.css" rel="stylesheet" />
  </head>
  <body>
    <span id="sp-main">
      <span class="sp" id="sp1">HTML!</span>
      <span class="sp" id="sp2">HTML!</span>
      <span class="sp" id="sp3">HTML!</span>
      <br />
      <span class="sp" id="sp4">HTML!</span>
      <span class="sp" id="sp5">HTML!</span>
      <span class="sp" id="sp6">HTML!</span>
      <br />
      <span class="sp" id="sp7">HTML!</span>
      <span class="sp" id="sp8">HTML!</span>
      <span class="sp" id="sp9">HTML!</span>
    </span>
  </body>
</html>

Ques 33. Use of ‘Border’ & ‘Border-Radius’ property in HTML-CSS.

CSS File

#sp1{
   border: 3px solid blue;
   margin: auto;
   display: block;
   width: 510px;
   height: 275px;
   padding: 0px;
   padding-top: 15px;
}
#sp2{
    border: 3px solid red;
    border-radius: 15px;
    margin: auto;
    display: block;
    width: 390px;
    height: 214px;
    padding-top: 40px;
   padding-left: 40px;
   padding-right: 40px;
}
#head1{
    font-size: 25px;
}
#head2{
    font-size: 22px;
}

HTML File

<html>
  <head>
    <title>HTML-CSS-33</title>
    <link href="HTML-CSS-33.css" rel="stylesheet" />
  </head>
  <body>
    <div id="sp1">
      <div id="sp2">
        <h2 id="head1">Welcome to the shubhampal.co.in</h2>
        <h3 id="head2">
          In this div element, we are using both outline and border properties.
          The outline is represented by blue color and border is by red color.
        </h3>
      </div>
    </div>
  </body>
</html>

Ques 34. Use of <span> tag for design paragraph in HTML-CSS.

CSS File

#div1{
    font-size: 25px;
    border: 2px solid black;
    margin: auto;
    display: block;
    width: 480px;
    height: 270px;
    padding-left:6px;
}
#sp1{
    color: white;
    background: black;
}
#sp2{
    background: rgb(255, 174, 187);
}
#sp3{
    background: rgb(0, 251, 0);
}

HTML File

<html>
  <head>
    <title>HTML-CSS-34</title>
    <link href="HTML-CSS-34.css" rel="stylesheet" />
  </head>
  <body>
    <div id="div1">
      <p>HTML5 is the <span id="sp1">best version</span> of HTML so far</p>
      <p>CSS is the <span id="sp2">styling language</span> of the web</p>
      <p>
        Javascript is the
        <span id="sp3">most popular programming language</span>
      </p>
    </div>
  </body>
</html>

Ques 35. Use of ‘Border’ property on image in HTML-CSS.

CSS File

#div1 {
    border: 2px solid black;
    margin: auto;
    display: block;
    width: 465px;
    height: 330px;
    padding-top: 30px;
}

img {
    margin-top: 25px;
    margin-left: 50px;
    height: 220px;
    width: 320px;
    border: 10px dotted red;
    border-radius: 15px;
    box-shadow: 20px 20px 0px yellow, -20px -20px 0px yellow;
}

HTML File

<html>
  <head>
    <title>HTML-CSS-35</title>
    <link href="HTML-CSS-35.css" rel="stylesheet" />
  </head>
  <body>
    <div id="div1">
      <img src="https://miro.medium.com/v2/resize:fit:828/format:webp/1*RayDDPfzhYrYHf3Sdwnbdw.jpeg" alt="Apple Mac">
      </div>
  </body>
</html>

Ques 36. Print these lines for using <span> tag in HTML-CSS.

CSS File

#id1 {
    font-size: 100px;
    margin: auto;
    display: block;
    width: 800px;
    text-align: center;
}

#id2 {
    font-size: 100px;
    margin: auto;
    display: block;
    width: 600px;
    text-align: center;
    margin-top: 15px;
    font-weight: bold;
}

#sp1 {
    color: aqua;
}

#sp2 {
    color: purple;
}

#sp3 {

    color: yellow;
    background: black;
}

#sp4 {
    margin-top: 10px;
    background: yellow;
}

HTML File

<html>
  <head>
    <title>HTML-CSS-36</title>
    <link href="HTML-CSS-36.css" rel="stylesheet" />
  </head>
  <body>
    <div id="id1">
    <span id="sp1">shubhampal</span><span id="sp2">.co.in</span>
  </div>
  <div id="id2">
    <span id="sp3">Shubham</span><span id="sp4">Pal</span>
  </div>
  </body>
</html>

Ques 37. Use of <div> tag or partition of <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-37</title>
    <style>
      #outer {
        height: 200px;
        width: 1004px;
        background: red;
        border: 1px solid black;
      }
      #a {
        height: 200px;
        width: 500px;
        background: green;
        float: left;
        border: 1px solid black;
      }
      #b {
        height: 200px;
        width: 500px;
        background: orange;
        float: left;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="a"></div>
      <div id="b"></div>
    </div>
  </body>
</html>

Ques 38. Design this image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-38</title>
    <style>
      #outer {
        height: 400px;
        width: 500px;
        background: red;
      }
      #top {
        height: 200px;
        width: 500px;
        background: black;
      }
      #bottom {
        height: 200px;
        width: 500px;
        background: yellow;
      }
      #bottom1 {
        height: 200px;
        width: 250px;
        background: maroon;
        float: left;
      }
      #bottom2 {
        height: 200px;
        width: 250px;
        background: navy;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="top"></div>
      <div id="bottom">
        <div id="bottom1"></div>
        <div id="bottom2"></div>
      </div>
    </div>
  </body>
</html>

Ques 39. Design this image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-39</title>
    <style>
      .sp1 {
        font-size: 30px;
        font-weight: bold;
        font-family: arial;
        line-height: 45px;
        color: white;
      }
      .sp2 {
        font-size: 30px;
        font-weight: bold;
        font-family: arial;
        position: relative;
        top: 160px;
        color: white;
      }
      .sp3 {
        font-size: 30px;
        font-weight: bold;
        font-family: arial;
        position: relative;
        top: 200px;
      }
      .sp4 {
        font-size: 30px;
        font-weight: bold;
        font-family: arial;
        position: relative;
        top: 5px;
      }
      #outer {
        height: 1090px;
        width: 1000px;
        background: black;
        text-align: center;
      }
      #box1 {
        height: 45px;
        width: 1000px;
        background: red;
      }
      #box2 {
        height: 400px;
        width: 1000px;
        background: green;
      }
      #box3 {
        height: 600px;
        width: 1000px;
        background: blue;
      }
      #box4 {
        height: 45px;
        width: 1000px;
        background: yellow;
      }
      #block1 {
        height: 45px;
        width: 250px;
        float: left;
        background: navy;
      }
      #block2 {
        height: 45px;
        width: 750px;
        float: left;
        background: brown;
      }
      #block3 {
        height: 600px;
        width: 800px;
        float: left;
        background: skyblue;
      }
      #block4:hover {
        height: 600px;
        width: 200px;
        float: left;
        background: purple;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="box1">
        <div id="block1"><span class="sp1">LOGO</span></div>
        <div id="block2"><span class="sp1">MENU</span></div>
      </div>
      <div id="box2"><span class="sp2">SLIDER</span></div>
      <div id="box3">
        <div id="block3"><span class="sp3">LEFT</span></div>
        <div id="block4"><span class="sp3">RIGHT</span></div>
      </div>
      <div id="box4"><span class="sp4">FOOTER</span></div>
    </div>
  </body>
</html>

Ques 40. Design this image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-40</title>
    <style>
      #outer {
        height: 600px;
        width: 600;
        background: navy;
        margin: auto;
        display: block;
      }
      #top {
        height: 300px;
        width: 600px;
        background: brown;
      }
      #bottom {
        height: 300px;
        width: 600px;
        background: green;
      }
      #box1 {
        height: 300px;
        width: 300px;
        background: red;
        float: left;
      }
      #box2 {
        height: 300px;
        width: 300px;
        background: blue;
        float: left;
      }
      #box3 {
        height: 300px;
        width: 300px;
        background: yellow;
        float: left;
      }
      #box4 {
        height: 300px;
        width: 300px;
        background: aqua;
        float: left;
      }
      #block1 {
        height: 300px;
        width: 150px;
        background: grey;
        float: left;
      }
      #block2 {
        height: 300px;
        width: 150px;
        background: lightgreen;
        float: left;
      }
      #block3 {
        height: 150px;
        width: 300px;
        background: skyblue;
      }
      #block4 {
        height: 150px;
        width: 300px;
        background: pink;
      }
      #block5 {
        height: 150px;
        width: 300px;
        background: khaki;
      }
      #block6 {
        height: 150px;
        width: 300px;
        background: orange;
      }
      #block7 {
        height: 300px;
        width: 150px;
        background: purple;
        float: left;
      }
      #block8 {
        height: 300px;
        width: 150px;
        background: rgb(101, 255, 137);
        float: left;
      }
      #sub-block1 {
        height: 100px;
        width: 150px;
        background: rgb(90, 52, 52);
      }
      #sub-block2 {
        height: 100px;
        width: 150px;
        background: rgb(0, 128, 255);
      }
      #sub-block3 {
        height: 100px;
        width: 150px;
        background: rgb(211, 197, 87);
      }
      #sub-block4 {
        height: 150px;
        width: 100px;
        background: grey;
        float: left;
      }
      #sub-block5 {
        height: 150px;
        width: 100px;
        background: orange;
        float: left;
      }
      #sub-block6 {
        height: 150px;
        width: 100px;
        background: maroon;
        float: left;
      }
      #sub-block7 {
        height: 150px;
        width: 100px;
        background: skyblue;
        float: left;
      }
      #sub-block8 {
        height: 150px;
        width: 100px;
        background: green;
        float: left;
      }
      #sub-block9 {
        height: 150px;
        width: 100px;
        background: yellow;
        float: left;
      }
      #sub-block10 {
        height: 100px;
        width: 150px;
        background: red;
      }
      #sub-block11 {
        height: 100px;
        width: 150px;
        background: green;
      }
      #sub-block12 {
        height: 100px;
        width: 150px;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="top">
        <div id="box1">
          <div id="block1">
            <div id="sub-block1"></div>
            <div id="sub-block2"></div>
            <div id="sub-block3"></div>
          </div>
          <div id="block2"></div>
        </div>
        <div id="box2">
          <div id="block3">
            <div id="sub-block4"></div>
            <div id="sub-block5"></div>
            <div id="sub-block6"></div>
          </div>
          <div id="block4"></div>
        </div>
      </div>
      <div id="bottom">
        <div id="box3">
          <div id="block5"></div>
          <div id="block6">
            <div id="sub-block7"></div>
            <div id="sub-block8"></div>
            <div id="sub-block9"></div>
          </div>
        </div>
        <div id="box4">
          <div id="block7"></div>
          <div id="block8">
            <div id="sub-block10"></div>
            <div id="sub-block11"></div>
            <div id="sub-block12"></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Ques 41. Design this image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-41</title>
    <style>
      #outer {
        height: 500px;
        width: 600px;
        background: black;
        margin: auto;
        display: block;
      }
      #col1 {
        height: 500px;
        width: 75px;
        background: blue;
        float: left;
      }
      #col2 {
        height: 500px;
        width: 450px;
        background: yellow;
        float: left;
      }
      #col3 {
        height: 500px;
        width: 75px;
        background: red;
        float: left;
      }
      #row1 {
        height: 100px;
        width: 450px;
        background: brown;
      }
      #row2 {
        height: 300px;
        width: 450px;
        background: navy;
      }
      #row3 {
        height: 100px;
        width: 450px;
        background: green;
      }
      #sub-col1 {
        height: 300px;
        width: 90px;
        background: skyblue;
        float: left;
      }
      #sub-col2 {
        height: 300px;
        width: 270px;
        background: lightgreen;
        float: left;
      }
      #sub-col3 {
        height: 300px;
        width: 90px;
        background: pink;
        float: left;
      }
      #sub-row1 {
        height: 100px;
        width: 270px;
        background: grey;
      }
      #sub-row2 {
        height: 100px;
        width: 270px;
        background: rgb(0, 255, 13);
      }
      #sub-row3 {
        height: 100px;
        width: 270px;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="col1"></div>
      <div id="col2">
        <div id="row1"></div>
        <div id="row2">
          <div id="sub-col1"></div>
          <div id="sub-col2">
            <div id="sub-row1"></div>
            <div id="sub-row2"></div>
            <div id="sub-row3"></div>
          </div>
          <div id="sub-col3"></div>
        </div>
        <div id="row3"></div>
      </div>
      <div id="col3"></div>
    </div>
  </body>
</html>

Ques 42. Design this image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-42</title>
    <style>
      #outer {
        height: 450px;
        width: 900px;
        background: black;
        margin: auto;
        display: block;
      }
      #col1 {
        height: 450px;
        width: 150px;
        background: brown;
        float: left;
      }
      #col2 {
        height: 450px;
        width: 600px;
        background: navy;
        float: left;
      }
      #col3 {
        height: 450px;
        width: 150px;
        background: red;
        float: left;
      }
      #row1 {
        height: 260px;
        width: 150px;
        background: pink;
      }
      #row2 {
        height: 190px;
        width: 150px;
        background: skyblue;
      }
      #row3 {
        height: 225px;
        width: 600px;
        background: grey;
      }
      #row4 {
        height: 225px;
        width: 600px;
        background: orange;
      }
      #row5 {
        height: 190px;
        width: 150px;
        background: khaki;
      }
      #row6 {
        height: 260px;
        width: 150px;
        background: lightgreen;
      }
      #sub-col1 {
        height: 260px;
        width: 75px;
        background: red;
        float: left;
      }
      #sub-col2 {
        height: 260px;
        width: 75px;
        background: green;
        float: left;
      }
      #sub-col3 {
        height: 225px;
        width: 470px;
        background: blue;
        float: left;
      }
      #sub-col4 {
        height: 225px;
        width: 130px;
        background: yellow;
        float: left;
      }
      #sub-col5 {
        height: 225px;
        width: 130px;
        background: aqua;
        float: left;
      }
      #sub-col6 {
        height: 225px;
        width: 470px;
        background: maroon;
        float: left;
      }
      #sub-col7 {
        height: 260px;
        width: 75px;
        background: purple;
        float: left;
      }
      #sub-col8 {
        height: 260px;
        width: 75px;
        background: greenyellow;
        float: left;
      }
      #sub-row1 {
        height: 150px;
        width: 470px;
        background: orange;
      }
      #sub-row2 {
        height: 75px;
        width: 470px;
        background: rgb(0, 255, 0);
      }
      #sub-row3 {
        height: 75px;
        width: 470px;
        background: rgb(255, 0, 174);
      }
      #sub-row4 {
        height: 150px;
        width: 470px;
        background: rgb(87, 87, 87);
      }
      #column1 {
        height: 150px;
        width: 370px;
        background: blue;
        float: left;
      }
      #column2 {
        height: 150px;
        width: 100px;
        background: pink;
        float: left;
      }
      #column3 {
        height: 150px;
        width: 100px;
        background: blue;
        float: left;
      }
      #column4 {
        height: 150px;
        width: 370px;
        background: grey;
        float: left;
      }
      #rows1 {
        height: 75px;
        width: 370px;
        background: red;
      }
      #rows2 {
        height: 75px;
        width: 370px;
        background: orange;
      }
      #rows3 {
        height: 75px;
        width: 370px;
        background: green;
      }
      #rows4 {
        height: 75px;
        width: 370px;
        background: grey;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="col1">
        <div id="row1">
          <div id="sub-col1"></div>
          <div id="sub-col2"></div>
        </div>
        <div id="row2"></div>
      </div>
      <div id="col2">
        <div id="row3">
          <div id="sub-col3">
            <div id="sub-row1">
              <div id="column1">
                <div id="rows1"></div>
                <div id="rows2"></div>
              </div>
              <div id="column2"></div>
            </div>
            <div id="sub-row2"></div>
          </div>
          <div id="sub-col4"></div>
        </div>
        <div id="row4">
          <div id="sub-col5"></div>
          <div id="sub-col6">
            <div id="sub-row3"></div>
            <div id="sub-row4">
              <div id="column3"></div>
              <div id="column4">
                <div id="rows3"></div>
                <div id="rows4"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="col3">
        <div id="row5"></div>
        <div id="row6">
          <div id="sub-col7"></div>
          <div id="sub-col8"></div>
        </div>
      </div>
    </div>
  </body>
</html>

Ques 43. Design this image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-43</title>
    <style>
      #outer {
        height: 600px;
        width: 600px;
        background: black;
        margin: auto;
        display: block;
        text-align: center;
        font-family: arial;
        font-weight: bold;
        font-size: 20px;
      }
      #row1 {
        height: 30px;
        width: 600px;
        background: red;
        line-height: 30px;
      }
      #row2 {
        height: 60px;
        width: 600px;
        background: blue;
        line-height: 60px;
      }
      #row3 {
        height: 30px;
        width: 600px;
        background: yellow;
        line-height: 30px;
      }
      #row4 {
        height: 300px;
        width: 600px;
        background: green;
        line-height: 300px;
      }
      #row5 {
        height: 150px;
        width: 600px;
        background: orange;
      }
      #row6 {
        height: 30px;
        width: 600px;
        background: purple;
      }
      #col1 {
        height: 60px;
        width: 100px;
        background: skyblue;
        float: left;
      }
      #col2 {
        height: 60px;
        width: 500px;
        background: grey;
        float: left;
      }
      #col3 {
        height: 300px;
        width: 450px;
        background: pink;
        float: left;
      }
      #col4 {
        height: 300px;
        width: 150px;
        background: greenyellow;
        float: left;
      }
      #col5 {
        height: 150px;
        width: 180px;
        background: blue;
        float: left;
      }
      #col6 {
        height: 150px;
        width: 240px;
        background: maroon;
        float: left;
      }
      #col7 {
        height: 150px;
        width: 180px;
        background: orange;
        float: left;
      }
      #col8 {
        height: 30px;
        width: 300px;
        background: green;
        float: left;
      }
      #col9 {
        height: 30px;
        width: 300px;
        background: rgb(255, 0, 242);
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="row1">top</div>
      <div id="row2">
        <div id="col1">logo</div>
        <div id="col2">sitetitle</div>
      </div>
      <div id="row3">menu</div>
      <div id="row4">
        <div id="col3">left</div>
        <div id="col4">right</div>
      </div>
      <div id="row5">
        <div id="col5"></div>
        <div id="col6"></div>
        <div id="col7"></div>
      </div>
      <div id="row6">
        <div id="col8"></div>
        <div id="col9"></div>
      </div>
    </div>
  </body>
</html>

Ques 44. Design this image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-44</title>
    <style>
      #outer {
        height: 600px;
        width: 800px;
        background: black;
        margin: auto;
        display: block;
      }
      #col1 {
        height: 600px;
        width: 150px;
        background: red;
        float: left;
      }
      #col2 {
        height: 600px;
        width: 650px;
        background: blue;
        float: left;
      }
      #row1 {
        height: 300px;
        width: 150px;
        background: orange;
      }
      #row2 {
        height: 300px;
        width: 150px;
        background: purple;
      }
      #row3 {
        height: 100px;
        width: 650px;
        background: green;
      }
      #row4 {
        height: 500px;
        width: 650px;
        background: yellow;
      }
      #sub-col1 {
        height: 300px;
        width: 75px;
        background: red;
        float: left;
      }
      #sub-col2 {
        height: 300px;
        width: 75px;
        background: pink;
        float: left;
      }
      #sub-col3 {
        height: 500px;
        width: 215px;
        background: purple;
        float: left;
      }
      #sub-col4 {
        height: 500px;
        width: 220px;
        background: blue;
        float: left;
      }
      #sub-col5 {
        height: 500px;
        width: 215px;
        background: brown;
        float: left;
      }
      #sub-row1 {
        height: 166px;
        width: 215px;
        background: grey;
      }
      #sub-row2 {
        height: 168px;
        width: 215px;
        background: lightgreen;
      }
      #sub-row3 {
        height: 166px;
        width: 215px;
        background: yellow;
      }
      #sub-row4 {
        height: 400px;
        width: 220px;
        background: rgb(255, 0, 238);
      }
      #sub-row5 {
        height: 100px;
        width: 220px;
        background: rgb(0, 255, 0);
      }
      #sub-row6 {
        height: 200px;
        width: 215px;
        background: blue;
      }
      #sub-row7 {
        height: 300px;
        width: 215px;
        background: black;
      }
      #column1 {
        height: 166px;
        width: 107px;
        background: yellow;
        float: left;
      }
      #column2 {
        height: 166px;
        width: 108px;
        background: rgb(0, 255, 0);
        float: left;
      }
      #column3 {
        height: 168px;
        width: 107px;
        background: purple;
        float: left;
      }
      #column4 {
        height: 168px;
        width: 108px;
        background: brown;
        float: left;
      }
      #column5 {
        height: 166px;
        width: 107px;
        background: navy;
        float: left;
      }
      #column6 {
        height: 166px;
        width: 108px;
        background: grey;
        float: left;
      }
      #column7 {
        height: 400px;
        width: 110px;
        background: skyblue;
        float: left;
      }
      #column8 {
        height: 400px;
        width: 110px;
        background: khaki;
        float: left;
      }
      #column9 {
        height: 300px;
        width: 90px;
        background: rgb(255, 0, 255);
        float: left;
      }
      #column10 {
        height: 300px;
        width: 125px;
        background: aqua;
        float: left;
      }
      #rows1 {
        height: 200px;
        width: 125px;
        background: rgb(64, 11, 11);
      }
      #rows2 {
        height: 100px;
        width: 125px;
        background: rgb(255, 247, 3);
      }
      #sub-column1 {
        height: 100px;
        width: 62px;
        background: yellow;
        float: left;
      }
      #sub-column2 {
        height: 100px;
        width: 63px;
        background: purple;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="col1">
        <div id="row1"></div>
        <div id="row2">
          <div id="sub-col1"></div>
          <div id="sub-col2"></div>
        </div>
      </div>
      <div id="col2">
        <div id="row3"></div>
        <div id="row4">
          <div id="sub-col3">
            <div id="sub-row1">
              <div id="column1"></div>
              <div id="column2"></div>
            </div>
            <div id="sub-row2">
              <div id="column3"></div>
              <div id="column4"></div>
            </div>
            <div id="sub-row3">
              <div id="column5"></div>
              <div id="column6"></div>
            </div>
          </div>
          <div id="sub-col4">
            <div id="sub-row4">
              <div id="column7"></div>
              <div id="column8"></div>
            </div>
            <div id="sub-row5"></div>
          </div>
          <div id="sub-col5">
            <div id="sub-row6"></div>
            <div id="sub-row7">
              <div id="column9"></div>
              <div id="column10">
                <div id="rows1"></div>
                <div id="rows2">
                  <div id="sub-column1"></div>
                  <div id="sub-column2"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Ques 45. Design this Indian flag using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-45</title>
    <style>
      #outer {
        height: 900px;
        width: 1020px;
        background: white;
        margin: auto;
        display: block;
      }
      #row1 {
        height: 100px;
        width: 1020px;
        background: orange;
      }
      #row2 {
        height: 100px;
        width: 1020px;
        background: skyblue;
      }
      #row3 {
        height: 100px;
        width: 1020px;
        background: rgb(0, 255, 0);
      }
      #row4 {
        height: 450px;
        width: 1020px;
        background: skyblue;
      }
      #row5 {
        height: 50px;
        width: 1020px;
        background: skyblue;
      }
      #row6 {
        height: 50px;
        width: 1020px;
        background: skyblue;
      }
      #row7 {
        height: 50px;
        width: 1020px;
        background: skyblue;
      }
      #col1 {
        height: 100px;
        width: 250px;
        background: white;
        float: left;
      }
      #col2 {
        height: 100px;
        width: 20px;
        background: brown;
        float: left;
      }
      #col3 {
        height: 100px;
        width: 500px;
        background: orange;
        float: left;
      }
      #col4 {
        height: 100px;
        width: 250px;
        background: white;
        float: left;
      }
      #col5 {
        height: 100px;
        width: 250px;
        background: white;
        float: left;
      }
      #col6 {
        height: 100px;
        width: 20px;
        background: brown;
        float: left;
      }
      #col7 {
        height: 100px;
        width: 500px;
        background: white;
        float: left;
      }
      #col8 {
        height: 100px;
        width: 250px;
        background: white;
        float: left;
      }
      #col9 {
        height: 100px;
        width: 250px;
        background: white;
        float: left;
      }
      #col10 {
        height: 100px;
        width: 20px;
        background: brown;
        float: left;
      }
      #col11 {
        height: 100px;
        width: 500px;
        background: rgb(2, 255, 2);
        float: left;
      }
      #col12 {
        height: 100px;
        width: 250px;
        background: white;
        float: left;
      }
      #col13 {
        height: 450px;
        width: 250px;
        background: white;
        float: left;
      }
      #col14 {
        height: 450px;
        width: 20px;
        background: brown;
        float: left;
      }
      #col15 {
        height: 450px;
        width: 750px;
        background: white;
        float: left;
      }
      #col16 {
        height: 50px;
        width: 180px;
        background: white;
        float: left;
      }
      #col17 {
        height: 50px;
        width: 160px;
        background: brown;
        float: left;
      }
      #col18 {
        height: 50px;
        width: 680px;
        background: white;
        float: left;
      }
      #col19 {
        height: 50px;
        width: 100px;
        background: white;
        float: left;
      }
      #col20 {
        height: 50px;
        width: 320px;
        background: brown;
        float: left;
      }
      #col21 {
        height: 50px;
        width: 600px;
        background: white;
        float: left;
      }
      #col22 {
        height: 50px;
        width: 520px;
        background: brown;
        float: left;
      }
      #col23 {
        height: 50px;
        width: 500px;
        background: white;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="row1">
        <div id="col1"></div>
        <div id="col2"></div>
        <div id="col3"></div>
        <div id="col4"></div>
      </div>
      <div id="row2">
        <div id="col5"></div>
        <div id="col6"></div>
        <div id="col7"></div>
        <div id="col8"></div>
      </div>
      <div id="row3">
        <div id="col9"></div>
        <div id="col10"></div>
        <div id="col11"></div>
        <div id="col12"></div>
      </div>
      <div id="row4">
        <div id="col13"></div>
        <div id="col14"></div>
        <div id="col15"></div>
      </div>
      <div id="row5">
        <div id="col16"></div>
        <div id="col17"></div>
        <div id="col18"></div>
      </div>
      <div id="row6">
        <div id="col19"></div>
        <div id="col20"></div>
        <div id="col21"></div>
      </div>
      <div id="row7">
        <div id="col22"></div>
        <div id="col23"></div>
      </div>
    </div>
  </body>
</html>

Ques 46. Design this image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-46</title>
    <style>
      #outer {
        height: 500px;
        width: 600px;
        background: black;
        margin: auto;
        display: block;
      }
      #col1 {
        height: 500px;
        width: 100px;
        background: red;
        float: left;
      }
      #col2 {
        height: 500px;
        width: 500px;
        background: blue;
        float: left;
      }
      #row1 {
        height: 100px;
        width: 500px;
        background: yellow;
      }
      #row2 {
        height: 400px;
        width: 500px;
        background: aqua;
      }
      #sub-col1 {
        height: 400px;
        width: 100px;
        background: grey;
        float: left;
      }
      #sub-col2 {
        height: 400px;
        width: 400px;
        background: khaki;
        float: left;
      }
      #sub-row1 {
        height: 100px;
        width: 400px;
        background: pink;
      }
      #sub-row2 {
        height: 300px;
        width: 400px;
        background: skyblue;
      }
      #colmun1 {
        height: 300px;
        width: 150px;
        background: orange;
        float: left;
      }
      #colmun2 {
        height: 300px;
        width: 250px;
        background: green;
        float: left;
      }
      #rows1 {
        height: 150px;
        width: 250px;
        background: blue;
      }
      #rows2 {
        height: 150px;
        width: 250px;
        background: brown;
      }
      #sub-column1 {
        height: 150px;
        width: 125px;
        background: aqua;
        float: left;
      }
      #sub-column2 {
        height: 150px;
        width: 125px;
        background: green;
        float: left;
      }
      #sub-rows1 {
        height: 75px;
        width: 125px;
        background: rgb(0, 255, 0);
      }
      #sub-rows2 {
        height: 75px;
        width: 125px;
        background: rgb(255, 0, 212);
      }
      #c1 {
        height: 75px;
        width: 62px;
        background: navy;
        float: left;
      }
      #c2 {
        height: 75px;
        width: 63px;
        background: skyblue;
        float: left;
      }
      #r1 {
        height: 37px;
        width: 63px;
        background: brown;
      }
      #r2 {
        height: 38px;
        width: 63px;
        background: purple;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="col1"></div>
      <div id="col2">
        <div id="row1"></div>
        <div id="row2">
          <div id="sub-col1"></div>
          <div id="sub-col2">
            <div id="sub-row1"></div>
            <div id="sub-row2">
              <div id="colmun1"></div>
              <div id="colmun2">
                <div id="rows1"></div>
                <div id="rows2">
                  <div id="sub-column1"></div>
                  <div id="sub-column2">
                    <div id="sub-rows1"></div>
                    <div id="sub-rows2">
                      <div id="c1"></div>
                      <div id="c2">
                        <div id="r1"></div>
                        <div id="r2"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Ques 47. Design this kite type images using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-47</title>
    <style>
      #outer {
        height: 900px;
        width: 900px;
        background: white;
        margin: auto;
        display: block;
      }
      #block1 {
        height: 300px;
        width: 900px;
        background: white;
      }
      #block2 {
        height: 300px;
        width: 900px;
        background: white;
      }
      #block3 {
        height: 300px;
        width: 900px;
        background: white;
      }
      #box1 {
        height: 300px;
        width: 300px;
        background: white;
        float: left;
      }
      #box2 {
        height: 300px;
        width: 300px;
        background: white;
        float: left;
      }
      #box3 {
        height: 300px;
        width: 300px;
        background: white;
        float: left;
      }
      #box4 {
        height: 300px;
        width: 300px;
        background: white;
        float: left;
      }
      #box5 {
        height: 300px;
        width: 300px;
        background: white;
        float: left;
      }
      #box6 {
        height: 300px;
        width: 300px;
        background: white;
        float: left;
      }
      #box7 {
        height: 300px;
        width: 300px;
        background: white;
        float: left;
      }
      #box8 {
        height: 300px;
        width: 300px;
        background: white;
        float: left;
      }
      #box9 {
        height: 300px;
        width: 300px;
        background: white;
        float: left;
      }
      #row1 {
        height: 250px;
        width: 300px;
        background: red;
      }
      #row2 {
        height: 50px;
        width: 300px;
        background: blue;
      }
      #col1 {
        height: 250px;
        width: 250px;
        background: green;
        float: left;
      }
      #col2 {
        height: 250px;
        width: 50px;
        background: blue;
        float: left;
      }
      #sub-row1 {
        height: 200px;
        width: 250px;
        background: orange;
      }
      #sub-row2 {
        height: 50px;
        width: 250px;
        background: yellow;
      }
      #sub-col1 {
        height: 200px;
        width: 200px;
        background: purple;
        float: left;
      }
      #sub-col2 {
        height: 200px;
        width: 50px;
        background: yellow;
        float: left;
      }
      #rows1 {
        height: 150px;
        width: 200px;
        background: pink;
      }
      #rows2 {
        height: 50px;
        width: 200px;
        background: red;
      }
      #column1 {
        height: 150px;
        width: 150px;
        background: skyblue;
        float: left;
      }
      #column2 {
        height: 150px;
        width: 50px;
        background: red;
        float: left;
      }
      #sub-rows1 {
        height: 100px;
        width: 150px;
        background: pink;
      }
      #sub-rows2 {
        height: 50px;
        width: 150px;
        background: rgb(0, 255, 0);
      }
      #sub-column1 {
        height: 100px;
        width: 100px;
        background: navy;
        float: left;
      }
      #sub-column2 {
        height: 100px;
        width: 50px;
        background: rgb(0, 255, 0);
        float: left;
      }
      #main-row1 {
        height: 50px;
        width: 100px;
        background: green;
      }
      #main-row2 {
        height: 50px;
        width: 100px;
        background: orange;
      }
      #main-col1 {
        height: 50px;
        width: 50px;
        background: purple;
        float: left;
      }
      #main-col2 {
        height: 50px;
        width: 50px;
        background: aqua;
        float: left;
      }
      #main-col3 {
        height: 50px;
        width: 50px;
        background: orange;
        float: left;
      }
      #main-col4 {
        height: 50px;
        width: 50px;
        background: navy;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="block1">
        <div id="box1">
          <div id="row1">
            <div id="col1">
              <div id="sub-row1">
                <div id="sub-col1">
                  <div id="rows1">
                    <div id="column1">
                      <div id="sub-rows1">
                        <div id="sub-column1">
                          <div id="main-row1">
                            <div id="main-col1"></div>
                            <div id="main-col2"></div>
                          </div>
                          <div id="main-row2">
                            <div id="main-col3"></div>
                            <div id="main-col4"></div>
                          </div>
                        </div>
                        <div id="sub-column2"></div>
                      </div>
                      <div id="sub-rows2"></div>
                    </div>
                    <div id="column2"></div>
                  </div>
                  <div id="rows2"></div>
                </div>
                <div id="sub-col2"></div>
              </div>
              <div id="sub-row2"></div>
            </div>
            <div id="col2"></div>
          </div>
          <div id="row2"></div>
        </div>
        <div id="box2"></div>
        <div id="box3"></div>
      </div>
      <div id="block2">
        <div id="box4"></div>
        <div id="box5">
          <div id="row1">
            <div id="col1">
              <div id="sub-row1">
                <div id="sub-col1">
                  <div id="rows1">
                    <div id="column1">
                      <div id="sub-rows1">
                        <div id="sub-column1">
                          <div id="main-row1">
                            <div id="main-col1"></div>
                            <div id="main-col2"></div>
                          </div>
                          <div id="main-row2">
                            <div id="main-col3"></div>
                            <div id="main-col4"></div>
                          </div>
                        </div>
                        <div id="sub-column2"></div>
                      </div>
                      <div id="sub-rows2"></div>
                    </div>
                    <div id="column2"></div>
                  </div>
                  <div id="rows2"></div>
                </div>
                <div id="sub-col2"></div>
              </div>
              <div id="sub-row2"></div>
            </div>
            <div id="col2"></div>
          </div>
          <div id="row2"></div>
        </div>
        <div id="box6"></div>
      </div>
      <div id="block3">
        <div id="box7"></div>
        <div id="box8"></div>
        <div id="box9">
          <div id="row1">
            <div id="col1">
              <div id="sub-row1">
                <div id="sub-col1">
                  <div id="rows1">
                    <div id="column1">
                      <div id="sub-rows1">
                        <div id="sub-column1">
                          <div id="main-row1">
                            <div id="main-col1"></div>
                            <div id="main-col2"></div>
                          </div>
                          <div id="main-row2">
                            <div id="main-col3"></div>
                            <div id="main-col4"></div>
                          </div>
                        </div>
                        <div id="sub-column2"></div>
                      </div>
                      <div id="sub-rows2"></div>
                    </div>
                    <div id="column2"></div>
                  </div>
                  <div id="rows2"></div>
                </div>
                <div id="sub-col2"></div>
              </div>
              <div id="sub-row2"></div>
            </div>
            <div id="col2"></div>
          </div>
          <div id="row2"></div>
        </div>
      </div>
    </div>
  </body>
</html>

Ques 48. Design this image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-48</title>
    <style>
         #outer {
        height: 600px;
        width: 600px;
        background: black;
        margin: auto;
        display: block;
      }
      #rows1{
        height: 280px;
        width: 600px;
        background: red;
      }
      #rows2{
        height:300px;
        width: 600px;
        background: blue;
      }
      #column1{
        height:300px;
        width: 300px;
        background: yellow;
        float: left;
      }
      #column2{
        height:300px;
        width: 300px;
        background: orange;
        float: left;
      }
      #column3{
        height:300px;
        width: 300px;
        background: aqua;
        float: left;
      }
      #column4{
        height:300px;
        width: 300px;
        background: rgb(0, 255, 0);
        float: left;
      }
    </style>
     </head>
  <body>
    <div id="outer">
      <div id="rows1">
        <div id="column1"></div>
        <div id="column2"></div>
      </div>
      <div id="rows2">
        <div id="column3"></div>
        <div id="column4"></div>
      </div>
    </div>
  </body>
</html>

Ques 49. Design this image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-49</title>
    <style>
      #outer {
        height: 1000px;
        width: 1000px;
        background: black;
        margin: auto;
        display: block;
        font-family: arial;
        font-size: 40px;
        text-align: center;
      }
      #row1 {
        height: 150px;
        width: 1000px;
        background: red;
        line-height: 150px;
      }
      #row2 {
        height: 800px;
        width: 1000px;
        background: blue;
        line-height: 600px;
      }
      #row3 {
        height: 50px;
        width: 1000px;
        background: black;
        line-height: 50px;
        color: white;
      }
      #col1 {
        height: 150px;
        width: 150px;
        background: skyblue;
        float: left;
      }
      #col2 {
        height: 150px;
        width: 850px;
        background: grey;
        float: left;
      }
      #col3 {
        height: 800px;
        width: 750px;
        background: red;
        float: left;
      }
      #col4 {
        height: 800px;
        width: 250px;
        background: rgb(0, 181, 0);
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="row1">
        <div id="col1">logo</div>
        <div id="col2">sitetitle</div>
      </div>
      <div id="row2">
        <div id="col3">left</div>
        <div id="col4">right</div>
      </div>
      <div id="row3">footer</div>
    </div>
  </body>
</html>

Ques 50. Design this image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-50</title>
    <style>
      #outer {
        height: 700px;
        width: 700px;
        background: black;
        margin: auto;
        display: block;
      }
      #col1 {
        height: 700px;
        width: 200px;
        background: red;
        float: left;
      }
      #col2 {
        height: 700px;
        width: 300px;
        background: blue;
        float: left;
      }
      #col3 {
        height: 700px;
        width: 200px;
        background: yellow;
        float: left;
      }
      #row1 {
        height: 200px;
        width: 200px;
        background: orange;
      }
      #row2 {
        height: 300px;
        width: 200px;
        background: purple;
      }
      #row3 {
        height: 200px;
        width: 200px;
        background: green;
      }
      #row4 {
        height: 350px;
        width: 300px;
        background: rgb(255, 0, 242);
      }
      #row5 {
        height: 350px;
        width: 300px;
        background: brown;
      }
      #row6 {
        height: 200px;
        width: 200px;
        background: red;
      }
      #row7 {
        height: 300px;
        width: 200px;
        background: aqua;
      }
      #row8 {
        height: 200px;
        width: 200px;
        background: greenyellow;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="col1">
        <div id="row1"></div>
        <div id="row2"></div>
        <div id="row3"></div>
      </div>
      <div id="col2">
        <div id="row4"></div>
        <div id="row5"></div>
      </div>
      <div id="col3">
        <div id="row6"></div>
        <div id="row7"></div>
        <div id="row8"></div>
      </div>
    </div>
  </body>
</html>

Ques 51. Design this chess image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-51</title>
    <style>
      #outer {
        height: 800px;
        width: 800px;
        background: black;
        margin: auto;
        display: block;
        border: 2px solid black;
      }
      #col1,#col2 ,#col3,#col4,#col5,#col6,#col7,#col8{
        height: 800px;
        width: 100px;
        background: khaki;
        float: left;
      }
      #row1,#row3,#row5,#row7{
        height: 100px;
        width: 100px;
        background: white;
      }
      #row2,#row4,#row6,#row8 {
        height: 100px;
        width: 100px;
        background: black;
      }
      #row22,#row44,#row66,#row88{
        height: 100px;
        width: 100px;
        background: white;
      }
      #row11,#row33,#row55,#row77 {
        height: 100px;
        width: 100px;
        background: black;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="col1">
        <div id="row1"></div>
        <div id="row2"></div>
        <div id="row3"></div>
        <div id="row4"></div>
        <div id="row5"></div>
        <div id="row6"></div>
        <div id="row7"></div>
        <div id="row8"></div>
      </div>
      <div id="col2">
        <div id="row11"></div>
        <div id="row22"></div>
        <div id="row33"></div>
        <div id="row44"></div>
        <div id="row55"></div>
        <div id="row66"></div>
        <div id="row77"></div>
        <div id="row88"></div>
      </div>
      <div id="col3">
        <div id="row1"></div>
        <div id="row2"></div>
        <div id="row3"></div>
        <div id="row4"></div>
        <div id="row5"></div>
        <div id="row6"></div>
        <div id="row7"></div>
        <div id="row8"></div>
      </div>
      <div id="col4">
        <div id="row11"></div>
        <div id="row22"></div>
        <div id="row33"></div>
        <div id="row44"></div>
        <div id="row55"></div>
        <div id="row66"></div>
        <div id="row77"></div>
        <div id="row88"></div>
      </div>
      <div id="col5">
        <div id="row1"></div>
        <div id="row2"></div>
        <div id="row3"></div>
        <div id="row4"></div>
        <div id="row5"></div>
        <div id="row6"></div>
        <div id="row7"></div>
        <div id="row8"></div>
      </div>
      <div id="col6">
        <div id="row11"></div>
        <div id="row22"></div>
        <div id="row33"></div>
        <div id="row44"></div>
        <div id="row55"></div>
        <div id="row66"></div>
        <div id="row77"></div>
        <div id="row88"></div>
      </div>
      <div id="col7">
        <div id="row1"></div>
        <div id="row2"></div>
        <div id="row3"></div>
        <div id="row4"></div>
        <div id="row5"></div>
        <div id="row6"></div>
        <div id="row7"></div>
        <div id="row8"></div>
      </div>
      <div id="col8">
        <div id="row11"></div>
        <div id="row22"></div>
        <div id="row33"></div>
        <div id="row44"></div>
        <div id="row55"></div>
        <div id="row66"></div>
        <div id="row77"></div>
        <div id="row88"></div>
      </div>
    </div>
  </body>
</html>

Ques 52. Design this image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-52</title>
    <style>
      #outer {
        height: 500px;
        width: 600px;
        background: black;
        margin: auto;
        display: block;
      }
      #row1 {
        height: 200px;
        width: 600px;
        background: red;
      }
      #row2 {
        height: 300px;
        width: 600px;
        background: blue;
      }
      #col1 {
        height: 200px;
        width: 100px;
        background: green;
        float: left;
      }
      #col2 {
        height: 200px;
        width: 400px;
        background: yellow;
        float: left;
      }
      #col3 {
        height: 200px;
        width: 100px;
        background: navy;
        float: left;
      }
      #col4 {
        height: 300px;
        width: 200px;
        background: skyblue;
        float: left;
      }
      #col5 {
        height: 300px;
        width: 200px;
        background: grey;
        float: left;
      }
      #col6 {
        height: 300px;
        width: 200px;
        background: lightgreen;
        float: left;
      }
      #sub-row1 {
        height: 100px;
        width: 400px;
        background: red;
      }
      #sub-row2 {
        height: 100px;
        width: 400px;
        background: blue;
      }
      #sub-row3 {
        height: 100px;
        width: 200px;
        background: purple;
      }
      #sub-row4 {
        height: 100px;
        width: 200px;
        background: yellow;
      }
      #sub-row5 {
        height: 100px;
        width: 200px;
        background: aqua;
      }
      #sub-row6 {
        height: 150px;
        width: 200px;
        background: browm;
      }
      #sub-row7 {
        height: 150px;
        width: 200px;
        background: rgb(0, 255, 0);
      }
      #sub-row8 {
        height: 100px;
        width: 200px;
        background: black;
      }
      #sub-row9 {
        height: 100px;
        width: 200px;
        background: rgb(255, 0, 247);
      }
      #sub-row10 {
        height: 100px;
        width: 200px;
        background: blue;
      }
      #sub-col1 {
        height: 150px;
        width: 60px;
        background: orange;
        float: left;
      }
      #sub-col2 {
        height: 150px;
        width: 80px;
        background: khaki;
        float: left;
      }
      #sub-col3 {
        height: 150px;
        width: 60px;
        background: brown;
        float: left;
      }
      #rows1 {
        height: 75px;
        width: 80px;
        background: red;
      }
      #rows2 {
        height: 75px;
        width: 80px;
        background: green;
      }
      #column1 {
        height: 75px;
        width: 40px;
        background: navy;
        float: left;
      }
      #column2 {
        height: 75px;
        width: 40px;
        background: green;
        float: left;
      }
      #top-col1{
        height: 100px;
        width: 200px;
        background: orange;
        float: left;
      }
      #top-col2{
        height: 100px;
        width: 200px;
        background: purple;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="row1">
        <div id="col1"></div>
        <div id="col2">
          <div id="sub-row1">
            <div id="top-col1"></div>
            <div id="top-col2"></div>
          </div>
          <div id="sub-row2"></div>
        </div>
        <div id="col3"></div>
      </div>
      <div id="row2">
        <div id="col4">
          <div id="sub-row3"></div>
          <div id="sub-row4"></div>
          <div id="sub-row5"></div>
        </div>
        <div id="col5">
          <div id="sub-row6"></div>
          <div id="sub-row7">
            <div id="sub-col1"></div>
            <div id="sub-col2">
              <div id="rows1"></div>
              <div id="rows2">
                <div id="column1"></div>
                <div id="column2"></div>
              </div>
            </div>
            <div id="sub-col3"></div>
          </div>
        </div>
        <div id="col6">
          <div id="sub-row8"></div>
          <div id="sub-row9"></div>
          <div id="sub-row10"></div>
        </div>
      </div>
    </div>
  </body>
</html>

Ques 53. Design this image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-53</title>
    <style>
      #outer {
        height: 850px;
        width: 780px;
        background: black;
        margin: auto;
        display: block;
        text-align: center;
        font-size: 30px;
        font-family: arial;
      }
      #row1 {
        height: 50px;
        width: 780px;
        background: red;
        line-height: 50px;
      }
      #row2 {
        height: 100px;
        width: 780px;
        background: blue;
        line-height: 100px;
      }
      #row3 {
        height: 50px;
        width: 780px;
        background: grey;
        line-height: 50px;
      }
      #row4 {
        height: 400px;
        width: 780px;
        background: yellow;
        line-height: 400px;
      }
      #row5 {
        height: 200px;
        width: 780px;
        background: navy;
      }
      #row6 {
        height: 50px;
        width: 780px;
        background: orange;
      }
      #col1 {
        height: 100px;
        width: 180px;
        background: green;
        float: left;
      }
      #col2 {
        height: 100px;
        width: 600px;
        background: rgb(255, 0, 212);
        float: left;
      }
      #col3 {
        height: 400px;
        width: 580px;
        background: rgb(0, 255, 0);
        float: left;
      }
      #col4 {
        height: 400px;
        width: 200px;
        background: purple;
        float: left;
      }
      #col5 {
        height: 200px;
        width: 250px;
        background: blue;
        float: left;
      }
      #col6 {
        height: 200px;
        width: 280px;
        background: brown;
        float: left;
      }
      #col7 {
        height: 200px;
        width: 250px;
        background: orange;
        float: left;
      }
      #col8 {
        height: 50px;
        width: 390px;
        background: yellow;
        float: left;
      }
      #col9 {
        height: 50px;
        width: 390px;
        background: green;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="row1">top</div>
      <div id="row2">
        <div id="col1">logo</div>
        <div id="col2">sitetitle</div>
      </div>
      <div id="row3">menu</div>
      <div id="row4">
        <div id="col3">left</div>
        <div id="col4">right</div>
      </div>
      <div id="row5">
        <div id="col5"></div>
        <div id="col6"></div>
        <div id="col7"></div>
      </div>
      <div id="row6">
        <div id="col8"></div>
        <div id="col9"></div>
      </div>
    </div>
  </body>
</html>

Ques 54. Design this cross image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-54</title>
    <style>
    #outer {
        height: 600px;
        width: 800px;
        background: black;
        margin: auto;
        display: block;
        text-align: center;
        font-size: 30px;
        font-family: arial;
      } 
      #row1,#row3{
        height: 250px;
        width: 800px;
        background: white;
      }
      #row2{
        height: 100px;
        width: 800px;
        background: brown;
      }
      #col1,#col3,#col4,#col6{
        height: 250px;
        width: 350px;
        background: white;
        float: left;
      }
      #col2,#col5{
        height: 250px;
        width: 100px;
        background: brown;
        float: left;
      }
    </style>
     </head>
  <body>
    <div id="outer">
      <div id="row1">
        <div id="col1"></div>
        <div id="col2"></div>
        <div id="col3"></div>
      </div>
      <div id="row2"></div>
      <div id="row3">
        <div id="col4"></div>
        <div id="col5"></div>
        <div id="col6"></div>
      </div>
    </div>
  </body>
</html>

Ques 55. Design this image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-55</title>
    <style>
      #outer {
        height: 550px;
        width: 600px;
        background: black;
        margin: auto;
        display: block;
      }
      #col1 {
        height: 550px;
        width: 100px;
        background: red;
        float: left;
      }
      #col2 {
        height: 550px;
        width: 500px;
        background: blue;
        float: left;
      }
      #row1 {
        height: 400px;
        width: 500px;
        background: green;
      }
      #row2 {
        height: 150px;
        width: 500px;
        background: navy;
      }
      #sub-col1 {
        height: 400px;
        width: 100px;
        background: khaki;
        float: left;
      }
      #sub-col2 {
        height: 400px;
        width: 400px;
        background: pink;
        float: left;
      }
      #sub-row1 {
        height: 300px;
        width: 400px;
        background: purple;
      }
      #sub-row2 {
        height: 100px;
        width: 400px;
        background: brown;
      }
      #column1 {
        height: 300px;
        width: 100px;
        background: blue;
        float: left;
      }
      #column2 {
        height: 300px;
        width: 300px;
        background: black;
        float: left;
      }
      #rows1 {
        height: 200px;
        width: 300px;
        background: red;
      }
      #rows2 {
        height: 100px;
        width: 300px;
        background: green;
      }
      #sub-column1 {
        height: 200px;
        width: 100px;
        background: purple;
        float: left;
      }
      #sub-column2 {
        height: 200px;
        width: 200px;
        background: orange;
        float: left;
      }
      #sub-rows1 {
        height: 100px;
        width: 200px;
        background: aqua;
      }
      #sub-rows2 {
        height: 100px;
        width: 200px;
        background: greenyellow;
      }
      #c1 {
        height: 100px;
        width: 100px;
        background: maroon;
        float: left;
      }
      #c2 {
        height: 100px;
        width: 100px;
        background: rgb(0, 255, 0);
        float: left;
      }
      #c3 {
        height: 100px;
        width: 100px;
        background: rgb(255, 2, 213);
        float: left;
      }
      #c4 {
        height: 100px;
        width: 100px;
        background: orange;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="col1"></div>
      <div id="col2">
        <div id="row1">
          <div id="sub-col1"></div>
          <div id="sub-col2">
            <div id="sub-row1">
              <div id="column1"></div>
              <div id="column2">
                <div id="rows1">
                  <div id="sub-column1"></div>
                  <div id="sub-column2">
                    <div id="sub-rows1">
                      <div id="c1"></div>
                      <div id="c2"></div>
                    </div>
                    <div id="sub-rows2">
                      <div id="c3"></div>
                      <div id="c4"></div>
                    </div>
                  </div>
                </div>
                <div id="rows2"></div>
              </div>
            </div>
            <div id="sub-row2"></div>
          </div>
        </div>
        <div id="row2"></div>
      </div>
    </div>
  </body>
</html>

Ques 56. Design this image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-56</title>
    <style>
      #outer {
        height: 1090px;
        width: 1000px;
        background: black;
        margin: auto;
        display: block;
        text-align: center;
        font-size: 30px;
        font-family: arial;
        font-weight: bold;
      }
      #box1 {
        height: 45px;
        width: 1000px;
        background: red;
        line-height: 45px;
      }
      #box2 {
        height: 400px;
        width: 1000px;
        background: green;
        line-height: 400px;
      }
      #box3 {
        height: 600px;
        width: 1000px;
        background: orange;
        line-height: 600px;
      }
      #box4 {
        height: 45px;
        width: 1000px;
        background: purple;
        line-height: 45px;
      }
      #block1 {
        height: 45px;
        width: 250px;
        float: left;
        background: blue;
      }
      #block2 {
        height: 45px;
        width: 750px;
        float: left;
        background: yellow;
      }
      #block3 {
        height: 600px;
        width: 800px;
        float: left;
        background: red;
      }
      #block4:hover {
        height: 600px;
        width: 200px;
        float: left;
        background: purple;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="box1">
        <div id="block1">LOGO</div>
        <div id="block2">MENU</div>
      </div>
      <div id="box2">SLIDER</div>
      <div id="box3">
        <div id="block3">LEFT</div>
        <div id="block4">RIGHT</div>
      </div>
      <div id="box4">FOOTER</div>
    </div>
  </body>
</html>

Ques 57. Design this image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-57</title>
    <style>
      #outer {
        height: 800px;
        width: 800px;
        background: black;
        margin: auto;
        display: block;
      }
      #row1 {
        height: 400px;
        width: 800px;
        background: red;
      }
      #row2 {
        height: 400px;
        width: 800px;
        background: blue;
      }
      #col1 {
        height: 400px;
        width: 400px;
        background: black;
        float: left;
      }
      #col2 {
        height: 400px;
        width: 400px;
        background: navy;
        float: left;
      }
      #col3 {
        height: 400px;
        width: 400px;
        background: maroon;
        float: left;
      }
      #col4 {
        height: 400px;
        width: 400px;
        background: green;
        float: left;
      }
      #sub-row1 {
        height: 200px;
        width: 400px;
        background: skyblue;
      }
      #sub-row2 {
        height: 200px;
        width: 400px;
        background: lightgreen;
      }
      #sub-row3 {
        height: 100px;
        width: 400px;
        background: grey;
      }
      #sub-row4 {
        height: 300px;
        width: 400px;
        background: khaki;
      }
      #sub-row5 {
        height: 200px;
        width: 400px;
        background: pink;
      }
      #sub-row6 {
        height: 200px;
        width: 400px;
        background: aqua;
      }
      #sub-col1 {
        height: 200px;
        width: 200px;
        background: red;
        float: left;
      }
      #sub-col2 {
        height: 200px;
        width: 200px;
        background: blue;
        float: left;
      }
      #sub-col3 {
        height: 200px;
        width: 200px;
        background: green;
        float: left;
      }
      #sub-col4 {
        height: 200px;
        width: 200px;
        background: yellow;
        float: left;
      }
      #sub-col5 {
        height: 300px;
        width: 100px;
        background: purple;
        float: left;
      }
      #sub-col6 {
        height: 300px;
        width: 200px;
        background: orange;
        float: left;
      }
      #sub-col7 {
        height: 300px;
        width: 100px;
        background: navy;
        float: left;
      }
      #sub-col8 {
        height: 400px;
        width: 133px;
        background: black;
        float: left;
      }
      #sub-col9 {
        height: 400px;
        width: 134px;
        background: maroon;
        float: left;
      }
      #sub-col10 {
        height: 400px;
        width: 133px;
        background: grey;
        float: left;
      }
      #sub-col11 {
        height: 200px;
        width: 200px;
        background: rgb(0, 255, 0);
        float: left;
      }
      #sub-col12 {
        height: 200px;
        width: 200px;
        background: pink;
        float: left;
      }
      #sub-col13 {
        height: 200px;
        width: 200px;
        background: khaki;
        float: left;
      }
      #sub-col14 {
        height: 200px;
        width: 200px;
        background: rgb(255, 0, 242);
        float: left;
      }
      #rows1{
        height: 100px;
        width: 200px;
        background: red;
      }
      #rows2{
        height: 100px;
        width: 200px;
        background: orange;
      }
      #rows3{
        height: 100px;
        width: 200px;
        background: pink;
      }
      #rows4{
        height: 100px;
        width: 200px;
        background: lightgreen;
      }
      #rows5{
        height: 150px;
        width: 200px;
        background: yellow;
      }
      #rows6{
        height: 150px;
        width: px;
        background: rgb(0, 255, 0);
      }
      #rows7{
        height: 100px;
        width: 200px;
        background: aqua;
      }
      #rows8{
        height: 100px;
        width: 200px;
        background: navy;
      }
      #rows9{
        height: 100px;
        width: 200px;
        background: brown;
      }
      #rows10{
        height: 100px;
        width: 200px;
        background: grey;
      }
      #column1,#column5,#column9,#column13{
        height: 100px;
        width: 100px;
        background: red;
        float: left;
      }
      #column2,#column6,#column10,#column14{
        height: 100px;
        width: 100px;
        background: orange;
        float: left;
      }
      #column3,#column7,#column11,#column15{
        height: 100px;
        width: 100px;
        background: aqua;
        float: left;
      }
      #column4,#column8,#column12,#column16{
        height: 100px;
        width: 100px;
        background: rgb(255, 0, 225);
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="row1">
        <div id="col1">
          <div id="sub-row1">
            <div id="sub-col1">
              <div id="rows1">
                <div id="column1"></div>
                <div id="column2"></div>
              </div>
              <div id="rows2">
                <div id="column3"></div>
                <div id="column4"></div>
              </div>
            </div>
            <div id="sub-col2"></div>
          </div>
          <div id="sub-row2">
            <div id="sub-col3"></div>
            <div id="sub-col4">
              <div id="rows3">
                <div id="column5"></div>
                <div id="column6"></div>
              </div>
              <div id="rows4">
                <div id="column7"></div>
                <div id="column8"></div>
              </div>
            </div>
          </div>
        </div>
        <div id="col2">
          <div id="sub-row3"></div>
          <div id="sub-row4">
            <div id="sub-col5"></div>
            <div id="sub-col6">
              <div id="rows5"></div>
              <div id="rows6"></div>
            </div>
            <div id="sub-col7"></div>
          </div>
        </div>
      </div>
      <div id="row2">
        <div id="col3">
          <div id="sub-col8"></div>
          <div id="sub-col9"></div>
          <div id="sub-col10"></div>
        </div>
        <div id="col4">
          <div id="sub-row5">
            <div id="sub-col11">
              <div id="rows7">
                <div id="column9"></div>
                <div id="column10"></div>
              </div>
              <div id="rows8">
                <div id="column11"></div>
                <div id="column12"></div>
              </div>
            </div>
            <div id="sub-col12"></div>
          </div>
          <div id="sub-row6">
            <div id="sub-col13"></div>
            <div id="sub-col14">
              <div id="rows9">
                <div id="column13"></div>
                <div id="column14"></div>
              </div>
              <div id="rows10">
                <div id="column15"></div>
                <div id="column16"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Ques 58. Design this image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-58</title>
    <style>
      #outer {
        height: 800px;
        width: 800px;
        background: black;
        margin: auto;
        display: block;
      }
      #row1 {
        height: 400px;
        width: 800px;
        background: red;
      }
      #row2 {
        height: 400px;
        width: 800px;
        background: blue;
      }
      #col1 {
        height: 400px;
        width: 400px;
        background: khaki;
        float: left;
      }
      #col2 {
        height: 400px;
        width: 400px;
        background: pink;
        float: left;
      }
      #col3 {
        height: 400px;
        width: 400px;
        background: grey;
        float: left;
      }
      #col4 {
        height: 400px;
        width: 400px;
        background: lightgreen;
        float: left;
      }
      #sub-row1 {
        height: 200px;
        width: 400px;
        background: red;
      }
      #sub-row2 {
        height: 200px;
        width: 400px;
        background: blue;
      }
      #sub-row3 {
        height: 200px;
        width: 400px;
        background: yellow;
      }
      #sub-row4 {
        height: 200px;
        width: 400px;
        background: green;
      }
      #sub-col1 {
        height: 200px;
        width: 200px;
        background: red;
        float: left;
      }
      #sub-col2 {
        height: 200px;
        width: 200px;
        background: orange;
        float: left;
      }
      #sub-col3 {
        height: 400px;
        width: 200px;
        background: pink;
        float: left;
      }
      #sub-col4 {
        height: 400px;
        width: 200px;
        background: khaki;
        float: left;
      }
      #sub-col5 {
        height: 400px;
        width: 200px;
        background: grey;
        float: left;
      }
      #sub-col6 {
        height: 400px;
        width: 200px;
        background: lightgreen;
        float: left;
      }
      #sub-col7 {
        height: 200px;
        width: 200px;
        background: aqua;
        float: left;
      }
      #sub-col8 {
        height: 200px;
        width: 200px;
        background: rgb(0, 255, 0);
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="row1">
        <div id="col1">
          <div id="sub-row1">
            <div id="sub-col1"></div>
            <div id="sub-col2"></div>
          </div>
          <div id="sub-row2"></div>
        </div>
        <div id="col2">
          <div id="sub-col3"></div>
          <div id="sub-col4"></div>
        </div>
      </div>
      <div id="row2">
        <div id="col3">
          <div id="sub-col5"></div>
          <div id="sub-col6"></div>
        </div>
        <div id="col4">
          <div id="sub-row3"></div>
          <div id="sub-row4">
            <div id="sub-col7"></div>
            <div id="sub-col8"></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Ques 59. Design this image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-59</title>
    <style>
      #outer {
        height: 600px;
        width: 700px;
        background: black;
        margin: auto;
        display: block;
      }
      #row1 {
        height: 300px;
        width: 700px;
        background: red;
      }
      #row2 {
        height: 300px;
        width: 700px;
        background: blue;
      }
      #col1 {
        height: 300px;
        width: 100px;
        background: skyblue;
        float: left;
      }
      #col2 {
        height: 300px;
        width: 500px;
        background: pink;
        float: left;
      }
      #col3 {
        height: 300px;
        width: 100px;
        background: khaki;
        float: left;
      }
      #col4 {
        height: 300px;
        width: 500px;
        background: grey;
        float: left;
      }
      #col5 {
        height: 300px;
        width: 200px;
        background: lightgreen;
        float: left;
      }
      #sub-row1 {
        height: 150px;
        width: 100px;
        background: aqua;
      }
      #sub-row2 {
        height: 150px;
        width: 100px;
        background: rgb(0, 255, 0);
      }
      #sub-row3 {
        height: 150px;
        width: 500px;
        background: orange;
      }
      #sub-row4 {
        height: 150px;
        width: 500px;
        background: purple;
      }
      #sub-row5 {
        height: 150px;
        width: 500px;
        background: brown;
      }
      #sub-row6 {
        height: 150px;
        width: 500px;
        background: black;
      }
      #sub-col1 {
        height: 150px;
        width: 400px;
        background: blue;
        float: left;
      }
      #sub-col2 {
        height: 150px;
        width: 100px;
        background: red;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="row1">
        <div id="col1">
          <div id="sub-row1"></div>
          <div id="sub-row2"></div>
        </div>
        <div id="col2">
          <div id="sub-row3"></div>
          <div id="sub-row4">
            <div id="sub-col1"></div>
            <div id="sub-col2"></div>
          </div>
        </div>
        <div id="col3"></div>
      </div>
      <div id="row2">
        <div id="col4">
          <div id="sub-row5"></div>
          <div id="sub-row6"></div>
        </div>
        <div id="col5"></div>
      </div>
    </div>
  </body>
</html>

Ques 60. Design this image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-60</title>
    <style>
      #outer {
        height: 600px;
        width: 600px;
        background: black;
        margin: auto;
        display: block;
      }
      #row1 {
        height: 100px;
        width: 600px;
        background: red;
      }
      #row2 {
        height: 50px;
        width: 600px;
        background: blue;
      }
      #row3 {
        height: 100px;
        width: 600px;
        background: green;
      }
      #row4 {
        height: 50px;
        width: 600px;
        background: orange;
      }
      #row5 {
        height: 50px;
        width: 600px;
        background: yellow;
      }
      #row6 {
        height: 100px;
        width: 600px;
        background: brown;
      }
      #row7 {
        height: 50px;
        width: 600px;
        background: aqua;
      }
      #row8 {
        height: 100px;
        width: 600px;
        background: grey;
      }
      #col1 {
        height: 100px;
        width: 100px;
        background: blue;
        float: left;
      }
      #col2 {
        height: 100px;
        width: 50px;
        background: yellow;
        float: left;
      }
      #col3 {
        height: 100px;
        width: 450px;
        background: red;
        float: left;
      }
      #col4 {
        height: 50px;
        width: 150px;
        background: yellow;
        float: left;
      }
      #col5 {
        height: 50px;
        width: 450px;
        background: red;
        float: left;
      }
      #col6 {
        height: 100px;
        width: 150px;
        background: red;
        float: left;
      }
      #col7 {
        height: 100px;
        width: 100px;
        background: blue;
        float: left;
      }
      #col8 {
        height: 100px;
        width: 50px;
        background: yellow;
        float: left;
      }
      #col9 {
        height: 100px;
        width: 150px;
        background: blue;
        float: left;
      }
      #col10 {
        height: 100px;
        width: 150px;
        background: red;
        float: left;
      }
      #col11 {
        height: 50px;
        width: 150px;
        background: red;
        float: left;
      }
      #col12 {
        height: 50px;
        width: 150px;
        background: yellow;
        float: left;
      }
      #col13 {
        height: 50px;
        width: 150px;
        background: blue;
        float: left;
      }
      #col14 {
        height: 50px;
        width: 150px;
        background: red;
        float: left;
      }
      #col15 {
        height: 50px;
        width: 150px;
        background: red;
        float: left;
      }
      #col16 {
        height: 50px;
        width: 150px;
        background: blue;
        float: left;
      }
      #col17 {
        height: 50px;
        width: 150px;
        background: yellow;
        float: left;
      }
      #col18 {
        height: 50px;
        width: 150px;
        background: red;
        float: left;
      }
      #col19 {
        height: 100px;
        width: 150px;
        background: red;
        float: left;
      }
      #col20 {
        height: 100px;
        width: 150px;
        background: blue;
        float: left;
      }
      #col21 {
        height: 100px;
        width: 50px;
        background: yellow;
        float: left;
      }
      #col22 {
        height: 100px;
        width: 100px;
        background: blue;
        float: left;
      }
      #col23 {
        height: 100px;
        width: 150px;
        background: red;
        float: left;
      }
      #col24 {
        height: 50px;
        width: 450px;
        background: red;
        float: left;
      }
      #col25 {
        height: 50px;
        width: 150px;
        background: yellow;
        float: left;
      }
      #col26 {
        height: 100px;
        width: 450px;
        background: red;
        float: left;
      }
      #col27 {
        height: 100px;
        width: 50px;
        background: yellow;
        float: left;
      }
      #col28 {
        height: 100px;
        width: 100px;
        background: blue;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="row1">
        <div id="col1"></div>
        <div id="col2"></div>
        <div id="col3"></div>
      </div>
      <div id="row2">
        <div id="col4"></div>
        <div id="col5"></div>
      </div>
      <div id="row3">
        <div id="col6"></div>
        <div id="col7"></div>
        <div id="col8"></div>
        <div id="col9"></div>
        <div id="col10"></div>
      </div>
      <div id="row4">
        <div id="col11"></div>
        <div id="col12"></div>
        <div id="col13"></div>
        <div id="col14"></div>
      </div>
      <div id="row5">
        <div id="col15"></div>
        <div id="col16"></div>
        <div id="col17"></div>
        <div id="col18"></div>
      </div>
      <div id="row6">
        <div id="col19"></div>
        <div id="col20"></div>
        <div id="col21"></div>
        <div id="col22"></div>
        <div id="col23"></div>
      </div>
      <div id="row7">
        <div id="col24"></div>
        <div id="col25"></div>
      </div>
      <div id="row8">
        <div id="col26"></div>
        <div id="col27"></div>
        <div id="col28"></div>
      </div>
    </div>
  </body>
</html>

Ques 61. Design this image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-61</title>
    <style>
      #outer {
        height: 500px;
        width: 980px;
        background: white;
        margin: auto;
        display: block;
      }
      #col1 {
        height: 500px;
        width: 150px;
        background: white;
        float: left;
      }
      #col2 {
        height: 500px;
        width: 230px;
        background: white;
        float: left;
      }
      #col3 {
        height: 500px;
        width: 600px;
        background: white;
        float: left;
      }
      #row1 {
        height: 100px;
        width: 150px;
        background: white;
      }
      #row2 {
        height: 100px;
        width: 150px;
        background: blue;
      }
      #row3 {
        height: 300px;
        width: 150px;
        background: white;
      }
      #row4 {
        height: 250px;
        width: 230px;
        background: orange;
      }
      #row5 {
        height: 250px;
        width: 230px;
        background: white;
      }
      #row6 {
        height: 250px;
        width: 600px;
        background: white;
      }
      #row7 {
        height: 250px;
        width: 600px;
        background: green;
      }
      #sub-col1 {
        height: 250px;
        width: 80px;
        background: white;
        float: left;
      }
      #sub-col2 {
        height: 250px;
        width: 150px;
        background: white;
        float: left;
      }
      #sub-col3 {
        height: 250px;
        width: 200px;
        background: aqua;
        float: left;
      }
      #sub-col4 {
        height: 250px;
        width: 400px;
        background: aqua;
        float: left;
      }
      #sub-row1 {
        height: 150px;
        width: 150px;
        background: yellow;
      }
      #sub-row2 {
        height: 100px;
        width: 150px;
        background: white;
      }
      #sub-row3 {
        height: 150px;
        width: 200px;
        background: white;
      }
      #sub-row4 {
        height: 100px;
        width: 200px;
        background: brown;
      }
      #sub-row5 {
        height: 150px;
        width: 400px;
        background: red;
      }
      #sub-row6 {
        height: 100px;
        width: 400px;
        background: white;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="col1">
        <div id="row1"></div>
        <div id="row2"></div>
        <div id="row3"></div>
      </div>
      <div id="col2">
        <div id="row4"></div>
        <div id="row5">
          <div id="sub-col1"></div>
          <div id="sub-col2">
            <div id="sub-row1"></div>
            <div id="sub-row2"></div>
          </div>
        </div>
      </div>
      <div id="col3">
        <div id="row6">
          <div id="sub-col3">
            <div id="sub-row3"></div>
            <div id="sub-row4"></div>
          </div>
          <div id="sub-col4">
            <div id="sub-row5"></div>
            <div id="sub-row6"></div>
          </div>
        </div>
        <div id="row7"></div>
      </div>
    </div>
  </body>
</html>

Ques 62. Design this image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-62</title>
    <style>
      #outer {
        height: 550px;
        width: 1000px;
        background: black;
        margin: auto;
        display: block;
      }
      #col1 {
        height: 550px;
        width: 450px;
        background: red;
        float: left;
      }
      #col2 {
        height: 550px;
        width: 100px;
        background: blue;
        float: left;
      }
      #col3 {
        height: 550px;
        width: 450px;
        background: orange;
        float: left;
      }
      #row1 {
        height: 200px;
        width: 450px;
        background: green;
      }
      #row2 {
        height: 150px;
        width: 450px;
        background: yellow;
      }
      #row3 {
        height: 200px;
        width: 450px;
        background: aqua;
      }
      #row4 {
        height: 200px;
        width: 450px;
        background: orange;
      }
      #row5 {
        height: 150px;
        width: 450px;
        background: brown;
      }
      #row6 {
        height: 200px;
        width: 450px;
        background: red;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="col1">
        <div id="row1"></div>
        <div id="row2"></div>
        <div id="row3"></div>
      </div>
      <div id="col2"></div>
      <div id="col3">
        <div id="row4"></div>
        <div id="row5"></div>
        <div id="row6"></div>
      </div>
    </div>
  </body>
</html>

Ques 63. Design this image using <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-63</title>
    <style>
      #outer {
        height: 600px;
        width: 1400px;
        background: black;
        margin: auto;
        display: block;
      }
      #row1 {
        height: 100px;
        width: 1400px;
        background: red;
      }
      #row2 {
        height: 400px;
        width: 1400px;
        background: blue;
      }
      #row3 {
        height: 100px;
        width: 1400px;
        background: red;
      }
      #col1 {
        height: 400px;
        width: 100px;
        background: green;
        float: left;
      }
      #col2 {
        height: 400px;
        width: 1200px;
        background: khaki;
        float: left;
      }
      #col3 {
        height: 400px;
        width: 100px;
        background: green;
        float: left;
      }
      #sub-row1 {
        height: 50px;
        width: 1200px;
        background: blue;
      }
      #sub-row2 {
        height: 300px;
        width: 1200px;
        background: pink;
      }
      #sub-row3 {
        height: 50px;
        width: 1200px;
        background: blue;
      }
      #sub-col1 {
        height: 300px;
        width: 100px;
        background: yellow;
        float: left;
      }
      #sub-col2 {
        height: 300px;
        width: 1000px;
        background: khaki;
        float: left;
      }
      #sub-col3 {
        height: 300px;
        width: 100px;
        background: yellow;
        float: left;
      }
      #column1 {
        height: 300px;
        width: 150px;
        background: orange;
        float: left;
      }
      #column2 {
        height: 300px;
        width: 50px;
        background: orange;
        float: left;
      }
      #column3 {
        height: 300px;
        width: 600px;
        background: skyblue;
        float: left;
      }
      #column4 {
        height: 300px;
        width: 50px;
        background: orange;
        float: left;
      }
      #column5 {
        height: 300px;
        width: 150px;
        background: orange;
        float: left;
      }
      #rows1 {
        height: 150px;
        width: 150px;
        background: aqua;
      }
      #rows2 {
        height: 150px;
        width: 100px;
        background: orange;
      }
      #rows3 {
        height: 75px;
        width: 700px;
        background: orange;
      }
      #rows4 {
        height: 150px;
        width: 700px;
        background: aqua;
      }
      #rows5 {
        height: 75px;
        width: 700px;
        background: orange;
      }
      #rows6 {
        height: 150px;
        width: 100px;
        background: orange;
      }
      #rows7 {
        height: 150px;
        width: 150px;
        background: aqua;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="row1"></div>
      <div id="row2">
        <div id="col1"></div>
        <div id="col2">
          <div id="sub-row1"></div>
          <div id="sub-row2">
            <div id="sub-col1"></div>
            <div id="sub-col2">
              <div id="column1">
                <div id="rows1"></div>
                <div id="rows2"></div>
              </div>
              <div id="column2"></div>
              <div id="column3">
                <div id="rows3"></div>
                <div id="rows4"></div>
                <div id="rows5"></div>
              </div>
              <div id="column4"></div>
              <div id="column5">
                <div id="rows6"></div>
                <div id="rows7"></div>
              </div>
            </div>
            <div id="sub-col3"></div>
          </div>
          <div id="sub-row3"></div>
        </div>
        <div id="col3"></div>
      </div>
      <div id="row3"></div>
    </div>
  </body>
</html>

Ques 64. Use of class selector in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-64</title>
    <style>
      #box {
        height: 500px;
        width: 500px;
        background: aqua;
      }
      .row {
        height: 250px;
        width: 500px;
        background: red;
      }
      .col1 {
        height: 250px;
        width: 250px;
        background: orange;
        float: left;
      }
      .col2 {
        height: 250px;
        width: 250px;
        background: rgb(0, 255, 0);
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div class="row">
        <div class="col1"></div>
        <div class="col2"></div>
      </div>
      <div class="row">
        <div class="col2"></div>
        <div class="col1"></div>
      </div>
    </div>
  </body>
</html>

Ques 65. Design this image using class selector in <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-65</title>
    <style>
      #outer {
        height: 200px;
        width: 1000px;
        background: black;
        margin: auto;
        display: block;
      }
      .col1 {
        height: 200px;
        width: 100px;
        background: red;
        float: left;
      }
      .col2 {
        height: 200px;
        width: 50px;
        background: blue;
        float: left;
      }
      .col3 {
        height: 200px;
        width: 700px;
        background: yellow;
        float: left;
      }
      .row1 {
        height: 50px;
        width: 700px;
        background: purple;
      }
      .row2 {
        height: 100px;
        width: 700px;
        background: aqua;
      }
      .sub-col1 {
        height: 100px;
        width: 100px;
        background: rgb(0, 255, 0);
        float: left;
      }
      .sub-col2 {
        height: 100px;
        width: 250px;
        background: yellow;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div class="col1"></div>
      <div class="col2"></div>
      <div class="col3">
        <div class="row1"></div>
        <div class="row2">
          <div class="sub-col1"></div>
          <div class="sub-col2"></div>
          <div class="sub-col2"></div>
          <div class="sub-col1"></div>
        </div>
        <div class="row1"></div>
      </div>
      <div class="col2"></div>
      <div class="col1"></div>
    </div>
  </body>
</html>

Ques 66. Design this image using class selector in <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-66</title>
    <style>
      #outer {
        height: 850px;
        width: 800px;
        background: black;
        margin: auto;
        display: block;
      }
      .col1 {
        height: 850px;
        width: 300px;
        background: black;
        float: left;
      }
      .col2 {
        height: 850px;
        width: 200px;
        background: blue;
        float: left;
      }
      .row1 {
        height: 300px;
        width: 300px;
        background: purple;
      }
      .row {
        height: 250px;
        width: 300px;
        background: orange;
      }
      .row2 {
        height: 300px;
        width: 300px;
        background: rgb(255, 0, 204);
      }
      .sub-row1 {
        height: 55px;
        width: 200px;
        background: rgb(0, 255, 0);
      }
      .sub-row2 {
        height: 140px;
        width: 200px;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div class="col1">
        <div style="background: red" class="row1"></div>
        <div class="row"></div>
        <div style="background: yellow" class="row1"></div>
      </div>
      <div class="col2">
        <div class="row2"></div>
        <div class="row">
          <div class="sub-row1"></div>
          <div class="sub-row2"></div>
          <div class="sub-row1"></div>
        </div>
        <div class="row2"></div>
      </div>
      <div class="col1">
        <div style="background: yellow" class="row1"></div>
        <div class="row"></div>
        <div style="background: red" class="row1"></div>
      </div>
    </div>
  </body>
</html>

Ques 67. Add background image in <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-67</title>
    <style>
      body {
        background-image: url(https://cdn.pixabay.com/photo/2016/04/04/14/12/monitor-1307227_1280.jpg);
        background-repeat: no-repeat;
        text-align: center;
        line-height: 600px;
        font-size: 150px;
        color: yellow;
        font-family: arial;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    shubhampal.co.in
  </body>
</html>

Ques 68. Use of RGBA color with image in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-68</title>
    <style>
      #outer {
        height: 600px;
        width: 1200px;
        margin: auto;
        background-image: url(https://cdn.pixabay.com/photo/2016/04/04/14/12/monitor-1307227_1280.jpg);
       background-repeat: no-repeat;
        background-size: cover;
      }
      #inner {
        height: 600px;
        width: 1200px;
        margin: auto;
        background: rgba(100, 150, 250, 0.5);
        background-size: cover;
        font-size: 120px;
        color: black;
        font-family: impact;
        text-align: center;
        line-height: 600px;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="inner">shubhampal.co.in</div>
    </div>
  </body>
</html>

Ques 69. Design this image using class selector in <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-69</title>
    <style>
      #outer {
        height: 650px;
        width: 700px;
        margin: auto;
        display: block;
        background: black;
      }
      .row1{
        height: 150px;
        width: 700px;
        background: red;
      }
      .row2{
        height: 350px;
        width: 700px;
        background: blue;
      }
      .col1{
        height: 350px;
        width: 150px;
        background: orange;
        float: left;
      }
      .col2{
        height: 350px;
        width: 400px;
        background: green;
        float: left;
      }
      .sub-row1{
        height: 100px;
        width: 400px;
        background: aqua;
      }
      .sub-row2{
        height: 150px;
        width: 400px;
        background: navy;
      }
      .sub-col1{
        height: 150px;
        width: 100px;
        background: brown;
        float: left;
      }
      .sub-col2{
        height: 150px;
        width: 200px;
        background: yellow;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div class="row1"></div>
      <div class="row2">
        <div class="col1"></div>
        <div class="col2">
          <div class="sub-row1"></div>
          <div class="sub-row2">
            <div class="sub-col1"></div>
            <div class="sub-col2"></div>
            <div class="sub-col1"></div>
          </div>
          <div class="sub-row1"></div>
        </div>
        <div class="col1"></div>
      </div>
      <div class="row1"></div>
    </div>
  </body>
</html>

Ques 70. Design this image using class selector in <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-70</title>
<style>
  #outer {
    height: 480px;
    width: 900px;
    margin: auto;
    display: block;
    background: black;
  }
  .col1 {
    height: 480px;
    width: 100px;
    background: red;
    float: left;
  }
  .col2 {
    height: 480px;
    width: 500px;
    background: blue;
    float: left;
  }
  .row1 {
    height: 100px;
    width: 100px;
    background: yellow;
  }
  .row2 {
    height: 80px;
    width: 100px;
    background: orange;
  }
  .row3 {
    height: 200px;
    width: 100px;
    background: green;
  }
  .rows1 {
    height: 100px;
    width: 500px;
    background: aqua;
  }
  .rows2 {
    height: 80px;
    width: 500px;
    background: blue;
  }
  .rows3 {
    height: 200px;
    width: 500px;
    background: black;
  }
  .sub-row {
    height: 100px;
    width: 500px;
    background: pink;
  }
  .sub-col1 {
    height: 100px;
    width: 250px;
    background: khaki;
    float: left;
  }
  .sub-col2 {
    height: 100px;
    width: 125px;
    background: skyblue;
    float: left;
  }
</style>
</head>
<body>
<div id="outer">
  <div class="col1">
    <div style="background: red" class="row1"></div>
    <div style="background: lightgreen" class="row2"></div>
    <div class="row3"></div>
    <div style="background: red" class="row1"></div>
  </div>
  <div class="col1">
    <div class="row1"></div>
    <div class="row2"></div>
    <div class="row3"></div>
    <div class="row1"></div>
  </div>
  <div class="col2">
    <div class="rows1"></div>
    <div class="rows2"></div>
    <div class="rows3">
      <div class="sub-row">
        <div style="background: pink" class="sub-col1"></div>
        <div class="sub-col1"></div>
      </div>
      <div class="sub-row">
        <div class="sub-col2"></div>
        <div style="background: grey" class="sub-col1"></div>
        <div class="sub-col2"></div>
      </div>
    </div>
    <div class="rows1"></div>
  </div>
  <div class="col1">
    <div class="row1"></div>
    <div class="row2"></div>
    <div class="row3"></div>
    <div class="row1"></div>
  </div>
  <div class="col1">
    <div style="background: red" class="row1"></div>
    <div style="background: lightgreen" class="row2"></div>
    <div class="row3"></div>
    <div style="background: red" class="row1"></div>
  </div>
</div>
</body>
</html>

Ques 71. Design this image using class selector in <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-71</title>
    <style>
      #outer {
        height: 320px;
        width: 800px;
        margin: auto;
        display: block;
        background: black;
      }
      .col1 {
        height: 320px;
        width: 100px;
        background: red;
        float: left;
      }
      .col2 {
        height: 320px;
        width: 300px;
        background: blue;
        float: left;
      }
      .row1 {
        height: 100px;
        width: 100px;
        background: aqua;
      }
      .row2 {
        height: 120px;
        width: 100px;
        background: yellow;
      }
      .row3 {
        height: 100px;
        width: 300px;
        background: orange;
      }
      .row4 {
        height: 120px;
        width: 300px;
        background: purple;
      }
      .sub-col1 {
        height: 120px;
        width: 150px;
        background: red;
        float: left;
      }
      .sub-col2 {
        height: 100px;
        width: 150px;
        background: red;
        float: left;
      }
      .sub-row1 {
        height: 50px;
        width: 150px;
        background: purple;
      }
      .sub-row2 {
        height: 70px;
        width: 150px;
        background: green;
      }
      .sub-row3 {
        height: 30px;
        width: 150px;
        background: blue;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div class="col1">
        <div class="row1"></div>
        <div class="row2"></div>
        <div class="row1"></div>
      </div>
      <div class="col2">
        <div style="background: red" class="row3"></div>
        <div class="row4">
          <div class="sub-col1">
            <div style="background: orange" class="sub-row1"></div>
            <div style="background: navy" class="sub-row2"></div>
          </div>
          <div class="sub-col1">
            <div style="background: green" class="sub-row1"></div>
            <div style="background: grey" class="sub-row2"></div>
          </div>
        </div>
        <div class="row3">
          <div class="sub-col2">
            <div style="background: khaki" class="sub-row2"></div>
            <div style="background: grey" class="sub-row3"></div>
          </div>
          <div class="sub-col2">
            <div style="background: pink" class="sub-row2"></div>
            <div style="background: skyblue" class="sub-row3"></div>
          </div>
        </div>
      </div>
      <div class="col2">
        <div style="background: blue" class="row3"></div>
        <div class="row4">
          <div class="sub-col1">
            <div style="background: orange" class="sub-row1"></div>
            <div style="background: navy" class="sub-row2"></div>
          </div>
          <div class="sub-col1">
            <div style="background: green" class="sub-row1"></div>
            <div style="background: grey" class="sub-row2"></div>
          </div>
        </div>
        <div class="row3">
          <div class="sub-col2">
            <div style="background: khaki" class="sub-row2"></div>
            <div style="background: grey" class="sub-row3"></div>
          </div>
          <div class="sub-col2">
            <div style="background: pink" class="sub-row2"></div>
            <div style="background: skyblue" class="sub-row3"></div>
          </div>
        </div>
      </div>
      <div class="col1">
        <div class="row1"></div>
        <div class="row2"></div>
        <div class="row1"></div>
      </div>
    </div>
  </body>
</html>

Ques 72. Design this image using class selector in <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-72</title>
    <style>
      #outer {
        height: 600px;
        width: 700px;
        margin: auto;
        display: block;
        background: black;
      }
      .row {
        height: 150px;
        width: 700px;
        background: grey;
      }
      .col1 {
        height: 150px;
        width: 520px;
        background: blue;
        float: left;
      }
      .col2 {
        height: 150px;
        width: 180px;
        background: red;
        float: left;
      }
      .sub-row1 {
        height: 75px;
        width: 520px;
        background: #fec689;
      }
      .sub-row2 {
        height: 75px;
        width: 520px;
        background: #f8931f;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div class="row">
        <div class="col1">
          <div class="sub-row1"></div>
          <div class="sub-row2"></div>
        </div>
        <div class="col2"></div>
      </div>
      <div class="row">
        <div class="col2"></div>
        <div class="col1">
          <div class="sub-row1"></div>
          <div class="sub-row2"></div>
        </div>
      </div>
      <div class="row">
        <div class="col1">
          <div class="sub-row1"></div>
          <div class="sub-row2"></div>
        </div>
        <div class="col2"></div>
      </div>
      <div class="row">
        <div class="col2"></div>
        <div class="col1">
          <div class="sub-row1"></div>
          <div class="sub-row2"></div>
        </div>
      </div>
    </div>
  </body>
</html>

Ques 73. Design this image using class selector in <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-73</title>
    <style>
      #outer {
        height: 600px;
        width: 600px;
        margin: auto;
        display: block;
        background: black;
      }
      .col1 {
        height: 600px;
        width: 100px;
        background: red;
        float: left;
      }
      .col2 {
        height: 600px;
        width: 200px;
        background: #abc2e1;
        float: left;
      }
      .row1 {
        height: 100px;
        width: 100px;
        background: #015a7f;
      }
      .row2 {
        height: 200px;
        width: 100px;
        background: #6dcef8;
      }
      .row3 {
        height: 100px;
        width: 200px;
        background: #0076a1;
      }
      .row4 {
        height: 200px;
        width: 200px;
        background: #abc2e1;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div class="col1">
        <div class="row1"></div>
        <div class="row2"></div>
        <div style="background: #0076a1" class="row2"></div>
        <div class="row1"></div>
      </div>
      <div class="col2">
        <div class="row3"></div>
        <div class="row4"></div>
        <div style="background: #abc2e1" class="row4"></div>
        <div class="row3"></div>
      </div>
      <div class="col2">
        <div style="background: #6dcef8" class="row3"></div>
        <div class="row4"></div>
        <div style="background: #abc2e1" class="row4"></div>
        <div style="background: #6dcef8" class="row3"></div>
      </div>
      <div class="col1">
        <div class="row1"></div>
        <div class="row2"></div>
        <div style="background: #0076a1" class="row2"></div>
        <div class="row1"></div>
      </div>
    </div>
  </body>
</html>

Ques 74. Design this image using class selector in <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-74</title>
    <style>
      #outer {
        height: 500px;
        width: 500px;
        margin: auto;
        display: block;
        background: black;
      }
      .row {
        height: 50px;
        width: 500px;
        background: black;
      }
      .row {
        height: 450px;
        width: 500px;
        background: black;
      }
      .sub-col1 {
        height: 50px;
        width: 50px;
        background: red;
        float: left;
      }
      .sub-col2 {
        height: 50px;
        width: 400px;
        background: #f26d7e;
        float: left;
      }
      .col {
        height: 450px;
        width: 250px;
        background: grey;
        float: left;
      }
      .col2 {
        height: 50px;
        width: 0px;
        background: #f26d7e;
        float: left;
      }
      .sub-row1 {
        height: 150px;
        width: 250px;
        background: #f06eac;
      }
      .sub-row2 {
        height: 100px;
        width: 250px;
        background: orange;
      }
      .rows {
        height: 75px;
        width: 250px;
        background: #001a93;
      }
      .column {
        height: 75px;
        width: 125px;
        background: #92278f;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div class="row1">
        <div class="sub-col1"></div>
        <div class="sub-col2"></div>
        <div class="sub-col1"></div>
      </div>
      <div class="row2">
        <div class="col">
          <div class="sub-row1"></div>
          <div style="background: #6dcff6" class="sub-row2"></div>
          <div style="background: #0077a2" class="sub-row2"></div>
          <div style="background: #003470" class="sub-row2"></div>
        </div>
        <div class="col">
          <div class="sub-row1">
            <div class="rows"></div>
            <div class="rows">
              <div class="column"></div>
              <div style="background: #7da7d9" class="column"></div>
            </div>
          </div>
          <div style="background: #f06eac" class="sub-row2"></div>
          <div style="background: #8781bd" class="sub-row2"></div>
          <div style="background: #8781bd" class="sub-row2"></div>
        </div>
      </div>
    </div>
  </body>
</html>

Ques 75. Design this image using class selector in <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-75</title>
    <style>
      #outer {
        height: 600px;
        width: 600px;
        margin: auto;
        display: block;
        background: black;
      }
      .row {
        height: 300px;
        width: 600px;
        background: red;
      }
      .col {
        height: 300px;
        width: 300px;
        background: #abd373;
        float: left;
      }
      .sub-row {
        height: 150px;
        width: 600px;
        background: red;
      }
      .sub-col {
        height: 150px;
        width: 150px;
        background: #015927;
        float: left;
      }
      .rows1 {
        height: 37px;
        width: 150px;
        background: #c79d6d;
      }
      .rows2 {
        height: 39px;
        width: 150px;
        background: blue;
      }
      .column {
        height: 39px;
        width: 50px;
        background: #613a13;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div class="row">
        <div class="col"></div>
        <div style="background: #02a552" class="col"></div>
      </div>
      <div class="row">
        <div style="background: #02a552" class="col">
          <div class="sub-row">
            <div class="sub-col"></div>
            <div style="background: #02a552" class="sub-col"></div>
          </div>
          <div class="sub-row">
            <div class="sub-col">
              <div style="background: #613a13" class="rows1"></div>
              <div style="background: #8c6137" class="rows1"></div>
              <div class="rows1"></div>
              <div class="rows2">
                <div class="column"></div>
                <div style="background: #8c6137" class="column"></div>
                <div class="column"></div>
              </div>
            </div>
            <div class="sub-col"></div>
          </div>
        </div>
        <div class="col"></div>
      </div>
    </div>
  </body>
</html>

Ques 76. Use of gradient colors in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-76</title>
    <style>
      body {
         background-image: url(https://cdn.pixabay.com/photo/2016/04/04/14/12/monitor-1307227_1280.jpg);
        background-size: 100% 100%;
        color: white;
      }
      div {
        height: 160px;
        width: 250px;
        border: 5px groove yellow;
        border-radius: 5px;
        float: left;
        margin: 20px;
      }
      /* Use of linear-gradient */
      #dv1 {
        background: linear-gradient(red, orange, green, aqua);
      }

      #dv2 {
        /* background: linear-gradient(direction,color,color,color); */
        background: linear-gradient(to bottom, red, yellow, green);
      }

      #dv3 {
        /* background: linear-gradient(angle,color,color,color); */
        background: linear-gradient(30deg, purple, navy, skyblue);
      }

      #dv4 {
        /* background: repeating-linear-gradient(color percentage,color percentage,color percentage); */
        background: repeating-linear-gradient(aqua 10%, green 23%, navy 30%);
      }
      #dv5 {
        background:repeating-linear-gradient(to left,aqua 20%,green 23%,navy 30%);
}

      #dv6 {
        background:repeating-linear-gradient(80deg,aqua 20%,green 23%,navy 30%);
}
      #dv7 {
        background: radial-gradient( red, yellow, green);
      }
      #dv8 {
        /* background: radial-gradient(circle,color, color, color); */
        background: radial-gradient(circle, red, yellow, green);
      }
      /* mid point color ki location change karna */
      #dv9 {
        background: radial-gradient(circle at left top, red, yellow, navy);
      }
      #dv10 {
        /* background: radial-gradient(circle at left top,red,yellow,navy); */
      background:radial-gradient(circle at 50% 75%,red,yellow,navy);
}
      #dv11 {
        /* background: repeating-radial-gradient(circle at left top,red,yellow,navy); */
        background:repeating-radial-gradient(circle at 50% 75%,red 10%,yellow 15%,navy 25%);
}
          #dv12 {
        /* background: repeating-radial-gradient(circle at left top,red,yellow,navy); */
        background:repeating-radial-gradient(circle at 50% 50%,red 10%,yellow 15%,navy 25%);
}
      #dv13 {
        /* background: repeating-radial-gradient(circle at left top,red,yellow,navy); */
       background:repeating-radial-gradient(circle at left top,red 10%,yellow 15%,navy 25%);
}

      #dv14 {
        /* background: repeating-radial-gradient(circle at left top,red,yellow,navy); */
background:repeating-radial-gradient(circle at 95% 5%,red 10%,yellow 15%,navy 25%);
}

      #dv15 {
        background:conic-gradient(red,yellow,green,pink);
}

      #dv16 {
        background:conic-gradient(red,yellow,green,pink,red);
}

      #dv17 {
        background:repeating-conic-gradient(red 20deg,yellow 30deg,green 40deg);
}

      #dv18 {
        /* for transparent color */
        background:repeating-conic-gradient(rgba(255,255,255,.5) 20deg,rgba(0,0,0,.7) 30deg,rgba(123,23,12,.6) 40deg);
}

      #dv19 {
        /* for transparent color */
        background:repeating-radial-gradient(circle at 50% 75%,rgba(123,234,1,.5) 30%, rgba(255,255,255,.6) 40%)
}
    </style>
  </head>
  <body>
    <div id="dv1"></div>
    <div id="dv2"></div>
    <div id="dv3"></div>
    <div id="dv4"></div>
    <div id="dv5"></div>
    <div id="dv6"></div>
    <div id="dv7"></div>
    <div id="dv8"></div>
    <div id="dv9"></div>
    <div id="dv10"></div>
    <div id="dv11"></div>
    <div id="dv12"></div>
    <div id="dv13"></div>
    <div id="dv14"></div>
    <div id="dv15"></div>
    <div id="dv16"></div>
    <div id="dv17"></div>
    <div id="dv18"></div>
    <div id="dv19"></div>
  </body>
</html>

Ques 77. Print this design using linear-gradient color in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-77</title>
    <style>
      #outer {
        height: 250px;
        width: 1000px;
        margin: auto;
        background: linear-gradient(165deg, red, yellow, green);
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        line-height: 150px;
      }
    </style>
  </head>
  <body>
    <div id="outer"><i>Icyqueen</i></div>
  </body>
</html>

Ques 78. Print this design using repeating-conic-gradient color in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-78</title>
    <style>
      #outer {
        height: 500px;
        width: 600px;
        margin: auto;
        background: repeating-conic-gradient(#e94d40 45%, #e94d40 50%,#f2c510 50%, #f2c510 55%);
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        line-height: 150px;
      }
    </style>
  </head>
  <body>
    <div id="outer"></div>
  </body>
</html>

Ques 79. Print this all designs using linear-gradient colors in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-78</title>
    <style>
      body {
        padding-left: 160px;
        padding-right: 160px;
      }
      #outer {
        height: 1000px;
        width: 900px;
        margin: auto;
        background: #040059;
        color: white;
        padding-left: 100px;
        padding-right: 100px;
      }
      .box {
        height: 150px;
        width: 250px;
        background: red;
        border: 10px solid black;
        border-radius: 15px;
        border-style: none;
        margin: 25px;
        float: left;
      }
      #box1{
        background: linear-gradient(45deg,#4c56cd,#cf5eb5,#ebc480);
      }
      #box2{
        background: linear-gradient(135deg,#1194e6,#77cdc6);
      }
      #box3{
        background: linear-gradient(45deg,#e798fa,#2cd2fc,#1dfa89);
      }
      #box4{
        background: linear-gradient(160deg,#db45e1,#d92727,#f7803c);
      }
      #box5{
        background: linear-gradient(45deg,#e2b1f6,#d9b4ff,#888df5);
      }
      #box6{
        background: linear-gradient(45deg,#fe9684,#ff6e8b,#fd9bb5);
      }
      #box7{
        background: linear-gradient(205deg,#fe9684,#ff6e8b,#fd9bb5);
      }
      #box8{
        background: linear-gradient(to right,#faf3a4 ,#f0bf24 80%);
      }
      #box9{
        background: linear-gradient(45deg,#4071b8,#754fa2,#d94bb3 80%);
      }
      #box10{
        background: linear-gradient(#ee4795,#ec4543,#e9ae12);
      }
      #box11{
        background: linear-gradient(to right,#cdd0f9,#e7cee1,#fccacd,#fddac6,#fff6c5);
      }
      #box12{
        background: linear-gradient(45deg,#a6e5d8,#a1f4c0,#bef8d2,#d8f5b3,#f8f0a3);
      }
      #box13{
        background: linear-gradient(135deg,#5450be,#407aba,#299aac,#36ba9a,#34e772);
      }
      #box14{
        background: linear-gradient(135deg,#30477a,#5c3fa1,#8835c1,#b76496,#e39d82);
      }
      #box15{
        background: linear-gradient(135deg,#608f97,#8eafa8,#bbc9b2,#e6e3c2,#fdfbeb 90%);
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div class="box" id="box1"></div>
      <div class="box" id="box2"></div>
      <div class="box" id="box3"></div>
      <div class="box" id="box4"></div>
      <div class="box" id="box5"></div>
      <div class="box" id="box6"></div>
      <div class="box" id="box7"></div>
      <div class="box" id="box8"></div>
      <div class="box" id="box9"></div>
      <div class="box" id="box10"></div>
      <div class="box" id="box11"></div>
      <div class="box" id="box12"></div>
      <div class="box" id="box13"></div>
      <div class="box" id="box14"></div>
      <div class="box" id="box15"></div>
    </div>
  </body>
</html>

Ques 80. Print this design using linear-gradient color in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-80</title>
    <style>
    #outer {
      height: 150px;
      width: 1000px;
      margin: auto;
      background: linear-gradient(to right,#ed0235,#8d0175);
    }
  </style>
</head>
<body>
  <div id="outer">
  </div>
</body>
</html>

Ques 81. Print this design using repeating-radial-gradient color in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-81</title>
    <style>
      #outer {
        height: 500px;
        width: 540px;
        margin: auto;
        background: repeating-radial-gradient(red 2%,blue 23%);
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        line-height: 150px;
      }
    </style>
  </head>
  <body>
    <center><h1>CSS Reapeating-Radial-Gradient</h1></center>
    <div id="outer"></div>
  </body>
</html>

Ques 82. Print this design using linear-gradient colors in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-82</title>
    <style>
    #outer {
      height: 350px;
      width: 800px;
      margin: auto;
      background: linear-gradient(#fe0700,#f1ff00,#1bfe00,#00feda,#0123fe,#da00ff);
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      line-height: 150px;
    }
  </style>
</head>
<body>
  <div id="outer"></div>
</body>
</html>

Ques 83. Print this design using linear-gradient colors in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-83</title>
    <style>
    #outer {
      height: 350px;
      width: 750px;
      margin: auto;
      background: linear-gradient(to right,#fe0000,#fe0000 14.3%,#fea500 14.3%,#fea500 28.6%,#fffe01 28.6%,#fffe01 42.9%,#008001 42.9%,#008001 57.2%,#0000fa 57.2%,#0000fa 71.5%,#4b0081 71.5%,#4b0081 85.8%,#ee82ef 85.8%,#ee82ef 100%);
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      line-height: 150px;
      border: 2px solid black;
    }
  </style>
</head>
<body>
  <div id="outer"></div>
</body>
</html>

Ques 84. Use of ‘padding’ property in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-84</title>
    <style>
      #box {
        height: 400px;
        width: 400px;
        background: red;
        color: white;
        font-size: 17px;
        /* padding: 50px; */
        /* padding: top right bottom left; */
        /* padding: 20px 20px 20px 20px; */
        /* padding: vertical(top & bottom) horizontal(left & right); */
        /* padding: 25px 50px; */
        /* padding-top: 100px;
        padding-left: 100px;
        padding-right: 100px;
        padding-bottom: 100px; */
        /* padding: 20px 30px 40px 50px; */
        /* padding : 50px ; */
        /* padding: top (left-right) bottom; */
        padding: 50px 100px 50px;
        text-align: justify;
      }
    </style>
  </head>
  <body>
    <div id="box">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut enim hic sed
      distinctio nemo dolorum facere et! Iure aperiam vitae adipisci officia
      maxime magni earum corporis possimus perferendis numquam reiciendis,
      tempore eius, in iste quia dolores? Velit minus, facere temporibus aliquam
      sit est facilis sunt non quaerat cupiditate obcaecati magni nam quam
      veniam ea asperiores quos molestiae error. Ratione quo magni harum eaque
      similique incidunt numquam autem repellat aspernatur unde suscipit natus a
      qui reiciendis ullam laudantium, facilis sint voluptas, voluptatibus
      temporibus ut alias? Quia voluptates eaque vero officia rerum quis
      blanditiis excepturi animi ex. Sequi voluptatem porro repudiandae totam?
    </div>
  </body>
</html>

Ques 85. Use of ‘margin’ property in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-85</title>
    <style>
    #box{
      height: 400px;
      width: 400px;
      background: purple;
       /* margin: 50px; */
      /* margin: 50px 100px; */
      /* margin-top: 100px; */
      /* margin-left: 100px; */
      /* margin: 25px 50px 50px 25px; */
      margin: 100px auto;
    }
  </style>
</head>
<body>
  <div id="box">
  </div>
</body>
</html>

Ques 86. Use of margin, padding, border properties in <div> tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-86</title>
    <style>
      #outer {
        height: 300px;
        width: 900px;
        background: black;
      }
      #block1 {
        height: 300px;
        width: 300px;
        background: red;
        /* padding: 50px; */
        /* padding: 50px 75px; */
        padding: 25px 50px 50px;
         box-sizing: border-box;
        float: left;
      }
      #block2 {
        height: 200px;
        width: 250px;
        background: aqua;
        /* margin: 50px; */
        margin: 50px 25px;
        float: left;
      }
      #block3 {
        height: 300px;
        width: 300px;
        background: orange;
        border: 75px groove green;
        float: left;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="block1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque dolorem
        earum quis repellat non voluptate ullam dolores eligendi animi. Deserunt
        vitae, labore qui quam, eveniet a.
      </div>
      <div id="block2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque dolorem
        earum quis repellat non voluptate ullam dolores eligendi animi. Deserunt
        vitae, labore qui quam, eveniet amet expedita rem in, ad saepe hic
        beatae nulla veniam magnam inventore recusandae harum quas accusamus.
        Velit distinctio perferendis repellat voluptates illum.
      </div>
      <div id="block3">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque dolorem
        earum quis repellat non voluptate ullam dolores .
      </div>
    </div>
  </body>
</html>

Ques 87. Print this ‘Keyboard’ image on webpage using HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-88</title>
    <style>
      #outer {
        height: 350px;
        width: 1022px;
        background: #c6c6c6;
        padding: 15px;
        border-radius: 15px;
        margin: auto;
      }
      .row {
        height: 65px;
        width: 1022px;
        background: #cbcbcb;
        margin: 4px;
        line-height: 50px;
        text-align: center;
        font-family: arial;
        font-size: 18px;
      }
      .col {
        height: 55px;
        width: 60px;
        background: #f3f3f3;
        float: left;
        margin: 4px;
        border: 2px solid black;
        box-sizing: border-box;
        border-radius: 5px;
        line-height: 55px;
        cursor: pointer;
      }
      .col1 {
        height: 55px;
        width: 126px;
        background: #f3f3f3;
        float: left;
        margin: 4px;
        border: 2px solid black;
        box-sizing: border-box;
        border-radius: 5px;
        cursor: pointer;
      }
      .col2 {
        height: 55px;
        width: 92px;
        background: #f3f3f3;
        float: left;
        margin: 4px;
        border: 2px solid black;
        box-sizing: border-box;
        border-radius: 5px;
        cursor: pointer;
      }
      .col3 {
        height: 55px;
        width: 160px;
        background: #f3f3f3;
        float: left;
        margin: 4px;
        border: 2px solid black;
        box-sizing: border-box;
        border-radius: 5px;
        cursor: pointer;
      }
      .col4 {
        height: 55px;
        width: 437px;
        background: #f3f3f3;
        float: left;
        margin: 4px;
        border: 2px solid black;
        box-sizing: border-box;
        border-radius: 5px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div class="row">
        <div class="col">~</div>
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
        <div class="col">7</div>
        <div class="col">8</div>
        <div class="col">9</div>
        <div class="col">0</div>
        <div class="col">-</div>
        <div class="col">+</div>
        <div class="col1">Delete</div>
      </div>
      <div class="row">
        <div class="col2">Tab</div>
        <div class="col">Q</div>
        <div class="col">W</div>
        <div class="col">E</div>
        <div class="col">R</div>
        <div class="col">T</div>
        <div class="col">Y</div>
        <div class="col">U</div>
        <div class="col">I</div>
        <div class="col">O</div>
        <div class="col">P</div>
        <div class="col">[</div>
        <div class="col">]</div>
        <div class="col2">\</div>
      </div>
      <div class="row">
        <div class="col1">CapsLock</div>
        <div class="col">A</div>
        <div class="col">S</div>
        <div class="col">D</div>
        <div class="col">F</div>
        <div class="col">G</div>
        <div class="col">H</div>
        <div class="col">J</div>
        <div class="col">K</div>
        <div class="col">L</div>
        <div class="col">;</div>
        <div class="col">'</div>
        <div class="col1">Return</div>
      </div>
      <div class="row">
        <div class="col3">Shift</div>
        <div class="col">Z</div>
        <div class="col">X</div>
        <div class="col">C</div>
        <div class="col">V</div>
        <div class="col">B</div>
        <div class="col">N</div>
        <div class="col">M</div>
        <div class="col">,</div>
        <div class="col">.</div>
        <div class="col">/</div>
        <div class="col3">Shift</div>
      </div>
      <div class="row">
        <div class="col2">Ctrl</div>
        <div class="col">Alt</div>
        <div style="font-size: 14px" class="col2">Command</div>
        <div class="col4">Space</div>
        <div style="font-size: 14px" class="col2">Command</div>
        <div class="col">Alt</div>
        <div class="col">Ctrl</div>
        <div class="col">Fn</div>
      </div>
    </div>
  </body>
</html>

Ques 88. Print this ‘Ludo’ image on webpage using HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-88</title>
    <style>
      #outer {
        height: 758px;
        width: 758px;
        margin: auto;
        border: 4px solid black;
        box-sizing: border-box;
      }
      .row1 {
        height: 300px;
        width: 750px;
        /* border: 1px solid black; */
        box-sizing: border-box;
      }
      .row2 {
        height: 150px;
        width: 750px;
        /* border: 1px solid black; */
        box-sizing: border-box;
      }
      .col1 {
        height: 300px;
        width: 300px;
        border: 1px solid black;
        box-sizing: border-box;
        float: left;
        padding: 60px;
      }
      .col2 {
        height: 300px;
        width: 150px;
        /* border: 1px solid black; */
        box-sizing: border-box;
        float: left;
      }
      .col3 {
        height: 150px;
        width: 300px;
        /* border: 1px solid black; */
        box-sizing: border-box;
        float: left;
      }
      .col4 {
        height: 150px;
        width: 150px;
        border: 1px solid black;
        box-sizing: border-box;
        float: left;
      }
      .column1 {
        height: 180px;
        width: 180px;
        border: 1px solid black;
        box-sizing: border-box;
        background: white;
      }
      .column2 {
        height: 30px;
        width: 30px;
        border: 1px solid black;
        box-sizing: border-box;
        float: left;
        margin: 29px;
      }
      .column3 {
        height: 300px;
        width: 50px;
        /* border: 1px solid black; */
        box-sizing: border-box;
        float: left;
      }
      .rows{
        height: 50px;
        width: 50px;
        border: 1px solid black;
        box-sizing: border-box;
      }
      .rows1{
        height: 50px;
        width: 300px;
        /* border: 1px solid black; */
        box-sizing: border-box;
      }
      .sub-col{
        height: 50px;
        width: 50px;
        border: 1px solid black;
        box-sizing: border-box;
        float: left;
      }
      .mid{
        height: 0px;
        width: 0px;
        border-top: 75px solid #fede1a;
        border-right: 75px solid #53f145;
        border-bottom: 75px solid #2aaffc;
        border-left: 75px solid #ea1c26;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div class="row1">
        <div style="background: #ea1c26;" class="col1">
          <div class="column1">
            <div style="background: #ea1c26;" class="column2"></div>
            <div style="background: #ea1c26;" class="column2"></div>
            <div style="background: #ea1c26;" class="column2"></div>
            <div style="background: #ea1c26;" class="column2"></div>
          </div>
        </div>
        <div class="col2">
          <div class="column3">
            <div class="rows"></div>
            <div class="rows"></div>
            <div class="rows"></div>
            <div class="rows"></div>
            <div class="rows"></div>
            <div class="rows"></div>
          </div>
          <div style="background: #fede1a;" class="column3">
            <div style="background: white;" class="rows"></div>
            <div class="rows"></div>
            <div class="rows"></div>
            <div class="rows"></div>
            <div class="rows"></div>
            <div  class="rows"></div>
          </div>
          <div class="column3">
            <div class="rows"></div>
            <div style="background: #fede1a;" class="rows"></div>
            <div class="rows"></div>
            <div class="rows"></div>
            <div class="rows"></div>
            <div class="rows"></div>
          </div>
        </div>
        <div style="background: #fede1a;" class="col1">
          <div class="column1">
            <div style="background: #fede1a;" class="column2"></div>
            <div style="background: #fede1a;" class="column2"></div>
            <div style="background: #fede1a;" class="column2"></div>
            <div style="background: #fede1a;" class="column2"></div>
          </div>
        </div>
      </div>
      <div class="row2">
        <div class="col3">
          <div class="rows1">
            <div class="sub-col"></div>
            <div style="background: #ea1c26;" class="sub-col"></div>
            <div class="sub-col"></div>
            <div class="sub-col"></div>
            <div class="sub-col"></div>
            <div class="sub-col"></div>
          </div>
          <div style="background: #ea1c26;" class="rows1">
            <div style="background: white;"  class="sub-col"></div>
            <div class="sub-col"></div>
            <div class="sub-col"></div>
            <div class="sub-col"></div>
            <div class="sub-col"></div>
            <div class="sub-col"></div>
          </div>
          <div class="rows1">
            <div class="sub-col"></div>
            <div class="sub-col"></div>
            <div class="sub-col"></div>
            <div class="sub-col"></div>
            <div class="sub-col"></div>
            <div class="sub-col"></div>
          </div>
        </div>
        <div class="col4">
          <div class="mid">
            <hr style="background: black; width: 210px; height: 1px; transform: rotate(45deg); position: relative; right: 105px; bottom: 10px;">
            <hr style="background: black; width: 210px; height: 1px; transform: rotate(135deg); position: relative; right: 106px; bottom: 18px;">
          </div>
        </div>
        <div class="col3">
          <div class="rows1">
            <div class="sub-col"></div>
            <div class="sub-col"></div>
            <div class="sub-col"></div>
            <div class="sub-col"></div>
            <div class="sub-col"></div>
            <div class="sub-col"></div>
          </div>
          <div style="background: #53f145;" class="rows1">
            <div  class="sub-col"></div>
            <div  class="sub-col"></div>
            <div  class="sub-col"></div>
            <div  class="sub-col"></div>
            <div  class="sub-col"></div>
            <div style="background: white;" class="sub-col"></div>
          </div>
          <div class="rows1">
            <div class="sub-col"></div>
            <div class="sub-col"></div>
            <div class="sub-col"></div>
            <div class="sub-col"></div>
            <div style="background: #53f145;" class="sub-col"></div>
            <div class="sub-col"></div>
          </div>
        </div>
      </div>
      <div class="row1">
        <div style="background: #2aaffc;" class="col1">
          <div class="column1">
            <div style="background: #2aaffc;" class="column2"></div>
            <div style="background: #2aaffc;" class="column2"></div>
            <div style="background: #2aaffc;" class="column2"></div>
            <div style="background: #2aaffc;" class="column2"></div>
          </div>
        </div>
        <div class="col2">
          <div class="column3">
            <div class="rows"></div>
            <div  class="rows"></div>
            <div class="rows"></div>
            <div class="rows"></div>
            <div style="background: #2aaffc;" class="rows"></div>
            <div class="rows"></div>
          </div>
          <div style="background: #2aaffc;" class="column3">
            <div class="rows"></div>
            <div class="rows"></div>
            <div class="rows"></div>
            <div class="rows"></div>
            <div class="rows"></div>
            <div style="background: white;" class="rows"></div>
          </div>
          <div class="column3">
            <div class="rows"></div>
            <div class="rows"></div>
            <div class="rows"></div>
            <div class="rows"></div>
            <div class="rows"></div>
            <div class="rows"></div>
          </div>
        </div>
        <div style="background: #53f145;" class="col1">
          <div class="column1">
            <div style="background: #53f145;" class="column2"></div>
            <div style="background: #53f145;" class="column2"></div>
            <div style="background: #53f145;" class="column2"></div>
            <div style="background: #53f145;" class="column2"></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Ques 89. Print this ‘Calculator’ image on webpage using HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-89</title>
    <style>
      #outer {
        height: 490px;
        width: 480px;
        background: #90bfd9;
        margin: auto;
        padding: 40px 75px;
      }
      #box {
        height: 490px;
        width: 480px;
        text-align: center;
        font-size: 34px;
        font-family: arial;
        line-height: 70px;
      }
      #row1 {
        height: 140px;
        width: 480px;
        background: black;
        color: white;
        font-size: 65px;
        line-height: 140px;
        text-align: right;
        padding-right: 45px;
        box-sizing: border-box;
        border-radius: 20px 20px 0px 0px;
      }
      #row2 {
        height: 70px;
        width: 480px;
        background: #eaeaea;
        border-radius: 20px;
        cursor: pointer;
      }
      #row3 {
        height: 280px;
        width: 480px;
        cursor: pointer;
      }
      .col1 {
        height: 70px;
        width: 120px;
        background: #eaeaea;
        border: 1px solid #a4a4a4;
        border-bottom: none;
        float: left;
        box-sizing: border-box;
      }
      .col2 {
        height: 280px;
        width: 360px;
        float: left;
      }
      .col3 {
        height: 280px;
        width: 120px;
        background: linear-gradient(#ff8157, #fe732e);
        float: left;
        box-sizing: border-box;
        line-height: 280px;
      }
      .col4 {
        height: 280px;
        width: 120px;
        float: left;
        box-sizing: border-box;
      }
      .row {
        height: 70px;
        width: 120px;
        background: white;
        border: 1px solid #a4a4a4;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="box">
        <div id="row1">0</div>
        <div id="row2">
          <div class="col1">+</div>
          <div class="col1">-</div>
          <div class="col1">×</div>
          <div class="col1">÷</div>
        </div>
        <div id="row3">
          <div class="col2">
            <div class="col4">
              <div class="row">7</div>
              <div class="row">4</div>
              <div class="row">1</div>
              <div style="border-bottom-left-radius: 15px" class="row">0</div>
            </div>
            <div class="col4">
              <div class="row">8</div>
              <div class="row">5</div>
              <div class="row">2</div>
              <div class="row">.</div>
            </div>
            <div class="col4">
              <div class="row">9</div>
              <div class="row">6</div>
              <div class="row">3</div>
              <div class="row">AC</div>
            </div>
          </div>
          <div style="border-bottom-right-radius: 15px" class="col3">=</div>
        </div>
      </div>
    </div>
  </body>
</html>

Ques 90. Use of ‘transition’ and ‘filter’ property of CSS.

<html>
  <head>
    <title>HTML-CSS-90</title>
    <style>
      #outer {
        height: 600px;
        width: 1200px;
        border: 1px solid black;
        margin: auto;
      }
      .row {
        height: 300px;
        width: 1200px;
      }
      .col {
        height: 250px;
        width: 350px;
        background: yellow;
        background-size: 100% 100%;
        float: left;
        margin: 25px;
        border-radius: 10px;
        padding: 10px;
        box-sizing: border-box;
        transition: 1s;
      }
      .col:hover {
        box-shadow: 0px 0px 30px 1px black;
        background: white;
        transition: 1s;
        filter: grayscale(100%);
      }
      /* Compound Selector */
      .col img {
        height: 100%;
        width: 100%;
        border: 5px groove grey;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div class="row">
        <div class="col"><img src="https://m.media-amazon.com/images/I/919CYVCW9DL._SL1500_.jpg" /></div>
        <div class="col"><img src="https://helios-i.mashable.com/imagery/articles/07qq37eojstGL0ikZFRGijA/hero-image.fill.size_1248x702.v1668506840.jpg" /></div>
        <div class="col"><img src="https://cdn-0.franticallyspeaking.com/wp-content/uploads/2019/10/body-l-1536x1017.jpeg" /></div>
      </div>
      <div class="row">
        <div class="col"><img src="https://media.getmyuni.com/assets/images/articles/53e2pmaon2besrpe19wec2i1ms-56t2-4g-.jpg" /></div>
        <div class="col"><img src="https://scooparticle.com/wp-content/uploads/2020/08/afterfocus_1532691794409.jpg" /></div>
        <div class="col"><img src="https://m.media-amazon.com/images/I/716IVrK0J9L._AC_SL1500_.jpg" /></div>
      </div>
    </div>
  </body>
</html>

Ques 91. Print this ‘calculator’ using HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-91</title>
    <style>
      #box {
        min-height: 450px;
        width: 350px;
        background: rgb(255, 186, 255);
        border-radius: 5px;
        margin: 40px auto;
        transition: 2s;
      }
      #box:hover {
        box-shadow: 10px 10px 10px brown;
        transition: 2s;
      }
      #top {
        height: 100px;
        width: 350px;
        padding: 22px;
        box-sizing: border-box;
      }
      #bottom {
        height: 350px;
        width: 350px;
      }
      #top input {
        height: 100%;
        width: 100%;
        text-align: right;
        font-size: 40px;
        border: none;
        border-radius: 5px;
        box-shadow: 0px 0px 10px grey inset;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
      }
      .col {
        height: 350px;
        width: 87.5px;
        float: left;
      }
      .row {
        height: 67.5px;
        width: 67.5px;
        background: white;
        float: left;
        box-sizing: border-box;
        margin: 10px;
        border-radius: 5px;
        text-align: center;
        line-height: 65px;
        font-size: 30px;
        font-family: cursive;
        box-shadow: 0px 0px 15px rgb(173, 173, 173);
        cursor: pointer;
      }
      .row:hover {
        height: 67.5px;
        width: 67.5px;
        background: rgb(199, 0, 0);
        color: white;
      }
      .bgcolor {
        background: rgb(199, 0, 0);
        color: white;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div id="top">
        <input type="number" value="0" readonly />
      </div>
      <div id="bottom">
        <div class="col">
          <div class="row">1</div>
          <div class="row">2</div>
          <div class="row">3</div>
          <div class="row">+</div>
        </div>
        <div class="col">
          <div class="row">4</div>
          <div class="row">5</div>
          <div class="row">6</div>
          <div class="row">-</div>
        </div>
        <div class="col">
          <div class="row">7</div>
          <div class="row">8</div>
          <div class="row">9</div>
          <div class="row">X</div>
        </div>
        <div class="col">
          <div class="row">0</div>
          <div class="row">%</div>
          <div class="row bgcolor">AC</div>
          <div class="row">=</div>
        </div>
      </div>
    </div>
  </body>
</html>

Ques 92. Design this ‘Login Form’ with background gradient-color using HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-92</title>
    <style>
      body {
        background: linear-gradient(45deg, blue, rgb(65, 255, 65));
      }
      #box {
        min-height: 300px;
        width: 450px;
        background: white;
        margin: 110px auto;
        border-radius: 9px;
        font-family: arial;
        padding: 30px;
        box-sizing: border-box;
        transition: 1s;
      }
      #box:hover {
        box-shadow: 0px 0px 0px 15px rgba(255, 255, 255, 0.8),
          0px 0px 0px 30px rgba(255, 255, 255, 0.6),
          0px 0px 0px 45px rgba(255, 255, 255, 0.4),
          0px 0px 0px 30px rgba(255, 255, 255, 0.6),
          0px 0px 20px 60px rgba(255, 255, 255, 0.2);
        transition: 1s;
        background: rgba(0, 0, 0, 0.2);
        color: white;
      }
      .h {
        font-size: 30px;
        text-align: center;
      }
      .t {
        height: 55px;
        width: 100%;
        background: rgb(207, 206, 206);
        border: none;
        margin-bottom: 10px;
        border-radius: 10px;
        font-size: 22px;
        padding-left: 15px;
        box-sizing: border-box;
      }
      .b {
        height: 55px;
        width: 100%;
        background: linear-gradient(45deg, blue, rgb(65, 255, 65));
        border: none;
        border-radius: 10px;
        color: white;
      }
      ::placeholder {
        color: grey;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div class="h">LOGIN <b style="color: blue">FORM..</b></div>
      <div style="text-align: center">
        Welcome to Indian Students Admin Login
      </div>
      <br />
      <form>
        <input type="email" class="t" placeholder="USERNAME" /><br />
        <input type="password" class="t" placeholder="PASSWORD" /><br />
        <input type="submit" class="b" value="LOGIN" />
      </form>
    </div>
  </body>
</html>

Ques 93. Design this simple form with a image in using HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-93</title>
    <style>
      body {
        background: linear-gradient(to right, #0e78e3, #06b6ee);
      }
      #outer {
        min-height: 620px;
        width: 1000px;
        background: white;
        margin: auto;
        border-radius: 8px;
        font-family: arial;
        font-weight: bold;
      }
      .col1 {
        min-height: 620px;
        width: 500px;
        float: left;
        padding: 170px 120px;
        box-sizing: border-box;
      }
      .col2 {
        min-height: 620px;
        width: 500px;
        float: left;
        padding: 55px;
        box-sizing: border-box;
      }
      input {
        height: 50px;
        width: 100%;
        border-radius: 40px;
        margin-bottom: 20px;
        background: #e5e5e5;
        color: #b6b6b6;
        border: none;
        padding-left: 30px;
        box-sizing: border-box;
        font-weight: bold;
        font-size: 15px;
      }
      button {
        height: 55px;
        width: 50%;
        border-radius: 40px;
        background: #58b646;
        color: white;
        border: none;
         padding-left: 30px;
        box-sizing: border-box;
        font-weight: bold;
        font-size: 15px;
        margin-left: 30%;
        cursor: pointer;
      }
      #text {
        font-size: 25px;
        text-align: center;
        margin-bottom: 30px;
      }
      textarea {
        height: 150px;
        width: 100%;
        border-radius: 30px;
        margin-bottom: 20px;
        background: #e5e5e5;
        color: #b6b6b6;
        border: none;
        padding-left: 30px;
        padding-top: 20px;
        box-sizing: border-box;
        font-weight: bold;
        font-size: 18px;
      }
      img{
        height: 300px;
        width: 300px;
      }
      ::placeholder{
        color: #b6b6b6;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div class="col1">
        <img src="https://shubhampal.co.in/wp-content/uploads/2023/10/email.png">
      </div>
      <div class="col2">
        <div id="text">Get in touch</div>
        <form method="post" enctype="multipart/form-data" autocomplete="off">
          <input type="text" placeholder="Name" />
          <br />
          <input type="email" placeholder="Email" />
          <br />
          <input type="text" placeholder="Subject" />
          <br />
          <textarea
            cols="30"
            rows="10"
            style="resize: none"
            placeholder="Message"
          ></textarea>
          <button type="submit">
            Send Email <b style="font-size: 20px"> →</b>
          </button>
        </form>
      </div>
    </div>
  </body>
</html>

Ques 94. Design this ‘Contact Us Form’ using HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-94</title>
    <style>
      body {
        background: linear-gradient(to right, #ba34a7, #662bab);
      }
      #outer {
        height: 600px;
        width: 600px;
        background: #27262e;
        margin: auto;
        border-radius: 8px;
        font-family: arial;
        color: white;
        padding: 45px;
        padding-top: 30px;
        box-sizing: border-box;
      }
      .text {
        color: white;
        text-align: center;
        font-size: 30px;
        margin-bottom: 35px;
      }
      label {
        color: white;
      }
      span {
        color: red;
      }
      input {
        height: 35px;
        width: 100%;
        border-radius: 20px;
        margin: 8px 0px;
        margin-bottom: 42px;
        background: #e6e6e6;
        border: none;
        padding-top: 2px;
        padding-left: 15px;
        box-sizing: border-box;
      }
      textarea {
        resize: none;
        height: 80px;
        width: 100%;
        border-radius: 20px;
        background: #e6e6e6;
        border: none;
        margin: 8px 0px;
        padding-top: 10px;
        padding-left: 15px;
        box-sizing: border-box;
      }
      .name {
        height: 35px;
        width: 94%;
        margin: 8px 5px;
        margin-bottom: 4px;
        border: none;
      }
      .btn {
        background: #e80f5d;
        color: white;
        width: 20%;
        margin: 50px 40%;
        margin-bottom: 35px;
        cursor: pointer;
      }
      .row {
        min-height: 35;
        width: 100%;
        background: red;
        margin-bottom: 42px;
      }
      .col {
        min-height: 35px;
        width: 50%;
        background: #27262e;
        float: left;
      }
      .bottom {
        margin-top: 20px;
        margin-left: 15px;
        color: white;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div class="text">Contact Us</div>
      <form method="post" enctype="multipart/form-data" autocomplete="off">
        <label>Full name <span>*</span></label>
        <br />
        <div class="row">
          <div class="col">
            <input type="text" class="name" /> <span class="bottom">First</span>
          </div>
          <div class="col">
            <input type="text" class="name" /> <span class="bottom">Last</span>
          </div>
        </div>
        <br />
        <label for="mail">Email <span>*</span></label>
        <br />
        <input type="email" id="mail" />
        <br />
        <label>Leave us a few words <span>*</span></label>
        <br />
        <textarea></textarea>
        <br />
        <input type="submit" class="btn" />
      </form>
    </div>
  </body>
</html>

Ques 95. Design this ‘Registration Form’ using HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-95</title>
    <style>
      body {
        background: linear-gradient(135deg, #4071f4, #4071f4);
      }
      #outer {
        min-height: 100%px;
        width: 100%;
        background: linear-gradient(135deg, #4071f4, #4071f4);
      }
      #inner1 {
        min-height: 100%px;
        width: 50%;
        float: left;
        padding-left: 100px;
        box-sizing: border-box;
      }
      #inner2 {
        min-height: 100%px;
        width: 50%;
        float: left;
      }
      .box1 {
        min-height: 560px;
        width: 450px;
        background: white;
        border-radius: 8px;
        font-family: arial;
        box-shadow: 0px 0px 10px 1px rgb(120, 120, 120);
        margin: auto;
        padding: 40px 35px;
        box-sizing: border-box;
      }
      .box2 {
        min-height: 560px;
        width: 600px;
        font-family: arial;
        margin: auto;
        padding: 100px 0px;
        box-sizing: border-box;
        color: white;
      }
     .text {
        font-size: 110px;
        font-family: arial;
        font-weight: bold;
      }
      .heading{
        font-size: 25px;
        font-family: arial;
        font-weight: bold;
        margin-bottom: 100px;
      }
      .input{
        height: 45px;
        width: 100%;
        border: 1px solid grey;
        margin: 13px 0px;
        padding-left: 15px;
        box-sizing: border-box;
        border-bottom: 2px solid rgb(171, 171, 171);
        font-weight: bold;
        color: rgb(171, 171, 171);
        border-radius: 5px;
      }
      ::placeholder{
        color: rgb(171, 171, 171);
      }
      .btn{
        background: #4071f4;
        color: white;
        font-size: 16px;
        cursor: pointer;
        margin: 25px 0px;
      }
      .small-text{
        text-align: center;
        margin: 10px 50px;
      
      }
      a{
        text-decoration: none;
       color: #4071f4;
       cursor: pointer;
      }
      .check{
        color: rgb(116, 116, 116);
      }
      .name{
        margin-top: 30px;
      }
      hr{
       background: #4071f4;
       height: 3px;
       width: 32px;
       float: left;
       margin: 0px;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div id="inner1">
        <div class="box1">
          <span class="heading">Registration</span>
          <br>
          <hr>
          <form method="post" enctype="multipart/form-data" autocomplete="off">
            <input class="input name" type="text" placeholder="Enter your name">
            <br>
            <input  class="input" type="email" placeholder="Enter your email">
            <br>
            <input  class="input" type="password" placeholder="Create password">
            <br>
            <input  class="input" type="password" placeholder="Confirm password">
            <br>
            <input type="checkbox"><span class="check"> I accept all terms & conditions</span>
            <br>
            <input type="submit" class="input btn" value="Register Now">
            <br>
            <span class="small-text">Already have an account? <a href="google.com">Login now<a></span>
          </form>
        </div>
      </div>
      <div id="inner2">
        <div class="box2">
          <span class="text">Beautiful Sign Up Form</span>
        </div>
      </div>
    </div>
  </body>
</html>

Ques 96. Design this professional login form using HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-96</title>
    <style>
      body {
        background: linear-gradient(to right, #a843b0, #f5439b);
      }
      #outer {
        min-height: 100%px;
        width: 100%;
        background: linear-gradient(to right, #a843b0, #f5439b);
      }
      .box1 {
       height: 520px;
        width: 420px;
        background: white;
        border-radius: 8px;
        font-family: arial;
        box-shadow: 0px 0px 10px 1px rgb(120, 120, 120);
        margin: auto;
        padding: 40px 35px;
        box-sizing: border-box;
      }
     .text {
        font-size: 110px;
        font-family: arial;
        font-weight: bold;
      }
      .heading{
        font-size: 40px;
        font-family: arial;
        font-weight: bold;
        margin: 0px 60px;
      }
      .input{
        height: 50px;
        width: 100%;
        border: 1px solid grey;
        margin: 13px 0px;
        padding-left: 15px;
        box-sizing: border-box;
        border-bottom: 2px solid rgb(171, 171, 171);
        font-weight: bold;
        color: rgb(171, 171, 171);
        border-radius: 5px;
        font-size: 16px;
      }
      ::placeholder{
        color: rgb(171, 171, 171);
      }
      .btn{
        background: linear-gradient(to right, #a843b0, #f5439b);
        color: white;
        font-size: 16px;
        cursor: pointer;
        margin: 25px 0px;
        width: 100%;
        border: none;
      }
      .btn1{
        background: linear-gradient(to right, #a843b0, #f5439b);
        color: white;
        font-size: 16px;
        cursor: pointer;
        margin: 25px 0px;
        width: 50%;
        border: none;
        
      }
      .btn2{
        background: white;
        color: black;
        font-size: 16px;
        cursor: pointer;
        margin: 25px 0px;
        width: 50%;
        border: 1px solid rgb(116, 116, 116);
      }
      .small-text{
        text-align: center;
        margin: 0px 80px;
      }
      a{
        text-decoration: none;
       color:#f5439b;
       cursor: pointer;
      }
      .name{
        margin-top: 30px;
      }
    </style>
  </head>
  <body>
    <div id="outer">
        <div class="box1">
          <span class="heading">Login Form</span>
          <br>
          <form method="post" enctype="multipart/form-data" autocomplete="off">
            <input  class="input btn1" type="submit" value="Login"><input class="input btn2" type="submit" value="Signup">
            <br>
            <input  class="input" type="email" placeholder="Email Address">
            <br>
            <input  class="input" type="password" placeholder="Password">
            <br>
           <span class="check"><a class="forgot" href="google.com">Forgot password?</a></span>
            <br>
            <input type="submit" class="input btn" value="Login">
            <br>
            <span class="small-text">Not a member? <a href="google.com">Signup now<a></span>
          </form>
        </div>
    </div>
  </body>
</html>

Ques 97. Design this simple contact form using HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-97</title>
    <style>
      body {
        background: #ac068c;
      }
      #outer {
        min-height: 100%px;
        width: 100%;
        background: #ac068c;
      }
      .box1 {
        height: 555px;
        width: 385px;
        background: white;
        border-radius: 20px;
        font-family: arial;
        box-shadow: 0px 0px 10px 1px rgb(120, 120, 120);
        margin: auto;
        padding: 40px 25px;
        box-sizing: border-box;
      }
      .text {
        font-size: 110px;
        font-family: arial;
        font-weight: bold;
      }
      .heading {
        font-size: 30px;
        font-family: arial;
      }
      .input {
        height: 50px;
        width: 100%;
        color: rgb(171, 171, 171);
        margin: 12px 0px;
        box-sizing: border-box;
        border: none;
        border-bottom: 2px solid #e0e0e0;
        font-size: 16px;
      }
      textarea {
        height: 50px;
        width: 100%;
        box-sizing: border-box;
        border: none;
        border-bottom: 2px solid #e0e0e0;
        color: rgb(171, 171, 171);
        font-size: 16px;
        resize: none;
        font-family: arial;
        margin: 15px 0px;
        margin-top: 0px;
      }
      ::placeholder {
        color: rgb(171, 171, 171);
      }
      .btn {
        height: 40px;
        background: #e92452;
        color: white;
        font-size: 16px;
        cursor: pointer;
        margin: 25px 0px;
        width: 100%;
        border: none;
        border-radius: 50px;
      }
      .small-text {
        text-align: center;
        font-size: 18px;
        letter-spacing: 1px;
        word-spacing: 1px;
      }
      a {
        text-decoration: none;
        color: #f5439b;
        cursor: pointer;
      }
      .name {
        margin-top: 30px;
      }
      .radio {
        margin: 15px 0px;
        margin-bottom: 25px;
      }
      .top {
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div class="box1">
        <span class="heading">Contact Us</span>
        <br />
        <form method="post" enctype="multipart/form-data" autocomplete="off">
          <input class="input top" type="text" placeholder="Name" />
          <br />
          <input class="input" type="email" placeholder="Email" />
          <br />
          <input class="input" type="number" placeholder="Phone" />
          <br />
          <span class="small-text"
            >Preffered method of communication
            <br />
            <input class="radio" type="radio" name="contact" /> Email
            <input class="radio" type="radio" name="contact" /> Phone
          </span>
          <br />
          <textarea rows="1" placeholder="Message"></textarea>
          <br />
          <input type="submit" class="input btn" value="Submit" />
        </form>
      </div>
    </div>
  </body>
</html>

Ques 98. Design this professional registration form using HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-98</title>
    <style>
      body {
        background: linear-gradient(135deg, #72b7e1, #9b5bb2);
      }
      #outer {
        min-height: 500px;
        width: 750px;
        background: linear-gradient(135deg, #72b7e1, #9b5bb2);
        background: white;
        border-radius: 8px;
        font-family: arial;
        box-shadow: 0px 0px 10px 1px rgb(120, 120, 120);
        margin: auto;
        box-sizing: border-box;
        padding: 20px 20px;
      }
      #inner1 {
        min-height: 280px;
        width: 50%;
        float: left;
        padding: 10px;
        box-sizing: border-box;
        margin-top: 10px;
      }
      #inner2 {
        margin-top: 10px;
        min-height: 280px;
        width: 50%;
        float: left;
        padding: 10px;
        box-sizing: border-box;
      }
     .text {
        font-size: 110px;
        font-family: arial;
        font-weight: bold;
      }
      .heading{
        font-size: 25px;
        font-family: arial;
        font-weight: bold;
        margin: 10px;
      }
      .input{
        height: 45px;
        width: 100%;
        border: 1px solid grey;
        margin: 13px 0px;
        padding-left: 15px;
        box-sizing: border-box;
        border-bottom: 2px solid rgb(171, 171, 171);
        font-weight: bold;
        color: rgb(171, 171, 171);
        border-radius: 5px;
      }
      ::placeholder{
        color: rgb(171, 171, 171);
      }
      .btn{
        background: linear-gradient(135deg, #72b7e1, #9b5bb2);
        color: white;
        font-size: 16px;
        cursor: pointer;
        margin: 50px 0px;
      }
      .small-text{
        text-align: center;
        margin: 10px 50px;
      
      }
      .check{
        color: rgb(116, 116, 116);
      }
      .name{
        margin-top: 30px;
      }
      hr{
       background: #4071f4;
       height: 3px;
       width: 32px;
       margin-left: 10px;
       margin-top: 0px;
      }
      .gen{
        font-size: 20px;
        margin-left: 10px;
        margin-bottom: 20px;
      }
      .radio{
        margin-left: 15%;
        accent-color: red;
      }
      .first-gen{
        margin-left: 2%;
        accent-color: red;
      }
        
    </style>
  </head>
  <body>
    <div id="outer">
      <div>       
         <span class="heading">Registration</span>
        <br>
        <hr></div>

      <form method="post" enctype="multipart/form-data" autocomplete="off">
      <div id="inner1">
        <div class="box1">
        
          <label for="fullname">Full Name</label>
             <input class="input" type="text" id="fullname" placeholder="Enter your name">
            <br>
            <label for="mail">Email</label>
            <input  class="input" type="email" placeholder="Enter your email">
            <br>
            <label for="cpass">Password</label>
          <input  class="input" type="password" id="cpass" placeholder="Enter your password">
       </div>
      </div>
      <div id="inner2">
        <div class="box2">
          <label for="user">Username</label>
          <input class="input" type="text" id="user" placeholder="Enter your username">
          <br>
          <label for="num">Phone Number</label>
          <input  class="input" type="number" is="num" placeholder="Enter your number">
          <br>
          <label for="cpass">Confirm Password</label>
          <input  class="input" type="password" id="cpass" placeholder="Confirm your password">
        </div>
      </div>
    <div><label for="gender" class="gen">Gender</label>
      <br><br>
      <input type="radio" name="gender" class="first-gen"> Male <input type="radio" name="gender" class="radio"> Female <input type="radio" name="gender" class="radio"> Prefer not to say<br>
      <input type="submit" class="input btn" value="Register">
    </div>
  </form>
    </div>
  </body>
</html>

Ques 99. Design this simple registration form using HTML-CSS.

<html>

<head>
  <title>HTML-CSS-99</title>
  <style>
    #outer {
      height: 500px;
      width: 500px;
      border: 4px solid #d6dce1;
      box-sizing: border-box;
      margin: auto;
      font-family: arial;
      padding: 0px 95px;
    }

    .heading {
      margin: 0px 30%;
      font-size: 30px;
      line-height: 50px;
      font-weight: bold;
    }

    .text {
      margin: 10px 12%;
      font-size: 15px;
      line-height: 60px;
    }
    label{
      font-size: 16px;
      font-weight: bold;
    }
    input{
      height: 32px;
      width: 100%;
      background: #e2e2e2;
      color: #8c8c95;
      border: none;
      border-radius: 3px;
      padding-left: 5px;
      box-sizing: border-box;
      margin-bottom: 18px;
    }
    ::placeholder{
      color: #8c8c95;
    }
    .btn{
      height: 40px;
      background: #4610ea;
      color: white;
      font-size: 16px;
      margin-bottom: 5px;
      cursor: pointer;
    }
    .text1{
      margin: 5px 12%;
      font-size: 15px;
      line-height: 50px;
    }
    a{
      cursor: pointer;
    }
  </style>
</head>
<body>
    <div id="outer">
      <span class="heading">
        Register
      </span>
      <br>
      <span class="text">
        Kindly fill in this form to register
      </span>
      <form method="post" enctype="multipart/form-data" autocomplete="off">
        <label for="name">Username</label>
        <br>
        <input type="text" id="name" placeholder="Enter username">
        <br>
        <label for="mail">Email</label>
        <br>
        <input type="email" id="mail" placeholder="Enter email">
        <br>
        <label for="pass">Password</label>
        <br>
        <input type="password" id="pass" placeholder="Enter password">
        <br>
        <label for="repass">Repeat Password</label>
        <br>
        <input type="password" id="repass" placeholder="Repeat password">
        <br>
        <input type="submit" class="btn" value="Register">
        <br>
        <span class="text1">Already have an account? <a href="google.com">Log in</a></span>
        </form>
    </div>
  </body>
</html>

Ques 100. Design this simple form using HTML-CSS.

<html>

<head>
  <title>HTML-CSS-100</title>
  <style>
    body {
      background: #933ce1;
    }

    #outer {
      height: 380px;
      width: 400px;
      box-sizing: border-box;
      margin: auto;
      font-family: arial;
      padding: 60px 50px;
      background: white;
    }

    label {
      font-size: 16px;
      font-weight: bold;
    }

    input {
      height: 45px;
      width: 100%;
      background: #e2e2e2;
      color: #8c8c95;
      border: none;
      padding-left: 15px;
      box-sizing: border-box;
      margin-bottom: 18px;
    }

    ::placeholder {
      color: #8c8c95;
    }

    .btn {
      height: 45px;
      background: #933ce1;
      color: white;
      font-size: 16px;
      margin-bottom: 5px;
      cursor: pointer;
    }

    .text1 {
      margin: 5px 18%;
      font-size: 15px;
      line-height: 50px;
    }

    a {
      cursor: pointer;
      text-decoration: none;
      color: #933ce1;
    }
  </style>
</head>
<body>
    <div id="outer">
      <form method="post" enctype="multipart/form-data" autocomplete="off">
        <input type="text" id="name" placeholder="username">
        <br>
        <input type="password" id="pass" placeholder="password">
        <br>
        <input type="email" id="mail" placeholder="email address">
        <br>
        <input type="submit" class="btn" value="CREATE">
        <br>
        <span class="text1">Already registered? <a href="google.com">Sign in</a></span>
      </form>
    </div>
  </body>
</html>

Ques 101. Design this attractive login form using HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-101</title>
    <style>
      #outer {
        height: 550px;
        width: 450px;
        box-shadow: 0px 0px 10px 1px rgb(120, 120, 120);
        margin: auto;
        border-radius: 20px;
        font-family: arial;
        box-sizing: border-box;
      }
      .row1 {
        height: 130px;
        width: 450px;
        background: linear-gradient(45deg, #4552c5, #c350c2);
        border-radius: 20px 20px 0px 0px;
        color: white;
        text-align: center;
        line-height: 130px;
        font-size: 22px;
        box-sizing: border-box;
      }
      .row2 {
        min-height: 420px;
        width: 450px;
        border-radius: 0px 0px 20px 20px;
        box-sizing: border-box;
        padding: 40px 40px;
      }
      .input {
        height: 55px;
        width: 100%;
        color: #bdbdbd;
        padding-left: 15px;
        box-sizing: border-box;
        margin-bottom: 18px;
        border-radius: 50px;
        font-size: 20px;
        border: 2px solid #dbdbdb;
      }
      .btn {
        height: 55px;
        width: 100%;
        background: linear-gradient(45deg, #4552c5, #c350c2);
        color: white;
        font-size: 22px;
        border: none;
        margin-bottom: 5px;
        cursor: pointer;
        border-radius: 50px;
        font-weight: bold;
      }
      ::placeholder {
        color: #b5b5b5;
      }

      .text1 {
        margin: 5px 20%;
        font-size: 16px;
        line-height: 50px;
      }
      .forgot {
        float: right;
        font-size: 20px;
      }
      a {
        text-decoration: none;
      }
      .check {
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div class="row1">
        <h1>Login Form</h1>
      </div>
      <div class="row2">
        <form method="post" enctype="multipart/form-data" autocomplete="off">
          <input class="input" type="email" placeholder="Email Address" /><br />
          <input class="input" type="password" placeholder="Password" /><br />
          <input type="checkbox" /><span class="check"> Remember me</span>
          <a class="forgot" href="google.com">Forgot password?</a> <br />
          <br />
          <br />
          <input type="submit" class="btn" value="Login" />
          <br />
          <br />
          <span class="text1"
            >Not a memeber? <a href="google.com">Signup now</a></span
          ><br />
        </form>
      </div>
    </div>
  </body>
</html>

Ques 102. Use of ‘position’ property in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-102</title>
    <style>
      img {
        height: 150px;
        width: 200px;
        /* position: static; */
        /* position: absolute; */
        /* position: relative; */
        /* position: fixed; */
        position: sticky;
        top: 20px;
       left: 20px;
      }
    </style>
  </head>
  <body>
    exercitationem repudiandae nobis laboriosam consequuntur illo eveniet
    blanditiis quae nesciunt sint, quos natus iste quasi doloribus incidunt?
    Soluta, nobis quo. Sapiente repellat mollitia sed eos. Tenetur placeat fuga
    numquam est quo sit magni expedita praesentium ea excepturi mollitia cum,
    iure, laudantium, omnis nulla? Itaque nihil beatae, necessitatibus nulla
    laboriosam architecto suscipit dolorem id esse, laudantium possimus, ullam
    cumque accusantium pariatur ab ex minus quibusdam libero a ducimus
    reprehenderit ipsam neque. Fugiat, quibusdam. Tempore natus, alias nesciunt,
    numquam cum sapiente perferendis odio nisi aspernatur quam, blanditiis
    beatae modi quo laudantium atque velit doloribus consectetur aut assumenda
    fuga? Fugit ipsam laborum doloribus ab mollitia, deleniti saepe veritatis.
    Ipsam molestias voluptate nihil explicabo. In, quidem doloribus fuga
    <br>
    <img src="https://cdn.pixabay.com/photo/2016/04/04/14/12/monitor-1307227_1280.jpg" />
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Unde commodi
    officiis quo quidem vel autem culpa, minima asperiores, obcaecati soluta
    doloremque ipsa non ex corrupti. Architecto dolorum quisquam assumenda quo
    suscipit illum autem voluptatem praesentium perspiciatis laboriosam aperiam
    omnis explicabo distinctio, corporis nam enim ratione ullam placeat
    accusamus repellat blanditiis consequuntur et eius exercitationem. Quibusdam
    quas deleniti error quae vitae voluptatibus numquam, possimus, cupiditate
    similique placeat id incidunt consequuntur tempora nesciunt iusto quo atque
    ipsa nemo! Ad, atque! Inventore error molestias facilis officia eaque veniam
    ipsa blanditiis cupiditate iure minima? Soluta exercitationem autem unde
    corporis molestiae, officiis voluptate sint consectetur nostrum? Beatae
    excepturi dolor quaerat repellendus saepe? Quasi nesciunt provident
    accusamus ut! Illum mollitia expedita voluptatum libero, quibusdam fuga,
    suscipit reprehenderit est dolorem sapiente accusamus. Saepe cum nobis unde
    itaque corporis possimus nesciunt repudiandae optio, error quod cumque
    beatae ad dolor quia? Incidunt provident consequatur saepe doloribus sed
    rerum dolores modi similique illo quibusdam maiores minus corporis placeat
    ipsam exercitationem, magnam quidem veritatis sequi ratione quaerat tenetur
    deserunt vero. Minima officia similique facilis obcaecati ex, assumenda
    natus laboriosam nemo non in facere, ea ratione maxime ipsa corrupti, sunt
    necessitatibus enim! Dolor sint odio modi dignissimos quod quidem earum
    velit vitae! Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero,
    qui, porro odio beatae ratione sed, sapiente repellat in cupiditate animi
    tempore adipisci saepe quaerat enim! Similique veniam sequi totam libero
    atque unde natus, quo explicabo accusamus dolor? Eaque dolorum accusamus
    similique. Sed necessitatibus placeat consequatur dicta obcaecati ut natus
    voluptates quo, nihil laudantium vero odio laborum similique, sit molestias
    blanditiis illum? Aperiam unde sequi perspiciatis cumque aspernatur,
    voluptate consectetur. Dolorem quasi praesentium placeat repellat ducimus
    repellendus accusantium at eius autem ex obcaecati, tempora eum id doloribus
    iure accusamus modi magni quia blanditiis possimus soluta aliquid porro ab!
    Laboriosam est distinctio eaque modi suscipit qui nobis blanditiis, alias
    quae, dignissimos voluptas, sunt corrupti ab! Similique officiis dolores
    aperiam a rerum maxime culpa earum, consequatur voluptate aut ducimus
    laborum asperiores, necessitatibus officia alias error natus numquam
    pariatur, quaerat explicabo illum? Autem laudantium libero commodi
    repellendus cum aperiam reprehenderit accusantium hic quos, minima ratione
    blanditiis eius quas architecto dicta magni fugiat, nulla velit voluptate.
    Architecto, fugit ex quam iusto accusantium, exercitationem dolorem numquam
    eligendi cupiditate impedit qui. Harum fuga praesentium ipsa accusantium
    recusandae. Hic ab, eveniet repellat maiores provident porro omnis
    perspiciatis nostrum illo cumque similique. Aliquam tempore placeat est
    provident eligendi omnis. Lorem ipsum dolor sit, amet consectetur
    adipisicing elit. Distinctio rerum maiores eveniet explicabo laudantium
    aliquid facilis perferendis nostrum, quisquam, quasi debitis est quidem
    quaerat cumque natus accusamus possimus eos. Quibusdam mollitia impedit quia
    nobis consectetur quidem sed nam labore, esse sint, ipsam optio et voluptas
    modi repellendus? Aliquam, iusto, fugit reprehenderit eveniet veritatis
    totam, magni sit ducimus alias necessitatibus voluptatibus quod. Laudantium
    asperiores commodi eos voluptatem doloribus, illo vel quae, cupiditate
    voluptate, architecto adipisci ex! Commodi, eligendi itaque repellendus
    assumenda minus nam doloremque recusandae reprehenderit ratione a eum! Quia
    quod cumque exercitationem minus in perspiciatis eius deserunt voluptas
    cupiditate accusantium unde distinctio iste nobis laborum veritatis placeat,
    esse velit suscipit corporis ab animi sed vero cum debitis. Nam, odit.
    Magnam qui cupiditate velit non, laudantium ipsa explicabo eum? Ipsum
    maiores ratione distinctio sunt quas? Debitis quasi atque recusandae est in
    similique libero sunt cum inventore, quaerat veniam quae maxime vitae
    asperiores voluptatibus necessitatibus numquam quidem officiis. Temporibus,
    ipsum dicta nam explicabo porro quis autem ab eos optio iusto ea illo nobis
    atque doloribus numquam veritatis earum. At sed quibusdam voluptate autem
    sapiente dolorum est ipsum esse enim rem exercitationem blanditiis
    repellendus, similique rerum doloremque? Dicta explicabo culpa nulla nihil
    incidunt. Lorem ipsum dolor, sit amet consectetur adipisicing elit.
    Voluptatibus possimus nam perferendis dolor ipsam commodi asperiores
    deleniti ea nulla, iste quod corporis recusandae explicabo reiciendis
    consectetur voluptate soluta deserunt illo, quisquam eveniet quis? In
    facilis optio impedit labore quasi magni eius omnis id aperiam libero,
    perspiciatis necessitatibus quo obcaecati similique cum doloremque provident
    explicabo voluptatum, reprehenderit cupiditate minus numquam eligendi
    suscipit. Porro doloribus in repellendus? Reiciendis aut totam assumenda!
    Quae pariatur, iusto asperiores reiciendis, vitae aliquid, sapiente
    explicabo voluptatem nam ex rem repellat hic nemo. Numquam molestiae
    expedita cumque iste necessitatibus corporis deserunt soluta sapiente
    magnam, tempore laborum, est totam. Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Molestias rerum deleniti dicta quisquam. Quibusdam
    veritatis quae nisi voluptatibus? Unde accusantium, voluptates magnam
    suscipit quis blanditiis consequatur, explicabo ratione at eius in
    necessitatibus saepe, sed doloribus quam veniam doloremque repellendus? Eos
    nemo eaque debitis eligendi nihil facilis eius ipsam hic sequi iste quidem
    doloribus minima porro vitae commodi itaque, repellendus magnam dignissimos!
    Odit necessitatibus neque aut cupiditate voluptate fuga, dolorem, fugit
    reprehenderit, deserunt id ad modi minima illum accusantium porro. Possimus
    totam cumque blanditiis veritatis tenetur ab aperiam, similique mollitia
    temporibus assumenda itaque, eos, esse voluptas! Maxime odit excepturi
    suscipit quia asperiores? Ad quidem maxime veritatis sequi adipisci et.
    Perferendis fugit eaque, reiciendis officia tenetur exercitationem optio
    quis blanditiis ad quibusdam obcaecati quos iste odio. Laboriosam minima
    quaerat rem unde consequuntur, fugit natus eligendi nulla sunt nihil commodi
    vitae? Culpa maiores nisi obcaecati perferendis quidem, quis veritatis a
    asperiores officia maxime, ratione consequatur cum quae explicabo
    blanditiis, minus hic commodi sint placeat voluptates! Dolorum repudiandae
    voluptatem at consequatur deleniti facere maiores inventore quidem
    molestiae, eius voluptate temporibus tenetur veniam culpa placeat nisi
    doloremque quis commodi quisquam consequuntur eligendi repellat dignissimos.
    Id laborum ipsa iusto? Rem eos alias sint officiis quas adipisci neque quae
    facere, odio iste pariatur laudantium, eveniet magni aut suscipit? Dolor
    neque fugiat vel doloremque, exercitationem natus sint eum ex pariatur
    voluptatem maiores voluptatum tenetur cumque atque similique minus
    consectetur quia in error quisquam qui placeat! Totam magni vero assumenda
    quis laudantium labore exercitationem iste consequatur, officiis sunt sit
    eius aliquid dolore perspiciatis quam mollitia inventore esse ad voluptate.
    Vero consectetur commodi incidunt! Optio exercitationem nulla quaerat nisi a
    explicabo laborum quisquam, iusto, sint architecto, amet eveniet
    reprehenderit fugiat iste? Sunt aperiam eos voluptatum sapiente excepturi
    aspernatur eligendi quibusdam minima iste voluptas autem, hic eaque in quis
    provident cupiditate odit quas distinctio? Consequatur amet qui magni!
    Facere nisi voluptates expedita enim ullam minus odit consectetur neque.
    Vitae dolorum quidem voluptas odio architecto nemo optio dolor! Dolorem
    doloribus praesentium ducimus accusamus commodi. Numquam eum ex ea ipsam
    iste dignissimos earum recusandae fugit ducimus repudiandae facere
    exercitationem labore quod iure necessitatibus minima nemo autem dolore,
    corporis reprehenderit. Quod, placeat. Ab expedita eius sunt ipsum ad
    quisquam cum incidunt dolore exercitationem corporis quasi facilis,
    reprehenderit, doloribus non. Eaque ipsam, odit nam tenetur quam asperiores
    laborum accusantium temporibus labore molestiae officia modi rerum voluptas
    doloribus corrupti! Nulla esse ea laborum nisi repellat eum perferendis quis
    laboriosam est! Qui accusamus sit reprehenderit, tempora dicta odit magnam
    eius sunt unde suscipit ipsa laborum eligendi soluta officiis quae
    praesentium officia dolore illum libero ducimus fuga facilis doloribus ex?
    Eos excepturi magni quae tempora, deleniti maiores reprehenderit neque
    necessitatibus incidunt quo amet sequi natus optio aperiam quisquam
    obcaecati sed vel voluptatem dolores dignissimos odio voluptatibus sunt
    quam. Explicabo eligendi expedita, fuga laboriosam minus ipsum omnis vitae
    placeat ullam asperiores quod, repellendus dolore! Dolores quisquam vero
    saepe iusto atque quidem ex ad autem dolorem enim, ea perspiciatis rem porro
    tempora maxime tempore est impedit molestias mollitia? Sint, esse.
  </body>
</html>

Ques 103. Design this login form and use position property using HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-103</title>
    <style>
      :root {
        --color: red;
        --bgcolor: repeating-linear-gradient(45deg, yellow 10%, orange 20%);
        --fs: 10px;
      }
      body {
        background: url(https://cdn.pixabay.com/photo/2016/04/04/14/12/monitor-1307227_1280.jpg);
        background-size: 100% 100%;
        overflow-x: hidden;
      }
      #outer {
        min-height: 300px;
        width: 400px;
        position: absolute;
        right: -350px;
        top: 100px;
        transition: 1s;
        box-sizing: border-box;
      }
      #outer:hover {
        position: absolute;
        right: 0px;
        transition: 1s;
        cursor: pointer;
      }
      .col1 {
        min-height: 300px;
        width: 50px;
        float: left;
      }
      .col2 {
        height: 300px;
        width: 350px;
        float: left;
        background: skyblue;
        border-radius: 5px 0px 0px 5px;
        padding: 25px;
        box-sizing: border-box;
      }
      .row1 {
        min-height: 50px;
        width: 50px;
      }
      .row2 {
        min-height: 200px;
        width: 50px;
        background: white;
        border-radius: 5px 0px 0px 5px;
        text-align: center;
        font-size: 26px;
        padding-top: 22px;
        box-sizing: border-box;
        box-shadow: 0px 0px 15px 2px black;
        border: 5px double var(--color);
      }
      .txt {
        height: 50px;
        width: 100%;
        margin-bottom: 10px;
        background: rgb(255, 215, 255);
        border: none;
        border-radius: 5px;
        color: var(--color);
        padding-left: 15px;
      }
      .btn {
        height: 50px;
        width: 100%;
        background: var(--color);
        border: none;
        border-radius: 5px;
        color: white;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <div class="col1">
        <div class="row1"></div>
        <div class="row2">L<br />O<br />G<br />I<br />N</div>
        <div class="row1"></div>
      </div>
      <div class="col2">
        <div style="font-size: 25px; text-align: center">
          LOGIN <b style="color: red">FORM..</b>
        </div>
        <br />
        <form method="post" autocomplete="off">
          <label for="uname">Username</label>
          <br />
          <input type="email" id="uname" class="txt" placeholder="Username" />
          <br />
          <label for="pass">Password</label>
          <br />
          <input type="password" class="txt" id="pass" placeholder="Password" />
          <br />
          <input type="submit" class="btn" value="Login" />
        </form>
      </div>
    </div>
  </body>
</html>

Ques 104. Use of ‘overflow’ property in CSS.

<html>
  <head>
    <title>HTML-CSS-104</title>
    <style>
      #box {
        height: 500px;
        width: 700px;
        background: khaki;
        padding: 30px;
        box-sizing: border-box;
        font-size: 25px;
        margin: 20px auto;
        text-align: justify;
        overflow: scroll;
        /* overflow-y: scroll; */
        /* overflow-x: auto; */
        /* overflow: hidden; */
      }
    </style>
  </head>
  <body>
    <div id="box">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni esse quo
      corrupti laborum quibusdam fugit velit delectus, eveniet, a expedita ut,
      temporibus mollitia totam ipsam sit similique! Harum a suscipit iusto
      praesentium fugiat autem officia odio, sapiente maiores aliquam eligendi.
      Voluptatum distinctio odio quam ad labore cumque voluptates quisquam
      ratione quia sint, at praesentium quos animi quaerat architecto illo.
      Dolor, laboriosam atque. Temporibus accusantium alias dicta excepturi
      nobis blanditiis fugit eum incidunt voluptas? Quam eaque, temporibus fugit
      velit corporis voluptas similique fugiat autem deserunt fuga aliquid,
      eveniet magnam corrupti laborum cupiditate! Magnam similique et iusto
      laborum reprehenderit perferendis eius est! Ex labore illum est provident
      expedita optio delectus dolorum ad ducimus enim commodi cumque, placeat
      exercitationem iure eaque nihil officiis deserunt, harum sequi debitis id,
      asperiores aspernatur nostrum. Inventore consectetur beatae eligendi,
      officiis illo placeat dolor, totam, sunt quaerat eum error repudiandae
      omnis accusantium nesciunt? Quod dolores quidem officiis quasi, dolorum
      accusamus voluptate eligendi perspiciatis. Quos autem tempore, dolor
      repellendus cumque officiis eligendi quae inventore quas nesciunt omnis
      consequuntur necessitatibus officia alias beatae? Iure, repellendus! Modi
      explicabo, recusandae eos consequuntur debitis reiciendis voluptatem quod
      commodi omnis aut assumenda doloribus molestiae voluptatibus, provident
      animi expedita fugiat nobis hic. Necessitatibus dolorum deleniti, eaque
      minus dolorem tempora nihil quis voluptates ratione consequuntur
      repudiandae ad ex asperiores quia voluptatibus at magni a eveniet aperiam
      beatae numquam consectetur nostrum excepturi velit! Perferendis placeat
      asperiores vel!
    </div>
  </body>
</html>

Ques 105. Design this building design using HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-105</title>
    <style>
      #top {
        height: 410px;
        width: 1230px;
        margin: auto;
      }
      .rows1 {
        height: 50px;
        width: 1230px;
      }
      .rows2 {
        height: 360px;
        width: 1230px;
        background: yellow;
      }
      .column1 {
        height: 50px;
        width: 235px;
        background: white;
        float: left;
      }
      .column2 {
        height: 50px;
        width: 720px;
        background: #bfbfbf;
        float: left;
        border: 1px solid black;
        border-bottom: none;
        box-sizing: border-box;
        text-align: center;
        line-height: 50px;
        font-size: 26px;
        color: white;
        text-shadow: 0px 0px 5px black;
        font-family: Algerian;
      }
      #outer {
        height: 360px;
        width: 1230px;
        background: grey;
      }
      #inner1 {
        height: 360px;
        width: 600px;
        background: khaki;
        float: left;
      }
      #inner2 {
        height: 360px;
        width: 30px;
        background: grey;
        float: left;
      }
      .col1 {
        height: 360px;
        width: 30px;
        background: red;
        float: left;
      }
      .col2 {
        height: 360px;
        width: 540px;
        background: green;
        float: left;
      }
      .row1 {
        height: 30px;
        width: 540px;
        background: red;
      }
      .row2 {
        height: 60px;
        width: 540px;
        background: #9e2b38;
      }
      .col3 {
        height: 30px;
        width: 60px;
        background: #9e2b38;
        float: left;
        border: 1px solid black;
        box-sizing: border-box;
      }
      .col4 {
        height: 60px;
        width: 60px;
        background: #4981c4;
        float: left;
        border: 1px solid black;
        box-sizing: border-box;
      }
      .row3 {
        height: 60px;
        width: 30px;
        background: #bfbfbf;
        border: 1px solid black;
        box-sizing: border-box;
      }
      .row4 {
        height: 30px;
        width: 30px;
        background: #bfbfbf;
        border: 1px solid black;
        box-sizing: border-box;
      }
      .row5 {
        height: 90px;
        width: 30px;
        background: #9e2b38;
        border: 1px solid black;
        box-sizing: border-box;
      }
      .row6 {
        height: 5px;
        width: 30px;
        background: white;
      }
      .row7 {
        height: 55px;
        width: 30px;
        background: #9e2b38;
        border: 1px solid black;
        box-sizing: border-box;
      }
      .text1 {
        font-size: 40px;
        color: #bfbfbf;
        position: absolute;
        top: 422px;
        left: 315px;
        text-shadow: 0px 0px 5px black;
      }
      .text2 {
        font-size: 40px;
        color: #bfbfbf;
        position: absolute;
        top: 424px;
        left: 950px;
        text-shadow: 0px 0px 5px black;
      }
      .window {
        height: 50px;
        width: 60px;
        background: #4981c4;
        transform: skewX(-5deg);
        box-sizing: border-box;
        position: relative;
        top: 2px;
        right: 3px;
        box-shadow: 2px 2px 5px black;
      }
    </style>
  </head>
  <body>
    <div id="top">
      <div class="rows1">
        <div class="column1"></div>
        <div class="column2">shubhampal.co.in</div>
        <div class="column1"></div>
      </div>
      <div class="rows2">
        <div id="outer">
          <div id="inner1">
            <div class="col1">
              <div class="row3"></div>
              <div class="row4"></div>
              <div class="row3"></div>
              <div class="row3"></div>
              <div class="row3"></div>
              <div class="row4"></div>
              <div class="row3"></div>
            </div>
            <div class="col2">
              <div class="row1">
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
              </div>
              <div class="row1">
                <div class="col3"></div>
                <div class="col3"></div>
                <div class="col3"></div>
                <div class="col3"></div>
                <div class="col3"></div>
                <div class="col3"></div>
                <div class="col3"></div>
                <div class="col3"></div>
                <div class="col3"></div>
              </div>
              <div class="row1">
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
              </div>
              <div class="row2">
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
              </div>
              <div class="row2">
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div class="col4"></div>
                <div class="col4"></div>
                <div class="col4" style="background: #5b89c2">
                  <div class="window"></div>
                </div>
                <div class="col4"></div>
                <div class="col4" style="background: #5b89c2">
                  <div class="window"></div>
                </div>
                <div class="col4"></div>
                <div class="col4"></div>
              </div>
              <div class="row2">
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div class="col4"></div>
                <div class="col4"></div>
                <div class="col4"></div>
                <div class="col4"></div>
                <div class="col4"></div>
                <div class="col4"></div>
                <div class="col4"></div>
              </div>
              <div class="row1">
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
              </div>
              <div class="row2">
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
              </div>
            </div>
            <div class="col1">
              <div class="row3"></div>
              <div class="row4"></div>
              <div class="row3"></div>
              <div class="row3"></div>
              <div class="row3"></div>
              <div style="background: #bfbfbf" class="row5"></div>
            </div>
          </div>
          <div id="inner2">
            <div class="row6"></div>
            <div style="background: #9e2b38" class="row7"></div>
            <div style="background: #9e2b38" class="row4"></div>
            <div style="background: #9e2b38" class="row3"></div>
            <div style="background: #9e2b38" class="row3"></div>
            <div style="background: #9e2b38" class="row3"></div>
            <div class="row5"></div>
          </div>
          <div id="inner1">
            <div class="col1">
              <div class="row3"></div>
              <div class="row4"></div>
              <div class="row3"></div>
              <div class="row3"></div>
              <div class="row3"></div>
              <div style="background: #bfbfbf" class="row5"></div>
            </div>
            <div class="col2">
              <div class="row1">
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
              </div>
              <div class="row1">
                <div class="col3"></div>
                <div class="col3"></div>
                <div class="col3"></div>
                <div class="col3"></div>
                <div class="col3"></div>
                <div class="col3"></div>
                <div class="col3"></div>
                <div class="col3"></div>
                <div class="col3"></div>
              </div>
              <div class="row1">
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
              </div>
              <div class="row2">
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
              </div>
              <div class="row2">
                <div class="col4"></div>
                <div class="col4"></div>
                <div class="col4"></div>
                <div class="col4"></div>
                <div class="col4" style="background: #5b89c2">
                  <div class="window"></div>
                </div>
                <div class="col4"></div>
                <div class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
              </div>
              <div class="row2">
                <div class="col4"></div>
                <div class="col4"></div>
                <div class="col4"></div>
                <div class="col4"></div>
                <div class="col4"></div>
                <div class="col4"></div>
                <div class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
              </div>
              <div class="row1">
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
                <div style="background: #bfbfbf" class="col3"></div>
              </div>
              <div class="row2">
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
                <div style="background: #9e2b38" class="col4"></div>
              </div>
            </div>
            <div class="col1">
              <div class="row3"></div>
              <div class="row4"></div>
              <div class="row3"></div>
              <div class="row3"></div>
              <div class="row3"></div>
              <div class="row4"></div>
              <div class="row3"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Ques 106. Use of some ‘nth-child’ CSS selectors.

<html>
  <head>
    <title>HTML-CSS-106</title>
    <style>
      /* p:first-child {
        background: purple;
        color: white;
        border: 2px solid red;
        font-size: 35px;
      } */
      /* p:last-child {
        background: purple;
        color: white;
        border: 2px solid red;
        font-size: 35px;
      } */
      /* p:nth-child(4){
        background: purple;
        color: white;
        border: 2px solid red;
        font-size: 35px;
      } */
      /* p:nth-child(odd){
        background: red;
        color: white;
        border: 2px solid blue;
        font-size: 35px;
      } */
      p:nth-child(even){
        background: red;
        color: white;
        border: 2px solid blue;
        font-size: 35px;
      }
    </style>
  </head>
  <body>
    <p>PARA 1</p>
    <p>PARA 2</p>
    <p>PARA 3</p>
    <p>PARA 4</p>
    <p>PARA 5</p>
    <p>PARA 6</p>
  </body>
</html>

Ques 107. Design this table with the help of ‘nth-child’ CSS selectors using HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-107</title>
    <style>
      table{
        margin: auto;
      }
      /* tr:nth-child(odd){
        background: red;
        color: white;
      }
      tr:nth-child(even){
        background: yellow;
        color: red;
      }
      tr:nth-child(6){
        background: blue;
        color: white;
      }
      tr:first-child{
        background: black;
        color: white;
      }
      tr:last-child{
        background: aqua;
        color: black;
      } */
      /* td:first-child{
        background: orange;
        color: white;
      }
      td:last-child{
        background: green;
        color: white;
      }
      td:nth-child(2){
        background: green;
        color: white;
      } */
      td:nth-child(odd){
        background: blue;
        color: white;
      }
      td:nth-child(even){
        background: red;
        color: white;
      }
    </style>
  </head>
  <body>
   <table border="1" cellspacing="0px" cellpadding="10px">
    <tr><th>NAME</th><th>CITY</th></tr>
    <tr><td>Shubham</td><td>Pata Nahi</td></tr>
    <tr><td>Ram</td><td>Kanpur</td></tr>
    <tr><td>Shyam</td><td>Mumbai</td></tr>
    <tr><td>Ajay</td><td>Kanpur</td></tr>
    <tr><td>Raj</td><td>Lucknow</td></tr>
    <tr><td>Vijay</td><td>Mumbai</td></tr>
    <tr><td>Karan</td><td>Kanpur</td></tr>
    <tr><td>Vikas</td><td>Kanpur</td></tr>
    <tr><td>Anuj</td><td>Mumbai</td></tr>
    <tr><td>Raju</td><td>Kanpur</td></tr>
   </table>
  </body>
</html>

Ques 108. Print this design on webpage using ‘animation’ property in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-108</title>
    <style>
      body{
        background: url(https://cdn.pixabay.com/photo/2016/04/04/14/12/monitor-1307227_1280.jpg);
        /* background-size:100% 100%; */
      }
      h1 {
        color: purple;
        font-size: 50px;
        line-height: 550px;
        text-align: center;
        animation-name: xyz;
        animation-duration: 1s;
        /* animation-iteration-count: 100; */
        animation-iteration-count: infinite;
      }
      @keyframes xyz {
        from {
          color: red;
          text-shadow: 0px 0px 10px white;
        }
        to {
          color: white;
          font-size: 150px;
          text-shadow: 10px 10px 20px black,-10px -10px 20px black;
        }
      }
    </style>
  </head>
  <body>
    <h1>Animation</h1>
  </body>
</html>

Ques 109. Print this animation design using ‘animation’ property of CSS.

<html>
  <head>
    <title>HTML-CSS-109</title>
    <style>
      body {
        background: url(https://cdn.pixabay.com/photo/2016/04/04/14/12/monitor-1307227_1280.jpg);
        background-size: cover;
      }
      div {
        height: 300px;
        width: 300px;
        background: rgb(201, 201, 201);
        color: red;
        border: 10px groove red;
        text-align: center;
        line-height: 300px;
        border-radius: 5px;
        margin: 100px auto;
        font-size: 50px;
        font-family: arial;
        animation-name: xyz;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        /* animation-direction: normal; */
        /* animation-direction: reverse; */
        animation-direction: alternate;
        /* animation-delay: 1s; */
        /* animation-play-state: running; */
      }
      div:hover{
        animation-play-state: paused;
        cursor: pointer;
      }
      @keyframes xyz
      {
       0%
        {
          background: navy;
          box-shadow: 0px 0px 30px 10px rgba(255,255,255,.9);
        }
        25%
        {
          background: red;
          color: white;
        }
       50%
        {
          background: lightgreen;
          transform: rotate(360deg);
          font-size: 100px;
          box-shadow: 0px 0px 0px 15px rgba(255,255,255,.8),0px 0px 0px 30px rgba(255,255,255,.6),0px 0px 0px 45px rgba(255,255,255,.4),0px 0px 0px 45px rgba(255,255,255,.2);
          border-radius: 50%;
        }
      }
    </style>
  </head>
  <body>
    <div>HTML</div>
  </body>
</html>

Ques 110. Print this design using shorthand ‘animation’ property in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-110</title>
    <style>
      div {
        height: 300px;
        width: 600px;
        border: 10px double black;
        background-size: cover;
        font-size: 100px;
        text-align: center;
        margin: auto;
        line-height: 300px;
        color: white;
        /* animation: Name duration delay iteration-count direction; */
        animation: div 5s 3s infinite alternate;
      }
      div:hover {
        animation-play-state: paused;
      }
      @keyframes div {
        0% {
          color: white;
          border: 10px double black;
          background: url(https://m.media-amazon.com/images/I/919CYVCW9DL._SL1500_.jpg");
          background-size: cover;
        }
        25% {
          color: yellow;
          border: 10px double yellow;
          background: url(https://helios-i.mashable.com/imagery/articles/07qq37eojstGL0ikZFRGijA/hero-image.fill.size_1248x702.v1668506840.jpg);
          background-size: cover;
        }
        50% {
          color: aqua;
          border: 10px double aqua;
          background: url(https://cdn-0.franticallyspeaking.com/wp-content/uploads/2019/10/body-l-1536x1017.jpeg);
          background-size: cover;
        }
        100% {
          color: red;
          border: 10px double red;
          background: url(https://media.getmyuni.com/assets/images/articles/53e2pmaon2besrpe19wec2i1ms-56t2-4g-.jpg);
          background-size: cover;
        }
      }
    </style>
  </head>
  <body>
    <div>Unknown</div>
  </body>
</html>

Ques 111. Print this design on webpage using ‘animation’ property in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-111</title>
    <style>
      div {
        height: 350px;
        width: 600px;
        background: black;
        margin: auto;
        font-family: impact;
        letter-spacing: 15px;
        color: white;
        font-size: 100px;
        padding-left: 80px;
        padding-top: 20px;
        box-sizing: border-box;
         }
      .txt1 {
        animation-name: txt1;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
      .txt1:hover {
    animation-play-state: paused;
      }
      .txt2 {
        animation-name: txt2;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
      .txt2:hover {
    animation-play-state: paused;
      }
      .txt3 {
        animation-name: txt3;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
      .txt3:hover {
    animation-play-state: paused;
      }
      .txt4 {
        animation-name: txt4;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
      .txt4:hover {
    animation-play-state: paused;
      }
      .txt5 {
        animation-name: txt5;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
      .txt5:hover {
    animation-play-state: paused;
      }
      @keyframes txt1 {
        from {
          color: white;
          text-shadow: 0px 0px 0px #ff9f0f;
        }
        to {
          text-shadow: 0px 1px 0px #ff9f0f, 0px 5px 0px #a87ceb,
            0px 10px 0px #61a6f0, 0px 20px 0px #fdf006, 0px 35px 0px #ff3739;
        }
      }
      @keyframes txt2 {
        from {
          color: white;
          text-shadow: 0px 0px 0px #ff9f0f;
        }
        to {
          text-shadow: 0px 5px 0px #ff9f0f, 0px 10px 0px #a87ceb,
            0px 20px 0px #61a6f0, 0px 38px 0px #fdf006, 0px 75px 0px #ff3739;
        }
      }
      @keyframes txt3 {
        from {
          color: white;
          text-shadow: 0px 0px 0px #fcb6b0;
        }
        to {
          text-shadow: 0px 5px 0px #fcb6b0, 0px 10px 0px #ff9f0f,
            0px 20px 0px #a87ceb, 0px 40px 0px #61a6f0, 0px 85px 0px #fdf006,
            0px 115px 0px #ff3739;
        }
      }
      @keyframes txt4 {
        from {
          color: white;
          text-shadow: 0px 0px 0px #fcb6b0;
        }
        to {
          text-shadow: 0px 10px 0px #fcb6b0, 0px 25px 0px #ff9f0f,
            0px 45px 0px #a87ceb, 0px 90px 0px #61a6f0, 0px 115px 0px #fdf006;
        }
      }
      @keyframes txt5 {
        from {
          color: white;
          text-shadow: 0px 0px 0px #fcb6b0;
        }
        to {
          text-shadow: 0px 30px 0px #fcb6b0, 0px 50px 0px #ff9f0f,
            0px 115px 0px #a87ceb;
        }
      }
    </style>
  </head>
  <body>
    <div>
      <span class="txt1">S</span><span class="txt2">H</span
      ><span class="txt3">U</span><span class="txt4">B</span
      ><span class="txt5">H</span>
    </div>
  </body>
</html>

Ques 112. Print this design on webpage using ‘animation’ property in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-112</title>
    <style>
      div {
        width: 650px;
        margin: auto;
        font-size: 80px;
        font-family: arial;
        font-weight: bold;
      }
      .txt1 {
        animation-name: txt1;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
      .txt1:hover {
        animation-play-state: paused;
      }
      .txt2 {
        padding-left: 25px;
        padding-right: 80px;
        background: black;
        color: white;
        box-sizing: border-box;
        animation-name: txt2;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-delay: 2s;
      }
      .txt2:hover {
        animation-play-state: paused;
      }
      @keyframes txt1 {
        from {
          color: red;
        }
        to {
          color: black;
          font-size: 60px;
        }
      }
      @keyframes txt2 {
        from {
          color: white;
          background: black;
          transform: rotate(0deg);
          box-shadow: 5px 5px 2px red;
        }
        to {
          color: yellow;
          background: red;
          border: 5px solid black;
          border-radius: 50px;
          font-size: 60px;
          padding-left: 10px;
          padding-right: 10px;
          box-sizing: border-box;
          box-shadow: 10px 10px 5px grey;
        }
      }
    </style>
  </head>
  <body>
    <div>
      <span class="txt1">I'm a </span><span class="txt2">Designer</span>
    </div>
  </body>
</html>

Ques 113. Print this design on webpage using ‘animation’ property in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-113</title>
    <style>
      div{
        height: 450px;
        width: 600px;
        background: #1c1c1c;
        margin: auto;
        color: white;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 90px;
        letter-spacing: 15px;
        line-height: 420px;
        text-align: center;
        color: #2d2d2d;
        animation-name: div;
        animation-duration: 0.5s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        margin-top: 100px;
      }
      div:hover{
        animation-play-state: paused;
      }
      .txt{
        color: yellow;
        animation-name: txt;
        animation-duration: 2s;
        animation-iteration-count: infinite;
      }
      @keyframes div
      {
        from
        {
            color: white;
        }
        to
        {
          color: #2d2d2d;
            text-shadow: 1px 1px 2px white,-1px -1px 2px white;
            box-shadow: 10px 10px 6px yellow,-10px -10px 6px yellow;
            transform: rotate(10deg);
        }
      }
      @keyframes txt
      {
        from
        {
            color: yellow;
        }
        to
        {
           text-shadow: 1px 1px 2px yellow,-1px -1px 2px yellow;
        }
      }
    </style>
  </head>
  <body>
   <div>FL<span class="txt">I</span>CKER</div>
  </body>
</html>

Ques 114. Create this animation using animation property in CSS.

<html>
  <head>
    <title>HTML-CSS-114</title>
    <style>
      div {
        height: 50px;
        width: 180px;
        background: red;
        color: white;
        border-radius: 5px;
        line-height: 50px;
        text-align: center;
        font-size: 23px;
        animation-name: div;
        animation-duration: 6s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        position: absolute;
        top: 0%;
        left: 0%;
      }
      @keyframes div {
        0% {
          top: 15%;
          left: 0%;
        }
        25% {
          top: 15%;
          left: 85%;
          background: purple;
          transform: rotate(360deg);
        }
        50% {
          top: 80%;
          left: 80%;
          background: green;
          transform: rotate(-360deg);
        }
        75% {
          top: 80%;
          left: 0%;
          background: blue;
          transform: rotate(360deg);
        }
        100% {
          top: 15%;
          left: 0%;
          transform: rotate(-360deg);
        }
      }
    </style>
  </head>
  <body>
    <div>shubhampal.co.in</div>
  </body>
</html>

Ques 115. Create this animation using ‘animation’ property in CSS.

<html>
  <head>
    <title>HTML-CSS-115</title>
    <style>
      body {
        background: url(https://www.androidheadlines.com/wp-content/uploads/2023/02/Internet-image-8398349.webp);
        background-size: 100% 100%;
      }
      div {
        height: 380px;
        width: 400px;
        background: skyblue;
        margin: auto;
        padding: 50px;
        padding-top: 10px;
        box-sizing: border-box;
        border-radius: 10px;
        font-family: arial;
        margin-top: 80px;
        position: relative;
        z-index: 1;
        animation-name: div;
        animation-duration: 4s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        box-shadow: 5px 5px 10px white, -5px -5px 10px white;
      }
      input {
        height: 50px;
        width: 100%;
        padding-left: 10px;
        box-sizing: border-box;
        margin-bottom: 20px;
        border-radius: 50px;
        font-size: 20px;
        border-style: none;
      }
      .img1 {
        position: absolute;
        animation-name: img1;
        animation-duration: 5s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
      }
      .img1:hover {
        animation-play-state: paused;
      }
      @keyframes img1 {
        0% {
          top: 0%;
          left: 0%;
        }
        100% {
          top: 80%;
          left: 0%;
        }
      }
      .img2 {
        position: absolute;
        animation-name: img2;
        animation-duration: 4s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        height: 80px;
        width: 80px;
      }
      .img2:hover {
        animation-play-state: paused;
      }
      @keyframes img2 {
        0% {
          top: 0%;
          left: 15%;
        }
        100% {
          top: 80%;
          left: 15%;
        }
      }
      .img3 {
        position: absolute;
        animation-name: img3;
        animation-duration: 3s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        height: 60px;
        width: 60px;
      }
      .img3:hover {
        animation-play-state: paused;
      }
      @keyframes img3 {
        0% {
          top: 0%;
          left: 30%;
        }
        100% {
          top: 80%;
          left: 30%;
        }
      }
      .img4 {
        position: absolute;
        animation-name: img4;
        animation-duration: 2s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        height: 90px;
        width: 90px;
      }
      .img4:hover {
        animation-play-state: paused;
      }
      @keyframes img4 {
        0% {
          top: 0%;
          left: 45%;
        }
        100% {
          top: 80%;
          left: 45%;
        }
      }
      .img5 {
        position: absolute;
        animation-name: img5;
        animation-duration: 4s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        height: 50px;
        width: 50px;
      }
      .img5:hover {
        animation-play-state: paused;
      }
      @keyframes img5 {
        0% {
          top: 0%;
          left: 60%;
        }
        100% {
          top: 80%;
          left: 60%;
        }
      }
      .img6 {
        position: absolute;
        animation-name: img6;
        animation-duration: 4s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        height: 80px;
        width: 80px;
      }
      .img6:hover {
        animation-play-state: paused;
      }
      @keyframes img6 {
        0% {
          top: 0%;
          left: 75%;
        }
        100% {
          top: 80%;
          left: 75%;
        }
      }
      .img7 {
        position: absolute;
        animation-name: img7;
        animation-duration: 2s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        height: 70px;
        width: 70px;
      }
      .img7:hover {
        animation-play-state: paused;
      }
      @keyframes img7 {
        0% {
          top: 0%;
          left: 85%;
        }
        100% {
          top: 80%;
          left: 85%;
        }
      }
      .img8 {
        position: absolute;
        animation-name: img8;
        animation-duration: 3s;
        animation-direction: alternate;
        animation-iteration-count: infinite;
        height: 50px;
        width: 50px;
      }
      .img8:hover {
        animation-play-state: paused;
      }
      @keyframes img8 {
        0% {
          top: 0%;
          left: 95%;
        }
        100% {
          top: 85%;
          left: 95%;
        }
      }
    </style>
  </head>
  <body>
    <img src="https://shubhampal.co.in/wp-content/uploads/2023/10/bubble.png" height="100px" width="100px" class="img1" />
    <img src="https://shubhampal.co.in/wp-content/uploads/2023/10/bubble.png" height="100px" width="100px" class="img2" />
    <img src="https://shubhampal.co.in/wp-content/uploads/2023/10/bubble.png" height="100px" width="100px" class="img3" />
    <img src="https://shubhampal.co.in/wp-content/uploads/2023/10/bubble.png" height="100px" width="100px" class="img4" />
    <img src="https://shubhampal.co.in/wp-content/uploads/2023/10/bubble.png" height="100px" width="100px" class="img5" />
    <img src="https://shubhampal.co.in/wp-content/uploads/2023/10/bubble.png" height="100px" width="100px" class="img6" />
    <img src="https://shubhampal.co.in/wp-content/uploads/2023/10/bubble.png" height="100px" width="100px" class="img7" />
    <img src="https://shubhampal.co.in/wp-content/uploads/2023/10/bubble.png" height="100px" width="100px" class="img8" />
    <div>
      <center><h1>Student Login</h1></center>
      <form>
        <label for="user">Username</label>
        <input type="email" placeholder="Username" id="user" />
        <br />
        <label for="pass">Password</label>
        <input type="password" placeholder="Password" id="pass" />
        <br />
        <input
          type="submit"
          value="LOGIN"
          style="
            background: blue;
            color: white;
            text-align: center;
            cursor: pointer;
          "
        />
      </form>
    </div>
  </body>
</html>

Ques 116. Use of ‘animation-timing-function’ property in CSS.

<html>
  <head>
    <title>HTML-CSS-116</title>
    <style>
      div {
        height: 50px;
        width: 200px;
        background: red;
        border: 5px groove yellow;
        color: white;
        text-align: center;
        line-height: 50px;
        font-size: 25px;
        font-family: arial;
        font-weight: bold;
        border-radius: 0px 50px 50px 0px;
      }
      #dv1 {
        animation: dv1 3s linear infinite alternate;
      }
      #dv1:hover {
        animation-play-state: paused;
      }
      @keyframes dv1 {
        from {
          width: 200px;
        }
        to {
          width: 1500px;
          background: blue;
        }
      }
      #dv2 {
        animation: dv2 3s ease infinite alternate;
      }
      #dv2:hover {
        animation-play-state: paused;
      }
      @keyframes dv2 {
        from {
          width: 200px;
        }
        to {
          width: 1500px;
          background: green;
        }
      }
      #dv3 {
        animation: dv3 3s ease-in-out infinite alternate;
      }
      #dv3:hover {
        animation-play-state: paused;
      }
      @keyframes dv3 {
        from {
          width: 200px;
        }
        to {
          width: 1500px;
          background: purple;
        }
      }
      #dv4 {
        animation: dv4 3s ease-in infinite alternate;
      }
      #dv4:hover {
        animation-play-state: paused;
      }
      @keyframes dv4 {
        from {
          width: 200px;
        }
        to {
          width: 1500px;
          background: brown;
        }
      }
      #dv5 {
        animation: dv5 3s ease-out infinite alternate;
      }
      #dv5:hover {
        animation-play-state: paused;
      }
      @keyframes dv5 {
        from {
          width: 200px;
        }
        to {
          width: 1500px;
          background: black;
        }
      }
    </style>
  </head>
  <body>
    <div id="dv1">linear</div>
    <div id="dv2">ease</div>
    <div id="dv3">ease-in-out</div>
    <div id="dv4">ease-in</div>
    <div id="dv5">ease-out</div>
  </body>
</html>

Ques 117. Use of ‘z-index’ property in CSS.

<html>
  <head>
    <title>HTML-CSS-117</title>
    <style>
      div {
        height: 300px;
        width: 300px;
        border: 10px groove grey;
        border-radius: 5px;
        position: absolute;
      }
      #dv1 {
        background: red;
        z-index: 4;
        top: 50px;
        left: 50px;
      }
      #dv2 {
        background: purple;
        z-index: 3;
        top: 100px;
        left: 100px;
      }
      #dv3 {
        background: green;
        z-index: 2;
        top: 150px;
        left: 150px;
      }
      #dv4 {
        background: black;
        z-index: 1;
        top: 200px;
        left: 200px;
      }
    </style>
  </head>
  <body>
    <div id="dv1"></div>
    <div id="dv2"></div>
    <div id="dv3"></div>
    <div id="dv4"></div>
  </body>
</html>

Ques 118. Create this loader animation using ‘animation’ property in CSS.

<html>
  <head>
    <title>HTML-CSS-118</title>
    <style>
      #main {
        height: 350px;
        width: 600px;
        background: #3b5368;
        margin: auto;
        padding: 150px 250px;
        box-sizing: border-box;
      }
      .box {
        height: 25px;
        width: 15px;
        background: white;
        margin: auto;
        float: left;
        margin-right: 5px;
        animation: box1 0.8s ease-in infinite alternate-reverse;
      }
      #box1 {
        animation-delay: 0s;
      }
      #box2 {
        animation-delay: 0.1s;
      }
      #box3 {
        animation-delay: 0.2s;
      }
      #box4 {
        animation-delay: 0.3s;
      }
      #box5 {
        animation-delay: 0.4s;
      }
      @keyframes box1 {
        0% {
          transform: scaleY(1);
        }
        50% {
          transform: scaleY(2.5);
        }
        100% {
          transform: scaleY(1);
        }
      }
    </style>
  </head>
  <body>
    <div id="main">
      <div class="box" id="box1"></div>
      <div class="box" id="box2"></div>
      <div class="box" id="box3"></div>
      <div class="box" id="box4"></div>
      <div class="box" id="box5"></div>
    </div>
  </body>
</html>

Ques 119. Create this animation using ‘animation’ property in CSS.

<html>
  <head>
    <title>HTML-CSS-119</title>
    <style>
      #outer {
        height: 180px;
        width: 450px;
        border: 1px solid lightgrey;
        margin: auto;
        font-size: 50px;
        font-family: arial;
        text-align: center;
        line-height: 180px;
      }
      #back {
        height: 30px;
        width: 10px;
        background: red;
        animation: txt2 2s infinite alternate;
        transform: translate(225px, -90px);
        position: relative;
        z-index: -1;
        opacity: 60%;
      }
      @keyframes txt2 {
        0% {
          width: 10px;
        }
        50% {
          width: 125px;
        }
        100% {
          width: 10px;
        }
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <span class="txt1">Hello </span><span class="txt2" id="txt2">World
        <div id="back"></div></span>
    </div>
  </body>
</html>

Ques 120. Design this Amazon Sign-in form using HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-120</title>
    <style>
        .img{
            height:50px;
            width: 120px;
            margin: 0px auto;
        }
        img{
            height:55px;
            width: 140px;
        }
        #outer{
            min-height: 500px;
            width: 450px;
            border: 1px solid lightgrey;
            margin: 10px auto;
            border-radius: 12px;
            font-family:Arial, Helvetica, sans-serif;
            padding: 10px 40px;
            box-sizing: border-box;
        }
        .input{
            height: 40px;
            width: 100%;
            border-radius: 5px;
            border: 2px solid lightgrey;
            padding-left: 20px;
            margin-bottom: 25px;
            margin-top: 5px;
        }
        label{
           font-weight: bold;
        }
        .submit1{
            height: 40px;
            width: 100%;
            background: #ffd814;
            font-size: 17px;
            border-radius: 15px;
            border-style: none;
            cursor: pointer;
        }
        .submit2{
            height: 40px;
            width: 100%;
            background: white;
            font-size: 17px;
            border-radius: 15px;
            border: 2px solid lightgrey;
            cursor: pointer;
        }
        .txt1 a{
            text-decoration: none;
            color: #2e80be;
        }
        .txt2{
            text-decoration: none;
        }
        .txt2 a{
            text-decoration: none;
            color: #2e80be;
            text-align: center;
        }
        .txt3 a{
            text-decoration: none;
            color: #2e80be;
            float: right;
        }
        .hr2{
            width: 100px;
            display: inline-block;
            position: relative;
            top: 5px;
        }
        .txt4{
            margin: 0px 15px;
            color: #8a7b6a;
        }
        select{
           width: 20px;
        }
    </style>
  </head>
  <body>
    <div class="img"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcT3bDRFTcHv0SS4JY-SEaJAyyIX1fI6lL57VfJSCWrNHZRF61E0" alt="amazon"></div>
    <div id="outer">
        <h1>Sign in</h1>
        <form method="psot" anctype="multipart/form-data">
            <label for="user">Email or mobile phone number</label>
            <br>
            <input class="input" type="text" id="user">
            <br>
            <label  for="pass">Password</label> <span class="txt3"><a href="#">Forgot Password</a></span>
            <br>
            <input class="input" type="text" id="pass">
            <br>
            <input class="submit1" type="submit" value="Sign in">
            <br> <br>
            <span class="txt2">By cotinuing, you agree to Amazon's <a href="#">Conditions of Use </a>and <a href="#">Privacy Notice</a>.</span>
            <br><br>
            <input input="check" type="checkbox"> Keep me signed in. 
            <span class="txt1"><a href="#">Details
                <select>
                    <option><a href="#">Item 1</a></option>
                    <option><a href="#">Item 2</a></option>
                    <option><a href="#">Item 3</a></option>
                    <option><a href="#">Item 4</a></option>
                    <option><a href="#">Item 5</a></option>
                    </select>
            </a></span>
            <br><br>
            <span class="txt4"><span class="hr2"><hr></span> New on Amazon? <span class="hr2"><hr></span></span>
            <br><br>
            <input class="submit2" type="submit" value="Create your Amazon account">
        </form>
    </div>
  </body>
</html>

Ques 121. Design this login form using HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-121</title>
    <style>
        body{
            background: linear-gradient(to right,#176090,#168f61);
            color: white;
            font-family: arial;
        }
        #outer{
            min-height: 520px;
            width: 650px;
            background: linear-gradient(to right,#063b50,#074938);
            margin: auto;
            padding: 10px 70px;
            box-sizing: border-box;
            color: white;
            border-radius: 10px;
        }
        h3{
            font-weight: bold;
            font-size: 20px;
            color: white;
        }
        .head{
            font-size: 15px;
            color: #4e6b6f;
            margin-bottom: 30px;
        }
        .input{
            height: 48px;
            width: 100%;
            border-radius: 5px;
            border-style: none;
            padding-left: 20px;
            margin-top: 15px;
            margin-bottom: 25px;
        }
        label{
            color: white;
        }
        .submit{
            height: 48px;
            width: 100%;
            background: black;
            color: white;
            font-size: 17px;
            border-radius: 5px;
            border-style: none;
            margin-top: 25px;
            cursor: pointer;
        }
        .txt1 a{
            float: right;
            text-decoration: none;
            color: #2e80be;
        }
        .txt2{
            text-decoration: none;
            margin: 0px 140px;
        }
        .txt2 a{
            text-decoration: none;
            color: #2e80be;
            text-align: center;
        }
    </style>
  </head>
  <body>
    <center><h1>Login form using HTML and CSS</h1></center>
    <div id="outer">
        <center><h3>Sign in</h3></center>
        <center><h3 class="head">Sign in with your username and password</h3></center>
        <form method="psot" anctype="multipart/form-data">
            <label for="user">Your Username</label>
            <br>
            <input class="input" type="text" placeholder="Enter Username" id="user">
            <br>
            <label  for="pass">Your Password</label>
            <br>
            <input class="input" type="text" placeholder="Enter Password" id="pass">
            <br>
            <input input="check" type="checkbox"> Remember me
            <span class="txt1"><a href="#">Forgot Password?</a></span>
            <br>
            <input class="submit" type="submit" value="Login">
            <br> <br>
            <span class="txt2">Not a member? <a href="#">Register here!</a></span>
        </form>
    </div>
  </body>
</html>

Ques 122. Use of ‘animation-fill-mode’ property in CSS.

<html>
  <head>
    <title>HTML-CSS-122</title>
    <style>
      div {
        height: 200px;
        width: 200px;
        background: red;
        animation: div 2s 1s;
        /* animation-iteration-count: infinite; */
        /* animation-fill-mode: backwards; */
       /* animation-fill-mode: forwards; */
        animation-fill-mode: both;
      }
      @keyframes div {
        from {
          width: 400px;
          background: orange;
        }
        to {
          width: 1000px;
          background: green;
        }
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Ques 123. Use of ‘text-decoration’ property in CSS.

 <html>
  <head>
    <title>HTML-CSS-123</title>
    <style>
      .head {
        color: red;
        font-size: 50px;
        text-align: center;
        text-decoration-thickness: 5px;
        text-decoration-style: solid;
        text-decoration-color: blue;
        /* text-decoration: underline 5px solid blue; */
      }
      #head1 {
        text-decoration-line: overline;
      }
      #head2 {
        text-decoration-line: underline;
      }
      #head3 {
        text-decoration-line: overline underline;
      }
      #head4 {
        text-decoration-line: line-through;
      }
    </style>
  </head>
  <body>
    <h1 class="head" id="head1">overline</h1>
    <h1 class="head" id="head2">underline</h1>
    <h1 class="head" id="head3">underline overline</h1>
    <h1 class="head" id="head4">line-through</h1>
  </body>
</html>

Ques 124. Use of ‘column’ property in CSS.

<html>
  <head>
    <title>HTML-CSS-124</title>
    <style>
      div {
        border: 10px groove grey;
        padding: 25px;
        box-sizing: border-box;
        text-align: justify;
        /* column-count: 3; */
        column-gap: 50px;
        column-width: 300px;
        /* column-rule-width: 10px;
        column-rule-style: dotted;
        column-rule-color: grey; */
        column-rule: 10px solid grey;
      }
      h1
      {
        /* column-span: none; */
            column-span: all;
            text-align: center;
            text-decoration: underline 3px wavy grey;
            color: grey;
      }
    </style>
  </head>
  <body>
    <div>
      <h1>WELCOME</h1>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque reiciendis
      et nostrum quibusdam nam vel blanditiis cumque repellat nesciunt corrupti.
      Quia est magnam voluptates temporibus, omnis aperiam voluptatem modi neque
      eos, ut reiciendis similique quam inventore? Suscipit mollitia delectus,
      perferendis, necessitatibus dolorum nostrum obcaecati, molestiae omnis
      fugiat sit sint perspiciatis. Iure quia aliquid accusantium nostrum
      tempore? Aut, molestias cum ut ipsum porro est laborum cumque culpa unde!
      Laborum, sequi reiciendis sapiente libero qui quis temporibus dicta eos
      laboriosam aliquid dolore esse quaerat odit excepturi dolores provident
      consequatur vero voluptatem quam voluptate facere iusto quod. Neque quas
      rerum est sint repellat vero hic, laboriosam fuga vel molestias quam
      placeat, architecto quos? Facilis magni sapiente cupiditate aut, voluptas
      dolorum sint fugit aspernatur perspiciatis? Impedit debitis, blanditiis
      libero facilis adipisci sed in nulla, quos dolores voluptate esse eum
      aliquid dolorum corrupti! Error, at. Minus qui, inventore quasi doloribus
      itaque odit quaerat quia? Repudiandae fugit sed accusamus excepturi
      reprehenderit nemo quam! Nostrum voluptatem facere, modi quo atque natus
      non assumenda. Hic quam ex vel sapiente modi reprehenderit voluptas, illo
      laborum, excepturi, itaque rem! Dolore distinctio, nulla sed quo nihil
      iure incidunt consequatur rem, dolorem et earum rerum! Dolorum sequi
      blanditiis a adipisci libero veritatis.
    </div>
    <div>
      <h1>WELCOME AGAIN!</h1>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque reiciendis
      et nostrum quibusdam nam vel blanditiis cumque repellat nesciunt corrupti.
      Quia est magnam voluptates temporibus, omnis aperiam voluptatem modi neque
      eos, ut reiciendis similique quam inventore? Suscipit mollitia delectus,
      perferendis, necessitatibus dolorum nostrum obcaecati, molestiae omnis
      fugiat sit sint perspiciatis. Iure quia aliquid accusantium nostrum
      tempore? Aut, molestias cum ut ipsum porro est laborum cumque culpa unde!
      Laborum, sequi reiciendis sapiente libero qui quis temporibus dicta eos
      laboriosam aliquid dolore esse quaerat odit excepturi dolores provident
      consequatur vero voluptatem quam voluptate facere iusto quod. Neque quas
      rerum est sint repellat vero hic, laboriosam fuga vel molestias quam
      placeat, architecto quos? Facilis magni sapiente cupiditate aut, voluptas
      dolorum sint fugit aspernatur perspiciatis? Impedit debitis, blanditiis
      libero facilis adipisci sed in nulla, quos dolores voluptate esse eum
      aliquid dolorum corrupti! Error, at. Minus qui, inventore quasi doloribus
      itaque odit quaerat quia? Repudiandae fugit sed accusamus excepturi
      reprehenderit nemo quam! Nostrum voluptatem facere, modi quo atque natus
      non assumenda. Hic quam ex vel sapiente modi reprehenderit voluptas, illo
      laborum, excepturi, itaque rem! Dolore distinctio, nulla sed quo nihil
      iure incidunt consequatur rem, dolorem et earum rerum! Dolorum sequi
      blanditiis a adipisci libero veritatis.
    </div>
  </body>
</html>

Ques 125. Use of ‘direct-child’ selector in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-127</title>
    <style>
      /* Direct Child Selector */
      div > p {
        color: white;
        background: purple;
      }
      h1 > p {
        color: blue;
        background: yellow;
      }
      b > p {
        color: green;
        background: black;
      }
    </style>
  </head>
  <body>
    <div id="box">
      <p>Para1</p>
      <p>Para2</p>
      <p>Para3</p>
      <h1>
        <p>Para4</p>
        <p>Para5</p>
        <b>
          <p>Para6</p>
          <p>Para7</p>
        </b>
        <p>Para8</p>
        <p>Para9</p>
      </h1>
      <p>Para10</p>
      <p>Para11</p>
    </div>
  </body>
</html>

Ques 126. Use of ‘adjacent-siblings’ and ‘adjacent-siblings one’ selector in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-126</title>
    <style>
      div ~ p {
        color: white;
        background: red;
      }
      div + p {
        color: orange;
        background: green;
      }
      div ~ h1 {
        color: purple;
        background: skyblue;
      }
      p + h1 {
        color: blue;
        background: khaki;
      }
      b ~ i {
        color: yellow;
        background: black;
      }
      i + p {
        color: brown;
        background: pink;
      }
    </style>
  </head>
  <body>
    <div>
      <b>B1</b><b>B2</b> <i>I1</i><i>I2</i>
      <p>Para1</p>
      <p>Para2</p>
    </div>
    <p>Para3</p>
    <p>Para4</p>
    <p>Para5</p>
    <h1>H1</h1>
    <h1>H2</h1>
    <p>Para6</p>
  </body>
</html>

Ques 127. Use of ‘attribute’ selector in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-127</title>
    <style>
      input[type="text"] {
        height: 40px;
        width: 250px;
        border: 2px solid red;
      }
      input[type="submit"] {
        height: 40px;
        width: 250px;
        background: red;
        color: white;
      }
      input[class="btn"] {
        height: 40px;
        width: 250px;
        background: blue;
        color: white;
        font-size: 20px;
      }
      img[height="100px"] {
        border: 5px solid yellow;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <input type="text" />
    <br />
    <input type="text" />
    <br />
    <input type="password" />
    <br />
    <input type="email" />
    <br />
    <img src="https://m.media-amazon.com/images/I/919CYVCW9DL._SL1500_.jpg" height="100px" width="200px" />
    <br />
    <img src="https://miro.medium.com/v2/resize:fit:1400/format:webp/1*Fjha9qN5EskCdAf9I3RVlA.jpeg" height="200px" width="300px" />
    <br />
    <input type="submit" class="btn" value="Submit Button" />
    <input type="button" class="btn" value="Dummy Button" />
  </body>
</html>

Ques 128. Use of ‘details’ and ‘summary’ tag in HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-128</title>
    <style>
      details {
        background: rgb(255, 189, 255);
        padding: 20px;
        box-sizing: border-box;
        width: 400px;
        color: black;
      }
      summary {
        font-size: 30px;
        background: black;
        color: white;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 10px;
      }
    </style>
  </head>
  <body>
    <details>
      <summary>HTML</summary>
      <p>
        Hyper Text Markup Languagep . Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Quo architecto provident tempore porro neque pariatur,
        iure autem, debitis officia itaque natus expedita. Atque optio amet
        magni debitis ullam excepturi voluptatem rem, nostrum soluta quo? Sunt
        possimus aliquid laborum vel qui, ducimus harum, repellendus
        reprehenderit quos soluta rem sit esse rerum explicabo exercitationem ad
        suscipit consectetur ab impedit commodi? Et, repellat? Inventore cum
        iusto quaerat vitae maxime dolor quod maiores unde, porro sapiente odio
        quas neque soluta amet itaque quos debitis dolore facere ullam quam quis
        sed repellendus quibusdam? Dolore similique voluptate, iure repellat eos
        quis asperiores quisquam molestiae et libero?
      </p>
    </details>
    <details>
      <summary>CSS</summary>
      <p>
        Hyper Text Markup Languagep . Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Quo architecto provident tempore porro neque pariatur,
        iure autem, debitis officia itaque natus expedita. Atque optio amet
        magni debitis ullam excepturi voluptatem rem, nostrum soluta quo? Sunt
        possimus aliquid laborum vel qui, ducimus harum, repellendus
        reprehenderit quos soluta rem sit esse rerum explicabo exercitationem ad
        suscipit consectetur ab impedit commodi? Et, repellat? Inventore cum
        iusto quaerat vitae maxime dolor quod maiores unde, porro sapiente odio
        quas neque soluta amet itaque quos debitis dolore facere ullam quam quis
        sed repellendus quibusdam? Dolore similique voluptate, iure repellat eos
        quis asperiores quisquam molestiae et libero?
      </p>
    </details>
    <details>
      <summary>Java Script</summary>
      <p>
        Hyper Text Markup Languagep . Lorem ipsum dolor sit amet consectetur
        adipisicing elit. Quo architecto provident tempore porro neque pariatur,
        iure autem, debitis officia itaque natus expedita. Atque optio amet
        magni debitis ullam excepturi voluptatem rem, nostrum soluta quo? Sunt
        possimus aliquid laborum vel qui, ducimus harum, repellendus
        reprehenderit quos soluta rem sit esse rerum explicabo exercitationem ad
        suscipit consectetur ab impedit commodi? Et, repellat? Inventore cum
        iusto quaerat vitae maxime dolor quod maiores unde, porro sapiente odio
        quas neque soluta amet itaque quos debitis dolore facere ullam quam quis
        sed repellendus quibusdam? Dolore similique voluptate, iure repellat eos
        quis asperiores quisquam molestiae et libero?
      </p>
    </details>
  </body>
</html>

Ques 129. Use of ‘transform’ property in CSS.

<html>
  <head>
    <title>HTML-CSS-129</title>
    <style>
      body {
        background-image: url(https://m.media-amazon.com/images/I/716IVrK0J9L._AC_SL1500_.jpg);
        background-size: 100% 100%;
      }
      div {
        height: 300px;
        width: 300px;
      }
      #outer {
        background: rgba(2555, 255, 255, 0.5);
        border: 5px groove grey;
        box-sizing: border-box;
        margin: 200px auto;
      }
      #inner {
        background: black;
        font-size: 50px;
        text-align: center;
        line-height: 300px;
        color: white;
        transition: all ease 0.5s;
      }
      #inner:hover {
        /* transform:rotate(45deg); */
        /* transform:rotateX(45deg); */
        /* transform:rotateY(45deg); */
        /* transform:skew(20deg); */
        /* transform:skewX(20deg); */
        /* transform:skewY(20deg); */
        /* transform:translate(30%); */
        /* transform:translateX(30%); */
        /* transform:translateY(30%); */
        /* transform:translate3d(10px,10px,10px); */
        /* transform: scale(1.5); */
        /* transform: scaleX(2.5); */
        transform: scaleY(2);
        /* transform: scale3d(1%, 90%, 1%); */
        /* transition: all linear 1s; */
        transition: all ease 1s;
        transform-origin: center;
      }
    </style>
  </head>
  <body>
    <div id="outer"><div id="inner">HTML</div></div>
  </body>
</html>

Ques 130. Create this design using ‘transform’ property in CSS.

<html>
  <head>
    <title>HTML-CSS-130</title>
    <style>
      body {
        background: url(https://miro.medium.com/v2/resize:fit:1400/format:webp/1*Fjha9qN5EskCdAf9I3RVlA.jpeg);
        background-size: cover;
      }
      div {
        height: 300px;
        width: 300px;
      }
      #dv1 {
        background: rgba(123, 212, 0, 0.5);
        margin: 100px auto;
        border: 10px groove grey;
      }
      #dv2 {
        background: white;
        font-size: 30px;
        text-align: center;
        line-height: 300px;
        font-weight: bold;
        font-family: cursive;
        /* transform: rotate(45deg); */
        transform-origin: bottom right;
        /* transform-origin: 25% 50%; */
        transition: all 1s;
      }
      #dv2:hover {
        /* transform: skew(30deg,10deg); */
        /* transform: skewX(45deg); */
        /* transform: skewY(45deg); */
        /* transform: translateX(100px); */
        /* transform: translateY(100px); */
        /* transform: translate(100px,100px); */
        /* transform: scaleX(2); */
        /* transform: scaleX(1.5); */
        /* transform:scaleY(2);  */
        /* transform:scale(2);  */
        transform: scale(0.5);
        transition: all 1s;
        box-shadow: 0px 0px 20px 2px black;
      }
    </style>
  </head>
  <body>
    <div id="dv1"><div id="dv2">shubhampal.co.in</div></div>
  </body>
</html>

Ques 131. Use of ‘transform perspective rotate’ property in CSS.

<html>
  <head>
    <title>HTML-CSS-131</title>
    <style>
      body {
        background: khaki;
      }
      div {
        height: 300px;
        width: 400px;
        border-radius: 5px;
      }
      #dv1 {
        border: 5px groove white;
        margin: 100px auto;
        background-image: url(https://www.androidheadlines.com/wp-content/uploads/2023/02/Internet-image-8398349.webp);
        background-size: 100% 100%;
      }
      #dv2 {
        background: rgba(255, 255, 255, 0.9);
        text-align: center;
        line-height: 300px;
        font-size: 40px;
        font-weight: bold;
        font-family: cursive;
        transition: all 1s;
      }
      #dv2:hover {
        /* transform: perspective(600px) rotateX(30deg); */
        /* transform-origin: top; */
        transform: perspective(1000px) rotateY(30deg);
        transform-origin: left;
        transition: all 1s;
      }
    </style>
  </head>
  <body>
    <div id="dv1"><div id="dv2">shubhampal.co.in</div></div>
  </body>
</html>

Ques 132. Design this loader using ‘animation’ property in CSS.

<html>
  <head>
    <title>HTML-CSS-132</title>
    <style>
      body {
        background: rgba(0, 0, 0, 0.8);
      }
      #box {
        height: 100px;
        width: 100px;
        border: 8px solid white;
        border-top: 8px solid red;
        border-radius: 50%;
        margin: 250px auto;
        transition: 1s;
        animation: box 1s linear infinite;
      }
      #box:hover {
        animation-play-state: paused;
      }
      #bubble {
        height: 5px;
        width: 5px;
        border: 8px solid red;
        border-radius: 50%;
        position: relative;
        left: 4px;
        box-shadow: 0px 0px 1px 3px rgba(255, 0, 0, 0.8);
      }
      @keyframes box {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(-360deg);
        }
      }
    </style>
  </head>
  <body>
    <div id="box">
      <div id="bubble"></div>
    </div>
  </body>
</html>

Ques 133. Design this loader using ‘animation’ property in CSS.

<html>
  <head>
    <title>HTML-CSS-133</title>
    <style>
      #outer{
        height: 25px;
        width: 280px;
        margin: 250px auto;
        color: blue;
        font-size: 40px;
        font-weight: bold;
        font-family: cursive;
      }
      #box1,#box2,#box3,#box4
      {
        height: 25px;
        width: 25px;
        float: right;
        margin-right: 10px;
        border-radius: 50%;
        animation: box 1s linear infinite;
        line-height: 25px;
      }
     #box1
     {
        animation-delay: 0.4s;
      }
      #box2
      {
        animation-delay: 0.5s;
      }
      #box3
      {
        animation-delay: 0.6s;
      }
      #box4
      {
        animation-delay: 0.7s;
      }
      @keyframes box
      {
        0%
        {
          background: white;
          opacity: 0;
        }
        50%
        {
          background: blue;
          box-shadow: 0px 0px 5px aqua,0px 0px 10px aqua;
          opacity: 1;
          transform: translateY(100%)
        }
        100%
        {
          background: white;
          opacity: 0;
        }
      }
</style>
  </head>
  <body>
    <div id="outer">
      Loding
      <div id="box1"></div>
      <div id="box2"></div>
      <div id="box3"></div>
      <div id="box4"></div>
    </div>
  </body>
  </html>

Ques 134. Create this text-animation using animation property in CSS.

<html>
  <head>
    <title>HTML-CSS-134</title>
    <style>
      body {
        background: rgba(0, 0, 0, 0.9);
      }
      div {
        height: 100px;
        text-align: center;
        font-size: 80px;
        color: rgba(255, 255, 255, 0.942);
        font-family: arial;
        font-weight: bold;
          margin: 280px auto;
        margin-left: 240px;
      }
      p {
        float: left;
        animation: para 1.5s linear infinite;
        margin: 10px;
        text-align: center;
      }
      @keyframes para {
        0% {
          color: rgba(255, 255, 255, 0.942);
          text-shadow: none;
        }
        100% {
          color: white;
          text-shadow: 0px 0px 10px aqua, 0px 0px 20px aqua, 0px 0px 30px aqua,
            0px 0px 100px aqua;
          transform: rotate(45deg);
          /* transform: rotateX(45deg); */
          /* transform: rotateY(45deg); */
        }
      }
      p:nth-child(1) {
        animation-delay: 0s;
      }
      p:nth-child(2) {
        animation-delay: 0.1s;
      }
      p:nth-child(3) {
        animation-delay: 0.2s;
      }
      p:nth-child(4) {
        animation-delay: 0.3s;
      }
      p:nth-child(5) {
        animation-delay: 0.4s;
      }
      p:nth-child(6) {
        animation-delay: 0.5s;
      }
      p:nth-child(7) {
        animation-delay: 0.6s;
      }
      p:nth-child(8) {
        animation-delay: 0.7s;
      }
      p:nth-child(9) {
        animation-delay: 0.8s;
      }
      p:nth-child(10) {
        animation-delay: 0.9s;
      }
      p:nth-child(11) {
        animation-delay: 1s;
      }
      p:nth-child(12) {
        animation-delay: 1.1s;
      }
      p:nth-child(13) {
        animation-delay: 1.2s;
      }
      p:nth-child(14) {
        animation-delay: 1.3s;
      }
      p:nth-child(15) {
        animation-delay: 1.4s;
      }
      p:nth-child(16) {
        animation-delay: 1.5s;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <p>s</p>
      <p>h</p>
      <p>u</p>
      <p>b</p>
      <p>h</p>
      <p>a</p>
      <p>m</p>
      <p>p</p>
      <p>a</p>
      <p>l</p>
      <p>.</p>
      <p>c</p>
      <p>o</p>
      <p>.</p>
      <p>i</p>
      <p>n</p>
    </div>
  </body>
</html>

Ques 135. Design this loader using ‘animation’ property in CSS.

<html>
  <head>
    <title>HTML-CSS-135</title>
    <style>
      #outer{
        height: 150px;
        width: 320px;
        margin: 150px auto;
        padding: 55px 74px;
        box-sizing: border-box;
      }
      #box1,#box2,#box3,#box4,#box5,#box6{
        height: 35px;
       width: 12px;
        background: black;
        float: left;
        margin-right: 15px;
        animation: box 1s ease-in infinite reverse;
      }
      #box1{
        animation-delay: 0s;
      }
      #box2{
        animation-delay: 0.1s;
      }
      #box3{
        animation-delay: 0.2s;
      }
      #box4{
        animation-delay: 0.3s;
      }
      #box5{
        animation-delay: 0.4s;
      }
      #box6{
        animation-delay: 0.5s;
      }
      @keyframes box
      {
        0%
        {
          transform: scaleY(1);
        }
        25%
        {
          transform: scaleY(2.6);
        }
        50%
        {
          transform: scaleY(2.6);
        }
        100%
        {
          transform: scaleY(1);
        }
      }
</style>
  </head>
  <body>
    <div id="outer">
      <div id="box1"></div>
      <div id="box2"></div>
      <div id="box3"></div>
      <div id="box4"></div>
      <div id="box5"></div>
      <div id="box6"></div>
    </div>
  </body>
  </html>

Ques 136. Design this double loader using ‘animation’ property in CSS.

<html>
  <head>
    <title>HTML-CSS-136</title>
    <style>
      #outer{
        height: 300px;
        width: 600px;
        margin: 100px auto;
        padding: 55px 74px;
        box-sizing: border-box;
      }
      .inner{
        height: 100px;
        width: 350px;
        padding: 55px 74px;
        box-sizing: border-box;
        margin: 5px auto;
      }
      #box1,#box2,#box3,#box4,#box5,#box6{
        height: 40px;
        width: 17px;
        background: black;
        float: left;
        margin-right: 16px;
        animation: box1 2s linear infinite reverse;
        background: #77d8a4;
      }
      #box1{
        animation-delay: 0s;
      }
      #box2{
        animation-delay: 0.1s;
      }
      #box3{
        animation-delay: 0.4s;
      }
      #box4{
        animation-delay: 0.6s;
      }
      #box5{
        animation-delay: 0.8s;
      }
      #box6{
        animation-delay: 1s;
      }
      @keyframes box1
      {
        0%
        {
          transform: scaleX(1);
          transform: scaleY(1);
        }
        50%
        {
          transform: scaleX(1.1);
          transform: scaleY(3);
        }
        100%
        {
          transform: scaleX(1);
          transform: scaleY(1);
        }
      }
      #box7,#box8,#box9,#box10,#box11,#box12{
        height: 40px;
        width: 17px;
        background: black;
        float: left;
        margin-right: 16px;
        animation: box2 2s linear infinite reverse;
        background: #182c72;
      }
      #box7{
        animation-delay: 0s;
      }
      #box8{
        animation-delay: 0.2s;
      }
      #box9{
        animation-delay: 0.4s;
      }
      #box10{
        animation-delay: 0.6s;
      }
      #box11{
        animation-delay: 0.8s;
      }
      #box12{
        animation-delay: 1s;
      }
      @keyframes box2
      {
        0%
        {
          transform: scaleX(1.1);
          transform: scaleY(3);
        }
        50%
        {
          transform: scaleX(1);
          transform: scaleY(1)
        }
        100%
        {
          transform: scaleX(1.1);
          transform: scaleY(3);
        }
      }
</style>
  </head>
  <body>
    <div id="outer">
    <div class="inner">
      <div id="box1"></div>
      <div id="box2"></div>
      <div id="box3"></div>
      <div id="box4"></div>
      <div id="box5"></div>
      <div id="box6"></div>
    </div>
    <div class="inner">
      <div id="box7"></div>
      <div id="box8"></div>
      <div id="box9"></div>
      <div id="box10"></div>
      <div id="box11"></div>
      <div id="box12"></div>
    </div>
  </div>
  </body>
  </html>

Ques 137. Create this color-animation using animation property in CSS.

<html>
  <head>
    <title>HTML-CSS-137</title>
    <style>
      #outer{
        height: 400px;
        width: 550px;
        margin: auto;
        padding: 55px 74px;
        box-sizing: border-box;
      }
      #box1,#box2,#box3,#box4,#box5,#box6,#box7,#box8{
        height: 400px;
        width: 50px;
        background: black;
        float: left;
        animation: box 0.7s linear infinite alternate;
      }
      #box1{
        animation-delay: 0s;
        background: #9600ff;
      }
      #box2{
        animation-delay: 0.1s;
        background: #ff00ec;
      }
      #box3{
        animation-delay: 0.2s;
        background: #df0045;
      }
      #box4{
        animation-delay: 0.3s;
        background: #ff0000;
      }
      #box5{
        animation-delay: 0.4s;
        background: #ffa900;
      }
      #box6{
        animation-delay: 0.5s;
        background: #fff700;
      }
      #box7{
        animation-delay: 0.6s;
        background: #1aff00;
      }
      #box8{
        animation-delay: 0.7s;
        background: #0078ff;
      }
      @keyframes box
      {
        0%
        {
          background: #9600ff;
        }
        12%
        {
          background: #ff00ec;
        }
        24%
        {
          background: #df0045;
        }
        36%
        {
          background: #ff0000;
        }
        48%
        {
          background: #ffa900;
        }
        60%
        {
          background: #fff700;
        }
        72%
        {
          background: #1aff00;
        }
        100%
        {
          background: #0078ff;
        }
      }
</style>
  </head>
  <body>
    <div id="outer">
      <div id="box1"></div>
      <div id="box2"></div>
      <div id="box3"></div>
      <div id="box4"></div>
      <div id="box5"></div>
      <div id="box6"></div>
      <div id="box7"></div>
      <div id="box8"></div>
    </div>
  </body>
  </html>

Ques 138. Design this loader using ‘animation’ property in CSS.

<html>
  <head>
    <title>HTML-CSS-138</title>
    <style>
      #outer{
        height: 150px;
        width: 300px;
        margin: 100px auto;
        padding: 55px 74px;
        box-sizing: border-box;
      }
      #box1,#box2,#box3,#box4,#box5,#box6{
        height: 100px;
        width: 30px;
        background: black;
        float: left;
        margin-right: 15px;
      }
      #box1{
        height: 100px;
        width: 30px;
        animation: box1 1.2s linear infinite alternate forwards;
      }
      #box2{
        height: 100px;
        width: 30px;
        animation: box2 1.2s linear infinite alternate forwards;
      }
      #box3{
        height: 100px;
        width: 30px;
        animation: box3 1.2s linear infinite alternate forwards;
      }
      @keyframes box1
      {
        0%
        {
          height: 250px;
        width: 30px;
        }
        50%
        {
          height: 150px;
        width: 30px;
        }
        100%
        {
          height: 100px;
        width: 30px;
        }
      }
      @keyframes box2
      {
        0%
        {
          height: 120px;
        width: 30px;
        }
        100%
        {
          height: 200px;
        width: 30px;
        }
      }
      @keyframes box3
      {
        0%
        {
          height: 100px;
        width: 30px;
        }
        50%
        {
          height: 50px;
        width: 30px;
        }
        100%
        {
          height: 150px;
        width: 30px;
        }
      }
</style>
  </head>
  <body>
    <div id="outer">
      <div id="box1"></div>
      <div id="box2"></div>
      <div id="box3"></div>
    </div>
  </body>
  </html>

Ques 139 . Use of ‘transform perspective rotate’ property in CSS.

<html>
  <head>
    <title>HTML-CSS-139</title>
    <style>
      body {
        background: rgba(0, 0, 0, 0.8);
      }
      #dv1 {
        height: 350px;
        width: 500px;
        border: 5px groove aqua;
        margin: 100px auto;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.5);
        /* transform-style: flat; */
        transform-style: preserve-3d;
        transform: rotateY(20deg);
      }
      #dv2 {
        height: 350px;
        width: 500px;
        background: url(https://miro.medium.com/v2/resize:fit:1400/format:webp/1*Fjha9qN5EskCdAf9I3RVlA.jpeg);
        background-size: 100% 100%;
        font-size: 50px;
        color: white;
        line-height: 350px;
        text-align: center;
        font-weight: bold;
        font-family: arial;
        transition: 1s;
      }
      #dv2:hover {
        /* transform: perspective(1000px) rotateX(-45deg); */
        /* transform-origin: top; */
        transform: perspective(1000px) rotateY(45deg);
        transform-origin: left;
        transition: 1s;
      }
    </style>
  </head>
  <body>
    <div id="dv1"><div id="dv2">shubhampal.co.in</div></div>
  </body>
</html>

Ques 140. Use of background-clip property in CSS.

<html>
  <head>
    <title>HTML-CSS-140</title>
    <style>
      div {
        background: aqua;
        padding: 100px;
        box-sizing: border-box;
        border: 10px dashed blue;
        color: blue;
        background-clip: content-box;
        /* background-clip: padding-box; */
        /* background-clip: border-box; */
      }
    </style>
  </head>
  <body>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda
      quaerat, esse nulla maiores aliquid at inventore iusto voluptas laudantium
      excepturi, magni possimus similique minima perferendis repudiandae id
      veritatis enim tenetur natus porro error. Hic, inventore consectetur quasi
      sed suscipit ab. Asperiores omnis maxime ex sint unde rem hic, accusantium
      rerum itaque aut ab eveniet necessitatibus sapiente aperiam enim magnam
      debitis. Quas repellendus incidunt eum ex architecto dolore. Quas nisi
      delectus assumenda consequatur voluptatibus nobis aspernatur totam sequi
      fuga ratione natus quidem est dolor dolorem, quo, nesciunt inventore
      asperiores, tenetur aliquam praesentium illo. Quod sit laudantium
      laboriosam? Consequuntur laborum ratione dolor corrupti suscipit, optio a,
      cupiditate eligendi libero ipsum, rerum deleniti reprehenderit nam unde?
      Amet sapiente recusandae omnis sequi, labore incidunt tempora cum rerum
      perspiciatis velit corporis, impedit reprehenderit aperiam eligendi
      itaque. Quas veritatis, voluptas neque unde beatae dolorum, eaque iusto ex
      amet placeat earum! A dolorum laboriosam voluptate voluptatum dolores
      dolore illo, autem, minima veniam repellat, at cum ullam! Cum laudantium,
      quisquam, vero excepturi tempore aliquid in quis quod doloremque aperiam,
      necessitatibus nobis? Atque facere consectetur iure ipsam aspernatur eos!
      Aliquid in reprehenderit ut non quos voluptatem mollitia veniam asperiores
      necessitatibus pariatur exercitationem neque porro deserunt, minus
      repellat, amet quod?
    </div>
  </body>
</html>

Ques 141. Use of ‘background-clip’ property in CSS.

<html>
  <head>
    <title>HTML-CSS-141</title>
    <style>
      body
      {
        background: rgba(202, 202, 202, 0.5);
      }
      h1
      {
        color: transparent;
        font-size: 200px;
        text-align: center;
        margin-top: 250px;
        background: url(https://www.androidheadlines.com/wp-content/uploads/2023/02/Internet-image-8398349.webp);
        background-size: 100% 100%;
        -webkit-background-clip: text;
        -moz-background-clip: text;
      }
    </style>
  </head>
  <body>
<h1>shubhampal.co.in</h1>
  </body>
</html>

Ques 142. Create this text-animation using animation property in CSS.

<html>
  <head>
    <title>HTML-CSS-142</title>
    <style>
      body {
        background: rgba(0, 0, 0, 0.8);
      }
      #outer {
        width: 1000px;
        margin: 150px auto;
      }
      p {
        color: white;
        font-size: 100px;
        float: left;
        font-family: arial;
        font-weight: bold;
        margin-left: 8px;
      }
      p {
        color: transparent;
        background: linear-gradient(orange, white, green);
        background-size: 100% 100%;
        -webkit-background-clip: text;
        animation: para 1.5s linear infinite reverse;
      }
      p:hover {
        animation-play-state: paused;
      }
      @keyframes para {
        0% {
          background: repeating-linear-gradient(white, white, white);
          color: transparent;
          -webkit-background-clip: text;
        }
        100% {
          background: repeating-linear-gradient(
            45deg,
            orange 5%,
            orange 10%,
            white 15%,
            white 20%,
            green 25%,
            green 30%
          );
          -webkit-background-clip: text;
          transform: translateY(5%);
        }
      }
      p:nth-child(1) {
        animation-delay: 0s;
      }
      p:nth-child(2) {
        animation-delay: 0.1s;
      }
      p:nth-child(3) {
        animation-delay: 0.2s;
      }
      p:nth-child(4) {
        animation-delay: 0.3s;
      }
      p:nth-child(5) {
        animation-delay: 0.4s;
      }
      p:nth-child(6) {
        animation-delay: 0.5s;
      }
      p:nth-child(7) {
        animation-delay: 0.6s;
      }
      p:nth-child(8) {
        animation-delay: 0.7s;
      }
      p:nth-child(9) {
        animation-delay: 0.8s;
      }
      p:nth-child(10) {
        animation-delay: 0.9s;
      }
      p:nth-child(11) {
        animation-delay: 1s;
      }
      p:nth-child(12) {
        animation-delay: 1.1s;
      }
      p:nth-child(13) {
        animation-delay: 1.2s;
      }
      p:nth-child(14) {
        animation-delay: 1.3s;
      }
      p:nth-child(15) {
        animation-delay: 1.4s;
      }
      p:nth-child(16) {
        animation-delay: 1.5s;
      }
    </style>
  </head>
  <body>
    <div id="outer">
      <p>s</p>
      <p>h</p>
      <p>u</p>
      <p>b</p>
      <p>h</p>
      <p>a</p>
      <p>m</p>
      <p>p</p>
      <p>a</p>
      <p>l</p>
      <p>.</p>
      <p>c</p>
      <p>o</p>
      <p>.</p>
      <p>i</p>
      <p>n</p>
    </div>
  </body>
</html>

Ques 143. Design this navbar using HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-143</title>
    <style>
      body {
        background: url(https://m.media-amazon.com/images/I/716IVrK0J9L._AC_SL1500_.jpg);
        background-size: 100% 100%;
      }
      nav {
        min-height: 50px;
        width: 840px;
        margin: auto;
        border: 1px solid white;
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.7);
      }
      nav ul {
        /* list-style: circle; */
        list-style: none;
      }
      nav ul li {
        color: white;
        height: 40px;
        width: 120px;
        float: left;
        text-align: center;
        line-height: 40px;
        transform: translateY(-12px);
        margin-left: 5px;
        border-radius: 5px;
      }
      a {
        text-decoration: none;
        margin-left: 10px;
        color: white;
        font-size: 18px;
        font-family: cursive;
        cursor: pointer;
        transition: 0.5s;
      }
      nav ul li:hover {
        background: white;
        color: black;
        transition: 0.5s;
        box-shadow: 0px 0px 0px 4px rgba(0, 0, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <nav>
      <ul>
        <a href="#"><li>HOME</li></a>
        <a href="#"><li>ABOUT</li></a>
        <a href="#"><li>SERVICES</li></a>
        <a href="#"><li>GALLERY</li></a>
        <a href="#"><li>REGISTER</li></a>
        <a href="#"><li>LOGIN</li></a>
      </ul>
    </nav>
  </body>
</html>

Ques 144. Design this menu and sub-menu navbar using HTML-CSS.

<html>
  <head>
    <title>HTML-CSS-144</title>
    <style>
        body {
        background: rgba(0,0,0,.8);
      }
      #menu {
        height: 50px;
        width: 740px;
        background: rgba(123, 134, 232, 0.8);
        border: 1px solid black;
        border-radius: 4px;
        margin: auto;
        font-family: arial;
      }
      #menu ul {
        list-style: none;
        transition: 0.5s;
      }
      #menu ul li {
        height: 40px;
        width: 110px;
        background: rgba(101, 114, 231, 0.8);
        text-align: center;
        line-height: 40px;
        color: white;
        float: left;
        transform: translateY(-11px);
      }
      #menu ul ul {
        margin-left: -40px;
        margin-top: 10px;
        display: none;
        /* opacity: 0; */
      }
      #menu ul li:hover ul {
        display: block;
        /* opacity: 1; */
        transition: 0.5s;
      }
      #menu ul ul ul {
        margin-left: 70px;
        transform: translateY(-38px);
        opacity: 0;
      }
      #menu ul ul li:hover ul {
        margin-left: 70px;
        transform: translateY(-38px);
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <nav id="menu">
      <ul>
        <a href=""><li>Home</li></a>
        <a href=""><li>About</li></a>
        <a href=""><li>Register</li></a>
        <a href=""><li>Services</li></a>
        <a href=""
          ><li>
            Gallery
            <ul>
              <li>Item 1</li>
              <li>Item 2</li>
              <li>
                Item 3
                <ul>
                  <li>Sub-Item 3.1</li>
                  <li>Sub-Item 3.2</li>
                  <li>Sub-Item 3.3</li>
                </ul>
              </li>
            </ul>
          </li></a
        >
        <a href=""><li>Login</li></a>
      </ul>
    </nav>
  </body>
</html>

निष्कर्ष – HTML-CSS Programs Notes

दोस्तों मैं उम्मीद करता हूँ कि मैंने इस पोस्ट के माध्यम से आपको HTML-CSS program notes यानि कि जो CSS Language के सभी प्रोग्राम के नोट्स प्रदान किये है वे सभी नोट्स आपके लिए जरुर फायदेमंद सिद्ध हुए होंगे और जिनके माध्यम से आपको CSS Language के सभी प्रोग्राम्स को समझने में भी बोहोत आसानी होगी|

पोस्ट को पूरा पढने के लिए धन्यवाद ! अगर आपका इस पोस्ट से सम्बन्धित कोई भी प्रश्न है तो आप नीचे कमेंट करके पूंछ सकते है |

This Post Is Updated Daily So Stay Connected & Stay Learn.

यह भी पढ़ें –

5/5 - (11 votes)

Shubham Pal

Shubham Pal (शुभम पाल) एक Digital Creator है जिसका हिन्दी ब्लॉग shubhampal.co.in है | इस ब्लॉग पर आपको टेक्नोलॉजी और कंप्यूटर से सम्बंधित बोहत सारी चीजो के बारे में बोहोत ही सरल भाषा में सीखने को मिलता है इसके साथ-साथ हमारे इस हिंदी ब्लॉग पर आपको YouTube , Blogging , Affiliate Marketing और ऑनलाइन पैसा कमाने के बोहोत सारे तरीको के बारे में भी जानने और सीखने को मिलता है |

shubhampal.co.in/

पोस्ट को शेयर करे!