Okay so I am really new to HTML and CSS and I decided, after learning some theory, reading on tutorials that I should start a project so I can at least see some progress and not give up just because I have been doing what tutorials tell me.

So what I’ve decided is that I want to create a simple webpage presenting a famous person, I hit the random famous person generator and I get no more or less but Elon Musk.

This is how far I’ve gotten doing the coding:

<!DOCTYPE html>
<html>
<head><link rel="stylesheet" type="text/css" href="../HTML/styles.css" >
</head>

<body>




      
      
      <div class="box">
<img src="elonmusk.jpg" alt="Elon Musk" style="width:1475px;height:850px;">
<div class="text"
<h1>Elon Musk</h1>
      


<div class="box"
     <img src="elonmusk.jpg" alt="Elon Musk" style="width:1475px;height:850px;">
     <div class="words"
          <p>Space engineer, scientist and muskeeter.</p>
      </div>
      </div> 
      
     
      
         <p>Who am I?</p> <----- This here is what is not showing up.
      </body>

And, the CSS.

h1 {
            text-align: center;
            padding-top: 10px;
            font-size: 200px;
        }
        .introduction {
        font-weight: bold;
        color: black;
        font-size: 50px;
        letter-spacing: 2px;
        top: 100px;
        
        }
        
        .box{
            position: relative;
            display: inline-block; /*Make the width as wide as the image */
        
        }
        
        .text
             {
    
    z-index:100;
    position:absolute;    
    letter-spacing: 50px;
    font-family: Consolas;
    color:white;
    font-size:150px;
    font-weight:bold;
    left: 175px;
    top: 400px;
}

Screenshot of how the website looks so far:

Post image

What I would want to add next is add an “Who am I” section under the image, centered under the image that is. But for some reason I just cannot do it. I have tried moving it many pixels from left, right, top. I’ve tried changing the color as well, to no avail.

I’d like the text to be here as shown in screenshot:

Post image

Thank you for your time.



Source link

Write A Comment