Divs not aligning in a vertical manner :: URGENT HELP!

HTML-CSS
1

Recently, I have been working on a different version of my portfolio. I am a newbie at parallax scolling and wanted to add it in my website.

However, The divs that I am supposed to create parallax with are somewhat overlapping eachother, when they should be one after another in a scroll format.

Here’s the screen shot -

Screenshot 2023-03-05 093107
Screenshot 2023-03-05 0931071600×759 185 KB

Here’s the codepen link - https://codepen.io/5112008/pen/BaOLVrV

Or here’s the HTML-

<html>
  <head>
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'></head>
  <body>
    
<!--FIRST PARALLAX SCROLL-->
<div class="first">
  
  
<div id="stars"></div>
<div id="stars2"></div>
<div id="stars3"></div>
<div id="horizon">
  <div class="glow"></div>
</div>
<div id="earth"></div>
<div id="title">
  AKSHRA DUBE
</div>
<div id="subtitle">
  <span>
    A WEB DEVELOPER...
  </span>
  <span>
    FOR
  </span>
  <span>
    EVER.
  </span>
</div>
</div>

<!--SECOND PARALLAX SCROLL-->

<div class="second">
 <div class="about">
        <article>
          <div className="title">
            <h3>Who's this ?</h3>
            <p className="separator" />
          </div>
          <div className="desc full">
            <h4 className="subtitle">My name is Akshra.</h4>
            <p>
              I am a web developer and UX designer based in the beautiful city of Aurangabad, maharashtra,
              India.
            </p>
            <p>
              I really enjoy solving problems as well as making things pretty and easy to use. I
              can't stop learning new things; the more, the better. I also love photography, a hobby
              I'm taking along since the good old film cameras. 
            </p>
          </div>
          <div className="title">
            <h3>What does she do?</h3>
            <p className="separator" />
          </div>
          <div className="desc">
            <h4 className="subtitle">I'm a programmer.</h4>
            <p>
              For the front-end I usually work with Javascript, either standalone or including
              popular frameworks like ReactJS and VueJS. I also make the web pretty by using Sass,
              CSS and, whenever needed, any of their friends: Bootstrap, Bulma, etc.
            </p>
            <p>
              For the back-end I also work with Javascript (NodeJS, Express, MongoDB, etc). But, of
              course, whenever the project requires PHP, I do PHP as well (Wordpress, Laravel, etc).
            </p>
          </div>
          <div className="desc">
            <h4 className="subtitle">Also a designer.</h4>
            <p>
              I feel comfortable working with many Adobe products. Photoshop, Illustrator, InDesign,
              Lightroom or Xd are some kind of industry standards and I love working with them. I'm
              not limited to them, though: Gimp, Inkscape or Figma are also very valid applications
              that I've been working with.
            </p>
            <p>
              User interfaces, brochures, books, branding... You name it! As I mentioned, creating
              pretty things is particularly important for me.
            </p>
          </div>
        </article>
  </div>
    </div>
  </body>
</html>

Please help me quick cause its really urgent!
Please don’t hesitate to point out any improvments and new ideas if you have any…
Thanks in advance!!!

3

I’m taking a look now

7

This might take a while. There’s a lot going on

8

So from what I’ve seen a lot of your divs have a position of “absolute”. I did manage to make the title and subtitle classes move down by increasing the distance from the top.

#title {
    position: absolute;
    top: 150%
}

So you could take that route too, but when they’re in absolute position, it’s really difficult to make elements stack on top of one another automatically.

Maybe make a duplicate of this and experiment with other ways to stack elements on top of each other.

Like

.first{
    display: flex;
    flex-direction: column;
}
1 Like
9

nothing’s working… I tried both the ways.

10

Dang. I’ll take a look again.

11

Do the moving stars have to be in the “.first” div? Maybe put all the background effects in a separate div and give it a lower z-index?

.stars{
    z-index: 1;
}

.first, .second{
    z-index: 2;
}

I’ve been using DevTools to mess around with the CSS but it seems to work differently than in the codepen.

EDIT:

First, let’s forget the background for a moment. Did you want the words aligned like this?

Prototype
Prototype1092×851 32.1 KB

12

no…AKSHRA DUBE should come first then the rest of the matter

13

@Bl1xvan Thanks for taking so much effort…
I tried pasting the code in VS and it worked!!!
ig the problem was in codepen itself for not compiling or reading it the way I wanted it to…

1 Like