Need assistance with creating a diamond shape in CSS with two sets of text on each side of a separating line inside the diamond. I've tried aligning and floating the text without luck. Any help would be appreciated.
body {
background-color: pink;
}
/*Developer Section*/
#developer {
width: 100%;
height: 100vh;
}
.diamond {
position: relative;
width: 600px;
height: 600px;
border: 5px solid #65C8D0;
background-color: #65C8D0;
margin: auto;
margin-top: 300px;
transform: rotate(45deg);
}
.headshot {
position: relative;
z-index: inherit;
background-color: black;
width: 250px;
height: 250px;
border-radius: 50%;
border: 5px solid #65C8D0;
margin: auto;
margin-top: -850px;
}
.developer-inner {
position: relative;
color: whitesmoke;
z-index: 1;
text-align: center;
}
.headshot-text h1 {
font-weight: bold;
}
.split {
width: 3px;
height: 400px;
background-color: whitesmoke;
margin: auto;
}<!--Dev Section-->
<section id = "developer">
<div class = "diamond"> </div>
<div class = "headshot"> </div>
<div class = "developer-inner">
<div class = "headshot-text">
<h1> Lorem Lorem </h1>
</div>
<div class = "developer-about">
<div class = "dev-panel-left">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
<div class = "split"> </div>
<div class = "dev-panel-right">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
</div>
</section>