CREATE A WEBSITE WHICH INCLUDE DROP-DOWN AND OTHER BASIC HTML CODE.

Abhishek Srivasatava

Total Post:24

Points:168
Posted by  Abhishek Srivasatava
HTML  CSS 
 793  View(s)
Ratings:
Rate this:

Make the website containing 4 link on the top (Home) (About us) (carrier) (Interview question) (vertically).

All four link have drop down option.

Including log-in form & Image 


  1. Abhishek Srivasatava

    Post:24

    Points:168
    Re: Create a website which include drop-down and other basic HTML code.

    Here is the complete code for this question:

    <!doctype html>
    <html>
    <head>
    <style>
     
    .NewLine {
        position: relative;
        left: 200px;
        color:red
     
    }
     
    input[type=button], input[type=submit] {
        width: 50%;
        padding: 12px 20px;
        margin: 4px 0;
        box-sizing: border-box;
        border: none;
        background-color: Orange;
        color: white;
    }
     
    input[type=text] {
        width: 50%;
        padding: 12px 20px;
        margin: 4px 0;
        box-sizing: border-box;
        border: none;
        background-color: Red;
        color: white;
    }
     
    .bottomleft {
        position: absolute;
        bottom: 8px;
        left: 16px;
    }
     
     
    .bottomright {
        position: absolute;
        bottom: 1px;
        right: 1px;
    }
     
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }
     
    li {
        float: left;
    }
     
    li a, .dropbtn {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
     
    li a:hover, .dropdown:hover .dropbtn {
        background-color: red;
    }
     
    li.dropdown {
        display: inline-block;
    }
     
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
     
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }
     
    .dropdown-content a:hover {background-color: #f1f1f1}
     
    .dropdown:hover .dropdown-content {
        display: block;
    }
    </style>
    </head>
    <body>
    <abbr title="MindStick">
    <ul >
     
             
    <li class="dropdown">
        <a href="https://www.mindstick.com" class="dropbtn">Home</a>
        <div class="dropdown-content">
          <a href="https://www.mindstick.com">Main Page</a>
          <a href="https://www.mindstick.com/Services">Software page</a>
          <a href="https://www.mindstick.com/Products">Product Page</a>
        </div>
     
    <li class="dropdown">
        <a href="https://www.mindstick.com/Home/AboutUs" class="dropbtn">About us</a>
        <div class="dropdown-content">
          <a href="https://www.mindstick.com/ContactUs">USA</a>
          <a href="https://www.mindstick.com/ContactUs">India</a>
          <a href="https://www.mindstick.com/ContactUs">Autralia</a>
        </div>
     
    <li class="dropdown">
        <a href="https://www.mindstick.com/DeveloperSection/Interview" class="dropbtn">Interview Question</a>
        <div class="dropdown-content">
          <a href="https://www.mindstick.com/DeveloperSection/interview?authorId=51998">Abhishek's  Interview Question</a>
          <a href="https://www.mindstick.com/DeveloperSection/interview?authorId=186">Monoj's Interview Question</a>
          <a href="https://www.mindstick.com/DeveloperSection/interview?authorId=1245  ">Barbara's Interview Question</a>
        </div>
     
    <li class="dropdown">
        <a href="https://www.mindstick.com/Career" class="dropbtn">Carrier</a>
        <div class="dropdown-content">
          <a href="https://www.mindstick.com/Career#careerform">Software Engineer</a>
          <a href="https://www.mindstick.com/Career#careerform"> Senior Business Analyst</a>
          <a href="https://www.mindstick.com/Career#careerform">PHP Developer</a>
        </div>
    </li>
    </ul>
     
     
    <img src= "C:\Users\Uttam\Desktop\Photoshop\Newslatter\1_01.jpg" alt = "Loading" style="width:1500px;height:500px;">
     
    <div class= "NewLine">
    <a class="NewLine" href= "https://www.mindstick.com/"> <h1> Welcome to the MindStick gift Website!!!</h1></a>
    <h1><marquee behavior="scroll" direction="left" > Please Login !!! Don't be shy... </marquee></h1>
    </div>
     
     
    <div class=bottomright>
    <img  src= "C:\Users\Uttam\Desktop\Photoshop\Newslatter\1_02.jpg" alt = "Loading" style="width:500px;height:160px;">
    </div>
     
    <div class=bottomleft>
    <h3>Please Login for the Christmas Gift</h3>
    <form action="https://www.mindstick.com">
      <label for="fname"><b>UserName</b></label><br>
      <input type="text" id="fname" name="fname" value=" "><br>
      <label for="lname"><b>Password</b></label><br>
      <input type="text" id="lname" name="lname" value=" "> <br>
    <b><input type="Submit" value="Log-in"></b>
    </form>
    </div>
    </abbr>
    </body>
     
    </html>