3

HTML:

<div class="pageOne text-center">
    <div class="block1 text-center">
        <h1>Michael Randell</h1>
        <h3>Growth, Truth, Balance</h3>
    </div>
    <div class="btnList text-center">
        <a class="btn btn-default" href="#">Twitter</a>
        <a class="btn btn-default" href="#">GitHub</a>
        <a class="btn btn-default" href="#">Linkedin</a>
        <a class="btn btn-default" href="#">FreeCodeCamp</a>
    </div>  
</div>

CSS: 

.pageOne {
    background: url("http://worldmustwakeup.com/wp-content/uploads/2015/11/astronaut-outer-space-moon-nasa-astronauts-free-208100.jpg") center;
    height: 1000px;
    width: 100%;
    background-size: cover;
}

.block1 {
    background-color: black;
    opacity: .5;
    padding: 15px; 
    margin-bottom: 20%;
}

This is my CodePen:

http://codepen.io/mikerand/pen/QjRVYP

I'm beginner making my first profile page but I am stuck now.

I am trying to get the text with my name and buttons moved down the page...Not totally centered but a little bit above center. The problem is that when I try to change the margin, only the buttons move down the page. I do want a little bit of space between my name and the buttons but I can't get my name moved down.

Can anyone help a noob out? Thanks!

VincenzoC
  • 30,117
  • 12
  • 90
  • 112
Mike Randell
  • 43
  • 4
  • Add `padding-top: 100px;` (or the amount you desire) to your `block1` css. Note, I see you have margin-bottom: 20% - note that [percents don't do what you expect](http://stackoverflow.com/questions/5657964/css-why-doesn-t-percentage-height-work) for heights. Better to use [vh units](https://css-tricks.com/viewport-sized-typography/) or similar. – random_user_name Dec 16 '15 at 22:57
  • aah...you already answered it @cale_b. You rock mate. – Ash Dec 16 '15 at 23:01
  • thank you @cale_b perfect, now I can continue rolling! – Mike Randell Dec 16 '15 at 23:09

1 Answers1

1

May be adding a top padding will do the trick for you.

.block1 {
  background-color: black;
  opacity: .5;
  padding: 15px; 
  margin-bottom: 20%;
  padding-top: 15%;    
}

codepen : http://codepen.io/anon/pen/YwwMgL

Ash
  • 2,575
  • 2
  • 19
  • 27