Computer Hope

Internet & Networking => Web design => Topic started by: High1 on December 11, 2018, 01:43:46 PM

Title: Reposition arrow?
Post by: High1 on December 11, 2018, 01:43:46 PM
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.