https://codepen.io/bxberg/pen/EprgQP


#1

Hello, my name is Brian Berg, I am 14 years old and I have been coding for about a year now. I am just making a website about Rubik’s Cubes to mess around with code and I have ran into a problem that I do not know how to solve. So I want to get all of the big colorful letters into the same word, and right now they are all separate. If you could can you please look over my code, it would be much appreciated! Here is the HTML:

<html>
  <body link="red" vlink="yellow">
  <h1 class="r">R</h1>
  <h1 class="u">U</h1>
  <h1 class="b">B</h1>
  <h1 class="i">I</h1>
  <h1 class="k">K</h1>
  <h1 class="highcomma">'</h1>
  <h1 class="s">S</h1>
  <h1 class="c">C</h1>
  <h1 class="U">U</h1>
  <h1 class="B">B</h1>
  <h1 class="e">E</h1>
  <h1 class="S">S</h1>
  <h3 class="creator">By Brian Berg</h3>
  <img class="img1" src="https://i.redd.it/8syivysvrmpy.jpg">
  <p>A <a href="https://www.rubiks.com/">Rubik's Cube</a> is a puzzle in the form of a plastic cube covered with multicolored squares, which the player attempts to twist and turn so that all the squares on each face are of the same color.</p>
  </body>
  <html>

And here is the CSS:

.r {
  text-align:center;
  font-size:4rem;
  text-transform:Uppercase;
  font-family:arial;
  color:red;
}
.u {
  text-align:center;
  font-size:4rem;
  text-transform:Uppercase;
  font-family:arial;
  color:orange;
}
.b {
  text-align:center;
  font-size:4rem;
  text-transform:Uppercase;
  font-family:arial;
  color:yellow;
}
.i {
  text-align:center;
  font-size:4rem;
  text-transform:Uppercase;
  font-family:arial;
  color:green;
}
.k {
  text-align:center;
  font-size:4rem;
  text-transform:Uppercase;
  font-family:arial;
  color:blue;
}
.highcomma {
  text-align:center;
  font-size:4rem;
  text-transform:Uppercase;
  font-family:arial;
  color:white;
}
.s {
  text-align:center;
  font-size:4rem;
  text-transform:Uppercase;
  font-family:arial;
  color:red;
}
.c {
  text-align:center;
  font-size:4rem;
  text-transform:Uppercase;
  font-family:arial;
  color:orange;
}
.U {
  text-align:center;
  font-size:4rem;
  text-transform:Uppercase;
  font-family:arial;
  color:yellow;
}
.B {
  text-align:center;
  font-size:4rem;
  text-transform:Uppercase;
  font-family:arial;
  color:green;
}
.e {
  text-align:center;
  font-size:4rem;
  text-transform:Uppercase;
  font-family:arial;
  color:blue;
}
.S {
  text-align:center;
  font-size:4rem;
  text-transform:Uppercase;
  font-family:arial;
  color:white;
}
.creator {
  text-align:center;
  font-size:2rem
}
html {
  font-size:16px;
  background:linear-gradient(45deg,purple,lightblue,white)
}
.img1 {
  width:30rem;
  display:block;
  margin-left:auto;
  margin-right:auto;
  border-radius: 25px;
  background: black;
  padding: 5px;  
}
p {
  font-family:corbel;
  font-size:1.25em;
  text-align:center;
}

Thank you for your support!


#2

just place all the letters in a single h1 element. then use an inline element like <span></span> to color them.


#3

So like:

Rubik's Cubes

??? How would I color each individual letter?

#4

Oh nevermind, thank you! I figured it out myself.


#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.