|
Answer» Hello
I have a full-screen movie in a Web page that looks like this (please see attached).
I am trying to relocate the DOWNWARD facing arrow now above the Play button to where I have painted on the YELLOW star, but
it's proving a bit difficult.
I have the downward POINTING arrow in a footer below 'class content' and 'class content_heading':
Code: [Select]<body>
<div class="content">
<H1 class="content__heading">Welcome To Home Flix</h1>
<footer>
<a href="#one" class="button style2 down">More</a>
</footer>
</div>
</body>
The CSS for the above properties is:
Code: [Select]HTML, body, div, h1, p, a, video {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.content {
position: relative;
top: 30%;
z-index: 2;
max-width: 720px;
text-align: center;
margin: 0 auto;
}
.content__heading {
margin-top: -18%;
color: #94e8e3;
font-size: 44px;
}
I have stripped some styling aspects of the footer/arrow to make for easier reading:
Code: [Select]footer {
margin-top: 2em;
}
Thanks for any suggestions.
|
