Center title with a subtitle beside it

https://i.sstatic.net/giiPr.jpg

My goal is to replicate the typography shown above. The main title is centered, while the subtitle is positioned next to the title. I managed to achieve something similar below using Bootstrap's small class.

https://i.sstatic.net/bTyYJ.jpg

The issue is that the subtitle is forcing space in the center as well. Is there a way to make it work? I understand I could absolutely position the sub-text and adjust it accordingly, but my client wants consistency across multiple pages.

Any suggestions?

This is the code snippet I have been using:

.small{
text-transform: lowercase !important;
font-style: italic !important;
font-family: times, serif !important;
}
.blue{
color: #35C4F0 !important;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<h1 class="text-center text-uppercase"><span class="small blue">software </span>game <br/>development</h1>

htmlcsstypography

Answer №1

Hey there, brother! This information may prove helpful for you. Thank you.

<div class="header-container">

<h1 class="centered-uppercase"><span class="small blue">Software </span>Game <br/>Development</h1>
</div>

Also, here is the associated CSS:

.header-container{float: left; width: 100%; position: relative;}
.small{
text-transform: lowercase !important;
font-style: italic !important;
font-family: times, serif !important;
}
.blue{
color: #35C4F0 !important;
position: absolute;
 left:25%;
 top:30px;
transform: translate(-25%, 0);
}

Lastly, you can view the interactive demo here.

Answer №2

Kindly give this a try. I have included the following CSS and div to encapsulate the h1 tag.

.title h1 {
  display: inline-block;
  text-align: left;
}


.small{
  text-transform: lowercase !important;
  font-style: italic !important;
  font-family: times, serif !important;
}
.blue{
  color: #35C4F0 !important;
}
.title h1 {
  display: inline-block;
  text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-center title">
  <h1 class="text-uppercase"><span class="small blue">software </span>game <br/>development</h1>
</div>

Answer №3

.blue{
  color: #35C4F0;
  text-transform: lowercase;
  font-style: italic;
  letter-spacing: 3.5px;
}

h1{
  text-transform: uppercase;
  text-align: center;
}

<h1 class=""><span class="small blue">computer </span>video<br/>design</h1>

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

Issue: Unable to locate a change supporting element '[object Object]' of the type 'object - Angular 7'

An angular service has been created for the specified purpose: CheckTicket(barcode, codEspec, diaHoraEspec):Observable<Ticket[]>{ //read ticket return this.http.get<Ticket[]>(`${this.checkticket_url}${barcode}?token=${this.token}&a ...

htmlangulartypescriptservice

Interactive element for initiating a HTTP request to NodeJS/Express server to trigger a specific function

I currently have a frontend button implemented using nodejs and express for my server-side backend. The button is supposed to trigger a function that controls the Philips Hue API on the backend via an HTTP request. I have experimented with various approac ...

javascripthtmlnode.jshttpexpress

AngularJS scope watch isn't firing as expected

In the scope, I store a filtering string for dates. $scope.myModel = {date:""}; Utilizing a jQuery datepicker, <input date-value="myModel.date" date-picker /> This directive updates the string through AngularJS - Attribute directive input value c ...

javascriptjqueryhtmlangularjs

Can you help me understand the process of assigning HTML form values to SESSION variables?

My current project involves an HTML form with 16 fields that can be viewed here: . I am seeking advice on the most efficient method to capture all field values and store them as SESSION variables. Would utilizing an array for this task be optimal, or is i ...

phphtmlarraysformssession

Unable to send form data to PHP script

Looking for assistance with passing a variable from a number input to a PHP page. HTML CODE <input type="number" class="count count-disco" name="quantity_disks" autocomplete="off" placeholder="0"> https://i.sstatic.net/BK3X9.png PHP and JQUERY CO ...

phphtmljquerycss

Animate owlCarousel slide motion in reverse when using the Prev and Next buttons

The default functionality of owlCarousel is to move to the right when clicking Next and to the left when clicking Prev. However, after applying animations, both directions always move in the same direction. Check out this sample on jsfiddle to see the iss ...

jqueryhtmlcssowl-carousel

What is the best way to create a gradual color change in each individual cell instead of changing all at once?

Looking for some help with a grid I'm working on. I've got the cells changing colors like I want them to, but they're all changing at once. What I really need is for them to light up in a specific order - Yellow, Green, Blue, White, Orange. ...

javascripthtmlcss

Difficulty with setting a border for text spanning multiple lines

I am trying to style a header text with a border around it. The issue arises when the larger text spans over two lines, causing the border to break in between. In an attempt to fix this, I applied the CSS property box-decoration-break: clone;. However, thi ...

htmlcsstext

Obtaining links from a database and showcasing them in a separate section

Considering starting a new website project and have a question to ask! My idea is to create a two-table layout similar to this: |-------------| | | | | | | | | | | | | | | | |-------------| I would like t ...

phphtmlmysqlcssconnection

Jquery form extension

I've implemented the Jquery form plugin for submitting login form data and it's working well. However, I am facing an issue with redirecting a successfully logged-in user to the client panel from the login page in my PHP script. Whenever a user s ...

phpjqueryhtmlajax

The MinWidth property in ColumnDefinition is not functioning as expected

Currently, I am encountering an unusual issue while using a Grid in WPF (XAML) and setting the MinWidth property in a ColumnDefinition. When I have 9 ColumnDefinitions with 'Width="*"' specified for each one, and then apply the MinWidth property ...

wpfxamlgridwidthcss

Transmit data from the Windows Communication Foundation to JavaScript

Looking to invoke the WCF service through JavaScript, utilizing AJAX? Check out this resource: Calling WCF Services using jQuery Here's my query: Is there a method to retain some JavaScript-related data after making a request, and then transmit inf ...

javascriptajaxhtmlwcfservice

Element mysteriously concealed in certain Safari cases, consistently visible in Firefox and Chrome

A new angular application has been developed as a "bounce" page for an upcoming social iOS app currently in public beta. Users have the ability to share their profiles by simply providing a link to the site. If the page is accessed via an iOS device w ...

javascripthtmlcssangularjstwitter-bootstrap-3

Combine the points of individual letters in Scrabble using jQuery

Hello, I'm currently working on creating a Scrabble game. My goal is to assign a value to each letter and then calculate the sum of these values when the input box changes. After some research, I was able to find information on how to add numbers on ...

jqueryhtml

PHP - Including Header Tags within the Body section

Using pgp require, I noticed that it shifts the head content from the included file into the body tags. I have looked into similar questions but haven't found a solution to my specific issue. index.php: <!DOCTYPE html> <html> < ...

phphtml

Connect the checkbox input to the text input

I'm facing an issue where I need to tie a checkbox input to a text input in my form. Here's the scenario: I am extracting data from a database. The primary key data serves as the value for the checkboxes. When a checkbox is selected, it should ...

phpjqueryhtmlformsinput

Can v-model be used with dynamic object keys?

I would like to showcase my data structure as follows: form: { email: '', password: '' } My goal now is to implement a loop to dynamically set the model using the form object. <div class="my-1" v-for="(value,name, index) in ...

htmlvue.jsvuejs2vue-componentv-model

What is the best way to apply a top padding to a background image using CSS?

I attempted to adjust the top padding using various pixel values in the style, but the image padding relative to the webpage remained unchanged. For example: padding-top: 5px; Here is part of my code snippet: <div class="row pb-5 mt-4" style ...

htmlcssbootstrap-4

Is it possible to get this numeric input working properly? [HTML5]

How can I create a button that generates a random number between 0 and a specified value x when clicked? Currently, my implementation is returning NaN instead of the desired random number. function generateRandomNumber() { document.getElementById("num ...

html

The battle between DataBind and control property settings

When considering these two methods: <asp:Label ID="Label1" runat="server"><%# DateTime.Now %></asp:Label> and Label1.Text = DateTime.Now.ToString(); Which approach do you prefer and what is your reasoning behind it? ...

asp.nethtmldata-binding