Untitled

<DOCTYPE! html>
<html lang="en">
<head>
  <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="main.css" />
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"/>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
  <title>Hot Beans Official</title>
</head>
<body>
	<div id="header-wrap" class="animated fadeInDownBig">
		<div id="header-content">
		<header>
			<h1> Hot Beans </h1>
			<h2> Experts when it come to web development </h2>
		</header>
		</div>
	</div>

	<div id="navbar-wrap" class="animated fadeInLeftBig">
	<nav>
		<ul>
			<li><button> N/A </button></li>
			<li><button> N/A </button></li>
			<li><button> N/A </button></li>
			<li><button> N/A </button></li>
		<div class="dropdown">
		<li><button class="dropbtn">Recruitment</button></li>
			<div class="drop-content">
				<a href="#"> Apply Now! </a>
				<a href="#"> Our Team </a>
				<a href="#"> About Us </a>
				<a href="#"> Contact Us </a>
			</div>
		</div>
		</ul>
	</nav>
	</div>

	<div id="main-wrap" class="animated fadeIn">
		<main>
		<h1 id="title-one"> Recruitment <h1>
		<center>
		<p>Hot Beans is a website development company, located in
		the UK. Currently, we're looking for 3 talented and passionate
		Junior Web Developers, who'll fit in and help out in a team of
		5. This is a great opportunity to expand on knowledge, and learn
		new things! If your interested in kick starting your career as a
		Web Developer, we'd love to hear from you! Have a look through
		the Recruitment section of the website to learn more!</p>
		</center>
		<img src="interview.jpeg" alt="recruitment" id="img-one"/>
		</main>
	</div>

</body>
</html>

-----------------styling----------------------------
*{
	padding:0;
	font-family:Helvetica;
	margin: 0 auto;
}

html{
	background-color:#F5F5F5;
}

#header-wrap {
	top:0;
	position:absolute;
	background-color:#151515;
	width:100%;
	height:160px;
	animation-duration:1.5s;
}

h2 {
	font-size:20px;
}

h1 {
	font-size:46px;
}

header {
	color:F5F5F5;
	text-align:center;
}

#header-content {
	position: relative;
	top: 50%;
	transform: translateY(-53%);
}

#navbar-wrap {
	align-items:center;
	position:fixed;
	font-size:20px;
    bottom: 452px;
	width:100%;
	height:50px;
	text-align:center;
	animation-delay:1.7s;
	background-color:#3D9970;
	z-index:5;
}

nav, li, button {
	align-items:center;
	margin-right: 8px;
	display: inline;
	text-align: center;
}

nav, ul {
	align-items:center;
	position: relative;
	transform: translateY(30%);
    list-style: none;
}

li, button {
	border: none;
	font-size: 18px;
	background-color: #3D9970;
	align-items: center;
	font-weight: bold;
	cursor: pointer;
	color: #323232;
	padding: 5px;
	margin-right: 16px;
	text-align: center;

}

button:hover{
	border-bottom:2px solid black;
	color:black;
}


#main-wrap {
	animation-delay:3s;
	width:600px;
	height:385px;
	background-color:#F5F5F5;
	border:4px solid #A9A9A9;
    position:fixed;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
	bottom:25px;
}

#img-one{
	width:246px;
	height:166px;
	position:fixed;
    margin-left:180px;
	bottom:35px;

}

#title-one {
	font-size:22px;
	text-decoration:underline;
	padding:10px;
}

p {
	font-weight:normal;
	font-size:18px;
	padding-left:10px;
	line-height:1.3;
}

.dropdown {
	position: relative;
    display: inline-block;
}

.drop-content {
    display: none;
    position: absolute;
    background-color: #3D9970;
    width: 146px;
}

.drop-content a {
	font-size:15px;
	font-weight:bold;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.drop-content a:hover {
	background-color:#AAAAAA;

	}

.dropdown:hover .drop-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color:;
}

/* ------------------------------------- RESPOSIVE ------------------------------------- */

/* MAX WIDTH 630px */
@media (max-width:630px){

	.drop-content {
    width: 122px;
}

	.drop-content a {
	font-size:13px;
    padding: 10px 14px;
}

	li, button {
	font-size: 16px;
	margin-right: 7px;
}

	nav, ul {
	transform: translateY(18%);
	}

	#navbar-wrap {
    bottom: 462px;
	height:40px;
	position:fixed;
}

	#img-one{
		bottom:63px;
		margin-left:78px;
	}

	#title-one{
		font-size:19px;
	}

	p {
		padding-left:2px;
		font-size:14px;
	}

	#main-wrap{
		bottom:55px;
		width:400px;
	}

}


/* MAX WIDTH 450px */
@media (max-width:450px){

	#img-one{
		bottom:59px;
		margin-left:69px;
	}

	#title-one{
		font-size:18px;
	}

	p{
		padding-left:1px;
		font-size:14px;
	}

	#main-wrap{
		bottom:50px;
		width:370px;
	}

	h2 {
	font-size:16px;
	}

	h1 {
	font-size:38px;
	}
}


/* MAX WIDTH 400px */
@media (max-width:400px){

	#navbar-wrap {
    bottom: 303px;
	height:30%;
	text-align:center;
	}

	nav, li, button {
	bottom:60px;
	align-items:center;
	display: block;
	text-align: center;
	left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
	}

	#main-wrap{
		border:1px solid #A9A9A9;
		height:200px;
		bottom:75px;
	}

	.drop-content {
    width:114px;
	}

	#img-one{
		display:none;
	}

	#title-one{
		font-size:17px;
	}

	li, button {
	font-size: 15px;
	}

	.drop-content {
    width:113px;
	}

	button:hover{
		border:none;
		background-color:#AAAAAA;
	}

}


/* MAX WIDTH 390px */
@media (max-width:390px){
	#main-wrap{
		bottom:50px;
		height:240px;
		width:300px;
	}

	p{
		line-height:1.4;
	}

	li, button {
	font-size: 15px;
	}

	.drop-content {
    width:104px;
	}

	button:hover{
		border:none;
		background-color:#AAAAAA;
	}

	h1{
		font-size:30px;
	}

	h2{
		font-size:15px;
	}
}

/* MAX HEIGHT 642PX */
@media (max-height:642px){

	#header-content {
	position: relative;
	top: 50%;
	transform: translateY(-65%);
}
}