I am looking to incorporate one word in my heading to be displayed horizontally, with the second word flowing vertically

I am designing a website and looking to create a unique effect with the text in my title/h1 tag. I want the first word to be displayed horizontally and the second word vertically.

My attempt using span tags in the h1 element only allowed me to change the color, but I couldn't get the rotate feature to work as intended.

Here is the code I tried:

<h1>
    <span class="horizontal-QuanT">QuanT</span>
    <span class="verticle-Tech">Tech</span>
</h1>

This is how I styled it using CSS:

h1{
color:bisque;
text-align: center;} 

h1 span.horizontal-QuanT{
color:gray} 

h1 span.verticle-Tech{
color:white;
rotate: 90deg;}
htmlcss

Answer №1

To rotate inline elements, the CSS property display: inline-block; must be set on the vertical span. Additionally, the correct syntax for rotation is transform: rotate(90deg);.

h1 {
  text-align: center;
} 

h1 span.horizontal-QuanT {
  color: gray;
} 

h1 span.vertical-Tech {
  color: black;
  display: inline-block;
  transform: rotate(90deg);
  transform-origin: bottom left;
}
<h1>
    <span class="horizontal-QuanT">QuanT</span>
    <span class="vertical-Tech">Tech</span>
</h1>

Answer №2

Instead of focusing on the semantic meaning of tags, you can create a grid by using three div elements to have full control over the styling without being constrained by CSS associated with specific tags like h1.

Adjust margins, padding, and sizes as needed to arrange each section according to your preference, including customizing the header container.

Note: I opted not to include tag names in the CSS classes to allow flexibility for changing element tags without modifying the CSS code.

.my-header-container {
  background-color: #0000FF22;
  display: grid;
  grid-template-columns: 6rem 2rem;
  grid-template-rows: 3.5em;
  font-size: 2em;
  justify-content: center;
  align-items: start;
  font-weight: bold;
  color: #F2D2BD;
}

.my-header-container .horizontal-container {
  grid-column: 1;
  color: #808080;
  display: inline-block;
}

.my-header-container .verticle-container {
  grid-column: 2;
  margin-top: 1em;
  color: #FFFFFF;
  rotate: 90deg;
}
<div class="my-header-container">
  <div class="horizontal-container">QuanT</div>
  <div class="verticle-container">Tech</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The current media breakpoints are not performing as expected

Could someone help me unravel this simple issue I seem to be having? My page layout is functioning correctly, but when I apply media breakpoints, nothing changes. Here's an example of my CSS where I am just adjusting the font size in an attempt to mak ...

cssbreakpointsbootstrap-5

Capturing and saving location data without internet connection, and then displaying markers once connectivity is restored

I am currently developing a web application that will monitor the user's location. I want to ensure its reliability, so even if the user loses internet connection, the application will continue tracking their location (since GPS does not rely on inter ...

javascripthtmlgoogle-mapsgoogle-maps-api-3

Is it possible to replicate a slow image loading experience in React.js?

Referenced the solution below How to simulate slow loading of image Slowing down internet connection with Chrome DevTools works, but the entire site loads slowly. I want to specifically focus on slowing down the image reloading. One of the suggestions w ...

javascriptcssreactjs

What is the maximum file size that the data link is able to store?

For instance, a file like an image, video, or sound can be saved in the data link Take an image for example, it may be stored with the initial link: data:image/jpeg;base64,/..... followed by various characters. But, is there a specified size limit at whic ...

javascripthtmlimageimage-processing

What is the best way to create a JavaScript button that can be clicked to increase a variable by 1?

I am curious to know how you can create a button that appears on an empty HTML canvas and, when clicked, adds +1 to a variable. I am working on this JavaScript code within an HTML text file which will later be saved as an HTML file. Please ensure that th ...

javascripthtml

Hide the first child element

JavaScript $('dl #last div #product-tabs-content').not(":first-child").hide(); This testing code works perfectly, however... <dl class="last"><div class="product-collateral row-fluid"> <constructob> <ul class="pro ...

javascriptcsscss-selectors

There is a collision of boxes occurring within the CSS

