Make your own portfolio website

Part 3

Start with code from Part 2 here: https://github.com/sravyasridivakarla/SimplePortfolioGuide

Project Page Design:

Step 2: Project page

Background:

HTML skeleton:

<div class = “page white”>
  <div class = “side-large white”>
  </div>
  <div class = “side-small blue”>
  </div>
</div>

CSS:

We add overflow to the each page so that the divs inside are contained. Also for “side-small” and “side-large”, we want to have them positioned side by side. So we float each one to the left and set its width dimensions using “vw” measurement (view width) and its height dimensions using “vh” measurement (view height)

.page{
  height: 100vh;
  /* add overflow to contain the divs*/
  overflow: hidden;
}
.blue{
  background-color: #E4F2F2;
}
.grey{
  background-color: grey;
}
.side-small{
  width:40vw;
  height:100vw;
  float:left;
}
.side-large{
  width: 60vw;
  height:100vw;
  float:left;
  /*parent of gray box is relative*/
  position: relative;
}

After adding boxes on top:

HTML:

<div class = "page white">
  <div class = "side-large white">
    <div class = "projectTextBox white absolute">
      <h1> Project 1 </h1>
      <p>Lorem ipsum dolor sit ...</p>
    </div>
    <div class = "projectImageBox grey absolute"></div>
  </div>
  <div class = "side-small blue"></div>
</div>

CSS:

Here we play with the absolute and relative keywords to achieve the layering affect for the divs. The grey box is on top of the white and its top and left position is relative to the parent box “side-large”. Thats why “side-large” position is relative and “projectImageBox” and “projectImageBox” are absolute. This link helps to understand box positioning:

https://www.freecodecamp.org/news/how-to-use-the-position-property-in-css-to-align-elements-d8f49c403a26/

.page{
  height: 100vh;
  /* add overflow to contain the divs*/
  overflow: hidden;
}
.blue{
  background-color: #E4F2F2;
}
.grey{
  background-color: grey;
}
.side-small{
  width:40vw;
  height:100vw;
  float:left;
}
.side-large{
  width: 60vw;
  height:100vw;
  float:left;
  /*parent of gray box is relative*/
  position: relative;
}
.projectImageBox{
  height: 25%;
  width: 40%;
  top: 12%;
  left: 80%;
  position:absolute;
}
.projectTextBox{
  height: 25%;
  width: 40%;
  top: 12%;
  left: 20%;
  position:absolute;
}

Page 2 : Alternate Design

HTML:

<div class = “page white”>
  <div class = “side-small blue”>
  </div>
  <div class = “side-large white”>
    <div class = “projectImageBox projectImageBox-left grey absolute”></div>
    <div class = “projectTextBox white absolute”>
      <h1> Project 1 </h1>
      <p>Lorem ipsum dolor ...</p>
    </div>
  </div>
</div>

CSS:

Using the “.projectImageBox-left” class to just over right the positioning of grey image box so that it can go on the other side of the “side-large” div.

.projectImageBox-left{
  left: -20%;
}

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