<div class="top"></div>
<div class="bottom">
  <div class="left">
    <div class="circle">
      <img src="https://i.imgur.com/7lLYaRV.jpg" alt="" width=100%>
    </div>
    <div class="textpersonal">
      PERSONAL
    </div>
    <div class="personal">
      <div class="textleft">
        Name
        <hr>
        Birthday
        <hr>
        Relationship
        <hr>
        Nationality
        <hr>
        Language
      </div>
      <div class="textright">
        Guan Zhi Wang
        <hr>
        1999,xx,xx
        <hr>
        in a relationship
        <hr>
        Taiwan
        <hr>
        Chinese
      </div>
    </div>
    <div class="textcontact">
      CONTACT
    </div>
    <div class="contact">
      <div class="textleft">
        Mobile
        <hr>
        Home
        <hr>
        Email
        <hr>
        instagram
        <hr>
        Address
      </div>
      <div class="textright">
        09xxxxxxxx
        <hr>
        06xxxxxxx
        <hr>
        joe94113@gmail.com
        <hr>
        Guan___zhi
        <hr>
        Taina 
      </div>
    </div>
  </div><div class="right">
  <div class="profiletext">
    profile
  </div>
  <div class="profile">
    我叫王冠智，目前就讀於實踐大學，興趣是寫code。<br>My name is Wang Guanzhi. I am currently studying at Shishi University.<br> My hobby is to write code. I want to become a software engineer and I will be a handsome engineer.
    <div class="circleskill">
            <div class="p90"</div>
            <div class="p180"></div>
            <div class="p270"></div>
    </div>
  </div>
  <div class="circletext">
    power
  </div>
  </div> 
  <div class="work">
    <div class="worktext">
      WORK
      
    </div>
  </div>
</div>

*{
  border: solid 2px;
  vertical-align: top;
  
}

.top{
  
}

.bottom{
  height: 1500px;
}

.left{
  display:inline-block;
  width: 30%;
  height: 1500px;
  box-sizing: border-box;
  background-color:#ddd;
}
.right{
  display:inline-block;
  width: 70%;
  height: 1500px;
  box-sizing: border-box;
  background-color:#F0F0F0;
}

.img{
  width: 200px;
  height: 200px;
}

.circle{
  position: absolute;
  width: 250px;height: 250px;
  border:solid 1px rgba(0,0,0,0.25);
  border-radius:100%;
  top:50px; left:75px;
  overflow:hidden;
}
.textpersonal{
  position: absolute;
  width: 160px;height: 30px;
  top:335px; left:75px;
  font-size:30px;
}
.personal{
  position: absolute;
  width: 270px;height: 170px;
  top:370px; left:75px;
  
}
.textleft{
  position:absolute;
  width:50%;height: 170px;
  font-size:15px;
  font-weight:bold;
}
.textright{
  position:absolute;
  left:135px;
  width:50%;
  height: 170px;
  font-size:15px;
}
.contact{
  position: absolute;
  width: 270px;height: 170px;
  top:615px; left:75px;
}
.textcontact{
  position: absolute;
  width: 160px;height: 30px;
  top:580px; left:75px;
  font-size:30px;
}
.profile{
  position: absolute;
  width: 715px;height: 130px;
  padding:80px;
  overflow:hidden;
  color:  #888888;
}
.circleskill{
  top:150px;
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  overflow: hidden;
  background-color: #000000;
}
.circleskill::after{
  content: "";
  display: block;
  background-color: #FFFFFF;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%)
}
.circletext{
  position: absolute;
  left:18px;top:30px;
  color:  #000000;
}
.profiletext{
  position: absolute;
  top:60px; 
  margin-left:83px;
  font-size:30px;
  text-decoration:underline;
}

.p90,.p180,.p270,.p360{
  width: 50%;
  height: 50%;
  position: absolute;
  left: 50%;
  top: 0;
  background-color: #888888;
}
.p180{
  top: 50%;
}
.p270{
  left: 0;
  top: 50%;
}
.p360{
  left: 0;
  top: 0;
}
.work{
  position: absolute;
  top:310px;
  width: 890px;height: 300px;
}
.worktext{
  position: absolute;
  top:20px; 
  margin-left:83px;
  font-size:30px;
  text-decoration:underline;
}
.circletext{
  position: absolute;
  top:187px;left:110px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.