How to rotate first element wit flexbox and make it full-height? - html

Question

I try to implement this graphic with HTML, CSS using flexbox:
Now, I have trouble with the left part. I don't know how to implement this -90 degrees rotated element. The right part (all elements that are horizontally aligned) is not the problem.
Here is what I have so far:
.container {
max-width: 1176px;
width: 100%!important;
margin: 0 auto!important;
float: none!important;
z-index: 1;
}
.pt {
padding-top: 3.5rem;
/* 56px */
}
.pb {
padding-bottom: 3rem;
/* 48px */
}
.ptms {
padding-top: 1.5rem;
/* 24px */
}
.full-width {
width: 100%;
padding: 0 1.5rem;
}
.three-col {
width: 33.3333334%;
padding: 0 1.5rem;
}
.platform-container,
.platform-card-container {
display: flex;
}
.platform-card-container .three-col,
.platform-card-container .full-width {
padding: 0 .75rem;
}
.platform-card-container a {
text-decoration: none;
}
.platform-card,
.platform-card-first {
border-radius: .5rem;
box-shadow: 0 .25rem .75rem 0 rgba(27, 27, 27, 0.24);
display: flex;
height: 100%;
}
.platform-card {
align-items: center;
}
.platform-card-first {
}
.platform-card-icon {
padding: .75rem;
border-radius: 50%;
background-color: #f5f5f5;
width: 3.5rem;
height: 3.5rem;
min-width: 3.5rem;
}
.platform-card-text {
margin-left: 1rem;
}
.platform-card-text-title {
margin-bottom: .5rem;
color: #1b1b1b;
}
.platform-card-text-desc {
color: #007095;
}
<div class="container platform-container">
<div>
<div class="pt platform-card-container">
<div class="full-width">
<a href="">
<div class="platform-card-first">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-technology-3d-printing-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Open Architecture</h4>
<div class="platform-card-text-desc">Extend systems as required</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div>
<div class="pt platform-card-container">
<div class="three-col">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-design-ruler-triangle-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">User Interface</h4>
<div class="platform-card-text-desc">Modern front-end technologies</div>
</div>
</div>
</a>
</div>
<div class="three-col">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-mobile-phone-location-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Intelligent Mobility</h4>
<div class="platform-card-text-desc">Mobile and offline access</div>
</div>
</div>
</a>
</div>
<div class="three-col">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-network-monitor-team-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Social Collaboration</h4>
<div class="platform-card-text-desc">Efficient teamwork</div>
</div>
</div>
</a>
</div>
</div>
<div class="ptms platform-card-container">
<div class="full-width">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-toys-lego-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Low-Code Suppport</h4>
<div class="platform-card-text-desc">Processes without programming</div>
</div>
</div>
</a>
</div>
</div>
<div class="ptms platform-card-container">
<div class="three-col">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-multimedia-shuffle-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Business Rule Engine</h4>
<div class="platform-card-text-desc">Intelligent decision making</div>
</div>
</div>
</a>
</div>
<div class="three-col">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-programming-module-puzzle-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Integration</h4>
<div class="platform-card-text-desc">Standard connectors and more</div>
</div>
</div>
</a>
</div>
<div class="three-col">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-transportation-road-sign-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Adaptive Case Management</h4>
<div class="platform-card-text-desc">Making processes flexible</div>
</div>
</div>
</a>
</div>
</div>
<div class="ptms platform-card-container">
<div class="full-width">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-interface-settings-cog-double-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Process Engine</h4>
<div class="platform-card-text-desc">Powerful process automation</div>
</div>
</div>
</a>
</div>
</div>
<div class="ptms platform-card-container">
<div class="full-width">
<a href="">
<div class="platform-card">
<div class="platform-card-icon">
<img src="img/icons/axonivy-website-icon-work-presentation-projector-screen-darkblue.svg">
</div>
<div class="platform-card-text">
<h4 class="platform-card-text-title">Modern Runtime Platform</h4>
<div class="platform-card-text-desc">Environment with container support</div>
</div>
</div>
</a>
</div>
</div>
</div>
Does anyone have a hint on how I should proceed?

Answer 1

I believe these styles are what you want:
text-align: right;
writing-mode: vertical-rl;
transform: rotate(180deg);
text-orientation: mixed;
https://jsfiddle.net/aycq2v8u/
edit: I noticed that the height still wasn't right. (BTW, display:grid makes this sort of thing easier). here's a revision with that fixed as well. although, this does require either ridiculous looking selectors or changes to the html, which I have done here: https://jsfiddle.net/rxgbo4a9/
changes required:
the card container of the first card (that needs to be full height) needs to be different. since it is on the side and generally different content, I marked it as an aside:
<aside class="pt platform-card-container">
then, with that, using minimal changes to your css we get the desired result:
aside.platform-card-container {
height:100%
}
aside.platform-card-container a {
display: flex;
height: 100%
}
note that specifying height instead of using flexbox is not ideal. however, since all your code makes the same mistake, I think you minimize technical debt to keep all the problems of the same type .. ie, keep using height until you are ready to remove it generally.