Modus

HTML
<!DOCTYPE> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="desccription" content="practice"> <meta name="keywords" content="html, css"> <meta name="author" content="hungnguyen"> <link href="css/style.css" type="text/css" rel="stylesheet"> <title>Modus</title> </head> <body> <header> <h1> MODUSversus </h1> <nav class="navigation-main"> <ul class="navigation-block"> <li class="navigation-list"> <a href="#" class="navigation-dtl">home</a> </li> <li class="navigation-list"> <a href="#" class="navigation-dtl">about</a> </li> <li class="navigation-list"> <a href="#" class="navigation-dtl">services</a> </li> <li class="navigation-list"> <a href="#" class="navigation-dtl">portfolio</a> <ul class="onclick-menu-content"> <li> <a href="">portfolio 1</a> </li> <li> <a href="">portfolio 2</a> </li> <li> <a href="">portfolio 3</a> </li> </ul> </li> <li class="navigation-list"> <a href="#" class="navigation-dtl">blog</a> </li> <li class="navigation-list"> <a href="#" class="navigation-dtl">features</a> </li> <li class="navigation-list"> <a href="#" class="navigation-dtl">contacts</a> </li> </ul> </nav> </header> </body> </html>
CSS
body { max-width: 1400px; max-height: 1200px; width: 100%; height: 100%; margin: 0px; padding: 0px; } a { text-decoration: none; text-transform: uppercase; } ul { list-style: none; } li { display: inline-block; } header { display: flex; justify-content: space-between; background-color: rgb(100, 186, 207); } .navigation-main { display: flex; align-items: center; } .navigation-list { padding: 10px 10px; } .navigation-dtl { color: rgb(255, 255, 255); } .navigation-list:hover { background-color: rgb(77, 139, 155); border-radius: 10%; box-shadow: 0px 5px rgb(51, 90, 100); cursor: pointer; } .navigation-list:active { background-color: rgb(230, 94, 94); border-radius: 10%; box-shadow: 0px 5px rgb(168, 10, 10); } .onclick-menu-content.navigation-list:active { position: relative; display: block; } .onclick-menu-content { position: absolute; z-index: 1; display: none; }
JAVASCRIPT
Expand for more options Login