How to create a GameStop logo

GameStop got a lot of attention in the last few days. It was all over the news because of a sudden rise in stock price, but here we are not discussing any of the financial jargons. We will create the GameStop logo using HTML and CSS. We will use codepen to code this. Codepen is an online code editor and very useful as one can see the results instantaneously. Let's start coding.

When you open Codepen it will look something like this

First, let's write the text for the logo. On the HTML side write

<h1>GameStop</h1>

Now you should see something like this.

As we can see some text on the screen. Let's code some CSS and make the text look like the actual logo. On the CSS section start writing as you follow the article and we will see the changes as we code along.

We will write all the CSS under h1 tag.

h1{
font-family:Impact;
}

The above line will set the font type of the text

h1{
font-family:Impact;
font-size:100px;
}

above addition will set the font size.

h1{
font-family:Impact;
font-size:100px;
height:100vh;
}

This will set the height of the text to be the whole page irrespective of the screen. At this point, the text should look something like this

Now we will do the most interesting part 😉, centering the text. I will use flexbox to do it.

h1{
font-family:Impact;
font-size:100px;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
}

At this moment it looks like this.

Now the last part to make the Stop in red color. For that will put Stop text inside a <span> tag. Now the HTML looks like

<h1>Game<span>Stop</span></h1>

You will see no change in the text. Now the end part to make it red.

h1 > span {
color:red
}

The above CSS is a selector query. You can read more about it here. The final text looks like this.

For your reference here is the link to my codepen.

Conclusion

In this post, we learned about codepen (a great place to prototype things) basic flexbox, and css selectors. Keep experimenting, keep coding. Happy learning.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Akshay Mattoo

Akshay Mattoo

27 Followers

#Father #JS-Advocate #SoftwareEngineer #TechnologyLover #Learner #intermediatetennisplayer #lifebetweenthebraces{}