I’m trying to make exactly same website as given example.
My h1 is stuck on the top of website and doesn’t come down
- How to place h1 in the middle of background image?
*HTML
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="header">
<h1>
Innovation<br>
cloud
</h1>
<p>
connect your idea globally
</p>
<a class = btn href ="#">Learn More</a>
<div class="container">
</div>
</div>
*CSS
/* Header */
.header {
height: 800px;
text-align: center;
background :url(https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg);
}
.header .container {
position: relative;
top: 200px;
}
.header h1 {
font-size: 80px;
line-height: 100px;
margin-top: 0px;
margin-bottom: 80px;
color: white;
text-transform: uppercase;
}
@media (min-width:850px) {
.header h1 {
font-size: 120px;
}
}
Thank you!