Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

HTML/CSS/JS issues with positioning text on top of background

Tags:

javascript

html

css

header

I am using HTML CSS and JS to make a page on my website and when adding a logo and a menu as a header, the website does not work as intended. The text is supposed to be on top of the background and is supposed to be on the "overlay" class with is supposed to move to the side also when the menu icon is clicked. Also, the menu icon back ground has been removed and is supposed to be white. I don't know what I did wrong so any help will be appreciated! The bottom STYLE section is used for the menu and the header and the top STYLE code is used for the text I want to be displayed on top.

<!DOCTYPE html>
<html>
    <!DOCTYPE html>
 <section class="showcase">
   <script type="text/javascript">
   window.addEventListener('load', () => {
       const menuToggle = document.querySelector('.toggle');
       const showcase = document.querySelector('.showcase');

       menuToggle.addEventListener('click', () => {
           menuToggle.classList.toggle('active');
           showcase.classList.toggle('active');
       })
   });
      </script>
  <header>
     <style>
        #uploadinfo {
            font-family: 'Poppins', sans-serif;
            font-weight: 00;
            color: #fff;
            line-height: 2em;
            text-transform: uppercase;
            font-size: 1em;
            margin: 20px 0;
            max-width: 700px;
            text-align:center;
            position: absolute;
            left: 50%;
            top: 45%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
        #back
        {
        display: inline-block;
        font-size: 2.5em;
        background: #fff;
        text-transform: uppercase;
        text-decoration: none;
        font-weight: 500;
        margin-top: 10px;
        color: #111;
        letter-spacing: 2px;
        transition: 0.2s;
        justify-content: center;
        border: none;
        text-align:center;
        position: absolute;
        left: 50%;
        top: 80%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        }
        #back:hover
        {
        letter-spacing: 6px;
        }
        #email
        {
        display: inline-block;
        font-size: 2.5em;
        background: #fff;
        text-transform: uppercase;
        text-decoration: none;
        font-weight: 500;
        margin-top: 10px;
        color: #111;
        letter-spacing: 2px;
        transition: 0.2s;
        justify-content: center;
        border: none;
        text-align:center;
        position: absolute;
        left: 50%;
        top: 90%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        }
        #email:hover
        {
        letter-spacing: 6px;
        }
        #text {
            font-family: 'Poppins', sans-serif;
            font-weight: 300;
            color: #fff;
            line-height: 2em;
            text-transform: uppercase;
            font-size: 1em;
            margin: 20px 0;
            max-width: 700px;
            text-align:center;
            position: absolute;
            left: 50%;
            top: 52.5%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            z-index: 10;
        }
        #info {
            font-family: 'Poppins', sans-serif;
            font-weight: 800;
            color: #fff;
            line-height: 1em;
            text-transform: uppercase;
            font-size: 3em;
            margin: 20px 0;
            max-width: 700px;
            text-align:center;
            position: absolute;
            left: 50%;
            top: 12.5%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
        #info2 {
            font-family: 'Poppins', sans-serif;
            font-weight: 800;
            color: #fff;
            line-height: 1em;
            text-transform: uppercase;
            font-size: 3em;
            margin: 20px 0;
            max-width: 700px;
            text-align:center;
            position: absolute;
            left: 50%;
            top: 27.5%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
        #back
        {
        display: inline-block;
        font-size: 2.5em;
        background: #fff;
        text-transform: uppercase;
        text-decoration: none;
        font-weight: 500;
        margin-top: 10px;
        color: #111;
        letter-spacing: 2px;
        transition: 0.2s;
        justify-content: center;
        border: none;
        text-align:center;
        position: absolute;
        left: 50%;
        top: 80%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        }
        #back:hover
        {
        letter-spacing: 6px;
        }
        #email
        {
        display: inline-block;
        font-size: 2.5em;
        background: #fff;
        text-transform: uppercase;
        text-decoration: none;
        font-weight: 500;
        margin-top: 10px;
        color: #111;
        letter-spacing: 2px;
        transition: 0.2s;
        justify-content: center;
        border: none;
        text-align:center;
        position: absolute;
        left: 50%;
        top: 90%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        }
        #email:hover
        {
        letter-spacing: 6px;
        }

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*
{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Poppins', sans-serif;
}
header
{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 padding: 40px 100px;
 z-index: 1000;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
header .logo
{
 color: #fff;
 text-transform: uppercase;
 cursor: pointer;
}
.toggle
{
 position: relative;
 width: 60px;
 height: 60px;
 background: url(https://i.ibb.co/HrfVRcx/menu.png);
 background-repeat: no-repeat;
 background-size: 30px;
 background-position: center;
 cursor: pointer;
}
.toggle.active
{
 background: url(https://i.ibb.co/rt3HybH/close.png);
 background-repeat: no-repeat;
 background-size: 25px;
 background-position: center;
 cursor: pointer;
}
.showcase
{
 position: absolute;
 right: 0;
 width: 100%;
 min-height: 100vh;
 padding: 100px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 background: #011721;
 transition: 0.5s;
 z-index: 2;
}
.showcase.active
{
 right: 300px;
}

.showcase video
{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 opacity: 0.8;
}
.text
{
 z-index: 10;
}

.text h2
{
 font-size: 5em;
 font-weight: 800;
 color: #fff;
 line-height: 1em;
 text-transform: uppercase;
}
.menu
{
 position: absolute;
 top: 0;
 right: 0;
 width: 300px;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
}
.menu ul
{
 position: relative;
}
.menu ul li
{
 list-style: none;
}
.menu ul li a
{
 text-decoration: none;
 font-size: 24px;
 color: #011721;
}
.menu ul li a:hover
{
 color: #03a9f4; 
}

@media (max-width: 991px)
{
 .showcase,
 .showcase header
 {
   padding: 40px;
 }
 .text h2
 {
   font-size: 3em;
 }
}
    </style>
    <h2 class="logo">LOGO HERE</h2>
    <div class="toggle"></div>
   </header>
   </div>
   </div>
 </section>
 <div class="menu">
   <ul>
     <li><a href="/">Home</a></li>
     <li><a href="/signup">Sign Up</a></li>
     <li><a href="/login">Login</a></li>
     <li><a href="/contact">Contact</a></li>
   </ul>
 </div>
    <div class='overlay'>
    <div class='text'>
        <p id='info'>Text</p>
        <p id='info2'>Text 2</p>
        <p id='uploadinfo'>Text 3</p>
        <a href="/login"><button id='back'>Login</button></a>
        <a href="mailto:EMAIL"><button id='email'>Button</button></a>
    </div>
</div>
    <body style="background-color: #011721;">
    </body>
    </div>
</body>
</html>
like image 419
Python 123 Avatar asked Dec 21 '25 18:12

Python 123

1 Answers

do you need remove duplicite body tag and adjustment close tag header, clean tags div empty also

This code work ok follow example solution

 window.addEventListener('load', () => {
   const menuToggle = document.querySelector('.toggle');
   const showcase = document.querySelector('.showcase');

   menuToggle.addEventListener('click', () => {
     menuToggle.classList.toggle('active');
     showcase.classList.toggle('active');
   })
 });
#uploadinfo {
  font-family: 'Poppins', sans-serif;
  font-weight: 00;
  color: #fff;
  line-height: 2em;
  text-transform: uppercase;
  font-size: 1em;
  margin: 20px 0;
  max-width: 700px;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 45%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#back {
  display: inline-block;
  font-size: 2.5em;
  background: #fff;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  margin-top: 10px;
  color: #111;
  letter-spacing: 2px;
  transition: 0.2s;
  justify-content: center;
  border: none;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 80%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#back:hover {
  letter-spacing: 6px;
}

#email {
  display: inline-block;
  font-size: 2.5em;
  background: #fff;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  margin-top: 10px;
  color: #111;
  letter-spacing: 2px;
  transition: 0.2s;
  justify-content: center;
  border: none;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 90%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#email:hover {
  letter-spacing: 6px;
}

#text {
  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  color: #fff;
  line-height: 2em;
  text-transform: uppercase;
  font-size: 1em;
  margin: 20px 0;
  max-width: 700px;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 52.5%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 10;
}

