Untitled

<!DOCTYPE html>
<html>
<head>

<title>Standard Int</title>

<header>
<h1 class="bubu">Standard Int</h1><form>User name:<br>
<input type="text" name="username" class="focus"><br>
User password: <br>
<input type="password" name="psw">
</form>
<button onclick="loginFunction()">Login</button>
<button onclick="regFunction()">Sign in</button>
<!--E-mail: <input type="text" id="e-mail"><br>
Password: <input type="text" id="password"><br> -->
<img src="tirol1.jpg" align="middle">

</header>

</head>
<style>
body {background-color: powderblue;}

input [type="text"] {

	display: block;
	margin: 0;
	width: 100%;
	appearance: none;
	box-shadow: none;
	border-radius: none;
}

input[type="text"]:focus {
	outline: none;


}


<!-- border: 2px solid red;
	border-radius: 4px;
	text-align: right;
	position: absolute;
	right: 20px; -->


<!--E-mail:. {

	position: absolute;
	right: 20px;
} -->


h1	{color: blue;
	text-align: center;
	font-size: 90px;
	border: 1px solid red;
	}

.bubu {
	margin: 0;
	padding: 0;

}

img {
	display: block;
	margin: auto;
	width: 100%;
	height: 220px;
	border: 3px solid red;

}


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-content1 {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content2 {
    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-content1 a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content2 a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}


.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown-content1 a:hover {background-color: #f1f1f1}

.dropdown-content2 a:hover {background-color: #f1f1f1}


.show {display:block;}
</style>

<body>
<!-- <body background="backgrgeorgi.png"> */ -->


<ul>

  <li class="dropdown1">
    <a href="javascript:void(0)" class="dropbtn1" onclick="myFunction1()">Actual Projects</a>
    <div class="dropdown-content1" id="myDropdown1">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>

    <li class="dropdown2">
    <a href="javascript:void(0)" class="dropbtn2" onclick="myFunction2()">Applications</a>
    <div class="dropdown-content2" id="myDropdown2">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn" onclick="myFunction()">About Me</a>
    <div class="dropdown-content" id="myDropdown">
      <a href="#">Biography</a>
      <a href="#">CV</a>
      <a href="#">Ideology</a>
    </div>
  </li>
</ul>

<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
 if (!e.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var d = 0; d < dropdowns.length; d++) {
      var openDropdown = dropdowns[d];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

function myFunction1() {
    document.getElementById("myDropdown1").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
 if (!e.target.matches('.dropbtn1')) {

    var dropdowns1 = document.getElementsByClassName("dropdown-content1");
    for (var d = 0; d < dropdowns1.length; d++) {
      var openDropdown1 = dropdowns1[d];
      if (openDropdown1.classList.contains('show')) {
        openDropdown1.classList.remove('show');
      }
    }
  }
}


function myFunction2() {
    document.getElementById("myDropdown2").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
 if (!e.target.matches('.dropbtn2')) {

    var dropdowns2 = document.getElementsByClassName("dropdown-content2");
    for (var d = 0; d < dropdowns2.length; d++) {
      var openDropdown2 = dropdowns2[d];
      if (openDropdown2.classList.contains('show')) {
        openDropdown2.classList.remove('show');
      }
    }
  }
}

</script>

<footer id="thefooter">
	<p>@Copy; 2015, Georgi Georgiev</p>
</footer>

</body>
</html>