Get Some Notepad Details(Shortcut Keys, Text Area) By HTML & CSS Program

Ticker

10/recent/ticker-posts

Get Some Notepad Details(Shortcut Keys, Text Area) By HTML & CSS Program

AK Creative 12/26/2020 04:27:00 PM

Create a Notepad 📖 Software Interface by Coding

HTML
<!doctype html>
<html lang="en">
<head>
<title>Dropdown</title>
<link rel="stylesheet" text="text/css" href="style.css">
<body>
<div class="np">
    <ul>
<li><font size="5">File</font>
<ul>
<li>New(Ctrl+n)</li>
<li>Open(Ctrl+o)</li>
<li>Save(Ctrl+s)</li>
<li>Save As</li>
<li>Page Setup</li>
<li>Print(Ctrl+p)</li>
<li>Exit(Alt+F4)</li>
</ul>
<li><font size="5">Edit</font>
<ul>
<li>Undo(Ctrl+z)</li>
<li>Cut(Ctrl+x)</li>
<li>Copy(Ctrl+c)</li>
<li>Paste(Ctrl+v)</li>
<li>Delete(Del)</li>
<li>Find(Ctrl+f)</li>
<li>Find Next(F3)</li>
<li>Replace(Ctrl+h)</li>
<li>Goto(Ctrl+g)</li>
<li>Select All(Ctrl+a)</li>
<li>Time/Date(F5)</li>
</ul>
<li><font size="5">Format</font>
            <ul>
<li>Word Wrap</li>
<li>Font</li>
                    </ul>
<li><font size="5">View</font>
<ul>
<li>Zoom</li>
<li>Status Bar</li>
</ul>
<li><font size="5">Help</font>
<ul>
<li>View Help</li>
<li>About Notepad</li>
</ul>
</div>
</body>
</head>
</html>