#info {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  color: #fff;
  line-height: 1em;
  text-transform: uppercase;
  font-size: 3em;
  margin: 20px 0;
  max-width: 700px;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 12.5%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#info2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  color: #fff;
  line-height: 1em;
  text-transform: uppercase;
  font-size: 3em;
  margin: 20px 0;
  max-width: 700px;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 27.5%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#back {
  display: inline-block;
  font-size: 2.5em;
  background: #fff;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  margin-top: 10px;
  color: #111;
  letter-spacing: 2px;
  transition: 0.2s;
  justify-content: center;
  border: none;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 80%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#back:hover {
  letter-spacing: 6px;
}

#email {
  display: inline-block;
  font-size: 2.5em;
  background: #fff;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  margin-top: 10px;
  color: #111;
  letter-spacing: 2px;
  transition: 0.2s;
  justify-content: center;
  border: none;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 90%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#email:hover {
  letter-spacing: 6px;
}

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 40px 100px;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .logo {
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
}

.toggle {
  position: relative;
  width: 60px;
  height: 60px;
  background: url(https://i.ibb.co/HrfVRcx/menu.png);
  background-repeat: no-repeat;
  background-size: 30px;
  background-position: center;
  cursor: pointer;
}

.toggle.active {
  background: url(https://i.ibb.co/rt3HybH/close.png);
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: center;
  cursor: pointer;
}

.showcase {
  position: absolute;
  right: 0;
  width: 100%;
  min-height: 100vh;
  padding: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #011721;
  transition: 0.5s;
  z-index: 2;
}

.showcase.active {
  right: 300px;
}

.showcase video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.text {
  z-index: 10;
}

.text h2 {
  font-size: 5em;
  font-weight: 800;
  color: #fff;
  line-height: 1em;
  text-transform: uppercase;
}

.menu {
  position: absolute;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu ul {
  position: relative;
}

.menu ul li {
  list-style: none;
}

.menu ul li a {
  text-decoration: none;
  font-size: 24px;
  color: #011721;
}

.menu ul li a:hover {
  color: #03a9f4;
}

@media (max-width: 991px) {
  .showcase,
  .showcase header {
    padding: 40px;
  }
  .text h2 {
    font-size: 3em;
  }
}
<nav class="menu">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/signup">Sign Up</a></li>
    <li><a href="/login">Login</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
<section class="showcase">
  <header>
    <h2 class="logo">LOGO HERE</h2>
    <div class="toggle"></div>
  </header>
  <main>
    <div class='text'>
      <p id='info'>Text</p>
      <p id='info2'>Text 2</p>
      <p id='uploadinfo'>Text 3</p>
      <a href="/login"><button id='back'>Login</button></a>
      <a href="mailto:EMAIL"><button id='email'>Button</button></a>
    </div>
  </main>
</section>
like image 148
lucasferreiralimax Avatar answered Dec 24 '25 06:12

lucasferreiralimax

Sign in to Comment

Related questions

Javascript multiple value object to simple array
Why does babel convert "true" to "!0"
D3js X axis label style justify to left
Why does the click event not fire on my SVG group?
Do browsers always treat strings and numbers in Javascript as immutable?
nodejs query in query result loop
How can I iterate over an array in a Svelte store?
Keycloak Introspection Endpoint
How do you adjust the font and font family on this date script [duplicate]
Expression expected with const at React JS component

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!