CODEWITHSUNDEEP
htmlcss
ovy
ovy

Reputation: 11

How to code this section, any idea?

Does somebody have an idea how code this?

this section

I trying with :before, table, ul. It's immposible for me..

My code: 

.container {
  max-width: 960px;
  margin: 0 auto;
}

ul {
  padding-bottom: 50px;
  list-style-type: none;
}

li {
  position: relative;
}

li.content:before {
  content: "2012";
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-block;
  background-color: aqua;
  transform: rotate(90deg);
  overflow: hidden;
  padding: 20px 140px;
}

li.content {}
<ul class="container">
  <li class="content">
    <strong>Masters Degree</strong><br> Dhaka University<br>
    <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.A wonderful
      serenity has taken possession of my entire soul, like these sweet mornings.</p>
  </li>
</ul>

Upvotes: 0

Views: 74

Answers (1)

Temani Afif
Temani Afif

Reputation: 272909

Here is a simple idea that you can elaborate:

.timeline {
  margin: 0;
  padding: 0 80px;
  background: grey;
  list-style: none;
}

.timeline li {
  background: #fff;
  padding: 50px;
  position: relative;
  border-bottom:1px solid;
  border-top:1px solid;
  box-shadow:0 20px 0 #fff;
  margin-bottom:20px;
}
.timeline li:nth-child(even) {
  text-align:right;
}
.timeline li:before {
  content: attr(data-date);
  color: #fff;
  writing-mode: tb-rl;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 80px;
  padding:10px 0;
  background: blue;
}

.timeline li:nth-child(even)::before {
  left: 100%;
  right: auto;
}
.timeline li:after {
  content:"";
  position:absolute;
  top:20px;
  left:0;
  width:0;
  right:0;
  border-left:10px solid blue;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}
.timeline li:nth-child(even)::after {
  border-right:10px solid blue;
  border-left:none;
  right:0;
  left:auto;
}
* {
  box-sizing: border-box;
}
<ul class="timeline">
  <li data-date="2012 - 2018">Some text here</li>
  <li data-date="2012 - 2018">Some text here</li>
  <li data-date="2012 - 2018">Some text here</li>
</ul>

Upvotes: 1

Related Questions