CODEWITHSUNDEEP
htmlcss
user13119765
user13119765

Reputation:

HTML header not displaying

Background: I'm creating a portfolio website and I'm a beginner with HTML and CSS. I've been having trouble understanding layout and position and have been learning as much as possible. What I have so far is a background which uses P5.js and then I have a layer above that which acts as frosted glass to blue the background.

Problem: I have an h1 and paragraph tag wrapped in a header tag but they are not showing. They only show with 'position: absolute', is this the way it should be done? I have messed with the z-index but it doesn't seem to work.

var bubbles = [];
var minBubbles = 6;
var maxBubbles = 8;

function setup() {
  const canvas = createCanvas(window.innerWidth, window.innerHeight);
  canvas.parent("p5-canvas");
  
  frameRate(60);
  ellipseMode(CENTER);
  
  let numBubbles = round(random(minBubbles, maxBubbles));
  for (let i = 0; i < numBubbles; i++) {
    bubbles.push(new Bubble());
  }
}

function windowResized() {
  resizeCanvas(window.innerWidth, window.innerHeight);
}

function setGradient(c1, c2) {
  noFill();
  for (var y = 0; y < height; y++) {
    var inter = map(y, 0, height, 0, 1);
    var c = lerpColor(c1, c2, inter);
    stroke(c);
    line(0, y, width, y);
  }
}

//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////

function draw() {
  setGradient(color("#1fbfb8"), color("#1978a5"));
  
  for (let i = 0; i < bubbles.length; i++) {
    bubbles[i].update();
    if (bubbles[i].pop()) {
      bubbles.splice(i, 1);
      bubbles.push(new Bubble());
    }
    bubbles[i].show();
  }
}

//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////

class Bubble {
  constructor () {
    this.pos = createVector(random(0, width), random(0, height));
    this.vel = createVector(random(-0.2, 0.2), random(-0.2, 0.2));
    this.acc = createVector(random(-0.1, 0.1), random(-0.1, 0.1));
    
    this.size = random(50, 250);

    this.fadeIn = 3;
    this.fadeOut = 3;
    this.life = round(random(500, 2000));
    
    this.opacity = 0;
  }
  
  update() {
    // this.vel.add(this.acc);
    this.pos.add(this.vel);
    
    if (this.life !== 0 &&
        this.opacity < 0.75 &&
       (this.pos.x > 0 &&
        this.pos.x < width &&
        this.pos.y > 0 &&
        this.pos.y < height)) {
      this.opacity += 0.001;   
    }
    if ((this.life === 0 &&
         this.opacity > 0) ||
        (this.pos.x < 0 ||
         this.pos.x > width ||
         this.pos.y < 0 ||
         this.pos.y > height)) {
      this.opacity -= 0.001;
    }
    if (this.life > 0) {
      this.life -= 1;
    }
  }
  
  pop() {
    return (this.opacity <= 0) ||
           (this.pos.x < -this.size/2 ||
            this.pos.x > width + this.size/2 ||
            this.pos.y < -this.size/2 ||
            this.pos.y > height + this.size/2);
  }
  
  show() {
    noStroke();
    fill('rgba(255,255,255, ' + this.opacity + ')');
    ellipse(this.pos.x, this.pos.y, this.size, this.size);
  }
}
* {
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

///////////////////////////

header {
  z-index: 2;
  background: black;
  width: 100vw;
  height: 100%;
}

h1 {
  color: white;
  font-size: 10rem;
  line-height: 0.75;
  letter-spacing: -8px;
  padding: 25px;
  margin-top: 25px;
}

p {
  color: white;
  font-size: 1rem;
  letter-spacing: 1;
  padding: 25px;
}

///////////////////////////

main {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glass {
  z-index: 1;
  position: absolute;
  background: white;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.1)
  );
  backdrop-filter: blur(4rem);
  -webkit-backdrop-filter: blur(4rem);
}

#p5-canvas {
  z-index: 0;
  position: absolute;
  height: 100%;
  width: 100%;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Portfolio</title>
    <link rel="stylesheet" href="/style.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
    <script src="/script.js" defer></script>
  </head>
  <body>
    <div id="p5-canvas"></div>
    <div class="glass"></div>
    
    <header>
      <h1 id="name">Lorem Ipsum</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </header>
  </body>
</html>

Upvotes: 0

Views: 88

Answers (2)

Professor Abronsius
Professor Abronsius

Reputation: 33804

It is hard to know for sure if the desired effect is supposed to look like this or not - but this was achieved by setting positions for top and left on any elements with absolute position and changing the background colour of the header to transparent.

var bubbles = [];
var minBubbles = 6;
var maxBubbles = 8;