CSS
*
{
margin: 0;
padding: 0;
}
body
{
background-image: url(https://images.pexels.com/photos/399161/pexels-photo-399161.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);  
-webkit-background-size:cover;
background-size:cover;
background-position: center center;
height: 100vh;
}

.np
{
width: 950px; 
margin: 0 auto;
}
.np ul
{
list-style: none;
margin-top: 0.2%;
}
.np ul li 
{
background: hidden;
width: 170px;
border: 1.5px solid #fddd;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
color: #000;
font-size: 15px;
position: relative;
font-family: poppins;
text-transform: uppercase;
font-weight: bold;
}
.np ul li:hover
{
background: #ff99ff; 
}

.np ul ul
{
display: none;
}
.np ul li:hover > ul
{
display: block;
}
.np ul ul ul
{
margin-left: 70px;
top: 0;
position: relative;
}

OUTPUT




Post a Comment

49 Comments

  1. Unique KnowDecember 26, 2020 at 4:31 PM

    Very very very very beautiful
    Coding
    Interesting project

    ReplyDelete
  2. ArzuDecember 26, 2020 at 4:39 PM

    Very Beautiful

    ReplyDelete
  3. ShubhamDecember 26, 2020 at 4:39 PM

    Amazing creation

    ReplyDelete
  4. UnknownDecember 26, 2020 at 4:41 PM

    Superb

    ReplyDelete
  5. UnknownDecember 26, 2020 at 4:42 PM

    Awesome Work

    ReplyDelete
  6. UnknownDecember 26, 2020 at 4:43 PM

    Excellent

    ReplyDelete
  7. UnknownDecember 26, 2020 at 4:44 PM

    SUper nice

    ReplyDelete
  8. TanviDecember 26, 2020 at 4:45 PM

    Wonderful 🙏😊🙏😊🙏

    ReplyDelete
  9. UnknownDecember 26, 2020 at 4:45 PM

    Wow Very interesting

    ReplyDelete
  10. UnknownDecember 26, 2020 at 4:47 PM

    100%

    ReplyDelete
  11. UnknownDecember 26, 2020 at 4:47 PM

    WOw Great

    ReplyDelete
  12. UnknownDecember 26, 2020 at 4:48 PM

    Amazing Guys

    ReplyDelete
  13. UnknownDecember 26, 2020 at 4:49 PM

    Amazing Guys
    Nice

    ReplyDelete
  14. UnknownDecember 26, 2020 at 4:50 PM

    Amazing Guys

    ReplyDelete
  15. KritikaDecember 26, 2020 at 4:51 PM

    Awesome Work

    ReplyDelete
  16. UnknownDecember 26, 2020 at 4:51 PM

    Amazing Guys

    ReplyDelete
  17. UnknownDecember 26, 2020 at 4:52 PM

    Fantastic

    ReplyDelete
  18. UnknownDecember 26, 2020 at 4:53 PM

    Nice Job

    ReplyDelete
  19. UnknownDecember 26, 2020 at 4:53 PM

    Superb

    ReplyDelete
  20. KKDecember 26, 2020 at 4:54 PM

    Wonderful

    ReplyDelete
  21. UnknownDecember 26, 2020 at 4:55 PM

    Outstanding

    ReplyDelete
  22. UnknownDecember 26, 2020 at 4:56 PM

    Brilliant

    ReplyDelete
  23. UnknownDecember 26, 2020 at 4:56 PM

    Amazing Guys
    Wowwwwww

    ReplyDelete
  24. UnknownDecember 26, 2020 at 4:57 PM

    wow wow wow wow wow wow wow

    ReplyDelete
  25. UnknownDecember 26, 2020 at 4:58 PM

    Very Useful

    ReplyDelete
  26. snehaDecember 26, 2020 at 4:59 PM

    Great

    ReplyDelete
  27. AnonymousDecember 26, 2020 at 4:59 PM

    Wow mind-blowing

    ReplyDelete
  28. son aDecember 26, 2020 at 5:00 PM

    Amazing Guys

    ReplyDelete
  29. UnknownDecember 26, 2020 at 5:01 PM

    Wonderful

    ReplyDelete
  30. UnknownDecember 26, 2020 at 5:03 PM

    Amazing Guys

    ReplyDelete
  31. UnknownDecember 26, 2020 at 5:04 PM

    Superb

    ReplyDelete
  32. UnknownDecember 26, 2020 at 5:05 PM

    Amazing Guys

    ReplyDelete
  33. Rinku rinku upadhyayDecember 26, 2020 at 5:25 PM

    Amazing

    ReplyDelete
  34. UnknownDecember 26, 2020 at 5:46 PM

    Kallu
    Amazing

    ReplyDelete
  35. Jaunpur GPDecember 26, 2020 at 10:43 PM

    Amazing

    ReplyDelete
  36. SuperDecember 26, 2020 at 10:57 PM

    Amazing creation

    ReplyDelete
  37. MLLDecember 26, 2020 at 11:14 PM

    Wow Great

    ReplyDelete
  38. ArviDecember 26, 2020 at 11:39 PM

    Superb

    ReplyDelete
  39. WonderingDecember 27, 2020 at 11:55 AM

    Very Nice

    ReplyDelete
  40. Excellent workDecember 27, 2020 at 11:56 AM

    Awesome

    ReplyDelete
  41. AwesomeDecember 27, 2020 at 11:57 AM

    Awesome

    ReplyDelete
  42. WonderfulDecember 27, 2020 at 11:59 AM

    Awesome

    ReplyDelete
  43. Rock_ArviDecember 27, 2020 at 12:04 PM

    Attractive

    ReplyDelete
  44. A A ADecember 27, 2020 at 12:05 PM

    Wonderful

    ReplyDelete
  45. UnknownDecember 27, 2020 at 12:06 PM

    Attractive

    ReplyDelete
  46. FabulousDecember 27, 2020 at 12:07 PM

    Attractive

    ReplyDelete
  47. FabulousDecember 27, 2020 at 12:11 PM

    Attractive

    ReplyDelete
  48. UnknownDecember 28, 2020 at 10:58 AM

    Nice ma'am

    ReplyDelete
  49. UnknownDecember 28, 2020 at 10:59 AM

    Nice ma'am

    ReplyDelete