I have an issue with my CSS based page.
I would like to change the background-image on mouse-over the two div and point to another page when click.
I have 3 issues:
The change of background works fine when the screen is in portrait resolution but not in landscape.
I would like to have a fade animation on the background change but I couldn't figure out how.
I would need div1 and div2 to be link so that not only the background change, it also point to another page if user click. I couldn't add on the div without blocking the flex display.
Thank you!
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
text-align: center;
}
#media screen and (orientation:landscape) {
.container {
position: absolute;
display: flex;
width: 75vmin;
height: 100vmin;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.div1,
.div2 {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
width: 32.5vmin;
height: 100vmin;
background-color: #ddd;
}
}
#media screen and (orientation:portrait) {
.container {
position: absolute;
display: flex;
width: 100vmin;
height: 133vmin;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.div1,
.div2 {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
width: 50vmin;
height: 133vmin;
background-color: hsla(0, 0%, 0%, 0.1);
}
}
.background1,
.background2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
z-index: -1;
}
.background1 {
background: url("http://i.imgur.com/zFYHM67.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.background2 {
background: url("http://i.imgur.com/nYKEFNF.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.div1:hover~.background1 {
display: flex;
}
.div2:hover~.background2 {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="div1">Div 1</div>
<div class="background1"></div>
<div class="div2">Div 2</div>
<div class="background2"></div>
</div>
</body>
</html>
I made some changes in your code (mainly css) see the snippet below:
for issue 1 : you were using #media screen and (orientation:portrait) so the style inside only works for portrait
for issue 2 : i used opacity and transition to have an animation effect
for issue 3: i just changed div tag to a tag
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
text-align: center;
}
#media screen and (orientation:landscape) {
.container {
position: absolute;
display: flex;
width: 75vmin;
height: 100vmin;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.div1,
.div2 {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
width: 32.5vmin;
height: 100vmin;
background-color: #ddd;
}
}
.container {
position: absolute;
display: flex;
width: 100vmin;
height: 100vmin;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.div1,
.div2 {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
width: 50vmin;
height: 100vmin;
background-color: hsla(0, 0%, 0%, 0.1);
}
.background1,
.background2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: -1;
transition: all 1s;
}
.background1 {
background: url("https://www.w3schools.com/css/img_fjords.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.background2 {
background: url("https://www.w3schools.com/howto/img_mountains.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.div1:hover~.background1 {
display: flex;
opacity: 1;
}
.div2:hover~.background2 {
display: flex;
opacity: 1;
}
<div class="container">
Div 1
<div class="background1"></div>
Div 2
<div class="background2"></div>
</div>
Related
I've been given the following code:
.container {
color: white;
height: 80vh;
margin: 10vh 0 0 25vw;
position: relative;
width: 50vw;
}
.container::after {
content: "";
background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
background-position: center;
background-size: cover;
filter: brightness(.5);
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: -1;
}
.container_inside {
align-items: center;
display: flex;
flex-direction: column;
font-size: 1.5em;
height: calc(100% - 4em);
justify-content: center;
padding: 2em;
text-align: center;
width: calc(100% - 4em);
}
.small {
color: #e9e9e9;
font-size: .7em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The background</title>
</head>
<body>
<div class="container">
<div class="container_inside">
<p>Any fool can write code that a computer can understand. Good programmers write code that humans can
understand.</p>
<p class="small">Martin Fowler</p>
</div>
</div>
</body>
</html>
There are two goals here:
Make it work with ::after instead of ::before
There is a missing line of code somewhere in CSS and its absence ruins everything. Add the missing property to the right place to make it look as intended.
I've found the missing line of code (content: "";), and replaced ::before with ::after, here's where I got:
.container::after {
content: "";
background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
background-position: center;
background-size: cover;
filter: brightness(.5);
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: -1;
}
I'm struggling to get the background image to expand to it's full size, because otherwise the task is solved. The code editor tells me task 2 is correct, but for some reason task 1 is not being accepted and I assume it has to do with the image size, but I might be wrong.
Ideally it should look like this: https://ucarecdn.com/d24c1329-c0a3-4bd6-948c-5cfd83466c86/
Super appreciate any help with this!
Try to use this, with .container {width: 50vw;}
.container::after {
content: '';
background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
background-position: center;
background-size: cover;
filter: brightness(0.5);
position: absolute;
top: 50%; /* changed */
left: 50%; /* changed */
bottom: 0; /* added */
right: 0; /* added */
width: 100vw; /* changed */
height: 100vh; /* changed */
transform: translate(-50%, -50%); /* added */
z-index: -1;
}
The result:
* {
margin: 0; /* added */
padding: 0; /* added */
box-sizing: border-box; /* added */
}
.container {
color: white;
height: 80vh;
margin: 10vh 0 0 25vw;
position: relative;
width: 50vw;
}
.container::after {
content: '';
background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
background-position: center;
background-size: cover;
filter: brightness(0.5);
position: absolute;
top: 50%; /* changed */
left: 50%; /* changed */
bottom: 0; /* added */
right: 0; /* added */
width: calc(100vw - 30px); /* changed 3 times */
height: calc(100vh - 30px); /* changed 2 times */
transform: translate(-50%, -50%); /* added */
z-index: -1;
}
.container_inside {
align-items: center;
display: flex;
flex-direction: column;
font-size: 1.5em;
height: 100%; /* changed */
justify-content: center;
padding: 2em;
text-align: center;
width: 100%; /* changed */
}
.small {
color: #e9e9e9;
font-size: 0.7em;
}
<div class="container">
<div class="container_inside">
<p>Any fool can write code that a computer can understand. Good programmers write code that humans can understand.</p>
<p class="small">Martin Fowler</p>
</div>
</div>
As Mihai T pointed out, the issue is with width. I simply removed width from the first container and it solved the problem.
FINAL SOLUTION
.container {
color: white;
height: 80vh;
margin: 10vh 0 0 25vw;
position: relative;
}
.container::after {
content: "";
background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
background-position: center;
background-size: cover;
filter: brightness(.5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.container_inside {
align-items: center;
display: flex;
flex-direction: column;
font-size: 1.5em;
height: calc(100% - 4em);
justify-content: center;
padding: 2em;
text-align: center;
width: calc(100% - 4em);
}
.small {
color: #e9e9e9;
font-size: .7em;
}
<div class="container">
<div class="container_inside">
<p>Any fool can write code that a computer can understand. Good programmers write code that humans can understand.</p>
<p class="small">Martin Fowler</p>
</div>
</div>
I have the following code, that I am looking to make responsive for mobile display:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!DOCTYPE html>
<html>
<head>
<title>Login Retrieve</title>
</head>
<body>
<div class="container" id="container" style="min-height: 530px !important;margin-top: 5%;">
<div class="form-container log-in-container" style=" background: white;">
Hellow world
</div>
<div class="overlay-container" style="background-image:url('/assets/iphone.png'); background-repeat: no-repeat;
background-size: 100%;">
<div class="overlay-right" style="color: white;font-weight: 600;margin-top: 94%;margin-left: 14px;">
Test 1233
</div>
</div>
</div>
</body>
</html>
I thought that adding the first line would help, but it doesnt. The two containers are still showing next to each others.
Is there a way to fix it with css only (ideally).
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
}
.log-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
}
.overlay {
background: #44B5EB;
background: -webkit-linear-gradient(to right, #44B5EB, #0daaf5);
background: linear-gradient(to right, #44B5EB, #0daaf5);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
}
.myClass {
background: image-url('Admiralty.png');
}
I have just added the styling that I am currently using.
Use a media query. I would also suggest removing your inline styling as well as the !important property - This will override any other elements you style.
Ok, I found some sort of solution, not sure if it is the most elegant, but this is isL: I replace the straight:
.log-in-container {
left: 0;
width: 50%;
z-index: 2;
}
with :
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
.log-in-container {
left: 0;
width: 50%;
z-index: 2;
}
}
#media only screen
and (max-width : 1224px) {
.log-in-container {
left: 0;
width: 100%;
z-index: 2;
}
}
So i adjust the width of the container based on the size of the screen, choosing 1224px as the threshold
The image is cut off a bit and the text to the left isn’t centering also I tried to add a min-height to the pics and max-width to banner image for responsiveness but they didn’t take. any tips on these?
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Comfortaa', cursive;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: black;
}
h1 {
font-family: 'Righteous', cursive;
font-size: 4rem;
}
img {
width: 100%;
}
header {
height: 8vh;
width: 90%;
margin: 0 auto;
}
.nav-links {
height: 8vh;
width: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
}
.nav-link:hover {
border-bottom: 4px black solid;
}
.banner {
background-image: url(/Aleesha/woman\ wit\ hat.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 30vh;
margin-bottom: 2vh;
}
.hats {
display: flex;
height: 40vh;
}
.hat-text {
border: 2px dotted;
flex: 1;
display: flex;
}
h2 {
width: 100%;
border: 2px dotted;
font-size: 8rem;
align-items: center;
}
#slider {
flex: 1.8;
overflow: hidden;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 20s slider infinite;
}
#slider figure img {
width: 100%;
float: left;
max-width: 20%;
min-height: 100%;
object-fit: contain;
}
#keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
<html>
<body>
<main>
<!--BANNER-->
<section class="banner">
<div class="container">
<div class="banner-content">
<h1>ALEESHA</h1>
</div>
</div>
</section>
<!--HATS-->
<section class="hats">
<div class="hat-text">
<H2>HATS</H2>
</div>
<div id="slider">
<figure>
<img src="/Aleesha/Pics/Slideshow/Hats/slide1.jpg" alt="Black Reptile Hat">
<img src="/Aleesha/Pics/Slideshow/Hats/slide2.jpg" alt="Cheeta Squence Hat">
<img src="/Aleesha/Pics/Slideshow/Hats/slide3.jpg" alt="White Thug Life Bucket Hat">
<img src="/Aleesha/Pics/Slideshow/Hats/slide4.jpg" alt="yellow W worn blue hat">
<img src="/Aleesha/Pics/Slideshow/Hats/slide1.jpg" alt="Life is Fantastic yellow hat">
</figure>
</div>
</section>
</main>
</body>
</html>
I've been trying to animate this icon but not sure what is the practical way to do it.
Its basically a 3 lines rotate to create an arrow when you click it a menu will expand from the arrow direction see icon --> The Icon
I managed to code it but one of the lines is not behaving like the way I want it to, I tried playing with transform-origin but it didn't work
body {
display: flex;
flex-direction: row;
justify-content: center;
align-self: center;
align-items: center;
align-content: center;
width: 100vh;
height: 100vh;
}
.menu-wrapper {
width: 30px;
height: 30px;
background-color: green;
position: relative;
}
.line {
width: 30px;
height: 5px;
background-color: red;
transform-box: view-box;
}
.top {
position: absolute;
top: 0;
}
.middle {
position: absolute;
top: 12.5px;
}
.bottom {
position: absolute;
bottom: 0;
}
.menu-wrapper:hover .top {
transform: translateY(12.5px);
transform: rotate(-90deg);
transform-origin: inherit;
}
.menu-wrapper:hover .middle {
transform: rotate(-45deg);
}
<body>
<div class="menu-wrapper">
<div class="line top"></div>
<div class="line middle"></div>
<div class="line bottom"></div>
</div>
Always remember to use position:relative when you are using position:absolute;
Here you go.
*{transition:all .3s ease-out, all .3s ease-in;}
body {
display: flex;
flex-direction: row;
justify-content: center;
align-self: center;
align-items: center;
align-content: center;
width: 100vh;
height: 100vh;
}
.menu-wrapper {
width: 30px;
height: 30px;
/*background-color: green;*/
position: relative;
}
.line {
width: 30px;
height: 5px;
position: relative;
background-color: red;
transform-box: view-box;
}
.top {
position: absolute;
top: 0;
}
.middle {
position: absolute;
top: 12.5px;
}
.bottom {
position: absolute;
bottom: 0;
}
.menu-wrapper:hover .top {
transform: translateY(0);
transform: rotate(-90deg);
transform-origin: inherit;
left: -12.5px;
top: 12px;
}
.menu-wrapper:hover .middle {
transform: rotate(-45deg);
left: 0;
}
<body>
<div class="menu-wrapper">
<div class="line top"></div>
<div class="line middle"></div>
<div class="line bottom"></div>
</div>
Also a codepen to play around: https://codepen.io/Ev1tw1n/pen/wQNWeq
I am fiddling the rotate property and realized that the elements would shift to different position based on its text length.
Here is the code for the rotate part:
transform: rotate(-90deg) translate(0, -100%);
transform-origin: 0 0;
position: absolute;
bottom: 6rem;
right: -4rem;
.stripBox {
min-height: 100px;
background-size: cover;
background-position: center center;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 1;
}
.stripBox__smallNum {
padding-left: 2rem;
}
.stripBox__heading {
padding-right: 1rem;
color: white;
font-size: 1.2rem;
}
.stripBox--right {
flex-direction: row-reverse;
}
.stripBox--right .stripBox__smallNum {
padding-right: 1rem;
}
.stripBox--right .stripBox__heading {
padding-left: 2rem;
}
.stripBox:nth-child(1) {
background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}
.stripBox:nth-child(2) {
background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}
.stripBox:nth-child(3) {
background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}
.stripBox:nth-child(4) {
background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}
.stripBox:nth-child(5) {
background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}
.stripBox:nth-child(6) {
background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}
.stripBox:nth-child(7) {
background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}
.stripBox:nth-child(8) {
background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}
.stripBox::before {
content: '';
display: block;
width: 100%;
height: 100%;
background-color: rgba(29, 41, 87, 0.4);
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: -1;
}
#media (min-width: 992px) {
.stripBox {
min-height: 400px;
align-items: flex-end;
}
.stripBox__heading {
transform: rotate(-90deg) translate(0, -100%);
transform-origin: 0 0;
position: absolute;
bottom: 6rem;
right: -4rem;
}
.stripBox--right {
flex-direction: row;
}
.stripBox--right .stripBox__heading {
padding-left: 0;
}
.stripBox:nth-child(1) {
background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}
.stripBox:nth-child(2) {
background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}
.stripBox:nth-child(3) {
background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}
.stripBox:nth-child(4) {
background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}
.stripBox:nth-child(5) {
background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}
.stripBox:nth-child(6) {
background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}
.stripBox:nth-child(7) {
background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}
.stripBox:nth-child(8) {
background-image: url("https://images.unsplash.com/photo-1473773508845-188df298d2d1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=926af9550991d432692392f14ee0b6f6&auto=format&fit=crop&w=2467&q=80");
}
}
<div class="container">
<div class="row no-gutters">
<div class="col-12 col-lg-3 stripBox stripBox--left">
<div class="stripBox__smallNum smallNum">01</div>
<h3 class="heading-quinary stripBox__heading">Market analysis</h3>
</div>
<div class="col-12 col-lg-3 stripBox stripBox--right">
<div class="stripBox__smallNum smallNum">02</div>
<h3 class="heading-quinary stripBox__heading">Planning & Design Long long</h3>
</div>
<div class="col-12 col-lg-3 stripBox stripBox--left">
<div class="stripBox__smallNum smallNum">03</div>
<h3 class="heading-quinary stripBox__heading">Market Plan Design</h3>
</div>
<div class="col-12 col-lg-3 stripBox stripBox--right">
<div class="stripBox__smallNum smallNum">04</div>
<h3 class="heading-quinary stripBox__heading">Short</h3>
</div>
</div>
</div>
Why is that? All I want is for the elements being on the same position, properly at the right bottom corner. How can I fix this?
How can I fix it?
Replace:
transform: rotate(-90deg) translate(0, -100%);
transform-origin: 0 0;
With:
transform: rotate(-90deg) translate(100%, 0);
transform-origin: right bottom;
Why is that?
transform-origin, it is the original position of the element itself before any transformation, and not the parent.
translate(X, Y), X is for the horizontal axis, Y is for the vertical axis, by default.
When you combine rotate() then translate(X, Y), the axis of X and Y could be no longer horizontal and vertical, the directions are decided by the rotation value.
In following example, it pins the rotated text to the right bottom corner.
.container {
position: relative;
width: 200px;
height: 200px;
border: 1px solid;
}
.container:before {
position: absolute;
right: 0;
bottom: 0;
content: "some text content";
transform: rotate(-90deg) translate(100%, 0);
transform-origin: right bottom;
}
<div class="container"></div>
You can also use writing-mode, the lettering is a bit different though.
Uncomment the last line you'll get the same results as above.
.container {
position: relative;
width: 200px;
height: 200px;
border: 1px solid;
}
.container:before {
position: absolute;
right: 0;
bottom: 0;
content: "some text content";
writing-mode: vertical-lr;
/* transform: rotate(-180deg); */
}
<div class="container"></div>