Personal portfolio issue

I am having issues disconnecting my slideshow from the word skills. When my slideshow scrolls the work “skills” moves with it. also if I write any paragraph it appears in block form. I have tried different things but nothing has worked would anyone have an idea?`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Calvin</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=STIX+Two+Text&display=swap" rel="stylesheet">
    
</head>
    <body>

    <!-- The sidebar -->
<div class="sidebar">
    <img class="profile" src ="images/profile (2).jpg" alt="pic of face">
    <p class="name">Calvin Lee</p>
    <p class="job">Front-End Web developer</p>
    <a href="about"><i class="fa fa-user" aria-hidden="true"></i>About</a>
    <a href ="skills"><i class="fa fa-book" aria-hidden="true"></i>Skills</a>
    <a href="projects"><i class="fa fa-laptop" aria-hidden="true"></i>Projects</a>
    <a href="contact"><i class="fa fa-phone" aria-hidden="true"></i> Contact</a>
  </div>

  
    <h1 class="me">About me</h1>
        <p class="aboutMe">I am a front-end web developer from Junction city, Kansas looking to expand my knowledge as a web developer. 
      After 11 years of being a mechanic I decided to learn web development to learn something new in my life and 
      that has not been a let down! I am hard working a persistant to make sure that the job is completed in the best
      possible way! 
        </p>
        
        
            <div class ="slideshow-container">
                <div class="mySlides fade">
                <img id=" slide" src="images/wakeUP.jpg" width="400px" height= "400px">
            </div>

            <div class ="slideshow-container">
                <div class="mySlides fade">
                    <img  id=" slide" src="images/kiss.jpg" width="400px" height= "400px">
            </div>

            <div class ="slideshow-container">
                <div class="mySlides fade">
                    <img  id="slide" src="images/orange.jpg" width="400px" height= "400px">
            </div>
        </div>

    <div id="resume">
        <div class="skills">
            <p>skills</p>
        </div>
    </div>
            
<script src="script.js"></script>            
</body>
</html>

CSS:

/*sidebar*/
.profile {
    border-radius: 50%;
    margin-left: 30px;
    margin-top: 25px;
}

.name {
    font-family: 'STIX Two Text', serif;
    font-size: 50px;
    padding-left: 58px;
    margin-bottom:0px;
    color: white;
    
}

.job {
    font-family: 'STIX Two Text', serif;
    font-size: 25px;
    padding-left: 50px;
    margin-top:0px;
    color: white;
    
}

.sidebar {
    height: 100%;
    width: 400px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color:gray;
    overflow-x: hidden;
  }

  .sidebar a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 30px;
    color: #f1f1f1;
    display: block;
    margin-left: 30%;
  }

  .sidebar a:hover {
    color: #df2121;
  }

  .main {
    margin-left: 160px; /* Same as the width of the sidenav */
    padding: 0px 10px;
  }

  @media screen and (max-height: 450px) {
    .sidebar {padding-top: 15px;}
    .sidebar a {font-size: 18px;}
  }

  /*About me */

 
  .me {
      padding-left: 50%;
      font-size: 50px;
      font-family: 'Times New Roman', Times, serif;
      text-decoration: underline;
  }

  .aboutMe {
      padding-left: 28%; 
      font-size: 30px;
      position: relative;
      top:10px;
      width: 500px;
      display:inline-block;
      font-family:'Times New Roman', Times, serif;
      line-height: 150%;
  }

  /* slideshow */

  .slideshow-container {
      max-width: 300px;
      position: relative;
      float: right;
      margin: auto;
      padding-top:2%;
      padding-right: 10%;
      display:block;
  }

  .mySlides {
      display: none;
  }

  .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }
  
  @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }

  /*skills*/

  .skills {
    padding-left: 50%;
      font-size: 50px;
      font-family: 'Times New Roman', Times, serif;
      text-decoration: underline;
  }

JavaScript

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  setTimeout(showSlides, 4000); 
}4

Yes, that happens because the <div> that contains the word is nested inside the <div> that contains the slideshow.

It is really advisable to always use an HTML validator tool. They can be really helpful!

In this case, that should point it out for you (although all of the points apply, the last three are the ones related to the issue you mentioned).

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.