function setup() {
  const canvas = createCanvas(window.innerWidth, window.innerHeight);
  canvas.parent("p5-canvas");
  
  frameRate(60);
  ellipseMode(CENTER);
  
  let numBubbles = round(random(minBubbles, maxBubbles));
  for (let i = 0; i < numBubbles; i++) {
    bubbles.push(new Bubble());
  }
}

function windowResized() {
  resizeCanvas(window.innerWidth, window.innerHeight);
}

function setGradient(c1, c2) {
  noFill();
  for (var y = 0; y < height; y++) {
    var inter = map(y, 0, height, 0, 1);
    var c = lerpColor(c1, c2, inter);
    stroke(c);
    line(0, y, width, y);
  }
}

//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////

function draw() {
  setGradient(color("#1fbfb8"), color("#1978a5"));
  
  for (let i = 0; i < bubbles.length; i++) {
    bubbles[i].update();
    if (bubbles[i].pop()) {
      bubbles.splice(i, 1);
      bubbles.push(new Bubble());
    }
    bubbles[i].show();
  }
}

//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////

class Bubble {
  constructor () {
    this.pos = createVector(random(0, width), random(0, height));
    this.vel = createVector(random(-0.2, 0.2), random(-0.2, 0.2));
    this.acc = createVector(random(-0.1, 0.1), random(-0.1, 0.1));
    
    this.size = random(50, 250);

    this.fadeIn = 3;
    this.fadeOut = 3;
    this.life = round(random(500, 2000));
    
    this.opacity = 0;
  }
  
  update() {
    // this.vel.add(this.acc);
    this.pos.add(this.vel);
    
    if (this.life !== 0 &&
        this.opacity < 0.75 &&
       (this.pos.x > 0 &&
        this.pos.x < width &&
        this.pos.y > 0 &&
        this.pos.y < height)) {
      this.opacity += 0.001;   
    }
    if ((this.life === 0 &&
         this.opacity > 0) ||
        (this.pos.x < 0 ||
         this.pos.x > width ||
         this.pos.y < 0 ||
         this.pos.y > height)) {
      this.opacity -= 0.001;
    }
    if (this.life > 0) {
      this.life -= 1;
    }
  }
  
  pop() {
    return (this.opacity <= 0) ||
           (this.pos.x < -this.size/2 ||
            this.pos.x > width + this.size/2 ||
            this.pos.y < -this.size/2 ||
            this.pos.y > height + this.size/2);
  }
  
  show() {
    noStroke();
    fill('rgba(255,255,255, ' + this.opacity + ')');
    ellipse(this.pos.x, this.pos.y, this.size, this.size);
  }
}
* {
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}


header {
  z-index: 3;
  background: transparent;
  width: 100vw;
  height: 100%;
  position:absolute;
  top:0;
  left:0;
  opacity:1;
}



h1 {
  color: white;
  font-size: 10rem;
  line-height: 0.75;
  letter-spacing: -8px;
  padding: 25px;
  margin-top: 25px;
}

p {
  color: white;
  font-size: 1rem;
  letter-spacing: 1;
  padding: 25px;
}


.glass {
  z-index: 2;
  position: absolute;
  top:0;
  left:0;
  
  background: white;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.1)
  );
  backdrop-filter: blur(4rem);
  -webkit-backdrop-filter: blur(4rem);
  opacity:1;
}

#p5-canvas {
  z-index: 1;
  position: absolute;
  left:0;
  top:0;
  height: 100%;
  width: 100%;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Portfolio</title>
    <link rel="stylesheet" href="/style.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
    <script src="/script.js" defer></script>
  </head>
  <body>
    <div id="p5-canvas"></div>
    <div class="glass"></div>
    
    <header>
      <h1 id="name">Lorem Ipsum</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </header>
    
    
  </body>
</html>

Upvotes: 0

mohammad13
mohammad13

Reputation: 463

your css styles should be like this


* {
            margin: 0;
            padding: 0;
            overflow: hidden;
            box-sizing: border-box;
            font-family: 'Open Sans', sans-serif;
        }
        
        header {
            z-index: 2;
            background: black;
            width: 100vw;
            height: 100%;
        }
        
        h1 {
            color: white;
            font-size: 10rem;
            line-height: 0.75;
            letter-spacing: -8px;
            padding: 25px;
            margin-top: 25px;
        }
        
        p {
            color: white;
            font-size: 1rem;
            letter-spacing: 1;
            padding: 25px;
        }
        
        main {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .glass {
            z-index: -1;
            position: absolute;
            background: white;
            width: 100%;
            height: 100%;
            background: linear-gradient( to bottom right, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
            backdrop-filter: blur(4rem);
            -webkit-backdrop-filter: blur(4rem);
        }
        
        #p5-canvas {
            z-index: -1;
            position: absolute;
            height: 100%;
            width: 100%;
        }

Upvotes: 1

Related Questions