Task 52

In this example below you will see how to do a Task 52 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by boleus, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright boleus ©
  • HTML
  • CSS
  • JavaScript
    <html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#">Вакансии</a></li>
        <li>
          <form action="#" method="post">
            <input type="search" placeholder="Поиск по вaкансиям" autofocus>
            <input type="submit" value="">
          </form>
          </li>
        <li><a href="#">Зарплаты</a></li>
        <li><a href="#">Компании</a></li>
        <li><a href="#">Блог</a></li>
        <li><a href="#">Новости</a></li>
        <li><a href="#">Календарь</a></li>
      </ul>
    </nav>
  </body>
</html>

<!-- 22.05.2017 Гриб Николай Валерьевич -->

/*Downloaded from https://www.codeseek.co/boleus/task-52-oWJbQV */
    html {
  font-family: Arial, serif;
  font-size: 12px;
}

nav {
  background-color: #696969;
  padding: 1em;
}

nav ul {
  list-style: none;
  margin: 0;
  border-radius: 0.5em;
  border-style: solid;
  border-width: 0.025em;
  border-color: #A9A9A9;
  padding: 0;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  display: inline-block;
  padding: 0 1em;
  color: white;
}

nav ul li:nth-child(4) a,
nav ul li:nth-child(6) a{
  border-right: 1px solid white;
}


nav ul li form {
  vertical-align: bottom;
 
}

nav ul li input[type='search']{
  display: inline-block;
  font-size: 1em;
  width: 15em;

  border: none;
  vertical-align: middle;
    background-color: #FFF8DC;
    border-radius: 0.25em;
  padding: 0.2em;


}

nav ul li input[type='submit'] {
  display: inline-block;
  background: url('http://icongal.com/gallery/download/7439/160/png');
  width: 2em;
  height: 2em;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  background-size: 100%;
  border: none;
  vertical-align: middle;
  right: 2.5em;
  font-size: 0.9em;
  background-color: transparent;
 
  

}
nav ul li input[type='submit']:focus {
  outline: none;
}



/*Downloaded from https://www.codeseek.co/boleus/task-52-oWJbQV */
    

Comments