Make your own portfolio website

Part 2

Title page design:

Step 2: Title page

HTML skeleton:

<div class = "page beige" >
  
  <div>
    <h1>Sravya Divakarla</h1>
    <div>
      <a>Home</a>
      <a>Contact</a>
      <a>Projects</a>
    </div>
  </div>
  
  <div>
    <h1>HEY THERE!</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>
  </div>
  <div> 
  </div>

</div>

Now lets add some styling to the title bar:

TITLE BAR:

HTML:
<div class = "page beige" >
  <div class = "topnav">
    <h1 class="name">Sravya Divakarla</h1>
  <div class = "topnav-right">
    <a class="topElement">Home</a>
    <a class="topElement">Contact</a>
    <a class="topElement">Projects</a>
  </div>
</div>

You want the name on the left and the links to the right. So make divs to separate the whole nav bar on top. Then we have all the links to the right in another div so we can keep those together.

.topnav {
  font-family: sans-serif;
  overflow: hidden;
}
.name {
  float: left;
  text-align: center;
  padding: 14px 16px;
  font-size: 50px;
}
.topnav-right{
  float: right;
  font-size: 30px;
  text-align: center;
  padding: 70px 60px;
}
.topElement{
    padding: 30px
}

The “topnav” class will make the the overflow hidden.

The name is padded left and the links are padded right

CONTENT:

There are several concepts for understanding how to make 2 divs go over each other like the design shows. Here is the code:

HTML:
<div class = "imageBox grey absolute"> </div>
<div class = "textbox">
  <h1>HEY THERE!</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>
</div>

CSS:
.imageBox{
  height: 50vh;
  width: 60vw;
  top: 35vh;
  left: 35vh;
  position:absolute;
  background-color: grey;
}
        
.textbox {
  background-color: white;
  padding: 30px;
  width: 30vw;
  position:absolute;
  top: 25vh;
  left: 25vh;
}

Position is set to absolute which means that the divs are being positioned relative to the page.

Top and left give the position of the divs.

And Voila! You are done with your title page!

All code published here: https://github.com/sravyasridivakarla/SimplePortfolioGuide