How to create a css vertical line with circles and text on side in reactjs? - css

Question

Hi I have been trying to create something as showing in the image below but I do not know if my way of doing is correct or not, if not could you please correct me.
Thanks
please see the code I have tried:
<Box className="education-details">
<div className="circle"> </div>
<div className="not-circle">
<p className="education-degree">masters</p>
<p className="education-year"> 2017/2019</p>
<p className="education-location">Dublin business school</p>
</div>
<div className="circle"> </div>
<div className="not-circle">
<p className="education-degree">masters</p>
<p className="education-year"> 2017/2019</p>
<p className="education-location">Dublin business school</p>
</div>
<div className="circle"> </div>
<div className="not-circle">
<p className="education-degree">masters</p>
<p className="education-year"> 2017/2019</p>
<p className="education-location">Dublin business school</p>
</div>
</Box>
the CSS part
.education-details {
box-sizing: border-box;
}
.circle {
width: 17px;
height: 17px;
background-color: rgb(255, 0, 0);
border-radius: 50%;
margin-left: -1.75%;
position: absolute;
}
.not-circle {
/* margin-top: -30px;
margin-left: 1.5vw; */
}
The result
codesand box link

Answer 1

Finally, as your question was quite interesting, I played with codepen.io to create something similar to your original picture. I reduced a bit the HTML content like I mentionned in my comment as I prefer using pseudo-elements when possible for graphical concerns.
The HTML sementic could be improved by the use of <section>, <ul> and <li> elements also. In my proof of concept I just used <div> elements. I also prefered using <h2>, <h3> and <time> tags instead of ordinary <p> tags.
You can play with my codepen here: https://codepen.io/patacra/pen/wvperjL
You can see it here after SCSS was compiled to CSS:
html, body {
margin: 0;
position: relative;
}
html {
background-color: #f6f6f6;
}
html::before {
content: "";
display: block;
position: absolute;
z-index: -1;
border-radius: 50%;
background-color: #ffebeb;
top: 8em;
right: -8em;
width: 15em;
height: 15em;
}
body {
padding: 1em;
font-family: Arial, sans serif;
font-size: 14px;
}
body::before, body::after {
content: "";
display: block;
position: absolute;
z-index: -1;
border-radius: 50%;
background-color: #ffebeb;
}
body::before {
top: -10em;
left: -15em;
width: 25em;
height: 30em;
}
body::after {
top: -12em;
right: -12em;
width: 25em;
height: 25em;
}
.timelines {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.timeline-title {
font-size: 1em;
font-weight: bold;
}
.timeline-item {
margin-bottom: 2em;
}
.timeline-item h3 {
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
margin: 0;
position: relative;
}
.timeline-item h3::before {
content: "";
position: absolute;
left: -2.35em;
background-color: #fe4747;
width: 0.7em;
height: 0.7em;
border-radius: 50%;
transform: translate(-0.5px, 0.2em);
}
.timeline-items {
margin: 2em;
padding: 0.01em 0 3em 2em;
border-left: 1px solid #fe4747;
}
.timeline-item {
margin-top: -0.3em;
}
.timeline-item time {
display: block;
float: left;
background-color: #ffebeb;
padding: 0.2em 0.4em;
}
.timeline-item > * {
margin: 1em 0;
}
.timeline-item .location {
clear: both;
font-size: 0.85em;
font-style: italic;
}
<div class="timelines">
<div class="timeline education">
<h2 class="timeline-title">Education</h2>
<div class="timeline-items">
<div class="timeline-item">
<h3>Master of Science in information systems with computing</h3>
<time datetime="2017/2019">2017 – 2019</time>
<div class="location">Dublin Business School, Dublin, Ireland</div>
</div>
<div class="timeline-item">
<h3>Bachelor of electrical engineering</h3>
<time datetime="2011/2016">2011 – 2016</time>
<div class="location">North Maharashtra University, Jalgaon, India</div>
</div>
<div class="timeline-item">
<h3>Boys town public school</h3>
<time datetime="2009/2010">2009 – 2010</time>
<div class="location">Dublin Business School, Dublin, Ireland</div>
</div>
</div>
</div>
<div class="timeline experience">
<h2 class="timeline-title">Experience</h2>
<div class="timeline-items">
<div class="timeline-item">
<h3>Sofware developer</h3>
<time datetime="2020/2022">2020 – Present</time>
<div class="location">Kare, Newbridge, Ireland</div>
</div>
<div class="timeline-item">
<h3>Junior developer</h3>
<time datetime="2019/2020">2017 – 2019</time>
<div class="location">Unipupil limited, Dublin, Ireland</div>
</div>
<div class="timeline-item">
<h3>Junior developer</h3>
<time datetime="2015/2017">2017 – 2019</time>
<div class="location">Dublin Business School, Dublin, Ireland</div>
</div>
</div>
</div>
</div>