Help Needed: Overlapping Boxes in Responsive Design I am facing a problem with my CSS where the boxes on my website are overlapping when I shrink the browser window. The issue occurs as I resize the window, causing the boxes to overlap more and more. I ...

htmlcsscss-position

Use JavaScript to load a component or call a method only when it is necessary

Looking for a solution to eliminate script tags from my HTML views. For instance: (A view containing a script tag) <script type="text/javascript"> $jQuery().ready(function() { call.a.method(); } </script> I want to remove th ...

javascriptjqueryhtml

Conceal User Interface Angular Tabulation

I'm working on setting up UI Bootstrap tabs, and for reference you can find the plunker here. My goal is to hide the tabs since I will be utilizing a button to switch between them. Despite adding the following CSS class to my file, the styling is not ...

cssangularjsangular-ui-bootstrapangular-ui-tabset

Exploring the Power of JQuery Load and CSS styling

Currently, I am dynamically loading text into a div. However, I am encountering an issue where the content below this div is constantly shifting depending on the loaded text. Is there a way to restrict the space allocated to the div with the dynamic conte ...

jquerycssajax

What is the best way to prevent autoplay on a local video embedded in an iframe within a

I have the following code in an HTML5 web page, using div and iframe. Whenever I load the page, video1.mp4 starts automatically. :( I do not want video1.mp4 to start automatically. Can anyone help me with this issue? Thank you very much. ...

htmliframevideoplayback

In the realm of HTML Canvas, polygons intricately intertwine with one another

Currently, I am attempting to create multiple polygons from a large JSON file. Instead of being separate, the polygons seem to be connected in some way. https://i.sstatic.net/Ce216.png The project is being developed in next.js. Below are the relevant co ...

cssreactjsnext.jshtml5-canvaspolygon

What is the best way to apply the addClass method to a list element

I've been searching for a solution to this issue for some time now, and while I believed my code was correct, it doesn't appear to be functioning as expected. HTML <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js ...

javascriptjqueryhtmlcssaddclass

Is there a way to reset the yAxes count of a chart.js chart in Angular when changing tabs?

I am currently using chart.js within an Angular framework to visually display data. Is there any method available to reset the y-axis data when changing tabs? Take a look at this Stackblitz demo for reference. Upon initial loading of the page, the data ...

htmlangulartypescriptchart.js

Is it possible to restrict the movement of the dialog to stay within the boundaries of the window

html: <div id="dialog" title="Past Issues"> </div> Jquery: $( "#dialog" ).dialog({ height: 900, width:1200, modal: true, }); Currently facing an issue where the dialog can be dragged outside of the window are ...

javascriptjquerycssjquery-uidialog

What is the best way to make my page headers resize with a responsive layout?

Currently, I am working on a website that needs to be fully functional on both mobile devices and computers. I have successfully implemented Bootstrap-responsive to make many elements work, but now I am focusing on the hero-unit for the homepage. Specifica ...

csstwitter-bootstrap

Submitting a jQuery Userlike form will not result in a page change

I'm facing a challenge with posting a form without the page refreshing. Despite various suggestions on SO, none of the methods seem to work for my specific case. The use of jQuery's ajax or post APIs is not an option as they change the encoding ...

jqueryhtmlajaxformsencoding

Adjusting the width of a <div> element based on window size changes

So I have this Vuejs application that has three divs using CSS grid: a sidebar, a config panel, and a preview. I want to dynamically set the width of the preview div in pixels based on the current screen size and when the screen is resized. To give a bett ...

javascripthtmlcssvue.jsvuejs2

Converting nested lists into Miller Columns: a step-by-step guide

I am interested in creating a series of interactive nested lists using Miller Columns design. The idea is that when you click on a parent item, it expands to reveal the next level of the list. While I have come across solutions that involve parsing data a ...

jqueryhtmlcss

Why isn't the card positioned in the center of the screen?

Why is the card not centered on the screen as it is supposed to be? I am utilizing Bootstrap 4.5 <div class="container"> <div class="row"> <div class"col"></div> <div class="col-8"> <div class="card"> ...

htmlcssbootstrap-4